「AFFINGER7を導入したけれど、トップページが記事一覧のままで物足りない」「サイトの世界観を伝えながら、読みたい記事へ案内したい」。そんなときに選択肢になるのが、固定ページを使ったトップページです。
DOWELLでは、固定ページにHTML/CSSを記述し、画像・メッセージ・ボタン・カテゴリ案内を組み合わせています。この記事では、今回の検証環境での制作例をもとに、構成の考え方と設定の流れを紹介します。
テーマ選びから確認したい方はAFFINGER7の導入レビュー、既存テーマから移行する方はテーマ変更前の準備と確認チェックリストを先にご覧ください。
固定ページで作る方法と、テーマ機能で作る方法の違い
トップページの作り方は一つではありません。テーマが用意する機能を中心に組む方法と、固定ページの本文を中心に組む方法では、編集する場所と自由度が違います。
- テーマ機能を中心にする：用意された設定やパーツを利用し、細かなコードを書く範囲を減らす。
- 固定ページを中心にする：文章やセクションの順番をページ内で管理し、必要に応じて独自HTML/CSSで調整する。
本記事は後者の実例です。AFFINGER7公式の全機能を網羅した設定ガイドではなく、購入するだけで同じデザインになるという意味でもありません。画像やカードの装飾には、独自制作したものを含みます。
公式機能を使う場合は、AFFINGER7公式「トップページについて」で利用方法を確認してください。会員向けの説明は購入時の案内に従って閲覧します。
手順1：最初にページの目的と情報の順番を決める
色や画像を選ぶ前に、「訪問者に何を知ってもらい、どこへ進んでほしいか」を決めます。DOWELLでは、AI・ブログ・仕組み化という発信テーマを伝え、無料教材への案内を主な行動として設定しました。
同時に、教材をすぐに申し込まない人にも記事を探せる入口が必要です。そこで、上から次のような役割を持たせました。
- ヘッダー：誰に何を伝えるサイトかを示す。
- 主な案内ボタン：無料教材など、最も案内したい行き先を示す。
- 学べること：テーマ別の記事への入口を作る。
- おすすめ記事・運営者情報：内容や発信者への理解を深めてもらう。
これは、どのサイトにもそのまま当てはまる正解ではありません。ニュース中心のブログなら新着記事、店舗ならサービスやアクセス情報を先に見せるなど、目的に合わせて順番を変えます。
手順2：固定ページを作り、まずは文章だけで組み立てる
作業は検証環境で行い、現在のトップページ本文と設定を控えておきましょう。「固定ページ」から新規ページを作成し、管理しやすいタイトルを付けます。
DOWELLではクラシックエディタのテキスト／コード入力を中心に使っています。まず見出し、説明文、リンクを入れ、内容が決まってから装飾を加える順番にしました。
- 大きなセクションにはh2、その中の項目にはh3を使う。
- 見出しの大きさだけを理由に、階層を飛ばさない。
- ボタンのリンク先を先に決め、「こちら」だけの案内を避ける。
- ページの見出しとテーマ側のタイトル表示が重複していないか確認する。
HTMLを直接編集する場合は、ビジュアル入力との切り替えでタグや改行が意図せず変わらないか確認します。CSSは管理する場所を決め、同じ指定を何か所にも重ねないようにすると、後から直しやすくなります。
独自クラス名を付け、そのページ内にだけ効くように指定するのも大切です。すべての見出しやリンクを対象にしたCSSは、記事ページなど別の場所まで変えてしまうことがあります。
手順3：ヘッダー画像と文字の読みやすさを両立する
今回のヘッダーでは、AIを活用した情報発信をイメージできる画像を用意しました。画像そのものに主見出しを焼き込まず、文章とボタンはHTMLで重ねています。後から文章を直しやすく、画面幅に合わせて折り返しも調整できるためです。
制作途中では、画像を明るくすると文字が背景と同化し、文字を読ませようと暗い色を重ねると、画像の印象まで暗くなる課題がありました。そこで、画像全体を暗くするのではなく、文字のある部分の背景や文字の影を調整しています。
- 見出しを短くし、背景の細かな模様と重なる場所を減らす。
- 文字と背景の明暗差を確保する。
- PCとスマホで画像の切り抜かれる位置を確認する。
- 横長画像を背景全面に使うと、画面比率によって端が切れることを前提にする。
特に背景画像の「cover」は、枠を埋めるために画像の一部を切り取ります。大事な被写体を端に置きすぎないこと、スマホでの表示位置を別途確認することが重要です。
手順4：カテゴリ案内は白いカードで読みやすくする
ヘッダーで印象を残した後は、落ち着いて内容を読めるエリアにしました。「このサイトで学べること」では、AI活用、WordPress・ブログ、収益化、メルマガの4項目を案内しています。
当初は写真の上に見出しや説明を重ねていましたが、背景と文字が競合して読みにくくなりました。そこで、淡いブルーの背景に白いカードを置き、紺の見出しと短い説明に変更しました。
カードを整えるポイント
- 一つのカードで案内するテーマは一つにする。
- 見出し・説明・記事へのリンクという順番をそろえる。
- PCは2列、狭い画面では1列にする。
- 説明文の長さが違っても、下部リンクの位置をそろえる。
写真をなくすと地味になるとは限りません。余白、文字の大きさ、薄い境界線を整えるだけでも、情報の区切りが分かりやすくなります。
ただし、カードの先に古い記事しかないと、見た目だけを整えても読者の疑問には答えられません。今回のAFFINGER7記事シリーズも、その入口から役立つ記事へ案内するために追加しています。
手順5：配色と余白に共通ルールを作る
セクションごとに違う色や装飾を増やすと、どこが重要か分からなくなります。まずは背景色、本文色、強調色の役割を決めましょう。
- 白・淡いブルー：背景やカードに使い、読むための余白を作る。
- 紺：見出しや補助ボタンに使い、落ち着いた印象にする。
- 鮮やかなブルー：主な案内ボタンなど、注目してほしい部分に使う。
- ゴールド：小さなアクセントにとどめ、本文全体には使わない。
これは今回の画像に合わせた配色例です。色名が同じでも明るさによって読みやすさは変わります。薄い文字色や、背景に溶け込むボタンになっていないか、実際の画面で確認してください。
余白も同じです。見出しと説明文は近く、別セクションとの間は広くすることで、まとまりを伝えられます。まず大きな区切りを整え、その後に細かな数値を調整すると進めやすくなります。
手順6：完成した固定ページをトップページに指定する
本文ができたらプレビューで確認し、検証環境で固定ページを公開してから、ホームページとして指定します。公開や表示設定の保存は実際の表示を変えるため、本番では準備が終わってから行ってください。
- WordPress管理画面の「設定」→「表示設定」を開く。
- 「ホームページの表示」で「固定ページ」を選ぶ。
- 「ホームページ」で作成したページを選ぶ。
- 独立した記事一覧が必要なら、別の空の固定ページを用意し「投稿ページ」に指定する。
- 変更を保存し、サイトのトップURLを開いて確認する。
ホームページと投稿ページには別のページを指定します。投稿ページに指定したページの本文が、通常の固定ページと同じように表示されるとは考えないでください。
テーマ側のトップページ機能を使う場合は、必要な設定がこの方法と異なることがあります。公式機能の説明と固定ページ方式を混ぜて設定せず、どちらで作るかを先に決めましょう。
公開前に確認したい5つのこと
- 表示：ページタイトルやヘッダーが二重に出ていないか。
- リンク：カテゴリやボタンが正しいページへ進むか。
- スマホ：横はみ出し、文字切れ、ボタンの折り返しがないか。
- 画像：必要以上に大きいファイルを使っていないか、読み込みを妨げていないか。
- 運用：変更前の本文と設定を残し、戻せる状態になっているか。
固定ページを使えば、それだけで検索順位や登録率が上がるわけではありません。読みやすさと移動先の分かりやすさを整え、その後の反応を見て改善していきます。
まとめ：最初から盛り込まず、小さく作って整える
トップページは、使える機能をすべて並べる場所ではありません。誰に何を伝えるかを決め、画像、文章、ボタン、カテゴリ案内にそれぞれ役割を持たせることが大切です。
まずは「ヘッダー＋主な案内＋カテゴリ」の小さな構成から作り、検証環境で一つずつ調整してみてください。コード調整が難しい場合は、テーマが用意する機能から始める方法もあります。
関連記事：AFFINGER7の導入レビューと購入前の注意点
移行前の準備：AFFINGER7へのテーマ変更手順とチェックリスト
公式情報の確認日：2026年9月9日。制作例はDOWELLの検証環境での独自カスタマイズです。使用するテーマやエディタのバージョンによって画面・設定名が異なる場合があります。
