こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6のサイトデザイン設定を、初心者でも迷わない順番でまとめました。
AFFINGER6って、カスタマイズ項目多くない？
結局…サイトデザインってどこを設定すればいいの？
＼初心者でも安心！ コスパ最強のWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
＼効果測定に必要なプラグインと機能が詰まった特別セット／
それではご覧ください。
AFFINGER6のサイトデザイン設定でまず押さえたいポイント
AFFINGER6には細かいカスタマイズ項目が多く、最初からすべてを完璧に設定しようとすると、どうしても手が止まりがちです。
でも、サイトデザインを整えるだけなら、最初に見るべきポイントはそれほど多くありません。
まず押さえておきたいのは、次の3つです。
- トップページの構成：サイト全体の第一印象を決める
- フォント（文字）の見た目：読みやすさ・滞在時間に直結する
- サイドバーの内容：情報整理と回遊率アップにつながる
この3点を先に整えておくだけで、「とりあえず見た目が整ったサイト」に仕上げることができます。
逆に、色や装飾、細かいデザイン調整は後回しでOKです。
最初から作り込みすぎると、途中で方向性がブレやすくなります。
この記事では、これから解説する トップページ → フォント → サイドバー の順番で、初心者の方でも迷わず設定できるようにポイントを整理していきます。
トップページの設定｜サイトの印象を決める基本カスタマイズ
トップページは、訪問者が最初に目にするサイトの顔です。
AFFINGER6では、このトップページの設定次第で、ブログ全体の印象が大きく変わります。
初期状態のままでも問題はありませんが、「情報が多くてごちゃっと見える」「何のサイトか分かりにくい」と感じる場合は、トップページ設定を見直すのがおすすめです。
AFFINGER6のトップページ設定で、まず意識したいポイントは次の3つです。
- トップページをサイト型にするかどうか
- レイアウト（1カラム・2カラム）の選び方
- ヘッダー下や上部エリアの使い方
特に初心者の方は、固定ページを使った「サイト型トップページ」にするだけで、一気に整理された印象になります。
また、トップページは「完璧に作り込む場所」ではなく、あとから調整していく前提でOKです。
まずは…
- 情報が見やすい
- 何についてのサイトか分かる
この2点を意識して設定していきましょう。
ここでは、AFFINGER管理画面で事前にチェックしておきたい設定画面を掲載します。
AFFINGER管理画面で、まず押さえておきたいタブメニューは「トップページ」と「ヘッダー下 / おすすめ」です。
トップページの設定は項目が多いため、はじめからすべてを調整する必要はありません。
ヘッダー下に表示するヘッダーバナーを設定するメニューです。記事が増えてから調整すればOKです。
上記の設定で、ヘッダーバナー1〜4それぞれに「画像URL」「テキスト」「サブテキスト」「リンク先URL」を設定すると、以下のようなヘッダーカードが表示されます。
トップページやヘッダー周りに関連記事はこちらから、ご覧ください。
次の項目では、トップページをサイト型にする考え方と、基本的な設定手順を紹介します。
トップページを「サイト型」にする考え方
AFFINGER6では、トップページを「ブログ型（投稿一覧型）」 と 「サイト型」 の2つから選べます。
- ブログ型（投稿一覧型）：新着記事がそのまま並ぶ
- サイト型：固定ページを使って構成する
初心者の方におすすめなのは、固定ページを使った「サイト型トップページ」です。
理由はシンプルで…
- 情報を整理しやすい
- サイトの目的が伝わりやすい
- デザインをコントロールしやすい
といったメリットがあります。
特に、「ブログを始めたばかり」「記事数がまだ少ない」という場合は、投稿一覧型よりもサイト型のほうがスカスカ感が出にくいのもポイントです。
もちろん、ブログメインで更新頻度が高い場合は投稿一覧型でもOKですが、まずはサイト型で整えておくと後から切り替えても困りません。
固定ページをトップに設定する手順
トップページをサイト型にするには、固定ページをトップページとして指定します。
設定自体は難しくなく、数分で完了します。
大まかな流れは次のとおりです。
- トップページ用の固定ページを作成する
- WordPressの表示設定でトップページに指定する
まず、WordPress管理画面から［固定ページ］→［固定ページを追加］をクリックし、トップページ用の固定ページを作成します。この時点では、簡単な見出しや文章だけでOKです。
次に、［設定］→［表示設定］を開き、「ホームページの表示」を［固定ページ］に変更します。
- ホームページ：作成した固定ページ
- 投稿ページ：記事一覧用の固定ページ（任意）
これで、トップページが、固定ページを使った「サイト型トップページ」に切り替わります。
固定ページをトップページ（ホームページ）に設定するための表示設定画面は以下のとおりです。
細かいデザイン調整は、このあとAFFINGERの設定やブロックで行うので、まずは「表示される状態」にすることを優先しましょう。
この記事では、「トップページ」をWordPressの「フロントページ（ホームページ）」として解説しています。
トップページを「ブログ型（投稿一覧型）」から「サイト型」に変更する手順については、以下の記事で詳しく解説しています。あわせてご覧ください。
-
-
AFFINGER6でトップページを固定ページにする方法｜ブログ型からサイト型へ変更する手順
AFFINGER6でトップページをブログ型からサイト型（固定ページ）に変更する手順を、初心者さん向けにわかりやすくご紹介します。 AFFINGER6をインストールした初期状態（デフォルト設定）では、投 ...
AFFINGER管理で調整しておきたい項目
トップページを固定ページに設定したら、次に確認しておきたいのが AFFINGER管理画面 の設定です。
ここでは、サイト全体の見た目や表示バランスをまとめて調整できます。
まず、［AFFINGER管理］→［トップページ］関連の項目 を中心にチェックしましょう。
特に初心者の方が見ておきたいポイントは次のとおりです。
- トップページのレイアウト設定（1カラム／2カラム）
- ヘッダー下エリアの表示・非表示
- おすすめ記事やカード型コンテンツの表示設定
トップページのレイアウト（カラム構成）を設定するメニューです。
最初の段階では、1カラム表示を選んでおくのがおすすめです。
余白が広くなり、全体がスッキリ見えます。
また、ヘッダー下に表示されるエリアやおすすめ記事は、「とりあえず非表示」でも問題ありません。
記事が増えてから追加したほうが、バランスが取りやすいです。
AFFINGER6は設定項目が豊富ですが、最初からすべて触る必要はありません。
「見た目が崩れない最低限の設定」だけ整えて、細かい調整は後回しでOKです。
ここまで設定できたら、トップページの基本カスタマイズは完了です。
フォント設定｜読みやすさを優先したサイトデザインにする
サイトデザインを整えるうえで、フォント（文字）の設定は意外と後回しにされがちです。
ですが、フォントは見た目だけでなく、読みやすさや滞在時間にも直結する重要な要素です。
どんなにデザインがきれいでも、文字が小さい・詰まりすぎていると、読者は途中で読むのをやめてしまいます。
AFFINGER6のフォント設定では、「おしゃれ」よりも「読みやすさ」を優先するのが基本です。
特に最初に意識したいのは、次の3つです。
- フォントの種類
- フォントサイズ
- 行間・余白
この3点を整えるだけで、サイト全体の印象はかなり変わります。
以下では、初心者の方が、まず見ておけばOKなフォント設定ポイントを順番に解説します。
フォント設定が重要な理由
フォント設定が重要な一番の理由は、「読みやすさ＝ユーザー体験」に直結するからです。
読者は、文字が小さかったり、行間が詰まりすぎていたりすると、内容が良くても読むのをやめてしまいます。
特にスマホでは、フォントの見え方ひとつで、「読みやすいサイト」か「疲れるサイト」かが、はっきり分かれます。
また、読みやすいサイトは…
- 滞在時間が伸びやすい
- 直帰率が下がりやすい
といった傾向があり、結果的にSEO面でもプラスになります。
AFFINGER6では、フォントサイズや行間を細かく調整できるため、デザイン性よりも快適さ重視で設定しておくのがおすすめです。
フォント種類・サイズの考え方
AFFINGER6では、フォントの種類やサイズを細かく設定できますが、最初から細部までこだわる必要はありません。
初心者の方は、「読みやすいかどうか」だけを基準に選べばOKです。
フォントの種類について
基本は…
- ゴシック体
- システムフォント系
など、クセの少ないフォントがおすすめです。
装飾の強いフォントや個性的すぎる書体は、長文では読みづらくなりがちです。
AFFINGER6には標準で複数のフォントが用意されているので、まずはデフォルト設定をベースに、必要に応じて変更するくらいで問題ありません。
フォントサイズについて
フォントサイズは、「スマホで無理なく読めるか」を基準に決めましょう。
PCではちょうどよく見えても、スマホだと小さく感じるケースはよくあります。
設定後は…
- スマホ表示
- タブレット表示
を実際に確認して、「少し大きいかな？」くらいがちょうどいい目安です。
フォント設定は、一度決めたら終わりではなく、記事が増えてから微調整してもOKです。
行間・余白で読みやすさを調整するポイント
フォントの種類やサイズと同じくらい大切なのが、行間や余白の設定です。
文字そのものが読みやすくても、行と行の間が詰まりすぎていると、文章が一気に読みづらく感じてしまいます。
AFFINGER6では、本文の行間や段落下の余白などを調整できるため、ここを整えるだけでも、全体の印象がかなりスッキリします。
設定する際のポイントは次の3つです。
- 行間は「少し広め」を意識する
- 段落ごとに適度な余白を持たせる
- 見出しと本文の間隔を詰めすぎない
特にスマホ表示では、行間が狭いと文章が固まって見えがちです。
PCだけでなく、必ずスマホでも表示を確認しましょう。
行間や余白は、「正解の数値」があるわけではありません。
実際に表示を見ながら、ストレスなく読めるかどうかを基準に調整するのがコツです。
読みやす？… 行間や余白の設定で迷ったら、こちらの記事を参考にしてみてください。
-
-
AFFINGER6 基本設定！Pタグの余白・行間・要素間の調整方法
AFFINGER6の基本設定で記事の行間や余白を調整する方法を解説！フォント設定・ブロックの余白・スペーサーブロックの3つを使えば、初心者でも簡単に読みやすい記事が作れます。分かりやすい手順で解説するので、ぜひ参考にしてください！
Google Fontsを使ってみたい方は、 こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER6で簡単！Google Fonts導入・設定ガイド（初心者向け）
AFFINGER6でGoogle Fontsを導入・設定する方法を初心者向けに解説。日本語フォントの選び方からコード取得、管理画面への貼り付け手順まで、画面付きで分かりやすくまとめています。
ここまで設定できれば、フォントまわりの基本カスタマイズは完了です。
サイドバー設定｜情報整理と回遊率アップのコツ
サイドバーは、記事本文の補助として情報を整理し、読者を次の行動へ誘導するためのエリアです。
AFFINGER6では多くのウィジェットを設置できますが、最初から詰め込みすぎると、かえって見づらくなってしまいます。
初心者の方は、「必要最低限＋役割がはっきりした構成」を意識するのがおすすめです。
まずは…
- 何のサイトか分かる
- 次にどの記事を読めばいいか分かる
この2点を満たすことを目標に設定していきましょう。
サイドバーの役割と考え方
サイドバーの主な役割は、次の3つです。
- サイトや運営者の情報を伝える
- 記事の探しやすさをサポートする
- 関連コンテンツへ誘導する
つまり、「読む → 次を選ぶ」までをサポートする場所だと考えると分かりやすいです。
そのため、装飾よりも「分かりやすさ」を優先するのがポイントです。
最初に入れておきたいウィジェット
サイドバーに何を置くか迷ったら、まずは次のウィジェットから設定してみましょう。
- プロフィール（またはサイト紹介）
- 検索フォーム
- おすすめ記事・人気記事
特にプロフィールは、「どんな人が書いているサイトか」を伝えられるため、安心感につながります。
また、おすすめ記事や人気記事を置いておくと、読者が次の記事を選びやすくなり、回遊率アップにも効果的です。
おすすめ記事・プロフィールの配置ポイント
ウィジェットの配置順も意外と大切です。
基本は、上から「重要度が高いもの」→「補助的なもの」の順で並べるのがおすすめです。
たとえば…
- プロフィール
- おすすめ記事
- 検索フォーム
といった形にすると、自然な流れで情報を伝えられます。
AFFINGER6では、スクロール追従エリアなども設定できますが、最初は通常のサイドバーだけで十分です。
プロフィールについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER6 プロフィールカードの作り方とデザインカスタマイズ徹底解説
初心者でも簡単！AFFINGER6でおしゃれなプロフィールカードを作る方法とデザインカスタマイズをわかりやすく解説。
サイドバー関連について こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER6 サイドバーのウィジェットタイトルをおしゃれに！デザイン＆文字色の変更方法
AFFINGER6のサイドバーに表示されるウィジェットタイトルを、おしゃれにカスタマイズする方法を初心者向けに解説。文字色や背景色の変更、枠線や装飾の設定もカスタマイザーで簡単にできます。
サイドバーもトップページと同じく、あとから何度でも調整できる部分なので、まずはシンプルに整えることを優先しましょう。
AFFINGER6のサイトデザインを整えるときの注意点
AFFINGER6はカスタマイズ性が高い分、つい「あれもこれも」と設定を触りたくなってしまいます。
ただ、サイトデザインを整える段階では、やりすぎないことも大切なポイントです。
ここでは、初心者の方が特に気をつけたい注意点をまとめておきます。
設定を詰め込みすぎない
AFFINGER6には便利な機能がたくさんありますが、最初からすべて使う必要はありません。
- 表示項目が多すぎる
- 色や装飾がバラバラ
- どこを見ればいいか分からない
こうした状態になると、せっかくの記事内容が伝わりにくくなってしまいます。
まずは、「見やすい」「分かりやすい」を優先し、機能は必要になったタイミングで追加していきましょう。
スマホ表示を必ずチェックする
デザイン調整は、PC画面だけで確認して終わりがちですが、実際の読者はスマホからアクセスするケースがほとんどです。
- 文字が小さすぎないか
- 行間が詰まりすぎていないか
- サイドバーの表示が邪魔になっていないか
設定を変更したら、必ずスマホ表示も確認するクセをつけましょう。
デザインは「後から微調整」でOK
サイトデザインに、最初から完璧を求める必要はありません。
記事が増えたり、サイトの方向性が見えてきたりすると、「こうしたほうがいいかも」と感じる部分が必ず出てきます。
AFFINGER6は後からでもデザインを調整しやすいテーマなので、まずは最低限整える → 運営しながら調整この流れで問題ありません。
まとめ！AFFINGER6は基本設定だけでも十分きれいに整う
AFFINGER6は高機能なテーマですが、サイトデザインを整えるだけなら、最初からすべての設定を触る必要はありません。
この記事で紹介したように…
- トップページの構成
- フォント（文字）の見た目
- サイドバーの内容
この3つを順番に整えるだけで、初心者の方でも 見やすく、分かりやすいサイトデザイン を作ることができます。
逆に、色や装飾、細かいカスタマイズは、サイトを運営しながら少しずつ調整していけばOKです。
AFFINGER6は、「あとから直せる」「何度でも調整できる」のが大きな強みです。
まずは基本設定で土台を整え、記事を書きながら、自分のサイトに合ったデザインに育てていきましょう。
今後、フォント設定やサイドバー、ヘッダーなどをさらに細かく調整したくなったら、それぞれのカスタマイズ解説記事も参考にしてみてください。この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
