WordPressによるWebサイト構築において、運用設計で意識していることをまとめました。Webサイトを運用しやすくするための運用設計に重点をおいた内容です。

なぜ運用しやすいサイト設計を意識するのか

Webサイト利用者への情報提供を継続するためです。Webサイトで継続的に情報を発信するためには、Webサイト運用者の運用負荷を減らす仕組みが重要だと考えています。WordPressでWebサイトを構築するということは、継続的な記事公開や定型的な情報管理を前提としているはずです。

実際にWebサイトを運用すると実感しやすいかもしれませんが、Webサイトの継続的な運用には想像以上に負荷がかかります。例えば1つのブログ記事を公開するためには、大まかに挙げるだけでも以下の工程が必要になります。

• 記事原稿の作成
• ビジュアル制作
• 記事内容の推敲
• リンク設定
• カテゴリー分類
• タグ付け
• メタキーワードの設定
• リンクチェック
• 公開日時の設定
• 公開後の表示確認

上記工程の中で特に重要な「記事原稿の作成・ビジュアル制作・記事内容の推敲」に注力できるように、サイト運用のしやすさを高めたいと考えています。

WordPressで管理する範囲を決める

将来的なサイト規模や構造に合わせてWordPressで管理する範囲を定めます。具体的には、Webサイト全体をWordPressで管理するか、更新頻度の高いコンテンツに限定してWordPressを導入するかを検討します。

以下は企業サイトやメディアサイトにおける、WordPressによるコンテンツ管理の例です。

WordPressによるコンテンツ管理の例

• ニュースやブログ（記事）など更新性の高いコンテンツをWordPressで管理する。
• サービス情報、商品、プロジェクト実績、研究実績など各ページで表示フォーマットが決まったデータの管理にWordPressを用いる。
• サイト全体をWordPressで管理する。

Webサイト全てをWordPressで管理することはできますが、全てのページをWordPressで管理することが必ずしも良いとは限りません。

サイトの規模や構造によってはニュースやブログ記事のように更新頻度の高いコンテンツのみをWordPressで管理し、その他のページは静的に構築するほうが良いこともあります。

Webサイトの目的や運用体制に加えて、今後のサイト規模や拡張性、別システムとの兼ね合いなど、複数の要因を総合的に判断した上でWordPressの管理範囲を決めます。

できるだけ運用者の操作手順を減らす設計とする

運用者の負荷をなるべく減らすため、自動化できる箇所は自動化します。例えば運用者の負荷軽減のため、次のカスタマイズを実施する場合があります。

• 記事のURLは日付ベースのURLとして自動で反映されるようにする。
• メタキーワードにはタグが自動で反映されるようにする。

上記の例では「任意のURLやメタキーワードを付けられない」というデメリットがありますが、「記事ごとにURLを設定しなくて良いというメリット」が「任意のURLを付けられないというデメリット」を上回っている場合もあり、サイトの性質や運用体制によって構築方法を判断しています。

また運用者が手動で編集する箇所を自動化することで、人為的なミスを減らせるというメリットもあります。

編集が必要な箇所を限定してデザインに統一感を持たせる

Webページの情報を伝えやすくするためにはデザインの統一感が必要です。そこで統一感を持たせるために編集できる箇所を限定します。

例えば記事ごとに「見出し文字サイズや文字色がバラバラで統一感が無い」と、記事が読みにくく信頼性に欠けた印象を与えます。結果的にWebサイトの印象悪化につながります。具体的な改善方法は、以下のルールであらかじめ文字や余白のデザインを定めておくことです（CSSでスタイリングします）。

• 見出しや本文などの文字サイズと文字色を限定する。
• 画像や動画も定められた表示方法に限定する。
• コンテンツ（ブロック）ごとに適切な余白を設ける。

このルールに沿って記事を作成することでページごとのフォーマットが統一されていきます。結果として利用者が読みやすい記事になり、Webサイトの品質が向上します。デザインの統一感を維持できるようになれば、次のステップとしてより使いやすくするための機能追加などを検討していけます。

共通項目はテンプレート化（自動化）を検討する

全ての記事に共通する項目は記事ごとに書くのではなく、テンプレートファイルに記載して自動的に表示されるようにしています。

例として、「記事の最後に著者情報（著者の名前やTwitterアカウントなど）を表示する」場合は、著者ごとのアカウントを用意してアカウントごとに著者情報が自動で表示されるようにします。

これにより記事ごとに著者情報を記入する手間が省けて記載ミスも防げますし、著者情報を編集した場合には過去に公開した記事も含めて全ての記事で一括編集されるため、管理が楽になります。

記事内の画像を拡大できるモーダルウィンドウ機能を自動で付与する

これは最近になり取り入れ始めた実装方法ですが、記事内の画像を拡大するためのモーダルウィンドウ機能を自動で付与するようにしました。

これによって運用者が画像ごとにモーダルウィンドウ設定をしなくても自動的に反映されるため、運用負荷を下げつつ利用者の「画像を拡大して見たい」という要望に応えられます。

難点としては全ての画像に対してモーダルウィンドウ機能が付与されることですが、「ブログ記事内の画像の横幅は640px以上とする」というようなルールをあらかじめ定めておくことで解決できると考えています。

わかりやすい運用マニュアルを用意する

WordPressの基本操作は公式ドキュメントや市販の書籍を読むことで把握できますが、Webサイト独自にカスタマイズした項目については運用マニュアルが必要になります。運用マニュアルはマニュアル自体を更新しやすいように、現時点ではGoogleスライドを用いた運用方法が良いと考えています。

Googleスライド管理による運用マニュアルの利点は、運用マニュアルの編集時点で最新の内容に更新されることです。従来のようにローカル環境のファイルを編集してPDFに変換し、関係者へメールで一斉送信するという方法と比べて早くて効率的です。以下は過去にGoogleスライドで作成したマニュアルの一部です。

決まったフォーマットで記事を管理する場合はカスタムフィールドで実装する

サービス実績や商品情報、コラム枠など、記事ごとに決まったフォーマットや項目を掲載する場合はカスタムフィールド機能を用いて実装します。

コードエディタを駆使して記事ごとに入力していくことは可能ですが、運用者に大きな負荷がかかってしまいますし、複数記事の一括編集に対応できないといったデメリットもあります。そのような場合の解決手段としてカスタムフィールド機能を用います。カスタムフィールドを用いることで、次のメリットがあります。

• 管理画面に定型の入力欄を設けられるためコードエディタによる記述が不要になり、運用者が情報を入力しやすくなる。
• 入力項目が変更になる際にはテンプレートによる複数記事の一括編集ができる。

「項目数が多く順序が一定ではない」という状況では、ACF PROプラグインの柔軟コンテンツ機能を用いることで解決できる可能性が上がります。以下はACF PROプラグインを用いてカスタムフィールドを編集した、当サイトの制作実績の編集画面です。

プラグインはなるべく使わない

上記でACF PROプラグインについて触れておりますが、WordPressには便利な機能を追加できるプラグインがたくさんあります。ですがプラグインは限定的に使用しています。主な理由はプラグインが増えることによる、次の問題をなるべく回避するためです。

• サイト表示が遅くなる
• WordPress本体のアップデートにプラグインが対応するかが不明
• プラグイン同士の相性問題の発生

特に無料のプラグインはいつまでサポートが継続されるか不明なため、プラグイン自体のアップデート頻度や安定性を検討した上で、なるべく限定的に導入するようにしています。

アイキャッチの画像比率を統一してWebサイト全体を設計する

WordPressには記事ごとにサムネイル用の画像を設定できる機能があり、そのサムネイル画像はアイキャッチ画像と呼ばれています。アイキャッチ画像は記事を探すときに役立つため、トップページや記事一覧ページ、関連記事のサムネイルにも用いられます。

そのアイキャッチ画像を効率的に運用するために、基本的には16:9の比率でサイト内の画像表示を統一しています（16:9の代表的なサイズでは1280×720や1920×1080などがあります）。

画像比率を統一することのメリットは、運用時に別比率の画像を書き出す手間が軽減できることです。これまでの自身のサイト運用経験や依頼主の運用サポート経験から実感したこととして、サイト内で画像を流用できる状態にしておくことは運用負荷軽減のために特に重要です。

アイキャッチ（サムネイル）画像の運用負荷はサイトの継続性に大きく影響するため、その解決策として画像比率を統一して設計しています。画像の縦横比（アスペクト比）を統一することのメリットや理由のついては、別の記事でより詳しく書きました。

• メディアサイトやECサイトでアイキャッチ画像の縦横比（アスペクト比）を統一したほうが良い理由

おすすめ記事を表示する方法を検討する

Webサイトのトップページに掲載するおすすめ記事の管理方法を検討します。何件の記事を表示し、どのような表示方法とするかをサイトの目的に合わせて調整します。

例えばトップページにおすすめ記事を表示する場合は、「Recommendというタグがついた最新の記事を3件表示する」といった仕様として設計することが多いです。特定のタグを表示条件にすることで、記事の出し分けや今後の拡張がしやすくなります。

機能追加は慎重に検討する

WordPressはCMS（コンテンツ管理システム）として多くの機能を盛り込むことができます。ですが多機能であることは操作手順を増やしてしまうことにつながり、結果的に運用者の負荷を増やしてしまう可能性があります。

Webサイトの初期構築（初回リリース時）においては特にですが、過剰な機能追加はなるべく避けて、必要な機能に抑えて構築したほうが良い場合が多いと感じます。また公開後の機能追加の際にも運用のしやすさを重視します。運用に沿った機能追加や調整によって効率的にWebサイトを強化していけるためです。

最後に

運用設計のような仕組みの設計（デザイン）はWebサイトの表示上のデザインとは異なり、利用者の目に見えるものではありません。

その一方でWebサイトから有益な情報を発信し続けるためには、運用者のための「運用しやすい仕組み作り」も重要だと考えています。今後もより良い運用方法を模索していきたいと思っています。この記事の内容がWebサイトに関わるかたの負荷軽減につながれば幸いです。