アフィンガー6でブログを始めたけれど、トップページだけ初期状態のまま…ということはありませんか。
この記事では、アフィンガー6でトップページを作る手順と考え方を、初心者目線で順番にまとめていきます。読み終わる頃には、次のようなことができるようになります。
一言でまとめると「最初にトップページの型を決めて、WordPressとアフィンガー6の設定を順番にこなせばOK」です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
アフィンガー6でトップページの作り方を決める前に知っておきたい3つの型
まずは、どんなトップページを作るのか「型」を決めておきましょう。ここを曖昧なまま進めると、作業が何度もやり直しになってしまいます。
ブログ型・サイト型・ハイブリッド型の違いをざっくり比較
アフィンガー6のトップページは、大きく分けて次の3パターンがあります。
| トップページの型 | こんな人向け | 主なメリット | 注意点 |
|---|---|---|---|
| ブログ型トップページ | 日記・雑記ブログをマイペースに更新したい人 | 新しい記事を投稿するだけで自動的にトップに並ぶので、とにかく楽 | トップが「新着記事の一覧」だけになりやすく、伝えたい情報をコントロールしづらい |
| サイト型トップページ（固定ページ） | 特化ブログ・アフィリエイトサイト・サービス紹介サイト | 固定ページでトップを作り込めるので、見せたい情報の順番を自由に設計できる | レイアウトの設計と固定ページの作り込みに少し時間がかかる |
| ハイブリッド型（ブログ型＋固定ページ挿入） | ブログの更新も、トップの見せ方も両方こだわりたい人 | 上部は固定コンテンツ、下部は新着記事一覧というバランス型にできる | 設定箇所が増えるので、どこを触ったかメモをとりながら進めるのがおすすめ |
ざっくり言うと、「とりあえず記事をどんどん書きたい」ならブログ型、「収益記事やサービスをしっかり見せたい」ならサイト型、「その中間」がいいならハイブリッド型というイメージです。
私がアフィンガー6で特化ブログを作ったときは、最初からサイト型トップページにしました。上部に「おすすめ記事」と「自己紹介」、中ほどにカテゴリ別の入り口を置いただけですが、それでも読んでほしい記事にアクセスが集まりやすくなりました。
アフィンガー6で使えるトップページ用パーツの全体像
トップページの作り方を考えるときは、「どんなパーツを組み合わせられるか」をざっくり知っておくとイメージしやすいです。
- ヘッダーカード（大きな画像＋キャッチコピー＋ボタン）
- 記事スライドショー（おすすめ記事や新着記事を横スライド表示）
- おすすめ記事エリア（2〜3カラムで記事カードを並べるエリア）
- カテゴリ別一覧（ジャンルごとに記事への入り口をまとめるボックス）
- ランキングボックス（おすすめ商品や記事を順位付きで表示）
- CTAエリア（お問い合わせ・資料請求・メルマガ登録などのボタン付きエリア）
このあと、サイト型トップページとハイブリッド型トップページの作り方の中で、これらのパーツをどこに置くと使いやすいかも一緒に見ていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
アフィンガー6でサイト型トップページの作り方（固定ページを設定）
ここでは、トップページを固定ページで作る「サイト型」の手順を解説します。WordPress側の設定と固定ページの作り方を押さえれば、難しいカスタマイズなしでも十分きれいなトップページになります。
WordPress側の準備と表示設定の手順
まずは「トップページは固定ページ」「記事一覧は別ページ」という形を作ります。流れを表にまとめると、こんなイメージです。
| 手順 | やること | 操作場所 |
|---|---|---|
| 1 | トップページ用の固定ページを作る | 管理画面「固定ページ」→「新規追加」 |
| 2 | ブログ記事一覧用の固定ページを作る | 同じく「固定ページ」→「新規追加」 |
| 3 | 「ホームページの表示」を固定ページに変更する | 「設定」→「表示設定」 |
| 4 | ホームページ・投稿ページにそれぞれ固定ページを割り当てる | 「表示設定」内のプルダウンで選択 |
| 5 | サイトを開いて、反映されているか動作を確認 | 実際のトップページと記事一覧ページをチェック |
ポイントになる部分を少しだけ噛み砕いておきます。
- トップページ用固定ページ
タイトルは「HOME」やサイト名など、サイト全体の顔になる名前にしておくと分かりやすいです。スラッグ（URLの末尾）は「home」や「top」など、短くシンプルなものがおすすめです。 - ブログ記事一覧用固定ページ
タイトルは「ブログ」「記事一覧」などでOKです。このページの本文には何も書かなくて大丈夫で、後からWordPress側が自動で記事一覧を表示してくれます。 - 表示設定の変更
「設定」→「表示設定」で、「ホームページの表示」を「固定ページ」に変更します。ホームページにトップページ用固定ページ、投稿ページに記事一覧用固定ページをそれぞれ指定しましょう。
ここまで終われば、見た目はまだシンプルでも「サイト型トップページ」の土台は完成です。
トップページ用固定ページのおすすめ構成
次に、トップページ用の固定ページの中身をどう並べるかを決めます。いきなりブロックを追加し始めると迷いやすいので、先にざっくり構成を決めてから作り込むとスムーズです。
アフィリエイト寄りのブログで使いやすい構成例を挙げると、こんな感じになります。
| 順番 | コンテンツ例 | ねらい |
|---|---|---|
| 1 | ファーストビュー：キャッチコピー＋簡単な説明＋ボタン | サイトのテーマと読者の得られるメリットを一瞬で伝える |
| 2 | 運営者のプロフィール | 「誰が書いているか」を見せて信頼感を出す |
| 3 | 最優先で読んでほしいおすすめ記事を3〜6件 | 収益記事やまとめ記事へしっかり誘導する |
| 4 | カテゴリ別の入り口（カードやボックス） | 読者の興味に合わせて関連記事へ回遊しやすくする |
| 5 | 実績・口コミ・よくある悩みなど | 読者が感じやすい不安をやわらげる |
| 6 | メルマガ登録・お問い合わせなどのCTA | 「次にとってほしい行動」をはっきり示す |
もちろん、すべてを入れる必要はありません。自分のブログの目的に合わせて、「これはいらないかな」と思うところは削ってしまって大丈夫です。逆に、「レビュー一覧」や「よく読まれている記事」など、自分のサイトでよく読まれる部分があれば、そこを1つのブロックとして足してあげるとトップページにオリジナリティが出ます。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
投稿一覧ページ（ブログページ）の作り方とチェックポイント
投稿ページに設定した固定ページは、基本的にはタイトルをつけて公開するだけでOKです。本文は空のままで、WordPressが自動で新着記事を並べてくれます。
合わせて、次のポイントも一度確認しておきましょう。
- 公開したURLを開き、記事一覧が正しく表示されているか
- 1ページに表示される記事数（必要なら「設定」→「表示設定」で変更）
- アイキャッチ画像が崩れずに表示されているか
- カテゴリやタグが分かりやすく並んでいるか
トップページの作り方だけでなく、この投稿一覧ページも整えておくと、サイト全体の導線がすっきりして読者が迷いにくくなります。
ブログ型トップページ＋固定ページで作るアフィンガー6のハイブリッドな作り方
ここからは、「今のブログ型トップページはそのままにしつつ、上のほうだけ少し作り込みたい」という人向けに、ハイブリッド型の作り方を紹介します。アフィンガー6なら、管理画面の設定と固定ページの組み合わせで実現できます。
AFFINGER管理からトップページに固定ページを挿入する
ハイブリッド型トップページは、イメージとしては「上がLP風の固定コンテンツ、下が通常の新着記事一覧」です。
| 項目 | 役割 | 操作の目安 |
|---|---|---|
| AFFINGER管理「トップページ」タブ | トップページのレイアウトや挿入コンテンツを調整する | ダッシュボードから「AFFINGER管理」→「トップページ」を開く |
| 挿入コンテンツの設定欄 | トップページの上部や下部に追加コンテンツを差し込む | ショートコードなどを指定してコンテンツを挿入 |
| 固定ページ挿入の設定 | 作成した固定ページの内容をトップページにまとめて表示する | 説明どおりに固定ページIDなどを入力して保存 |
おおまかな流れは次のようになります。
- トップに表示したい固定ページをあらかじめ作成しておく
- AFFINGER管理の「トップページ」設定を開く
- 「挿入コンテンツ」や固定ページ挿入用の項目で、先ほど作った内容を指定する
- 表示位置を「新着記事の上」などに設定して保存する
具体的な項目名や入力欄はバージョンによって少し変わることもあるので、公式マニュアルを見ながら、一つずつ確認しつつ進めると安心です。
マイブロック・ショートコードでトップページを量産しやすくする
トップページを作り込むとき、私がよく使うのが「再利用ブロック（マイブロック）」やショートコードです。ざっくり言うと、「よく使うパーツをテンプレとして保存しておく仕組み」です。
【稼げるキーワード教えます】
▼ ▼ ▼
例えば、こんな感じで使えます。
- 商品紹介ボックスのレイアウトを再利用ブロックとして保存しておく
- 「ランキング3位まで」のボックスをショートコード化しておく
- 背景色付きのCTAエリア（説明文＋ボタン）をテンプレートとして登録しておく
こうしておくと、トップページだけでなく、個別記事の下にも同じパーツをすぐ呼び出せます。サイト全体のデザインが揃ううえに、アフィンガー6でトップページを作る手間もかなり減らせるので、「これから記事をたくさん増やしたい」という人ほど早めに用意しておくと楽です。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
アフィンガー6トップページのデザインと導線の作り方
ここからは、「どう設定するか」だけでなく、「どう見せるか」「どう誘導するか」というデザインと導線の話をしていきます。細かい設定よりも、ここを意識するだけでトップページの印象ががらっと変わります。
ファーストビューで絶対に伝えたい3つの情報
トップページを開いたとき、スクロールする前に見えるエリアをファーストビューと言います。ここでピンとこないと、そのまま戻るボタンを押されてしまいやすいです。
ファーストビューで伝えたい要素を表にすると、次の3つになります。
| 要素 | 具体例 | ポイント |
|---|---|---|
| 誰のためのサイトか | 「未経験からWeb業界を目指す人向け」など | ターゲットとなる読者が、自分のことだとすぐに分かる言葉を入れる |
| 何が得られるか | 「副業ブログで月◯万円を目指すステップを解説」など | 「このサイトを読めばどうなれるのか」を短い一文で伝える |
| 次に何をしてほしいか | 「まずはこの3記事をチェック」ボタンなど | 「どの記事を見ればいいか」を一つに絞ってあげる |
アフィンガー6なら、ヘッダーカードや大きめの画像ブロックを使って、これらの要素をまとめて表示できます。私は「キャッチコピー＋1行説明＋ボタン」のシンプルな組み合わせにすることが多いです。情報を詰め込みすぎないほうが、読者も迷わず次のアクションをとってくれます。
スマホで見やすいアフィンガー6トップページのレイアウト
トップページの作り方を考えるときは、パソコンよりもスマホでの見え方を基準にするのがおすすめです。ほとんどの読者はスマホからアクセスしてくるからです。
スマホで見やすいレイアウトにするために、次のポイントを意識してみてください。
- 基本は1カラム（縦一列）で考える
スマホでは2カラムで作っても縦に並ぶので、あまり詰め込みすぎるとスクロールが長くなりすぎます。 - 重要なボタンやリンクは、親指が届きやすい位置に置く
ファーストビューの真ん中〜少し下あたりにCTAボタンを置いておくとタップされやすくなります。 - 文字サイズと行間は少しゆったりめに
小さい文字でぎゅっと詰めるより、多少情報を削ってでも読みやすさを優先したほうが結果的に読まれます。 - 画像はサイズと枚数を絞る
重い画像をたくさん並べると、読み込みに時間がかかって離脱の原因になります。印象に残したいところにだけ使いましょう。
一度トップページが完成したら、自分のスマホでじっくり触ってみてください。「ここ、もう少し上にあったほうが押しやすいな」「この説明は長いな」と感じたところを、少しずつ直していけばOKです。
収益記事へつなげる導線と内部リンクのコツ
トップページは「おしゃれさ」だけでなく、「読んでほしい記事にきちんと案内できているか」がとても大事です。ここでは、収益記事へつなげるために私が意識していることをまとめます。
- トップページ上部に「必ず読んでほしい3〜6記事」をまとめておく
- カテゴリ別の入り口には、カテゴリのひとこと説明を添える
例：「ブログの基本」「ツールの使い方」「実践レポート」など - おすすめ記事エリアから、自然な流れで収益記事に内部リンクをつなぐ
- 比較表やランキングボックスは、トップページではなく個別記事側に置き、トップは「入り口」として割り切る
トップページをサイトの「地図」と考えて、読者が迷わず目的の記事にたどり着けるようにすると、結果的に回遊率や収益も上がりやすくなります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
アフィンガー6でトップページを作るときのよくある質問
最後に、アフィンガー6でトップページを作るときによく聞かれる質問を、Q&A形式でまとめておきます。
Q1. アフィンガー6のトップページは、記事が何本くらいあれば作ったほうがいいですか？
A. 私の感覚では、10〜15記事くらい書いたあたりで一度トップページを整えるのがおすすめです。
記事が少なすぎると、トップページに並べるおすすめ記事やカテゴリがスカスカになってしまいます。ある程度記事が溜まってからアフィンガー6でトップページを作っていくと、「このジャンルがよく読まれているからここを目立たせよう」などの判断がしやすくなります。
Q2. サイト型トップページとブログ型トップページ、どちらの作り方を選べばいいですか？
A. どちらが良いかは、「何を一番大事にしたいか」で決めるのが近道です。
- サイト型トップページ（固定ページ）は
商品レビューやサービス紹介など、収益につながる導線をしっかり作りたい人向けです。運営者のプロフィールや実績を前面に出したい場合にも向いています。 - ブログ型トップページは
日記や雑記寄りで、「日々の更新そのもの」に価値がある場合に向いています。
迷ったときは、「サイト型トップページを作りつつ、下部に新着記事一覧を出すハイブリッド型」にしてしまうのが無難です。アフィンガー6なら設定を変えるだけで形を変えられるので、最初から完璧を目指すより「まずは一つ作って、あとから調整する」くらいの気持ちで大丈夫です。
Q3. アフィンガー6トップページの作り方で、やってはいけないNGパターンはありますか？
A. よく見かけるNGパターンをいくつか挙げておきます。
- ファーストビューに情報を詰め込みすぎて、何のサイトか一目で分からない
- おすすめ記事が10記事以上並んでいて、結局どれを読めばいいのか迷う
- お問い合わせや登録ボタンなどのCTAがない、もしくは目立たない位置にある
- 画像が多すぎてトップページの表示に時間がかかり、読み込む前に離脱されてしまう
迷ったときは、「ボタンの数を減らせないか」「説明文を短くできないか」と引き算の視点で見直してみてください。それだけでも、トップページ全体がかなりすっきりして見えるはずです。
アフィンガー6でトップページを作るときのまとめと次の一歩
この記事の内容をおさらいします
- アフィンガー6のトップページには「ブログ型」「サイト型」「ハイブリッド型」の3パターンがあり、目的に合わせて選ぶことが大切です。
- サイト型トップページを作るときは、「トップページ用固定ページ」「投稿一覧用固定ページ」「表示設定」の3点を押さえれば基本はOKです。
- ハイブリッド型では、AFFINGER管理のトップページ設定から固定コンテンツを挿入し、上部を作り込みつつ下に新着記事一覧を表示させる形が使いやすいです。
- デザインに迷ったら、ファーストビューで「誰のためのサイトか」「何が得られるか」「次に何をしてほしいか」の3つをはっきりさせることを優先しましょう。
- トップページはサイトの「地図」と考え、収益記事や大事な記事へ自然につながる導線を中心に設計すると成果につながりやすくなります。
今日からできる最初の一歩としては、「自分のサイトをどの型のトップページにしたいか」を紙やメモアプリに書き出してみてください。ブログ型にするのか、サイト型にするのか、ハイブリッド型にするのかが決まるだけでも、その後の作業がぐっと楽になります。
あとは、この記事で紹介した流れに沿って、固定ページの作成や表示設定を一つずつ進めてみてください。作り込んだトップページは、ただの「入り口」ではなく、読者が次の行動を取りたくなるホームベースになってくれます。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
