JIN:Rのトップページ構造とカスタマイズの豆知識

アシスタントさん

Web制作の知識がないのだけど、トップページの変更をするのは難しいのかしら？

じゅん

WordPressのカスタマイズメニューの設定変更と固定ページでブロックを設置するだけなので、特別な知識はいらないですよ。

自分のこだわりの内容に合わせてトップページデザインをカスタマイズしたいと思うことも多いと思います。

そこでこの記事では、カスタマイズするメリットと、JIN:Rのトップページの構造、各エリアを構成する機能とブロックを紹介していきます。

この記事を読めば、WordPressのカスタマイズでどこの設定項目を変更すれば良いのかと、トップページで役に立つオリジナルブロックが把握できます。

サイトを訪れた人に最適化した独自性のあるトップページを構築したい思う人は、ぜひ最後まで読んでいってください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

サイトトップページをカスタマイズするメリット

JIN:Rは100%ブロックエディターに対応したWordPressテーマなので、トップページカスタマイズにCSSなどプログラミング言語の知識は必要ありません。どのようにトップページが構成されているのかを知れば、誰にでもカスタマイズが簡単にできます。

一方で、トップページの作り込みをするほどにオシャレになりますが、終わりのないカスタマイズという不毛な作業になりかねません。

その点、JIN:Rはデザインプリセットを使えば、ほぼ見た目を完成できます。残りは、個々のサイトの情報やメニューなどを入力していくだけで完成です。それでも気に入ったデモデザインに付け足したい機能や、オリジナル感を演出するために設定変更などをしたい場合もあると思います。

そのような時には、この記事を参考にしていただくと簡単にカスタマイズ作業ができます。

トップページデザインの方向性

JIN:Rのデモサイトは23種類もあります。公式のデモ一覧で構築したいトップページのイメージを固めましょう。

Ver.1 No 7 Classical のようなサイドバーを表示させたブログ型のデザインも作れます。

Ver.1 No2 Resort のような大きな画像とナビゲーション、コンセプトエリアを使ったサイト型も作れます。

DEMO Ver.2 の8パターンのような記事をたくさん並べたサイト型のデザインも可能です。

トレンドはサイト型のトップページデザインです。

カスタマイズするメリット

サイトを訪れた人が1番最初に目にする部分なので、ウェブサイトやブログの印象を左右する重要な要素です。

本質は良質なコンテンツが揃っていることなのは間違いないですが、トップページの完成度が低いとデメリットもあります。

• ちゃんと運営されているのか不安を感じる
• 探している情報や記事に辿り着けない
• 潜在的な需要を満たせない

せっかくサイトを見に来てくれた人が、安心と満足を感じられるように作っておきましょう。

発信している内容を伝えたい人に最適化した構造にして、たくさんのコンテンツにアクセス可能にしておくことも大切です。

潜在的な需要を満たすには、カテゴリーや内部リンクなどの動線を整理整頓したり、ユーザーも気が付いていない情報が自然と目に入るように並べておきます。

トップページを構成する4つのエリア

JIN:Rのトップページは、1つのページでできていないことを理解しましょう。

トップページは4つのエリアに分解できます。

ヘッダーエリアは、サイトタイトル、ロゴ、グローバルナビゲーション、インフォメーションバーなどが入ります。

メインビジュアルエリアは、ヘッダー画像や記事スライドショー、画像スライドショー、ヘッダー動画などと、キャッチコピーやサブコピー、ボタンが入ります。

コンテンツエリアは、新着記事やカテゴリー別記事、コンセプト、プロフィールなどのブロックが入ります。

フッターエリアは、運営者情報などのフッターメニューと検索やタブなどのブロックが入ります。

設定する場所は大きくは2つに別れます。

ヘッダーエリアとメインビジュアル、フッターエリアは、WordPress管理画面から設定します。

コンテンツエリアは、固定ページをオリジナルブロックを使って構築していきます。ただ、WordPressをインストールしてJIN:Rを有効化しただけでは、コンテンツエリアの固定ページは作られていないです。固定ページを新規作成してデザインしていきます。

トップページには、ブログの印象を左右するメインビジュアルと、いろいろな情報にアクセスできるように記事一覧やサイト内ナビゲーションと、運営者やサイトを知ってもらうためのプロフィールやブログコンセプトなどを含める場合が多いです。

トップページを構築する機能とブロック

ヘッダーエリア

WordPress管理画面にあるメニューの外観から、カスタマイズに進み設定します。

サイトタイトル

基本設定にあり、レンタルサーバー契約時にサイト名で登録した内容が引き継がれています。ロゴを優先して表示します。

ロゴ

サイトデザイン設定にあり、画像をアップロードして大きさや余白を調整します。

ヘッダーデザイン

サイトデザイン設定にあり、レイアウトや背景装飾、追尾機能の選択をします。

ヘッダーデザインでは、ロゴとグローバルナビゲーションなどエッダーエリアで表示される項目のデザイン設定ができます。

インフォメーションバー

インフォメーション設定にあり、帯状に表示されるバーに入るテキストやリンク先の設定をします。

グローバルナビゲーション

カスタマイズのメニューを開き、新規作成からメニューを作成してグローバルナビゲーションにチェックを入れます。

メインビジュアルエリア

WordPress管理画面のカスタマイズにあるメインビジュアルから設定します。

メインビジュアルは、4種類から選べます。

• ヘッダー画像：サイトを印象付ける画像を表示
• 記事スライドショー：記事URLを指定してアイキャッチとタイトルを表示
• 画像スライドショー：アップロードした画像を表示しURLをリンク
• ヘッダー動画：動画をループ再生

ヘッダー動画に設定する動画は、ファイルが大きいとサイトの読み込みが遅くなるので数秒程度の長さがおすすめです。

メインビジュアルに重ねて表示させるキャッチコピーとサブコピー、ボタンを設定できます。

キャッチコピーのテキストや表示の有無、文字色が選べ、ボタンは表示の有無とデザイン、リンク先、ボタンテキストを設定できます。

コンテンツエリア

コンテンツエリアは、固定ページで設定していきます。

デフォルトからスタートした場合は固定ページは作られていないので、固定ページの新規作成をして、カスタムテンプレートで保存します。そしてカスタマイズのホームページ設定から、新規作成した固定ページを選択します。

デザインプリセットを使ったトップページをカスタマイズする場合は、すでに固定ページの作成とホームページ設定が済んでいます。トップページ用の固定ページをWordPress管理画面から開いて、ブロックの追加や削除、設定項目の変更をしていきます。

フルワイドは、横幅いっぱいに背景色や画像設定ができるブロックです。デザイン見出しを使うと、アイコンや数字などのシンボルと一緒に見出しテキストを表示できます。

個別記事を並べる時には、記事リストやリッチメニューのブロックが使えます。記事リストは、新着順やPV順、カテゴリーなどで並び替えて一覧表示できます。表示するデザインとカラム数も選択できます。リッチメニューを使うと、画像にURLをリンクしたナビゲーションが作れます。正方形や横長、縦長など様々な画像比率が設定できて、メニューアイテムの文字入力も可能なので、画像に文字入れしているように見せられます。

プロフィールは、WordPres管理画面のカスタマイズで登録したプロフィール内容を表示できるブロックで、自由な場所で自己PRの強化になります。

ボタンを使えば内部リンクやアフィリエイトタグなどを簡単に設定できて、読者のクリックを促せます。

これらのオリジナルブロックを柔軟なレイアウトで設置するのに、カラムブロックがとても役に立ちます。

その他の装飾ブロックでは、区切り線や背景、ボックスなどがアクセントを追加するのに役立ちます。

JIN:Rの魅力的な機能のひとつである「デザイン見本帳」を使ったカスタマイズも可能です。

デザイン見本帳は、JIN運営チームがオリジナルブロックと一部に少しのカスタマイズを加えたブロックを組み合わせたパターンを、コピー＆ペーストで簡単に使える機能です。

コンセプトやナビゲーション、ボタン、CATなどトップページで使える見本がたくさん揃っています。気に入ったデザインがあれば、コピーして設定してしまいましょう。

WordPres管理画面のカスタマイズにあるサイトデザイン設定で、トップページを1カラムか2カラムかを選択できます。2カラムにするとサイドバーの表示ができます。

フッターエリア

標準的な必要最低限にするなら、WordPress管理画面のカスタマイズにあるメニューで、新規作成してフッターメニューを作ります。

内容を充実させたい場合は、WordPress管理画面の外観からウィジェットの中のフッターに進み設定します。

フッターウィジェット内は、記事ページと同じように、必要なブロックを設置してカスタマイズできます。

ナビゲーションメニューを使うには、別でフッターウィジェットに表示する用のメニューを設定しておく必要があります。

記事化したデザイン

プロモーションしたいモノがひとつ決まっている場合は、記事ページのようにブロックを組む方法もあります。

メインビジュアルを非表示にして、フッターエリアを最小限の表示にすると個別記事ページと同じ見た目にできます。コンテンツエリアの固定ページに文章を書き、リッチメニューでカテゴリーページへリンクやブログカードや記事リストなどで必要な記事に移動できるリンクを設定するなどができます。

1記事の完結型で、トップページを読めば概略が理解できて、詳しくはリンク先へという方法です。読者があちらこちら移動して読まなくて済むというメリットがあります。

まとめ：狙った形のトップページを作ろう

WordPressテーマ JIN:Rのトップページ構造とカスタマイズの豆知識を紹介してきました。

JIN:Rは100%ブロックエディターに対応しているので、CSSなどプログラミング言語の知識がなくても、誰にでも簡単にカスタマイズできます。

トップページは単一ではなく、ヘッダーエリアとメインビジュアル、コンテンツエリア、フッターエリアの4つの区分で構成されています。これを知ることがカスタマイズの第一歩です。

ヘッダーエリアとメインビジュアル、フッターエリアはWordPress管理画面から設定でき、コンテンツエリアは固定ページをブロックを使って構築できます。

JIN:Rはヘッダーエリアやメインビジュアルでのオプションが豊富で希望する形に仕上げやすいです。また、ブロックを組み作るコンテンツエリアとフッターエリアはアイデア次第で、目的に合った表現と機能を実現可能です。

公式サイトとJINデザインアワードのサイトにJIN:RとJINのユーザーのサイトがまとまっているので、参考になさってください。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

JIN:Rユーザーの
サイトが多数掲載

JIN:R 公式を見る

JINとJIN:Rユーザーの
優秀なデザインが集まる

JIN デザインアワードを見る

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。