WordPressオリジナルテーマを作る前に決めたこと｜Noah Labのページ構成

はじめに

WordPressでオリジナルテーマを作るとき、最初に考えたのがページ構成です。

最初は、トップページと記事ページがあれば十分だと思っていました。

しかし、ブログを実際に運営することを考えると、それだけでは足りません。

記事を一覧で見せるページが必要です。また、カテゴリーから記事を探せる仕組みも必要になります。

さらに、プロフィールやお問い合わせなどのページも考えなければなりません。

そこで私は、Noah Labを作る前に、必要なページとそれぞれの役割を整理しました。

今回は、実際に制作しているNoah Labを例に、WordPressのページ構成をどのように考えたのかを紹介します。

WordPressのテーマを作る前にページ構成を考えた理由

Webサイトを作るとき、デザインや色から考えたくなることがあります。

しかし、見た目を作る前に整理しておきたいことがあります。

それが、どのようなページが必要なのかということです。

例えば、トップページと記事詳細ページでは、役割が違います。

トップページでは、ブログの紹介や新着記事を見せます。一方、記事詳細ページでは、文章を読みやすく表示することが大切です。

そのため、すべてのページを同じ構成にするのではなく、役割に合わせて設計することにしました。

また、最初にページ構成を整理しておくと、HTMLやCSS、WordPressのテンプレートを作るときにも迷いにくくなります。

Noah Labで用意したページ

Noah Labは、Web制作について学んだことや、実際に制作して気づいたことを紹介するブログです。

そのため、記事を読むだけでなく、興味のあるテーマを探せる構成を考えました。

まず、必要なページを一覧にしました。

このように、ページごとに役割を分けました。

ただし、すべてのページを同じ方法で作るわけではありません。

トップページや記事詳細のように表示内容が異なるページもあれば、カテゴリーのように記事データを使って一覧を作るページもあります。

その違いも、WordPress化するときに意識しました。

① トップページ｜ブログの入口を作る

トップページは、Noah Labを訪れた人が最初に見るページです。

そこで、ブログの雰囲気や発信内容が伝わるようにしました。

例えば、メインビジュアルにキャッチコピーを配置します。また、新着記事やおすすめのコンテンツも紹介します。

トップページの役割は、記事を並べることだけではありません。

どのようなブログなのかを伝え、興味のある記事へ進んでもらうことも大切です。

そのため、記事一覧とは別のページとして設計しました。

② 記事一覧｜記事を探しやすくする

次に、記事一覧ページを用意しました。

記事数が増えると、トップページだけではすべての記事を紹介できません。

そこで、公開している記事をまとめて見られるページを作りました。

Noah Labでは、記事をカード形式で表示する設計にしています。

また、カテゴリーを使って記事を探せるようにしました。

PCではカードを複数列に並べます。一方、スマートフォンでは1列にして読みやすくします。

このように、記事一覧では記事を探しやすくすることを意識しています。

③ カテゴリー｜テーマごとに記事を整理する

記事一覧だけでは、特定のテーマに絞って記事を探しにくいことがあります。

そこで、カテゴリーを用意しました。

Noah Labでは、次のカテゴリーを使っています。

• Web制作
• Web制作ツール
• ガジェット
• おすすめサービス
• その他

例えば、CSSについてもっと学びたい読者は、Web制作に関する記事を探せます。

また、Web制作に使うツールを探している場合は、関連するカテゴリーから記事を見つけられます。

カテゴリーは、記事を分類するだけではありません。

読者が興味のあるテーマを見つけるための入口にもなります。

④ 検索ページ｜読みたい記事を見つけやすくする

カテゴリーとは別に、キーワードから記事を探せるように検索機能も考えました。

例えば、読者が「CSS」や「WordPress」と検索すれば、関連する記事を探せるようにします。

カテゴリーでは大まかなテーマから探せます。一方、検索では特定のキーワードを使って探せます。

このように、記事を探す方法を複数用意しておくと、読者が目的の情報を見つけやすくなります。

また、ヘッダーにも検索への入口を設けました。

どのページを見ていても検索へ移動しやすいようにするためです。

⑤ 記事詳細ページ｜本文を読みやすくする

記事詳細ページは、ブログの中心となるページです。

ここでは、タイトルや公開日、カテゴリー、本文などを表示します。

また、文章が読みやすくなるように、見出しや余白、行間も考えています。

Noah Labの記事詳細ページには、サイドバーも配置する設計にしました。

サイドバーには、目次や関連ページ、カテゴリー、ポピュラーなどを入れています。

これにより、記事を読みながら別の情報も探せるようにしています。

ただし、サイドバーをすべてのページに置くわけではありません。

ページの役割に合わせて、表示するかどうかを分けています。

⑥ プロフィール｜ブログの運営者を紹介する

プロフィールページでは、ブログの運営者や発信内容について紹介します。

記事だけでは、どのような人が情報を発信しているのか伝わりにくい場合があります。

そこで、プロフィールを独立したページとして用意しました。

また、ブログを始めた理由や、どのような内容を発信しているのかも伝えられます。

記事一覧とは役割が違うため、別のページとして作ることにしました。

⑦ お問い合わせ｜連絡できる場所を用意する

ブログを運営するうえで、読者が連絡できる場所も必要です。

そのため、お問い合わせページを用意しました。

Noah Labでは、問い合わせフォームを設置する構成にしています。

フォームでは、名前やメールアドレス、お問い合わせ内容などを送信できるようにします。

また、送信後の動作やメールの設定も確認する必要があります。

ページの見た目だけでなく、実際に送信できることも大切です。

⑧ プライバシーポリシーと免責事項

ブログでは、記事を公開するだけでなく、サイト運営に関する情報も掲載します。

そこで、プライバシーポリシーと免責事項を用意しました。

プライバシーポリシー

プライバシーポリシーでは、個人情報やアクセス解析、Cookieなどの取り扱いを説明します。

利用しているサービスに合わせて、内容を整理することが大切です。

免責事項

免責事項では、掲載情報の利用に関する注意事項などを説明します。

この2つは記事を探すためのページではありません。

しかし、ブログを運営するうえで必要な情報を確認できる場所として用意しました。

すべてのページに同じレイアウトを使わなかった理由

必要なページを整理したあと、次に考えたのがレイアウトです。

最初は、どのページにも同じ構成を使えばよいと考えることもできます。

しかし、ページごとに役割が違います。

そのため、Noah Labではサイドバーの有無や記事の並べ方を使い分けています。

このように、ページの目的に合わせてレイアウトを変えています。

さらに、スマートフォンでは横幅が限られます。

そのため、PCでは横に並べる要素を、スマートフォンでは縦に並べることもあります。

ページ構成を考える段階から、スマートフォンでの見え方も意識しました。

ページ構成とWordPressのテーマファイルを対応させる

必要なページを整理したら、WordPressのテーマファイルとの対応も考えました。

WordPressでは、テンプレートファイルを使ってページの表示方法を管理できます。

Noah Labでは、役割に応じてファイルを分ける構成にしています。

例えば、トップページはfront-page.phpで構成します。

一方、記事詳細ではsingle.phpを使います。

また、ヘッダーやフッターは共通ファイルに分けています。

このように役割を分けることで、ページごとの修正や共通部分の管理をしやすくしています。

なお、articles.phpやpage-about.phpなどの固定ページ用テンプレートは、テーマ内で適切に登録して使用します。実際に読み込まれるファイルは、WordPressのテンプレート階層やテーマの設定によって決まります。

ページ構成を先に考えてよかったこと

制作する順番が分かりやすくなった

必要なページを一覧にしたことで、何を作るべきか整理できました。

そのため、思いついたパーツから作るのではなく、ページ単位で考えられるようになりました。

共通部分を見つけやすくなった

ページを比較すると、同じパーツが何度も登場することが分かります。

例えば、ヘッダーやフッターは複数のページで共通しています。

そこで、共通パーツとして管理する構成にしました。

その結果、同じコードをページごとに繰り返す必要がなくなります。

ページごとの違いを考えられるようになった

トップページと記事詳細では、必要な情報が違います。

そのため、ページごとにレイアウトを分けました。

また、サイドバーの有無も使い分けています。

この経験から、同じテーマの中でも、ページの目的に合わせた設計が必要だと分かりました。

WordPressのページ構成を考えるときに意識したいこと

今回の制作を通して、ページ構成を考えるときは、次の点を整理するとよいと感じました。

• サイトの目的は何か
• どのようなページが必要か
• 各ページにはどんな役割があるか
• 複数ページで共通するパーツは何か
• ページごとに変える部分はどこか
• スマートフォンではどう表示するか
• WordPressのどのテンプレートで管理するか

これらを先に考えておくと、デザインやコーディングの方針を決めやすくなります。

もちろん、最初から細かい部分まですべて決める必要はありません。

まずは必要なページと役割を整理します。

その後、制作を進めながら調整していく方法でも大丈夫です。

まとめ

WordPressのオリジナルテーマを作るときは、デザインやコードを書く前に、ページ構成を考えることが大切です。

Noah Labでは、トップページ、記事一覧、カテゴリー、検索、記事詳細、プロフィール、お問い合わせなどを整理しました。

そして、それぞれのページに役割を持たせました。

また、ページごとにレイアウトやサイドバーの有無を使い分けています。

さらに、WordPressのテーマファイルも役割ごとに分けました。

実際に作ってみると、ページ構成は見た目を決めるためだけのものではありませんでした。

HTMLやCSSの設計、WordPressのテーマ構成にもつながる重要な工程です。

これからオリジナルテーマを作る方は、まず必要なページを書き出してみてください。

そして、それぞれの役割と共通するパーツを整理してみると、制作の方向性が見えやすくなります。

関連記事

• デザインをHTML・CSSにしてWordPress化する流れ｜Noah Lab制作の実例
• レスポンシブデザインとは？スマホ対応の基本を解説
• Webサイトのヘッダーをどう設計した？Noah Labの制作で考えたこと
• Webサイト制作の基本的な流れ