WordPressはWEBサイト運用を補助するCMS（コンテンツ管理システム）です。現在多くのWEBサイトでWordPressなどのCMSが利用されていることはご存知でしょうか。
CMSはサイト運用が容易になる便利なシステムですが、デフォルトで決まっている機能が多くあります。
WEBサイト制作において、WEBディレクター・WEBデザイナー・WEBエンジニアと役割がありますが、CMSは特にWEBエンジニアの作業コストを大きく軽減する役割もあります。
では、WEBデザイナーはどの程度WordPressの知識を身に付けるべきなのでしょうか。
この記事では、PHPやWordPress関数などのプログラミング知識を全く身につけずに、WordPressを使用したWEBデザインができるよう、WordPressの基本のURL構造やブログシステムについて解説します。
目次
WordPressとは何か簡単に解説
WordPressは元々ブログサイトを運用するためのCMSでしたが、現在ではニュース機能など、ホームページの一部のみに使用するmicroCMSのような使い方でもよく使用されています。
また、プラグインも充実しておりSEO対策やアクセス解析などの運用コストが低いことも人気の理由です。
オープンソースなので、多くのコミュニティが開発を続けており、現在ではECサイトや会員専用サイトも簡単に作成できるプラグインなども公開されています。
WEBデザイナーはWordPressについてどこまで知っておくべきか
WordPressを用いてのサイト構築は、既存テーマを使用する場合とテーマをゼロから作成する場合がありますが、WEBデザイナーに仕事が回ってきている場合は、主にゼロから作成する場合になるでしょう。
ディレクション時点でしっかりサイトの構造を決めてからサイトデザインを行うのが基本です。WEBデザイナーからWEBディレクターへの転身も十分ありうることを念頭に、WordPressができること・システムの仕様について理解しておくべきだと考えられます。
WordPress初期状態のシステム
WordPressは以下の3種類のページが基本構造です。
- 投稿ページ
- 固定ページ
- 一覧ページ
この他に、追加した画像について表示するメディアページや、投稿に紐づけられるカテゴリーとタグのページもそれぞれ用意されています。
この中からどのページを利用するか、そのサイトの目的によって選択します。
投稿ページとは
投稿ページは、このページのようなタイトルと本文から構築されるページです。初期状態では、カテゴリーとタグという分類機能が用意されています。
カテゴリーとタグは本質は同じもので「タクソノミー」と呼びます（カテゴリーと呼ぶタクソノミー、タグと呼ぶタクソノミーという解釈です）。
カテゴリーは親カテゴリー子カテゴリーのように階層をつけることができるように設定されています。カテゴリーとタグの具体的な使い道が決まっているわけではないので、そのサイトに合った使い道を考える必要があります。もちろん必ずしも使わなければいけないわけではありません。「地域カテゴリー」のような新しいタクソノミーを追加で作成することも可能です。
投稿にはコメントを付ける機能が用意されています。初期状態では名前とメールアドレスの入力が必須になっていますが変更することも可能です。返信機能も用意されています。
このブログで実装されている閲覧回数数や「いいね」数のような値が変動する要素と投稿と結びつけられるカスタムフィールドという機能を新たに用意することが可能です。
固定ページとは
固定ページは、かなり自由度が高いページです。example.com/sitemap/の"sitemap"の部分をスラッグと呼びます。固定ページではこのスラッグを自由に変更することができます。
また、スラッグによってオリジナルのデザインを割り当てることができるので、WEBサイトのお問い合わせページやサイトマップページ、「企業のこだわり」ページなどWEBサイトの様々なページを固定ページで作成します。
固定ページは、親ページ子ページのように階層を設定することが可能です。
一覧ページとは
一覧ページは、投稿ページのタイトルと抜粋やサムネイルのみなど一部分を表示したコンテンツを一覧表示したページです。
2023年05月投稿だけ表示する日付一覧、カテゴリーやタグを表示する一覧、記事の筆者で絞りこむ一覧があります。また、検索した結果表示されるページも一覧ページと同様になります。
一覧ページはコードをカスタマイズすることで、複数のカテゴリーで絞り込む機能を作成することも可能です。投稿の数が増えてくることを想定して、ページングナビゲーションのデザインを作成することも重要です。
一覧ページの詳しいデザイン例はぜひこのサイトの一覧ページをご参照ください。
トップページについて
トップページを企業の特徴や事業の紹介とするデザインのWEBサイトが多いでしょう。このトップページは、固定ページを使用して作成する方法が一般的です。
少し詳しくシステムを説明すると、トップページ用の固定ページと一覧ページ用の固定ページを用意して、それぞれWordPressの設定から割り当てます。
先ほど説明した通り、固定ページは自由度の高いカスタマイズができるので、トップページのようなデザインが特徴的なページを作成することが可能になります。
カスタム投稿ページ
投稿ページはタイトルとコンテンツ本文から構成されるページだと説明しましたが、「最新情報」のような投稿ページとはまた別で投稿ページのような機能を使用したい場面があると思います。
その場合、「カスタム投稿」という機能を使用することで実現できます。
カスタム投稿機能は、"投稿ページ"で使える機能の他に、固定ページのような階層機能を設定することも可能です。
また、新しく作成したカスタム投稿専用のカテゴリー（タクソノミー）を作成することも可能です。
デザインする上で気をつけること
アイキャッチ（サムネイル）画像について
WordPressには、アイキャッチ（サムネイル）画像を投稿に紐付ける機能があります。
WordPressのUI部分ではアイキャッチと書かれており、プログラム部分ではサムネイルと書かれているので、どちらで呼んでいても同じものだと解釈してください。
アイキャッチ画像のアスペクト比は特に指定されていませんが、SNSのOGP機能を考慮して"1.91x1"に設定するのがおすすめです。
アイキャッチ画像は、
クライアント側の入力コンテンツについて
WordPressで作成したWEBサイトを運用するのはクライアントであることが多いと思います。クライアント運用の場合、タイトルやカテゴリー・タグなどの文字数が想定よりも長くなることを考慮する必要があります。
一覧表示やサイドバーのデザインで文字数が長くなった時の想定がしておらず、思わぬ表示崩れが起きる可能性があるので気をつけましょう。
まとめ
今回は、WEBデザイナー向けのWordPressの基礎知識を紹介しました。
PHPや独自の関数や設定があり、サーバーサイドのプログラミング知識がない場合システムの理解が難しいですが、ページ表示の仕組みさえ理解してしまえばプログラミング知識は必要ありません。
さらに、WordPressの細かいシステムの存在を理解しておくことでデザインの幅が広がると思います。
