WordPressブログのサイドバーをどう設計した？Noah Labで入れた項目と理由
当サイトではアフィリエイト広告を利用しています。
はじめに
Web制作をしていると、「サイドバーを付けたほうがいいのかな？」と考えることがあります。
私もNoah Labを制作するとき、サイドバーを作るかどうかを考えました。
ただし、最初から「ブログだからサイドバーを付けよう」と決めたわけではありません。
どんな情報を置くのかも、一つずつ考えました。
さらに、どのページに表示するのかも決めました。
スマートフォンでは、PCと同じ配置にはできません。
そのため、画面サイズによるレイアウトも考える必要がありました。
今回は、実際に制作しているNoah Labを例にします。
サイドバーに何を入れたのかを紹介します。
また、なぜその項目を選んだのかもまとめます。
WordPressブログにサイドバーを作った理由
サイドバーには、記事本文とは別の情報をまとめて表示できます。
そのため、読者が次に読む記事を探す場所としても使えます。
Noah Labでは、サイドバーを「情報を増やす場所」とだけ考えていません。
読者がサイト内を移動しやすくすることを意識しました。
例えば、今読んでいる記事の中から項目を探せます。
また、関連する記事へ移動することもできます。
さらに、カテゴリーから別の記事を探すこともできます。
そこで、サイドバーにはいくつかの役割を持たせることにしました。
Noah Labではどのページにサイドバーを表示している？
Noah Labでは、すべてのページにサイドバーを表示しているわけではありません。
ページの役割に合わせて、表示する場所を分けています。
サイドバーを表示しないページ
- トップページ
- 記事一覧ページ
- 検索ページ
トップページでは、メインビジュアルや記事紹介を中心に見せています。
そのため、サイドバーは置いていません。
また、記事一覧ページでも記事を探すことに集中できるようにしています。
サイドバーを表示するページ
- 記事詳細ページ
- サイドバーを使う固定ページ
特に記事詳細ページでは、サイドバーを活用しています。
記事を読んでいる途中でも、別の記事を探せるようにするためです。
Noah Labのサイドバーに入れた4つの項目
Noah Labのサイドバーには、主に4つの項目を入れています。
- 目次
- 関連ページ
- カテゴリー
- ポピュラー
それぞれ役割が違います。
ここからは、一つずつ紹介します。
① 目次
最初に入れたのが目次です。
長い記事では、すべての文章を最初から読むとは限りません。
そこで、必要な項目を探せるようにしました。
例えば、記事の中に次のような内容があるとします。
目次
・CSSの基本
・レスポンシブデザイン
・Flexbox
・position
・まとめこのように項目を一覧で見せると、記事全体の内容も把握しやすくなります。
また、気になる項目へ移動しやすくなります。
特に記事の内容が長くなるほど、目次の役割は大きくなると感じました。
② 関連ページ
次に、関連ページを入れました。
Noah Labでは、現在読んでいる記事と近い内容の記事を紹介しています。
例えば、CSSの記事を読んだあとに、レスポンシブデザインの記事へ進めるようにします。
このように、記事同士をつなげる役割を持たせています。
また、関連する記事を探す手間も減らせます。
Noah Labでは、関連ページを3件表示する設計にしています。
③ カテゴリー
3つ目はカテゴリーです。
Noah Labには、いくつかのカテゴリーがあります。
- Web制作
- Web制作ツール
- ガジェット
- おすすめサービス
- その他
読者によっては、記事タイトルから探すよりも、テーマから探したいことがあります。
そのため、カテゴリーをサイドバーに表示しています。
例えば「Web制作の記事をもっと読みたい」と思った場合があります。
そのときに、カテゴリーからまとめて探せます。
つまり、カテゴリーはサイト内を大きく移動するための入口として使っています。
④ ポピュラー
最後に、ポピュラーを入れました。
ここでは、よく読まれている記事を表示する構成にしています。
Noah Labでは、3件を表示しています。
記事を読み終わったあと、次に読む記事が決まっていないこともあります。
そこで、別の記事を見つけるきっかけとして利用しています。
また、サイト内を回遊する入口としても使えます。
なぜこの4つを選んだのか
サイドバーに入れられる情報は、他にもたくさんあります。
例えば、プロフィールやタグ、SNSなども考えられます。
しかし、何でも入れればいいわけではありません。
情報が増えすぎると、かえって見づらくなることがあります。
そこで、Noah Labでは「読者が次に何を探すか」を考えました。
| 項目 | 役割 |
|---|---|
| 目次 | 今読んでいる記事から探す |
| 関連ページ | 近い内容の記事を探す |
| カテゴリー | テーマから記事を探す |
| ポピュラー | 次に読む記事を探す |
この4つは、それぞれ違う探し方に対応しています。
そのため、サイドバーに入れることにしました。
PCとスマートフォンでサイドバーの配置を変える
サイドバーを作るとき、もう一つ考えたことがあります。
それが、スマートフォンでの表示です。
PCでは画面幅に余裕があります。
そのため、記事本文とサイドバーを横に並べられます。
PCの場合
┌──────────────────────┬──────────────┐
│ │ │
│ 記事本文 │ サイドバー │
│ │ │
└──────────────────────┴──────────────┘
一方、スマートフォンでは横幅が狭くなります。
同じように横へ並べると、記事本文が狭くなってしまいます。
そこで、スマートフォンでは縦方向に並べるようにしました。
スマートフォンの場合
┌──────────────────────┐
│ │
│ 記事本文 │
│ │
└──────────────────────┘
┌──────────────────────┐
│ サイドバー │
│ │
└──────────────────────┘
つまり、同じサイドバーを表示しながら、配置だけを変更しています。
この考え方は、レスポンシブデザインにもつながります。
Noah LabのサイドバーをCSSでどう作ったか
Noah Labでは、本文とサイドバーをレイアウト用のクラスでまとめています。
考え方を簡単にすると、次のようになります。
.layout-with-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
}
@media (max-width: 767px) {
.layout-with-sidebar {
grid-template-columns: 1fr;
}
}PCでは、本文とサイドバーの2列にします。
本文側は残りの幅を使います。
サイドバーは320pxを基準にしています。
そして、スマートフォンでは1列に変更します。
その結果、本文の下にサイドバーが移動します。
サイドバーの中身をHTMLでどう分けたか
サイドバーの中身も、一つの大きな箱にすべて入れているわけではありません。
それぞれの役割ごとにsectionを分けています。
<aside class="sidebar">
<section class="sidebar-section">
<h2 class="sidebar-title">目次</h2>
...
</section>
<section class="sidebar-section">
<h2 class="sidebar-title">関連ページ</h2>
...
</section>
<section class="sidebar-section">
<h2 class="sidebar-title">カテゴリー</h2>
...
</section>
<section class="sidebar-section">
<h2 class="sidebar-title">ポピュラー</h2>
...
</section>
</aside>このように分けることで、各項目を個別に調整できます。
また、あとから項目を変更するときも管理しやすくなります。
この部分は、WordPressのテーマを作るときにも意識したポイントです。
サイドバーのデザインをどう決めたか
サイドバーだけ別の雰囲気にするのではなく、サイト全体のデザインに合わせました。
そのため、Noah Labで使っている色や余白の考え方をサイドバーにも使っています。
例えば、背景色や枠線を設定します。
.sidebar {
padding: var(--space-5);
background-color: var(--bg-sub);
border-radius: var(--radius-md);
}
.sidebar-section {
margin-bottom: var(--space-5);
}また、最後の項目には余計な余白が残らないように調整します。
このように、サイドバー単体ではなく、サイト全体との統一感を意識しました。
特に、色をCSS変数で管理しておくと、あとからデザインを調整しやすくなります。
実際に作って分かったこと
「とりあえずサイドバー」では意味がない
最初は、ブログらしい見た目にするためにサイドバーを付ける考え方もできます。
しかし、実際に作ってみると、それだけでは足りませんでした。
「何を置くのか？」を考える必要があったからです。
そこで、読者が次に何をするかを考えました。
その結果、目次や関連ページなどを入れることにしました。
項目を増やしすぎると見づらくなる
サイドバーには、たくさんの情報を入れられます。
しかし、情報が多すぎると、どこを見ればいいのか分かりにくくなります。
そのため、「入れたいもの」ではなく「必要なもの」を考えるようにしました。
これは、実際にサイトを作ってみて気づいたことの一つです。
PCとスマホでは同じ配置を使えない
PCでは、記事本文の横にサイドバーを置くことができます。
一方、スマートフォンでは横幅が限られています。
そのまま2列にすると、本文が狭くなります。
そこで、スマートフォンでは縦に並べました。
この経験から、最初からスマートフォンでの表示も考えるようになりました。
サイドバーのデザインもサイト全体と合わせる必要がある
サイドバーだけ色や余白を大きく変えると、サイト全体との統一感がなくなることがあります。
そこで、Noah Labでは共通のカラーや余白を使っています。
また、見出しやリンクのデザインも他の部分と合わせました。
結果として、別のパーツではありますが、サイト全体の中で自然につながるようにしました。
サイドバーを作るときに考えたい5つのこと
ここまでの内容をまとめると、サイドバーを作るときは、次の5つを考えると整理しやすくなります。
① 何のために置くのか
まず、サイドバーの役割を決めます。
「ブログだから置く」ではなく、目的を考えます。
② どのページに必要なのか
次に、表示するページを決めます。
すべてのページに同じものを表示する必要はありません。
③ 何を入れるのか
役割に合わせて、中身を選びます。
情報を増やしすぎないことも大切です。
④ どれくらい表示するのか
関連ページやポピュラー記事などは、件数も考える必要があります。
多すぎると、サイドバーが長くなります。
そのため、Noah Labでは関連ページ3件、ポピュラー3件という形にしています。
⑤ スマートフォンではどうするのか
最後に、スマートフォンでの配置を考えます。
PCと同じ形で表示する必要はありません。
画面幅に合わせて、縦並びに変更することもできます。
サイドバーは「空いている場所を埋めるもの」ではない
サイドバーを作るとき、最初は空いているスペースを活用するものだと思っていました。
しかし、実際に制作してみると、役割を考えることのほうが重要でした。
読者がどんな情報を探すのかを考えます。
そして、その情報を見つけやすい場所に配置します。
そのため、サイドバーは「空いた場所を埋めるもの」ではありません。
サイト内を移動するための一つのナビゲーションとして考えることができます。
まとめ
サイドバーは、ブログに情報を追加するだけの場所ではありません。
読者が次の記事を探すための入口にもなります。
Noah Labでは、目次・関連ページ・カテゴリー・ポピュラーの4つを入れています。
また、ページによってサイドバーを表示するかどうかも分けています。
PCでは記事本文の横に配置します。
一方、スマートフォンでは本文の下に移動させています。
実際に作ってみると、「何を入れるか」だけでは足りませんでした。
どのページに表示するのかも考える必要があります。
さらに、スマートフォンではどう見せるのかも重要でした。
これからWordPressブログを作る場合は、サイドバーを付けること自体を目的にしないことが大切だと感じています。
まずは、読者が何を探すのかを考えてみます。
そして、その情報に合わせてサイドバーの内容を決めてみてください。
Related
