「WordPressでWebマガジンをつくりたい」
「イケてるデザインのWebマガジンをつくりたい」

お洒落でかっこいいWebマガジンをつくりたい方に最適なWordPressテーマが「CODE.」です。

今や多くのメディアは紙媒体だけでなく、Webマガジンのような電子媒体も同時に運営しています。
Webマガジンには紙媒体とは異なるメリットがあるからです。複数人で運営しやすく、記事の編集・更新などもスムーズですよね。

本項では、そんなWebマガジンに最適なWordPressテーマ「CODE.」の機能概要をご紹介いたします。

イケてるWebマガジンをつくる「CODE.」

Webマガジン=雑誌のオンライン版をつくるのに最適なテンプレートです。WordPressを使ったWebマガジンの運営に向いています。豊富なコンテンツを幅広い切り口から訴求したり、つい読みたくなるお洒落なデザインのWebマガジンをつくれます。もちろんスマホでもかっこよく表示されます。

スマホのビジュアル

CODE.

WordPressテーマ「CODE.」の機能概要

Webマガジン向けWordPressテーマ「CODE.」の主な特徴は下記の通りです。

  1. 3タイプから選べるファーストビュー
  2. 記事を映像でアピールするアイキャッチ動画
  3. カテゴリーやタグから探せるメニュー
  4. 豊富な導線をつくれるデザイン
  5. ライターにフィーチャーしたページ
  6. 人気の記事がわかるランキングページ
  7. 記事を埋もれさせないカルーセル
  8. 4タイプから選べるCTA機能

以下でそれぞれ解説していきます。

3タイプから選べるファーストビュー

第一印象は、ヘッダーのスライダーでガラッと変わります。
(画像クリックでデモをご覧いただけます。)

  • アイキャッチをそのまま表示する記事スライダー

デモでは上記のようにブログ記事をそのまま表示していますが、背景コンテンツ上にキャッチフレーズやボタンなどを設置して任意のリンク先を設定することも可能です。

背景コンテンツは以下から選択できるので、ファーストビューをお好みでカスタマイズできます。

  • 静止画
  • mp4動画
  • YouTube動画

以下は、背景コンテンツにキャッチフレーズやボタンを設定した例です。

キャッチフレーズやボタンを設定したスライダーのサンプル

【上記の設定サンプル】
3面表示のスライダータイプで、左側のスライダーを以下のように設定しています。
(右側にはブログ記事を表示する仕様です)

1枚目:mp4動画背景にABOUTページへのリンクボタンを設置
2枚目:静止画背景に人気記事ランキングへのリンクボタンを設置
3枚目:ブログ記事をピックアップして設定(記事のアイキャッチをそのまま表示)

記事を映像でアピールするアイキャッチ動画

CODE.ではアイキャッチ画像の代わりにアイキャッチ動画を設定できる機能があります。先述のトップページスライダーでブログ記事を表示する際に反映されます。

アイキャッチ動画のサンプル

上記からリンクできるページのヘッダースライダーの2枚目と4枚目にアイキャッチ動画が設定されていますので、ぜひクリックしてチェックしてみてください。

※記事詳細ページや記事一覧ページでは通常通りアイキャッチ画像が表示され、動画は表示されません。デモサイトでは整合性を図るためにアイキャッチ動画にあわせたアイキャッチ画像をセットしています。

ファッション系マガジンならモデルの動画など、記事の内容を表現した映像をセットしてファーストビューからクリック率を高められます。紙の雑誌にはできない表現が可能です。

カテゴリーやタグから探せるメニュー

CODE.では左側のバーから以下のメニューが展開されます。

記事のカテゴリーとタグ一覧が表示され、すべての記事の内容を包括的にイメージできるので、Webマガジン全体の目次のような感覚でお使いいただけます。読者が興味のあるカテゴリーやタグから記事を探せます。もちろん以下のようなシンプルなドロワーメニューもご利用いただけるので、お好みで変更してみてください。

豊富な導線をつくれるデザイン

記事リンクはもちろん、バナーやウィジェットをふんだんに使って異なる切り口からアピールできるデザインです。以下はトップページの一例です。

導線を設置できる箇所

上記のように記事をタイプごとにソート表示できたり、トップページでもサイドバーにウィジェットを設置して導線をつくれます。

複数人で運営するWebマガジンではコンテンツがどんどん増えていくので、古かったり人気の無い記事はどんどん埋もれていきます。それらに再び脚光を浴びさせるために、切り口を変えて訴求する手法があります。雑誌でいう特集を組むイメージです(例:「1000円以内のグルメ特集」)。

そういった特集ページへの導線をウィジェットやバナーを活用して設置するわけです。記事を異なる切り口から訴求してアクセスアップに繋げてください。

ライターにフィーチャーしたページ

CODE.ではWebマガジンのライターをフィーチャーするページをつくれます。デモサイトのこのページです。

投稿者一覧

Webマガジンを作り上げるチームの中の人を見ていただくための機能です。どんなバックボーンの人なのか、男女間でも着眼点は変わります。簡単なプロフィールや個人へのSNSへのリンクも設置しておけば、あなたのファンを獲得できるかもしれません。

「この人が書いた記事」という切り口で見せられるので、カテゴリーやタグとはまた異なる視点から記事を訴求する狙いもあります。

人気の記事がわかるランキング機能

今どの記事が読まれているのか。読者も運営者も気になる人気記事ランキングをつくれます。ランキングページとランキングウィジェットをそれぞれご紹介いたします。

ランキングページ

指定した記事数の記事ランキングをカルーセル形式で表示します。

ランキングページ

専用の固定ページテンプレートを用意していますので、集計範囲やキャッチフレーズなどを設定するだけで10分あれば作れちゃいます。

集計範囲は下記から選択できるので、タイムリーな人気記事からロングセラー記事までチェック可能です。

  • 日間
  • 週間
  • 月間
  • 年間
  • 無期限

サムネイル下のビュー数では、記事の人気度を数字で確認できます。

記事のビュー数箇所

ランキングウィジェット

トップページのウィジェットエリアや詳細ページのサイド部分にセットできるランキングウィジェットもご用意しました。ページを移動することなく、上位数記事のランキングを確認できます。

このように集計範囲を切り替えて確認することも簡単です。

ランキングウィジェット

記事を埋もれさせないカルーセル

記事数が多くなるメディアを想定しているCODE.では、ブログ一覧ページやカテゴリー別の記事一覧ページ内で、指定した記事を表示するカルーセルを設定できます。以下は、EVENTカテゴリーの記事一覧ページでカルーセルを表示したサンプルです。

一覧ページの記事カルーセル

表示する記事のタイプを以下から選択し、表示形式を日付順かランダムから選択できます。

  • おすすめ
  • 特集
  • ピックアップ

定期的に登録されている記事タイプを変更したり、ランダム表示にすることで、記事を埋もれさせないように工夫いただけます。

4タイプから選べるCTA機能

Webマガジンの読者へキャンペーンや購読を促すためのCTA機能を実装しています。ここから特定の記事をまとめた特集ページなどへ飛ばす使い方もアリですね。

  • ポップアップCTA
    ポップアップCTA

CODE.では従来のCTAに加えて、ポップアップCTAも追加しました。

従来のものよりコンパクトですが、ポップアップ形式でユーザーの目に強くアピールできます。「×」クリックで閉じると、ブラウザを閉じるまでは再表示されないので、煩わしい印象も軽減されます。

また、記事下CTA、フッターCTAではABテスト機能もご利用可能です。

以下で過去にリリースした「WordPressテーマ「OOPS!」」を例にその使い方を詳しく解説していますので、よろしければご覧ください。

WebマガジンをつくるならWordPressテーマ「CODE.」

WordPressテーマ「CODE.」の特徴的な機能をご紹介してきました。

記事の見せ方や切り口を変えてバラエティ豊かな訴求ができるテンプレートです。ファーストビューで記事を動画でアピールしたり、以下のどの切り口からも記事を訴求しやすくなっています。

  • カテゴリー
  • タグ
  • 記事のタイプ
  • 閲覧数
  • 投稿者

あらゆる角度から「読みたい」という欲を刺激できるわけです。

アーカイブした記事の切り口を変えてソートできる点はWebマガジンならではです。
ぜひCODE.を使ってイケてるWebマガジンを作ってみてください。

CODE.