WordPressサイト構築でディレクター・デザイナーが知っておくべきこと

2024.07.16

CMSを利用したサイト構築を苦手としている人はいませんか？
カスタム投稿にカスタムフィールド、カスタムブロックなど、専門用語が多くて嫌になる人もいるでしょう。

今日はそんな人にも、わかっているつもりの人にもおさらいできるようWordPressでサイトを作る際に最低限知っておきたいことをまとめてご紹介いたします。

WordPressとは？

2003年に個人向けのブログソフトウェアとしてインターネット上の有志たちによって開発されたオープンソースのソフトウェアです。
カスタマイズや機能追加を容易にできるよう「テーマ」と呼ばれるデザインテンプレート（のようなもの）の集まりや、プラグインと呼ばれる機能拡張によってサイトを構築・カスタマイズすることができます。
テーマにはトップページ、記事一覧ページ、記事詳細ページ、検索結果ページ、404 not foundページなどのテンプレートが含まれています。
トラムでは市販のデザインテーマによるサイト制作を行なっているのではなく、オリジナルのテーマを作成してサイト構築を行なっています。

WordPressの構造について

大雑把に分類すると投稿と固定の２種類になります。

投稿タイプとは？

お知らせ一覧・詳細など蓄積していくコンテンツで利用する形式です。
元々は個人向けのブログソフトウェアとして開発されたことから、記事を日付で管理することができ、記事ごとに日付による並び替えや絞り込みができます。
さらにカテゴリやタグなどによるジャンル分けによる表示の切り替えもできます。
具体的には以下のようなコンテンツで利用することが多いです。

お知らせ
製品・サービス
制作実績
導入事例
先輩社員インタビュー
店舗一覧・詳細
求人情報（募集要項、他職種での応募などに利用）
よくいただく質問
┗量が少ない場合や増やす予定がない場合は利用しないことも多い）

固定ページとは？

企業ホームページでの「企業情報」ページや「アクセス」ページなど独立したコンテンツに利用する形式です。
親ページを指定することで親子構造を作ることができます。
具体的には「会社情報」という目次ページの配下に「企業情報」、「沿革」、「強み」などを配置するなどにより、類似するページをグループとして階層構造を作ることができます。
具体的には以下のようなページで利用することが多いです。

企業情報
会社概要
企業理念
沿革
企業の強み
事業内容
アクセス
採用情報

エディタの違い

WordPressでのページ制作/管理方法は、HTMLコードを記述するテキストエディタと、ノーコードで文章を書いたり画像を挿入したりしながら作成するビジュアルエディタまたはブロックエディタという方法があります。
それぞれに一長一短があるため、デザインによる接客力を重視する必要があるのか、更新のしやすさを重視するのか、そのページの役割に応じてサイト設計する必要があります。

テキストエディタとは？

テキストエディタはHTMLコードを記述して作成するため、デザイナーが作成したデザインを反映しやすくデザインの自由度が高いメリットがありますが、HTMLや CSS、JavaScriptを理解していないと更新・運用ができないデメリットがあります。
▼テキストエディタの例

ビジュアルエディタとは？

ビジュアルエディタはWordPressのバージョン5未満で利用されていたエディタで見出しの設定や太字などの文字装飾のほか、箇条書き（番号付きリスト含む）、画像の挿入、要素のセンタリング、引用、リンク設置など基本的なページ制作に必要な編集が備わったものです。

当初、WordPressはブログ作成目的でしたので、レイアウトなどデザイン要素は盛り込まれていないため、ノーコードでページ制作はできるものの表現力は乏しいものでした。
▼ビジュアルエディタの例

ブロックエディタとは？

WordPressバージョン5になりビジュアルエディタに変わってブロックエディタが搭載されました。
ブロックエディタは情報をブロックという単位にわけ、情報の見せ方に応じたブロックパーツを組み立てる感覚でページ制作を行います。

代表的なブロックは本文を記載するための段落ブロック、見出しを記述するための見出しブロック、箇条書きのためのリストブロック、引用記述のための引用ブロックなどビジュアルエディタにも用意されていたものから、表組みを作成するためのテーブルブロック、コンテンツエリアを分割したレイアウトが作れるカラムブロック、画像の上にテキストを掲載できるカバーブロック、リンクボタンが作成できるボタンブロックなど、レイアウトの幅が大きく広がりました。
▼ブロックエディタの例

デザイン制作時に留意すべきこと

WordPressを利用してレスポンシブデザインなサイトをデザインをする際、留意すべきことがいくつかあります。

エディタによる制限

ビジュアルエディタにしろブロックエディタにしろ、figmaやAdobe系ツールのように自由に文字や画像を配置することはできません。
ビジュアルエディタもブロックエディタも１pt単位などで文字のサイズを変えたり、文字色をカラーパレットなどで変えたりすることはできません。

テンプレート（動的表示）による制限

お知らせ一覧などに代表されるページはエディタなどでは制作できず、あらかじめ用意されたデザインフォーマットでしか表現できません。
アイキャッチ画像の比率をできれば記事詳細ページと同じ比率にするのが好ましいです。
- 画像サイズを変える場合は上下または左右に余白を作って表示するか、上下または左右のどちらかをトリミングして表示することになります。
文字数が変わることで二行や三行になることを想定して行間や最大表示文字数をあらかじめ決め、表示しきれない文字数の処理をどうするのか決める必要があります。

レスポンシブによる制限

デバイスの画面サイズによって改行位置を可変させる必要があるため、改行位置を固定するのは好ましくありません。
┗デバイスの画面サイズによっては改行が連続するなど、より不自然な改行になる場合があります。

書体に関する制限

自身が利用しているデバイスに含まれていない書体は利用できません。
┗小塚ゴシックをサイトのデザインに利用しても、小塚ゴシックをインストールしているデバイスでなければ再現できません
WEBフォントを利用すればどのデバイスでも同様にその書体で表示されるが、サイトデータと同時にインターネットからダウンロードされる＆フォントデータは重たいため反映に時間がかかります。
WEBフォントであってもウェイトによっては反映されないものもあります。

カテゴリとタグの違い

カテゴリもタグもそのページが何の種類の情報か？を表すことには変わりません。
細かな違いや使い分けるための判断は以下の通りです。

カテゴリとは？

カテゴリは階層構造を持った分類の整理に利用します。
以下に具体例をご紹介します。

上記の例では

野菜｜親カテゴリ
根菜・葉物野菜｜子カテゴリ
じゃがいも・白菜｜孫カテゴリ

というように分類されます。
このように幾重にも階層構造を持つ分類を行う場合はカテゴリを利用すると便利です。

タグとは？

タグは階層構造を持たない情報の分類に使います。
カテゴリを横断した分類にも使えるのが特徴です。

ビタミンC
鉄分

カスタムフィールドとカスタムブロックの違い

カスタムフィールドとカスタムブロックは、どちらも特定の情報表示という点においては同じですが、管理画面での実装方法が異なります。

カスタムフィールドとは？

カスタムフィールドはWordPressの本文・記事以外にも文字や画像などを登録したり、他のページや情報を関連づけたりするのに利用するフィールド（項目）です。
文字や画像の登録に利用する際、あらかじめ入力する内容が定められているので、登録者は迷うことなく登録できるのがメリットです。
▼カスタムフィールの参考例