トップページ｜サイトのメインぺージに下層ページへの導線を集める

サイトの玄関口となるトップページを設定していきます。

トップページはサイトのメインとなるぺージです。サイト（お店など）の概要や、サイト内の各コンテンツへの導線をイメージして作成しましょう。下層ページ（詳細ページ）をある程度準備してからの方が設定しやすいです。

下層ページとは、以下のことを指しています。　>>投稿タイプの使い分けについて

• 投稿ページ：集客ブログやコラム
• お知らせページ：告知など
• プログラムページ：プログラムを紹介
• よくある質問：FAQとして
• 固定ページ：時系列をもたない独立した記事。アクセスぺージなど

各投稿タイプの利用は必須ではありませんが、当記事では、各種下層ページとそのカテゴリーなどを作成している前提で、トップページの設定方法を解説いたします。

設定できる内容

トップページは以下の項目に分かれています。

設定箇所

トップページは、ダッシュボード内のTCDテーマ > トップページで設定します。

ヘッダーコンテンツ

サイトのファーストビューです。イチオシの画像や動画を設定すると良いでしょう。

設定項目をご紹介します。

ヘッダーコンテンツの設定が済んだら、お使いの端末で実際の表示を確認しておきましょう。

• 全体的なバランスがいいか？
• メニューなどの文字は読みやすい？
• 背景は意図した表示になっている？

バランスが取れていないように感じる場合は、ロゴやヘッダーも確認してみましょう。
背景上の文字が読みづらい、ロゴが同化するという場合は背景にオーバーレイをかけて可読性を高められます。

3列バナー

ヘッダーコンテンツとメインコンテンツの間に、画面幅いっぱいにバナーを3つまで表示できます。

設定画面はこのようになっていて、画像やテキストを入れるだけで完了です。見てもらいたいぺージへの導線に活用してください。

メインコンテンツ

メインコンテンツには以下のアイテムと「共通設定」が用意されています。

• 投稿スライダー
• お知らせ一覧
• スプリットレイアウト
• グリッドレイアウト
• フリースペース

お好きなアイテムを追加して、ドラッグ&ドロップで自由に並び替えができます。表示・非表示もワンクリックで変更可能です。

これらのアイテムを使わず、完全オリジナルでトップページを作成したい場合はフリースペースで外観 > パターンの内容を呼び出すといいでしょう。

投稿スライダー

投稿記事を2件ずつスライダー形式で表示します。
小見出しや説明文は必要に応じて設定すればOKです。必ずしも設定する必要はありません。

お知らせ一覧

お知らせ記事を一覧表示します。カテゴリーごとの表示も可能です。

アイキャッチ画像の表示/非表示はTCDテーマ > お知らせ > 共通設定の「記事一覧」の「アイキャッチ」から設定できます。

スプリットレイアウト

画像とテキストを左右に分けて表示するデザインブロックです。

グリッドレイアウト

デザインされたブロックを2カラムまたは3カラムで表示します。

「グリッドレイアウト」を二つ利用して、2カラムと3カラムを並べると5つのアイテムを表示することもできますね。

フリースペース

HTMLタグまたはパターンを使ってお好きな内容を表示できます。フリースペースだけ使うことで完全オリジナルのメインコンテンツも作成可能です。

• 小見出し・見出し（他のコンテンツと同じ体裁で表示できます。）
• 横幅（カスタムorフル幅）
• コンテンツ（HTMLタグorパターン）

当デモサイトの下記箇所はHTMLで再現しています。

テーマを有効化すると初期値が入っていますので、適宜書き換えてお使いください。

フリースペースでは、以下のような使い方もおすすめです。

• 画像や動画を設置する。
• お使いのSNS（XやInstagram）の投稿を埋め込む。
• クイックタグや埋め込みタグでGoogle Mapsを表示する。

共通設定

以下の設定項目が各コンテンツの「見出し」に反映されます。全体のバランスをみて確認していきましょう。

• フォントタイプ（ゴシック/明朝/教科書体）
• 文字サイズ（PC/スマホ別）

これでトップページの設定は完了です。お疲れ様でした！大事なページですので、必ずお使いの端末で実際の表示を確認しておきましょう。

• コンテンツは意図したように表示されている？
• 表示する記事の数はちょうどいい？
• 見出し・小見出しの文字量はちょうどいい？

トップページは「サイトの玄関口」にあたり最も大切といってもいいぺージです。定期的に見直して運用していきましょう。