ここでは、ミニサイトの各記事のページレイアウトについて見ていきます。全体を見た後、パーツごとに考えていきます。

ページのレイアウトを考えよう

ミニサイトの記事を洗い出したり、構成を考えたりした後は、ページのレイアウトについて考えていきましょう。

ページのレイアウトはいろんなパターンがありえますが、一番オーソドックスなものは次のようなものでしょう。

上は PC 用のレイアウトです。サイドバーが右側にある、2カラムのよくあるレイアウトです。これを並び替えてスマホ用のレイアウトも作れます。

続いて、それぞれのエリアにどのようなものを入れていくか考えていきましょう。

ヘッダーを考えよう

ページのヘッダーには、サイトのタイトルを入れます。

サイトのタイトルは、見ただけで内容が推測できるものがいいです。

雑記ブログなら変わった名前でも問題ないのですが、ミニサイトの場合は特定のニーズを満たすために作ることが多いので、タイトルを見ればテーマがわかるものがいいでしょう。

中央に大きく載せるのもいいですし、左上の部分に載せるのもいいでしょう。

サイトのロゴやキャッチコピーを入れるのもいいですね。その場合は、ロゴとタイトルを合わせて左側へ、キャッチコピーをその上か下に置くのが一般的だと思います。

PCとスマホでデザインを変える必要は特にないでしょう。

ナビゲーションを考えよう

ナビゲーション部分には、カテゴリーページへのリンクをまとめて載せるといいでしょう。カテゴリーが多い場合には、二段にしたリ、一部のカテゴリーだけを載せるようにしても構いません。

カテゴリーがないくらいページ数が少ないミニサイトなら、代表的なページへのリンクを載せるようにしてもいいでしょう。絶対に読んでほしい記事、多くの人に役立ちそうな記事へのリンクをナビゲーションに載せれば、訪問客もサイトの中を巡回しやすくなります。

サイトによっては、ヘッダーの中にナビゲーションを入れてしまう方法もあります。例えば、ヘッダーの左側にタイトル、右側にメニューを載せる場合です。また、そもそもナビゲーションを載せない方法もあります。サイトの特性に合わせて考えましょう。

メインを考えよう

メイン部分には、多くの内容が入ります。

まず、記事のタイトル。そして、見出しと本文（段落）。これらはマストです。記事によっては、リンク、画像、リスト、テーブル、引用なども入るかもしれません。

また、ボックス、仕切り線、コード、目次、マーカー線、吹き出しなどを使うこともあるかもしれません。記事を書くときに、どのようなパーツを使うかは、はじめに意識しておいた方がいいでしょう。

記事内以外では、本文より前にアイキャッチやリード文を入れることがあるかもしれません。本文の下には、シェアボタン、前後の記事へのリンク、カテゴリー内の記事一覧などを入れることもあるでしょう。必要そうなものをピックアップしておきましょう。

当サイトでは、以下のようになっています。

いろんなサイトを見てみると、様々な要素が含まれていることに気づきます。自分のミニサイトに、どれが必要か考えておきましょう。

メイン部分には、ページの種類によって大きく内容が変わります。個別ページだけでなく、カテゴリーページやトップページでもメイン部分に何を入れるかを考えておくようにしましょう。

ブログであれば、パンくずリストやタグ、関連記事なども載せるかもしれませんが、ミニサイトの場合は特に必要ないでしょう。サイトの規模が小さいためです。

また、公開日もなくてもいいかもしれません。ミニサイトでは、最新情報であることが重要とは限らないからです。

記事下にプロフィールがあることも多いですが、ミニサイトではあまり要らないかもしれません。ブログほど個人を売り出す場ではないと思うからです。

ミニサイトはブログとはサイトの性質が異なります。そのため、ブログではよく見かけるパーツでも、ミニサイトでは不要になることもあります。

多かったので、もう一度まとめておきましょう。

サイドバーを考えよう

サイドバーには、カテゴリー一覧や記事の一覧などを載せることが多いです。

記事数が少ないので、記事の一覧を載せるスペースは十分あるはずです。これにより、PC で見ている人は、別のページを巡回しやすくなります。

また、サイトの説明やプロフィールを入れるのもいいでしょう。どのようなサイトなのかがわかれば、検索からたどりついた人はトップページやサイト全体を巡回してくれるかもしれません。

補足ページへのリンクを載せるのもいいでしょう。補足ページとは、サイトの詳細な説明を載せたページや問い合わせフォームを載せたページなど、メインのコンテンツではない補足的なページのことです。

ブログでは、他にも、タグクラウドやカレンダー、検索窓などがあったりしますが、ミニサイトの場合は不要でしょう。

また、ブログの場合はサイドバーを2列にした3カラムのレイアウトが採用されていることもありますが、ミニサイトの場合はそんなにサイドバーに入れる内容はありません。そのため、サイドバーは1列で十分でしょう。

フッターを考えよう

フッターには、あまり入れるものはありません。

サイトのタイトルとトップページへのリンクを載せておくのはいい考えです。ページの最後まで見た人が、トップページに行ってくれるかもしれません。

あとは、コピーライトの表示をしておくのもいいでしょう。書くとしたらフッターです。ただ、無くても構いません。

サイドバーに載せたものをもう一度載せてもいいですが、ページが縦に長くない場合は、くどい印象を与えてしまいます。ナビゲーションが多くなって見づらくなるかもしれません。

また、そもそも、サイドバーを無しにした1カラムのデザインにして、サイドバーのところで紹介した内容をフッターに入れるという考え方もあります。

サイドバーにいろいろ詰め込んでメイン部分よりも長くなると、バランスが悪くなります。記事がそれほど長くない場合は、記事の一覧などはサイドバーではなくフッターに入れたほうがいいかもしれません。サイトに応じて考えてみましょう。

ブログであれば、タグクラウドやカレンダー、検索窓などがあったりしますが、ミニサイトの場合は不要でしょう。

おわりに

ここでは、ページの一般的なレイアウトを紹介し、各エリアごとに必要なパーツを挙げてみました。自分の作るミニサイトに、どのようなパーツが必要か考えておきましょう。

次のページ では、HTML ファイルのひな型を作っていくことにします。