この記事で解決できる悩み
こんな悩みに答えます！
AI×副業で稼ぐには？
AFFINGER6トップページ作り方の基本と完成形をチェック
AFFINGER6のトップページは、ただの「最新記事一覧」だけではもったいない！せっかく高機能なテーマを使っているなら、訪問者の目を引くサイト型のデザインにアップデートしてみましょう。
この章では、AFFINGER6で実現できるトップページのカスタマイズ例や、どんな構成を考えるべきかを分かりやすく解説していきます。
「ブログ型」と「サイト型」の違いや、完成イメージがはっきりすれば、次のステップもスムーズに進められるはずですよ！
AFFINGER6トップページのカスタマイズでできること
AFFINGER6の強みは、トップページを“自由自在にデザインできる”こと。単なるブログ一覧だけじゃなく、企業サイト風のホームページ型や、サービス紹介に特化したランディングページ風にも変えられます。
カスタマイズ次第でこんな表示が可能に👇
- 上部にスライダーやおすすめ記事バナー
- カテゴリ別に並んだ記事一覧（カード型）
- ブログカードやCTAを並べたボックスレイアウト
- フォント・色・背景・余白まで徹底調整
つまり、AFFINGER6ではトップページを**“自分のブランド”を表す看板**にできるんです。
AFFINGER トップページ作り方と構成の考え方
トップページの構成を考えるときは、まず「どんな役割を持たせたいか」を決めましょう。
たとえば…
| 目的 | 構成例 |
|---|---|
| サービス紹介／LP型 | ヒーロー画像 → 特徴説明 → 実績 → お問い合わせ |
| ブログ収益化 | ヘッダーカード → カテゴリ別記事 → 人気記事 |
| ブログ型の第一印象強化 | 新着記事 → カテゴリ紹介 → 自己紹介 |
その上で、AFFINGERの「固定ページ＋パーツ（カード・ボックス）」を組み合わせて、構成を組み立てていきます。
アフィンガー6ホームページ型の完成イメージ
サイト型に切り替えると、こんな雰囲気になります👇
[ ヘッダー画像・メニュー ]
↓
[ ヘッダーカードでおすすめ記事 ]
↓
[ 新着記事（スライド or カード） ]
↓
[ カテゴリ別記事一覧 ]
↓
[ フッターCTAやプロフィールなど ]
シンプルに言えば、「動きとメリハリのあるデザイン」で訪問者の興味を引き、目的の行動（記事を読む・問い合わせる・商品を見る）に導ける構成が理想です。
AFFINGER6ではこれらを「固定ページ＋ショートコード」「デザインカード」「マイブロック」で実現できます。
【準備編】AFFINGER 固定ページを使ったトップページの設計
AFFINGER6で「サイト型のトップページ」を作るには、まず“固定ページ”を使うことが前提になります。
この章では、トップページを設定する前に知っておきたい基本知識と、固定ページの役割、設定時の注意点をわかりやすく解説します。
設定作業に入る前の“頭の整理”として、しっかり押さえておきましょう！
固定ページと投稿ページの違いとは
WordPressには「投稿ページ」と「固定ページ」の2種類があります。
- 投稿ページ：ブログ記事のように日付が付き、時系列で並ぶ
- 固定ページ：自己紹介ページや、お問い合わせページのように“独立した内容”を表示する
AFFINGER6では、トップページに表示する専用ページ＝固定ページで作るのが基本です。
なぜなら、固定ページは「一覧に出ない」「順番が変わらない」「自由なレイアウトを組める」など、トップページに必要な性質を持っているからです。
WordPressでトップページに固定ページを設定する方法
次に、実際にWordPressで固定ページをトップページとして設定する手順を見ていきましょう。
- WordPressの管理画面 →「固定ページ」→「新規追加」
- タイトルを「トップページ」など分かりやすい名前で入力
- 「下書き保存」または「公開」をクリック
その後、
「設定」→「表示設定」→「ホームページの表示」で以下のように指定します：
- ホームページ：先ほど作った固定ページ
- 投稿ページ：記事一覧用の空の固定ページ（例：「ブログ」など）
これで、ブログ型ではなく「固定ページベースのトップページ」に切り替える準備が整います！
AFFINGER6 固定ページの使い方と注意点
AFFINGER6では、固定ページの中身にショートコードやデザインカードを挿入して、ページを自由にレイアウトしていきます。
ただし、いくつか注意点があります👇
- アイキャッチ画像や抜粋はOGP（SNSやLINEなど）に影響するので設定必須
- パーマリンク（URL）は「top」や「home」など、短く分かりやすいものに
- タイトル設定はSEO・SNSでの表示に関わるため慎重に
このように、トップページ用の固定ページは、記事とは違う「見せ方の工夫」が求められます。
【ステップ1】AFFINGER6 トップページをサイト型にカスタマイズ
AFFINGER6では、トップページを「ブログ型（最新記事が並ぶ形式）」から「サイト型（目的別に整えた固定レイアウト）」に切り替えることができます。
このセクションでは、ブログ型との違いを踏まえつつ、実際にどうやって“サイト型”にカスタマイズしていくかを丁寧に解説していきます。
サイト型とブログ型の違いと選び方
まずは、トップページを「サイト型」にする意味をしっかり理解しておきましょう。
| 比較項目 | ブログ型 | サイト型 |
|---|---|---|
| 表示内容 | 最新記事が時系列で並ぶ | 固定された構成（自由にカスタム可） |
| 訪問者の印象 | “ブログ感”が強い | “Webサイト”としての印象が強い |
| 導線設計 | 新着中心で流動的 | 特定の記事やカテゴリへ誘導しやすい |
| おすすめ用途 | 雑記ブログ、日記型ブログ | 特化ブログ、サービス紹介、アフィリエイト等 |
つまり、「収益化したい」「ブランド感を出したい」「第一印象をよくしたい」場合は、サイト型がおすすめです！
AFFINGER6 トップページ サイト型の作り方
AFFINGER6でサイト型トップページを作るには、以下の3ステップが基本です。
- 固定ページを作成する（前章で解説済み）
- WordPressの表示設定でトップページに指定
- AFFINGER管理画面でレイアウトをサイト型に変更
③の設定は以下の手順です👇
- WordPress管理画面 →「AFFINGER管理」→「トップページ」
- 「トップページのレイアウト」項目で「1カラム」「中央寄せ」「サイト型」などを選択
- 下部の「保存」を忘れずに！
これだけで、見た目がブログ型からガラッと変わります。
ここからは中身（ブロックやパーツ）をどんどん追加していきましょう！
サイト型の構造例と見本パターン紹介
サイト型トップページの例をいくつかご紹介します。
特化型ブログ向け構成例
・キャッチコピー画像＋CTA
・カテゴリ別に並べたカード型記事
・サービス紹介 or お問い合わせエリア
アフィリエイト向け構成例
・ランキング記事へのリンク（デザインカード）
・比較コンテンツの紹介
・プロフィールとSNSボタン
ブログ×ポートフォリオ併用型
・自己紹介＋スライダー
・新着記事＋人気記事
・制作実績やサービス内容を紹介
AFFINGER6はショートコードやカラムボックスが豊富なので、どんな構成でも実現できます！
【ステップ2】AFFINGER6デザインカードで魅せるページに
AFFINGER6の「デザインカード機能」は、トップページを一気に“プロっぽく”見せる超重要パーツ。
ブログ一覧をただ並べるのではなく、見せたい記事やカテゴリを視覚的にアピールすることができます。
ここでは、デザインカードの導入方法から、おしゃれな使い方、そしてテンプレートを活用した時短テクニックまでをご紹介します！
AFFINGERデザインカードとは？使い方と導入方法
デザインカードとは、記事をカード型に整えて表示できるショートコードのこと。画像・タイトル・抜粋がまとまって1枚の「情報カード」として表示されるため、クリック率が上がりやすくなります。
導入はとても簡単👇
- 固定ページを編集画面で開く
- 「＋」ボタンから「ショートコード」を選択
- 以下のようなコードを貼り付けるだけ！
記事IDは表示したい投稿記事のIDに差し替えてくださいね。
また、AFFINGER管理画面の「おすすめ記事一覧」からも「カード設定」ができます。
デザインカードを使ったおしゃれな表示例
デザインカードは並び順・背景色・ラベル・カラム数など、かなり細かく調整可能です。
表示パターン例：
- カテゴリ別に3列でカードを並べる
- 色別ラベルでジャンル分け（例：おすすめ／人気／初心者向け）
- 「もっと見る」ボタンで記事一覧ページへ誘導
上記のようなカテゴリ指定のカードグループを使うと、「記事一覧風だけどおしゃれ」な印象に。
デザイン済みデータとテンプレートを活用する方法
AFFINGER6では、有料または特典配布の「デザイン済みデータ」や「トップページテンプレート」が用意されています。
これらを使うと、ゼロから作る必要がなく、すでに整ったレイアウトを一発で読み込めるのが魅力です。
手順としては以下の通り：
- zip形式でテンプレートをダウンロード
- WordPress管理画面「外観」→「カスタマイズ」→「インポート機能」で読み込む
- 固定ページに「マイブロック」や「ショートコード」を貼り付けて完成！
テンプレートを使えば、デザインセンスに自信がない人でも安心！
カスタマイズの土台が整うので、時短にもなります！
【ステップ3】AFFINGER6 トップページを構成するブロック要素
AFFINGER6で“サイト型トップページ”を仕上げていくには、ブロック単位でパーツを組み立てる感覚が大事です。
このステップでは、トップページに配置したい主要エリアとその設定方法を、わかりやすく整理していきます。
どこに何を置けばいいのか分からない…
という方でも、この章を読めばスッキリしますよ！
ヘッダーエリアとグローバルメニューの設定
トップページで最初に目に入る「ヘッダー」部分は、第一印象を決める重要エリア。
ここにこだわると、一気に“サイトらしさ”が増します。
主な設定ポイント：
- ロゴ画像のアップロード：「外観 → カスタマイズ → サイト基本情報」
- キャッチフレーズやキャッチ画像の設定：「AFFINGER管理 → ヘッダー → キャッチフレーズ／背景」
- グローバルメニュー：「外観 → メニュー」で表示場所を「ヘッダーエリア」に指定
グローバルメニューには、主要カテゴリやお問い合わせページなどのリンクを設置して、導線設計を整えましょう。
おすすめ記事エリアと新着記事一覧の設置
AFFINGER6の魅力のひとつが、「見せたい記事を自由に配置できる」こと。
ここではおすすめ記事や最新記事を、カード型レイアウトやスライド表示で設置していきます。
設置方法の例：
- おすすめ記事（固定表示）
→ショートコードやヘッダーカード機能を使う-
-
【2025年最新】初心者にもお勧めのアフィリエイトASP15選！始め方から稼ぐコツまで徹底解説
-
- 新着記事（自動更新）
→で「order="desc"」に設定して表示-
-
レンタルサーバー比較【最新版】容量・価格・性能を丸ごと比較
2025/8/31 レンタルサーバー比較
-
- スライド表示
→「AFFINGER管理 → トップページ → 記事スライドショー設定」から表示ONに
スライドの表示件数やスピードも設定可能なので、自分のブログに合った見せ方ができます！
サイドバーとフッターのカスタマイズポイント
最後に、全体のバランスを整える裏方パーツが「サイドバー」と「フッター」です。
- サイドバー：プロフィール、人気記事、カテゴリなどを配置
→「外観 → ウィジェット」から各パーツをドラッグ＆ドロップで追加 - フッター：著作権表示、サイトマップ、SNSリンクなどを表示
→同じくウィジェット or フッターメニューで設定可能
AFFINGER6は「PC用」「スマホ用」のウィジェットを分けて表示できるため、モバイルユーザーを意識したカスタマイズも可能です！
【ステップ4】AFFINGER6のデザイン設定を使いこなす
トップページの構成が整ったら、いよいよ“デザインの仕上げ”に入りましょう。
AFFINGER6には、配色・フォント・装飾パーツなど、細かなデザイン調整ができる機能が豊富に用意されています。
この章では、見た目を一段階レベルアップさせるための設定ポイントを紹介します！
配色・フォントの変更で世界観を統一
「配色」や「フォント」は、ブログ全体の印象を決める大事な要素。
AFFINGER6では、以下のように細かく設定できます。
主な設定場所：
- 「外観 → カスタマイズ → カラー設定」：見出し・リンク・ボタンなどの色を変更
- 「AFFINGER管理 → デザイン」：基本フォントやリンクカラーを選択
- 「Googleフォント連携」：おしゃれな欧文フォントを使いたいときに便利
色は3色（メイン／アクセント／背景）をベースにすると統一感が出ます！
モバイル表示を意識したレスポンシブ設計
スマホユーザーが7～8割を占める今、モバイル表示を意識した設計は必須です。
AFFINGER6では、PCとスマホで別々の表示が可能なので、以下を意識しましょう👇
- 外観 → カスタマイズ → レイアウト」→スマホ用カラムや余白調整
- 「AFFINGER管理 → スマホ」→スマホメニューや追従ボタンの設定
- デザインカードの列数は「1列 or 2列」に調整すると見やすくなる
実機またはブラウザの「スマホプレビュー」で最終確認を！
見出しやボックスの装飾で差別化する方法
読者にとって読みやすいデザインを意識するなら、見出しやボックスの装飾も工夫しましょう。
AFFINGERおすすめ装飾例：
- H2/H3に「囲み罫線」や「グラデーション背景」
→「AFFINGER管理 → カラー → 見出しデザイン」から変更可 - や
ポイント
などのボックス系ショートコード
→ メモ・警告・チェックなど視覚で伝える補助に最適
こういった装飾があるだけで、「読みやすく」「覚えやすく」「プロっぽく」なりますよ！
【ステップ5】アフィンガー6おしゃれなトップページの事例集
ここでは、実際にAFFINGER6を使って作られた「サイト型トップページ」の事例をご紹介します。
どんな風にカスタマイズすればいいか分からない…
そんなときは、成功事例を真似ることから始めるのが近道です。
それぞれのパターンを見て、あなたのブログに合ったデザインのヒントを見つけてくださいね！
ブログ型からサイト型に変えた成功例
Before：最新記事が並ぶだけのブログ型トップページ
- 無機質な印象
- 記事が埋もれやすい
- サイトの目的が伝わりづらい
After：カテゴリ別に整理されたサイト型レイアウト
- おすすめ記事をヘッダーカードでアピール
- カテゴリ別にカード型で記事一覧を表示
- フッターに自己紹介＋お問い合わせボタン
「読者が迷わず動ける構成」になり、PVや直帰率にも好影響！
AFFINGER6：デザイン済みデータ活用例
AFFINGER6の「デザイン済みデータ」を使えば、プロっぽいレイアウトも一瞬で完成。
事例：美容系ブログ
- 白基調＋淡いアクセントカラーで清潔感
- トップにキャッチ画像＋サービス紹介
- 各カテゴリを2列のカード型で紹介
テンプレートは、見た目だけでなく“構成そのものを参考にできる”のが強み。
ダウンロードして取り込んだ後、自分の情報に書き換えるだけでOK！
ホームページ型で収益化した実践事例
AFFINGER6は、ブログだけでなく「サービス案内」や「アフィリエイト紹介」など、収益を目的としたトップページ作りにも最適です。
収益化に成功している構成の一例：
- ヒーロー画像＋メリット強調キャッチコピー
- 比較記事／ランキング記事へのボタンリンク
- アフィリエイト案件のおすすめカード
- CTA（問い合わせ／LINE誘導）を下部に固定
特に「記事へ飛ばす」だけでなく、“その場で行動を促す導線”を組み込むことで、コンバージョン率が格段にUPします！
【応用編】AFFINGER6ブログの作り方とトップページ連携
AFFINGER6の魅力は、トップページのカスタマイズ性だけじゃありません。
ブログ全体の構成や導線設計まで一貫して調整できるのが大きな強みです。
ここでは、「ブログ本体の作り方」や「トップページとの効果的な連携方法」、そしてサイト型とブログ型の使い分けの考え方について実践的に解説します！
AFFINGER ブログ 作り方とおすすめ構成
AFFINGER6でブログを始めるなら、最初に以下の3点を意識しましょう。
- 目的に合ったカテゴリ設計
例）収益型ブログ → 「ジャンルごとに悩み別カテゴリ」など - 見やすい記事構成テンプレート
例）問題提起 → 解決方法 → 商品紹介 → CTA の流れが鉄板 - AFFINGER独自機能を使った差別化
例）で強調、ポイント
でカテゴリごとの魅せ方調整-
-
レンタルサーバー比較【最新版】容量・価格・性能を丸ごと比較
2025/8/31 レンタルサーバー比較
-
記事単体の質も大切ですが、「サイト全体の流れ」があると読者の滞在時間が伸びやすくなります。
トップページとカテゴリ設計の連携方法
AFFINGER6のトップページは「カテゴリへの導線」を作り込むことで、より効果的に機能します。
連携ポイント例：
- トップページに主要カテゴリごとのカードグループを配置
- 各カテゴリページに固定ページで紹介文を追加（AFFINGERでは可能！）
- 記事タイトル＋ラベル（初心者向け／保存版など）で視認性アップ
こうすることで、「読みたい情報にすぐたどり着ける」サイト設計が完成します。
ブログとサイト型トップページの使い分け
AFFINGER6では、「トップページはサイト型」「ブログ部分は従来の投稿一覧」という“ハイブリッド構成”が可能です。
| ページ種別 | 役割 |
|---|---|
| サイト型トップページ | 初めて訪問する読者のナビゲーション＆第一印象 |
| 投稿記事ページ | 深掘り情報・SEO流入・回遊導線 |
| カテゴリページ | 情報のまとめ役＋テーマ別回遊の起点 |
このように設計すれば、読者にとっても使いやすく、検索エンジンにとってもわかりやすい構造になります。
「ブログとトップページが連動しているサイト」は、PV・収益・ブランディングの全てにおいて強くなります。
今のうちに「全体設計」も意識しておくと、後から差がつきますよ！
【Q&A】AFFINGER6トップページ 作り方のよくある質問
AFFINGER6のトップページ設定はどうすればいい？
固定ページを作成し、それをホームページに設定するのが基本です。
WordPressの「設定 → 表示設定」で、「ホームページの表示」を「固定ページ」にし、作成したトップページ用固定ページを指定します。
AFFINGER管理の「トップページ」タブでレイアウト調整も忘れずに！
固定ページをトップページに設定する手順とは？
以下の3ステップでOK！
- 「固定ページ → 新規追加」でトップページ用のページを作る
- 同様に、投稿一覧表示用の空の固定ページ（例：「ブログ」）も作っておく
- 「設定 → 表示設定」で、
- ホームページ → トップページ用の固定ページ
- 投稿ページ → 記事一覧表示用の固定ページ を指定
これで、トップページがブログ型からサイト型に切り替わります。
アフィンガーのトップページを作るときの注意点は？
以下の3点に注意しましょう。
- アイキャッチ画像・抜粋・OGPの設定を忘れずに（SNSでの見え方が変わります）
- ショートコードやマイブロックの更新反映は、キャッシュクリアが必要な場合あり
- スマホ表示の最適化も必ずチェック（列数・余白・CTAの位置など）
WordPressのトップページ設定方法まとめ
以下がAFFINGER6でのベストな設定手順です。
- 固定ページを2つ作成（トップページ／投稿ページ）
- WordPress表示設定で、それぞれに割り当て
- AFFINGER管理で「トップページレイアウト」設定
- 固定ページ内に、ショートコードやマイブロックで構成を組み立てる
これで“見た目も動線も整った”トップページが完成します！
【まとめ】AFFINGER6トップページの作り方でおしゃれ×成果を実現する
AFFINGER6のトップページは、「ブログの顔」であり、訪問者の第一印象を決めるとても重要な場所です。
本記事では、
- 固定ページを使ったサイト型トップページの作り方
- デザインカードやブロック要素を使った魅せ方
- 実例・応用・よくある質問まで
を網羅的にご紹介してきました。
AFFINGER6トップページ作りで大事なポイントまとめ
- 目的を決めて構成を考える（情報発信？サービス案内？アフィリエイト？）
- 固定ページ＋AFFINGER機能で自由に設計
- スマホ対応・視覚設計・CTA配置など細部にもこだわる
- ブログとの導線を意識して収益・回遊を両立
- テンプレートやショートコードを活用して時短＋おしゃれに！
AFFINGER6は、使いこなせば「見た目も中身も強いサイト」が作れるテーマです。
少し手間はかかりますが、それだけ他サイトとの差別化ができるのも事実。
ぜひこの記事を参考に、あなただけの魅力的なトップページを作り上げてくださいね！
