ピンを保存
- AFFINGER6で筆者と同じような完成デザインを再現したい
- 初期設定後、どこをどうカスタマイズすればいいか順番がわからない
- 「見やすくおしゃれなブログ」を段階的に作りたい
こんな悩みを解決する記事を用意しました！
「AFFINGER6を入れたけど、どう整えたら“おしゃれで読みやすい”ブログになるの？」
そんな悩みを持つ方へ向けて、この記事では筆者が実際に作成したサイト完成図をもとに、各エリアの設定方法を6ステップで解説します。
この記事は、以下の初期設定が済んでいる方向けです。
上の画像は、筆者のAFFINGER6サイトの完成イメージを色ごとに区分したものです。
この記事では以下の6ステップに分けて、画像内の各パートの設定方法を詳しく解説していきます。
- STEP1：赤枠｜WordPress立ち上げ直後の初期画面整理（ロゴ・背景画像など）
- STEP2：青枠｜メニュー構成＋ナビ調整＋固定ページ作成
- STEP3：緑枠上半分｜サイトトップウィジェットの設定（プロフィール・広告・検索・人気記事など）
- STEP4：緑枠下半分｜フッターウィジェットのレイアウト調整（コピーライトや回遊エリア）
- STEP5：オレンジ枠上部｜トップページの構成（カテゴリカードや新着記事配置）
- STEP6：オレンジ枠下部｜著作権表記・コピーライト調整（表示確認とカスタマイズ）
この順番に沿って設定を進めることで、自然と「おしゃれで読みやすいデザイン」が整っていきます。
記事本編の前に、少しPRさせてください！
期間限定
- 初期費用0円
- 月額最大54％オフ
- ドメイン2つ永久無料！
個人ブロガーや小規模サイトにおすすめプランなら 契約期間36か月で最大の54％割引で月額660円でサーバをレンタル可能です！
まずはお試しでお考えの方は、 12か月 がおすすめです！（月額971円）
また、当サイト経由で申し込むと、さらに割引になります！（以下、ご参照ください）
広告
☛ ConoHa WINGのレンタルサーバのキャンペーン情報
現在、Conoha Wingでは『お得なキャンペーン』をやっています。筆者も現在はこちらでサーバをレンタルして記事を投稿しています。
使用感や契約後から使用できるまでのスピード感が良かったので、今後も継続して使用する予定です。
下記画像をタップしていただけるとお得にサーバを借りれるのでぜひご確認ください！
※本プログラムは予告なく終了する場合がありますので、ご注意下さい！
＼ 初期費用無料で始められます ／
※Wingパック契約なら独自ドメイン2個まで無料作成可能
記事本文にジャンプする
はじめに：デザインより“読ませる工夫”が先
ブログを始めるとき、多くの人が「おしゃれに見せたい」と考えがちですが、
最初に大切なのは“見た目のカッコよさ”ではなく、“読みやすさ”です。
どんなにデザインが洗練されていても、文字が小さかったり、行間が詰まりすぎていたり、見出しが分かりにくいと、読者は途中で離脱してしまいます。
そこでまず意識してほしいのが“読ませる工夫”です。以下の5つを整えるだけでも、ブログ全体の印象がグッと変わります。
📌 読ませる工夫：5つの基本ルール
- ✅ 文字サイズ：スマホでも読みやすい16〜18pxが目安
- ✅ 行間：1.8〜2.0emで読みやすい余白を確保
- ✅ 余白：見出しや段落の前後に余裕をもたせる
- ✅ 色使い：メイン＋補色2色以内で視線が散らない設計に
- ✅ 見出し構成：H2・H3を使い分け、流れを明確に
🎨 筆者のカラー設計：意味と目的
筆者は当ブログのデザインにおいて、#5271ff（青）をメインサイトカラーに設定し、知的さ・信頼感・落ち着きを意識しています。
補色には#ffa94d（オレンジ）を用い、CTAボタンや注目エリアにアクセントとして活用。
さらにグレー系を補足パーツ・囲い・背景などに使い、視線を休ませる役割を持たせています。
📏 配色比率と実運用のバランス
配色全体の基本ルールとしては、ベースカラー（白）を7割、青を2.5割、グレーを0.25割、オレンジを0.25割という比率を目安にしています。
この構成により、統一感・視認性・読みやすさが自然に保たれ、読者が無理なく記事に集中できます。
ただし、記事内容によっては配色を柔軟に変えた方が伝わりやすい場面もあるため、このルールは基本軸として運用しています。
この3色構成（青×橙×灰）を守ることで、読者の視線がぶれず、読み疲れが抑えられ、統一感ある印象が自然に生まれます。
※黄色マーカー（#fff2b2）は視線誘導の補助で限定使用していますが、配色設計には含めていません。
AFFINGER6は装飾・レイアウト機能が豊富ですが、まずは「読者にとって心地よく読める設計」を整えることが、信頼されるブログづくりの第一歩です。
AFFINGER6を選ぶメリットとは？
筆者もブログを始める前に、参考になるブログを何件も読み込みながら、デザインや構成の研究をしていました。
その中で印象的だったのが、見た目が整っていて読みやすいブログほど、AFFINGER6を使っている割合が高かったということです。
「WordPressテーマって無料でもいいのでは？」と思う方も多いと思います。
筆者も最初は無料テーマで始めようと考えていましたが、本気で収益化や読みやすさを目指すなら、有料テーマの投資は“時短と安心”につながると感じました。
💡 AFFINGER6を選ぶメリット
-
✅ SEO対策が標準搭載
構造化データや高速表示など、Google評価を意識した設計 -
✅ 装飾パーツが豊富
ボタン・ボックス・吹き出しもワンクリックで設置できる -
✅ アフィリエイト導線が作りやすい
タグ・ランキング・広告パーツが初心者でも管理しやすい -
✅ 収益化を目的としたデザイン
LP風構成、目立つCTA、回遊率アップの仕掛けも豊富
なお、無料テーマと有料テーマの違いや、それぞれの向き不向きについては別記事で詳しく紹介予定です。
▶ 無料テーマ vs 有料テーマの比較はこちら（準備中）
🎁 筆者のAFFINGER6購入特典
下記のリンク（アフィリエイトリンク）からAFFINGER6をご購入いただいた方には、以下の特典をご提供します。
筆者自身、WordPressテーマや構成・デザインに悩みながら1サイト目の構築に約2週間、さらに2サイト目でサイトカラーの調整・構成の再整理まで含めて3週間をかけて準備を行いました。
この特典では、その経験と時間を凝縮し、短時間でブログ運営に移れる状態を目指せる内容にしています。
-
✅ 初心者でも1時間以内に整う
「初期設定＋デザイン済み状態」導入ガイド（実体験ベース）
└ 筆者は2週間後に30分で再現できました - ✅ 筆者が実際に困った設定・失敗ポイントとその対策をまとめたマニュアル
- ✅ ご希望者にはメールでの簡易アドバイスサポートも（柔軟対応可）
Step1：完成イメージの“赤枠”を設定しよう｜ヘッダーロゴ・背景画像・キャッチコピー背景
サイトのトップイメージにある赤枠部分（ロゴ・ヘッダー背景・キャッチコピー背景）は、訪問者の第一印象を大きく左右する重要エリアです。
ここでは、その赤枠エリアを整えるステップとして、視覚的なデザインと伝えたいメッセージを同時に設定していきましょう。
このStepで設定するのは、完成イメージの赤枠に該当する次の3要素です：
- ✅ サイトロゴ画像の設定（ヘッダー／フッター）
- ✅ ヘッダー背景画像（キービジュアル）の設定
📌 サイトロゴの設定（ヘッダー＆フッター）
ロゴは「このブログが何をテーマにしているか」を一瞬で伝える“ブランドの顔”です。
AFFINGER6では、ヘッダーだけでなくフッター側にもロゴを表示できるため、全体の統一感を意識したデザインが可能です。
🔼 ヘッダーロゴの設定方法
- [AFFINGER 管理] → [サイト全体設定] → [ロゴ画像] にアップロード
- 画像サイズは横幅400px以上の横長が理想（背景透過PNG推奨）
- アップロード後、プレビューで位置やサイズを微調整
🔽 フッターロゴの設定方法
- [外観] → [ウィジェット]
- 「フッター（1列目〜3列目）」の任意の位置に 「画像」ウィジェット を追加
- ロゴ画像をアップロードし、「代替テキスト」や「リンク先」を必要に応じて設定
フッター側にロゴを表示することで、ページを読み終えたあとでも「どのブログを見ていたか」が自然と記憶に残ります。
ブランド認知を高めたい方にとっては、地味に見えて非常に効果的な工夫です。
Canvaなどの無料デザインツールを使えば、初心者でもプロっぽいロゴが簡単に作れます。
筆者はCanva Proの無料トライアルを活用し、ロゴ作成→背景透過→アップロードまでをスムーズに実施しました。
ロゴが未作成の方は、「ブログ名」だけの文字ロゴでもOK。
まずは統一感を意識して“シンプルでも整った見た目”を目指しましょう。
📸 ヘッダー背景画像（キービジュアル）の設定
赤枠エリアの大半を占める「ヘッダー背景画像」は、サイト全体の世界観を伝える重要な要素です。
- [外観] → [カスタマイズ] → [ヘッダー画像]
- 推奨サイズ：横幅1920px × 高さ500〜700px
- キャッチコピーの文字が見えにくくならないよう、背景の明暗や画像内の配置に注意
おすすめ素材サイト：Pexels（商用利用OK）
「ジャンルに合った雰囲気の画像」を選ぶと、初めて訪問した読者にも意図が伝わります。
筆者はキャッチコピーを白文字で表示したかったため、暗めのトーンで“エンジニア×学習”を連想させる画像を選びました。
✅ このStepでは、サイトイメージ上の赤枠エリアにあたる部分を整えました。
ロゴ・背景画像・キャッチコピーの3点をバランスよく配置することで、「何のブログか」がひと目で伝わる“第一印象の設計”が完成します。
Step2：メニュー構成＋ナビ設計＋固定ページの作成（青枠部分）｜回遊導線を整える
サイトイメージの青枠部分（ヘッダー・フッターメニュー）は、ブログ全体の“回遊の骨組み”にあたる超重要エリアです。
読者が「どこに何があるか」を瞬時に把握できるように、グローバルナビ＋法的表記メニュー＋必要な固定ページをこのステップで一気に整えましょう。
このStepで設定する青枠部分は、以下の3つです：
- ✅ 「プロフィール」「お問い合わせ」などのメニューに追加したい固定ページを用意
- ✅ ヘッダーメニュー（グローバルナビ）の作成と構成整理
- ✅ フッターメニューの法的表記設置
📝 まずはナビに必要な固定ページを用意しよう
ナビメニューを作るには、まずはその中に表示させる固定ページを先に作成しておく必要があります。
以下はどのブログでもよく使われる基本的な固定ページです。
- ✅ プロフィール
- ✅ お問い合わせ（プラグイン「Contact Form 7」推奨）
- ✅ プライバシーポリシー
- ✅ 特定商取引法に基づく表記（アフィリエイトを扱う場合は必須）
WordPress管理画面 → [固定ページ] → [新規追加] から、それぞれ作成しておきましょう。
文章テンプレが必要な方は、当サイトでコピペ用記事も配布予定です。
🔗 ヘッダーメニュー（青枠上部）の設計
トップページ上部のグローバルナビは、読者の初動を大きく左右する導線です。
「どこに何があるか」がすぐに伝わるように3〜5項目に絞り、見やすく整理しましょう。
- [外観] → [メニュー] を開く
- 「新しいメニューを作成」から「グローバルナビ」など名前を設定
- 先ほど作成した固定ページやカテゴリページを追加
- 「ヘッダーメニュー（グローバルナビ）」にチェックして保存
例：「ホーム」「転職体験談」「おすすめ教材」「お問い合わせ」など、
ジャンルが一目で伝わる構成が理想です。
📄 フッターメニュー（青枠下部）を整える
サイトの信頼性や法的対策のために、フッターに必須ページを設置しておきましょう。
- [外観] → [メニュー] → 新規メニューを「フッター」として作成
- プライバシーポリシー・特商法ページなどを追加
- 「フッターメニュー（下部表示）」にチェックして保存
このフッターエリアは、スマホでも最下部に固定表示されるため、読者が安心して利用できるサイトづくりに直結します。
✅ このStepでは、サイトイメージの“青枠”エリア（メニュー導線）を整えました。
固定ページを用意したうえで、ヘッダー・フッター両方にナビゲーションを設置することで、“迷わない・回遊しやすい”構造が完成します。
Step3：サイドバーウィジェットを整えよう（緑枠上半分）｜プロフィール・広告・検索などの導線設計
サイトイメージの緑枠上半分は、サイドバーに設置される各種ウィジェット（パーツ）のエリアです。
この部分は訪問者の信頼感や、収益導線を支える重要な情報エリアとして機能します。
Step2でメニュー導線が整ったら、次はサイドバーやフッターなどの補助エリアを使って、回遊・検索・広告などのパーツを設置していきましょう。
このStepで設定する緑枠上部の構成は以下の3つです：
- ✅ サイドバー上部〜下部に表示するウィジェット構成
- ✅ ヘッダー直下ウィジェットで注目情報を配置
- ✅ フッターエリアの基本整理（信頼・導線パーツ）
📌 サイドバーウィジェットのおすすめ構成（緑枠上部）
サイドバーはPCでは常時表示、スマホでは記事下に表示される重要な導線です。
配置順の一例は以下のとおりです：
- プロフィール（サイト運営者の顔として信頼性を高める）
- 検索ボックス（目的の記事をすぐ探せる）
- 人気記事（内部回遊を促進）
- カテゴリ一覧（構造化された読みやすさ）
- バナー広告やPR（アフィリエイト導線や収益ポイント）
設定方法：
[外観] → [ウィジェット] → 「サイドバーウィジェット（上・中・下部）」を編集し、各項目をドラッグ＆ドロップで追加・整理しましょう。
📸 ヘッダー下（トップ直下）ウィジェットの活用
AFFINGER6では、ヘッダー画像直下にも専用ウィジェットを設置できます。
トップページで最初に目に入る情報エリアなので、以下のような表示におすすめです。
- ▶ 注目記事のランキングリンク
- ▶ 特集カテゴリカード（画像リンク）
- ▶ 期間限定のお知らせやキャンペーン
📄 フッター2〜3列目も軽く整理しておこう
訪問者がページ最下部に到達したときに、“信頼できるサイトかどうか”を判断する場でもあるフッターエリア。
ここにも次のようなパーツを設置しましょう。
- ✅ コピーライト表記（例：「© 2025 Tanasu All Rights Reserved.」）
- ✅ サイトマップ or カテゴリ一覧リンク
- ✅ SNS・お問い合わせリンク
- ✅ 人気記事・検索・バナー広告など
✅ このStepでは、サイトイメージの“緑枠上半分”にあたるサイドバー・補助導線を整えました。
信頼感・収益導線・利便性を支えるパーツを
「読者の視線が集まる位置」に配置するのが最大のポイントです。
Step4：フッター・トップ下部ウィジェットを整えよう（緑枠下部）｜信頼性と回遊性を支える“終端設計”
サイトイメージの緑枠下部は、フッターエリア（2列目・3列目）＋トップページ下部の情報表示にあたるパートです。
このエリアは、ページの最下部に到達した読者に信頼・回遊・行動を促す“終端設計”として、非常に重要な役割を持っています。
このステップでは、フッターやトップページ下部に「次に読む記事」「カテゴリ導線」「サイト情報」などを配置し、離脱させない仕掛けを構築していきます。
このStepで整えるのは、以下の3つの要素です：
- ✅ トップページ下部のカテゴリカード＋新着記事一覧
- ✅ フッター第2列・第3列へのウィジェット配置
- ✅ コピーライト表記など信頼性の整備
🗂 トップページ下部にカテゴリカードを配置する
トップページの下部にはカテゴリごとのカードリンクを配置することで、訪問者が興味のあるジャンルにスムーズにアクセスできます。
AFFINGER6では、以下のようなショートコードやブロックを活用できます：
```html [colwrap][col2] 転職体験談 [/col2][col2] 学習ロードマップ [/col2][/colwrap] 2列 or 3列構成でカードを横並びに配置すると、視認性が高くなります。
「このブログで何が学べるか」が一覧で伝わる構成を目指しましょう。
📄 フッター第2列・第3列を整える（緑枠下部）
フッターには以下のような項目をウィジェットで配置し、信頼性＋利便性を高めます。
- ✅ コピーライト表記（例：「© 2025 Tanasu All Rights Reserved.」）
- ✅ サイトマップ・カテゴリ一覧・タグクラウド
- ✅ SNSリンク・プロフィール画像・問い合わせリンク
- ✅ サイト内検索やバナー広告（任意）
設定方法：
[外観] → [ウィジェット] → フッターエリア（カラム2/3） にパーツを追加。
表示順や構成は、モバイルでの見え方も含めて都度プレビューで確認しましょう。
✅ このStepでは、サイトイメージの“緑枠下部”にあたるフッター・トップページ下部の設計を整えました。
信頼性・回遊性・情報整理が揃った終端設計を整えることで、「読者の最後の印象」が大きく向上します。
Step5：関連記事・人気記事を設置しよう｜回遊率を高める仕掛け作り
Step5：トップページを構成しよう（オレンジ枠上部）｜カテゴリカード・新着記事で魅せる第一印象づくり
サイトイメージのオレンジ枠上部にあたるトップページは、読者が最初に目にするコンテンツの一覧表示エリアです。
ここを整えることで「どんなジャンルのブログか」「何が読めるのか」が直感的に伝わり、ブログの第一印象がグッと良くなります。
このステップでは、カテゴリカードや新着記事をトップページにバランスよく配置し、読みたい記事への導線を自然に作っていきましょう。
このStepで整えるオレンジ枠上部の構成は、以下の3点です：
- ✅ トップページにカテゴリ別リンクカードを表示
- ✅ 新着記事エリアを整理（見出し＋サムネイル表示）
- ✅ 「おすすめ」「特集」記事をショートコードで手動配置
🗂 カテゴリ別カードを並べて「ブログの構成」を伝える
訪問者が興味のあるジャンルへ一瞬でアクセスできるように、カテゴリごとのリンクカードを設置します。
AFFINGER6では、カードリンクの表示にも対応しています：
```html [colwrap][col2] 転職体験談 [/col2][col2] 学習ロードマップ [/col2][/colwrap]2列構成で横並び表示にすれば、全体のジャンルが一目でわかる視認性の高いトップページになります。
📰 新着記事エリアを見やすく表示しよう
WordPressの初期設定では「最新の投稿一覧」が自動で表示されますが、AFFINGER6ではテンプレートやウィジェットでの調整も可能です。
- カスタマイザー → [トップページ] でレイアウト調整
- 必要に応じて、投稿一覧ブロックで表示数や順序を変更
- カテゴリ別に分けてセクション化するのも◎
🔗 特集・ロードマップ記事への手動リンク配置
トップページ上部は手動で見せたい記事を置くのにも最適です。
読んでほしい記事・重要なロードマップ記事などはショートコードやボタンリンクで意図的に配置しましょう。
例：
[kanren postid="1234"] ← 特集記事リンク [btn class="rich_green"]学習ロードマップを見る[/btn] ✅ このStepでは、サイトイメージの“オレンジ枠上部”にあたるトップページ構成を整えました。
ジャンル別カード・新着記事・特集リンクを組み合わせることで、「何があるブログなのか」がすぐに伝わる導線になります。
Step6：著作権表記・コピーライトを整えよう（オレンジ枠下部）｜信頼感を高める表示義務の最終仕上げ
サイトイメージのオレンジ枠下部にあたるフッター最下部には、著作権表記（コピーライト）を設置します。
これは「誰がサイトを運営しているか」「無断転載はNGである」といった基本的な権利表示であり、信頼性・法的保護の観点からも重要です。
AFFINGER6では、フッター第3列や専用の「フッター最下部」に設置でき、サイトカラーに合わせた表示調整も可能です。
このステップでは、表示位置・文言・スタイルの整え方を丁寧に解説します。
このStepで調整するのは、以下のポイントです：
- ✅ コピーライトの基本文言と推奨形式
- ✅ フッター最下部に設置する手順
- ✅ 表示カラー・フォントサイズの整え方
📌 コピーライトの文言例と形式
一般的には、以下のような形式で著作権を明示します：
© 2025 Tanasu Blog All Rights Reserved.
表記には次の3つを含めるのがベストです：
- ✅ ©マーク（Copyrightの略）
- ✅ 西暦（自動更新のJSも可）
- ✅ サイト名＋All Rights Reserved（権利保持宣言）
🔽 表示場所は「フッター最下部」が基本
AFFINGER6では、以下の手順でフッター最下部にコピーライトを表示できます：
- [外観] → [カスタマイズ] → [フッター設定]
- 「コピーライトの表示位置」で「下部中央」などを選択
- テキストを入力し、装飾も同時に調整可能
ウィジェット → [フッター第3列] に設置してもOKです。両方試して見た目を比べてみましょう。
🎨 表示スタイルはサイトデザインと統一感を
背景色が濃い場合は白文字、薄い背景ならグレー系文字など、配色バランスに合わせたカラー選定を行いましょう。
- ✅ フォントサイズは13〜14pxが目安
- ✅ スマホでは中央寄せ、PCでは左寄せが多い
- ✅ 配色はサイトカラー #5271ff・#ffa94d・#666 を意識
✅ このStepでは、サイトイメージの“オレンジ枠下部”にあたるコピーライト・著作権表記を整えました。
信頼感を高める表示義務の対応として、見た目と機能の両方をバランスよく設計しましょう。
まとめ：整ったデザインは“読ませる”ための武器になる
まとめ｜整ったデザインは“読ませる”ための武器になる
ここまで、AFFINGER6を使ったブログデザインの整え方を、筆者の実例とともに6つのステップで解説してきました。
- ✅ Step1：ロゴ・背景画像・キャッチコピーの整備（赤枠）
- ✅ Step2：メニュー＋ナビ設計＋固定ページ作成（青枠）
- ✅ Step3：サイドバーウィジェットの配置（緑枠上半分）
- ✅ Step4：フッター第2列・3列の整理（緑枠下半分）
- ✅ Step5：トップページにカテゴリ＋新着記事（オレンジ枠上部）
- ✅ Step6：著作権表記・コピーライトの設定（オレンジ枠下部）
「デザイン」と聞くと難しそうに思うかもしれませんが、“誰にどう読んでもらいたいか”を考えて整えることが最も大切です。
見た目の派手さよりも、視線の流れ・余白・導線の設計を意識することで、自然と「読みやすくておしゃれ」に見えるサイトが完成します。
筆者自身、最初の1サイト目で3週間ほど構成に時間をかけましたが、この記事を見てくださった方には、短時間で整ったサイトを構築して、早く「記事執筆」に集中していただければと願っています。
🎯 次は記事テンプレートを使って「読みやすく伝わる記事」を書いていきましょう。
「導入→本文→まとめ」の構成を意識するだけで、記事の質も印象も大きく変わります。
👉 記事テンプレートの使い方｜AFFINGER6で読みやすく伝える構成術
本記事が、あなたのブログ構築のヒントになれば幸いです。