デザインやサイトの機能と違い、「運用を楽にする」工夫は地味で、分かりづらい部分があります。
しかし、97年からホームページを20数年間作成/運用し、自らも更新してきた人間として、「運用が楽であること」は最も重視している部分であります。

ECサイトのように、否が応でも毎日のチェックが必要なサイトと違い、コーポレートサイトやブランドサイトはオープンした後放置されがちです。
場合によっては「リニューアルしました」という唯一の更新が数年前、ということもよくあります。

そのひとつの理由として、コンテンツの更新が面倒、担当者がいないとわからない、記事を追加するときのルールがあるのか無いのかわからない、引き継ぎも面倒、等があります。

また、通販サイトと比べてサイトの目的（ブランディングやBtoBのお問合せ数の向上、営業ツールとしての活用）が長期的な場合も多く、更新の優先度が低くなることも挙げられます。

しかし、現在のSEOは広告面や技術はもちろん、「現場での頻繁な更新と改善」の繰り返しがなにより大切です。

しかしながら、ほとんどのウェブ制作会社においては、自らがウェブのプロである為、あまりウェブのことを知らないスタッフが更新することを軽視しがちです。
ちょっとした更新でも制作会社に依頼する必要があったり、PHPプログラムの修正が必要になったり、一回の変更で済むはずの修正を、数ページに渡り手作業で更新するようなサイトでは、いつしか日々の更新から遠ざかってしまいます。

多くの場合、このような設計上の課題は後から気が付きます。
提案においてもデザインや機能は目を引きますが、「管理画面をこうする」「情報はここにまとめて、後で使い回せるようにする」「タグを極力使わなくてすむようにする」等の工夫は地味で、無視されがちです。
結局、数年もたたないうちにリニューアルの必要に迫られたり、中止したサービスがいつまでもサイト内に残ったり、担当者でもどこにどういった情報が掲載されているかわからないサイトになってしまいます。

本資料では、更新に関する不必要なハードルは極力取り除き、現場で簡単に運用できるサイトにする為に弊社が実際に行っている施策をいくつか紹介します。

投稿 １、はじめに-ホームページの更新を楽にする必要性 は studioDoghands に最初に表示されました。

ホームページ運用ソフトの使い方がわからない

WordPressは、運用するだけであれば基本的にはブログと難易度は変わりませんが、出来ることが多く、管理画面の項目の数を見ただけでやる気が無くなる事があります。

下の画像は弊社サイトの管理者用の管理画面で、ここではホームページに関する多くの項目が変更可能です。しかし、項目の量が多く、記事を追加したり、商品のスペックを書き換えたいだけのスタッフには戸惑う部分もあると思います。

そこで、更新だけを目的とした編集用のアカウントを作り、普段使わない部分は隠す等の対策を行います。

HTMLタグが分からない

コンテンツを追加修正する場合、どうしてもHTMLタグを使う場面が出てきます。
しかし、下記の工夫でハードルを下げることは可能です。

使うタグを絞り込む

通常はh2~h4、太字、リンク、箇条書きなどのタグのみ使うルールを設定し、共有します。

特別なクラスやIDは排除する

よく見かける例
<h3 class=”product_title” >オシャレなテーブルセット</h3>
<h4 class=”product_spec” >商品詳細</h4>
product_titleのクラスをつけることで、太字にしたり色を変えたり、特別な装飾を加えています。

しかし、この形式はルールを覚える必要があり、担当者が変わるとクラスを付与し忘れたり、何よりも面倒です。

そこで、
<h3>オシャレなテーブルセット</h3>
だけでOKにしておき、後はCSS側で条件を判断、商品ページの見出しなら青にしよう、のような設計にします。

技術的な補足

シンプルなタグでCSSを反映する為に、Bodyタグに現在の状況を表すクラスを自動で付与します。例えばカスタム投稿タイプ、アーカイブかシングルか、等の情報です。
これにより、同じ<h3>タグでも、ブログと商品ページでは異なる装飾と施す、といった事が可能です。

投稿 ２、ホームページの知識に関するハードルを下げる は studioDoghands に最初に表示されました。

「そこは一旦テンプレートをダウンロードして、17行目の・・・」といった面倒を無くす

現在のホームページ制作会社が作成したサイトでも非常に多く見受けられる、運用のハードルを上げてしまう設計です。
例えば、会社のキャッチフレーズを変えたい、ナビゲーションの名称を変えたい、バナーをひとつ入れ替えたい、となったときに、「それはsingle.phpの173行目を変えてください」と言われるような設計です。
制作会社のスタッフにとってはPHPコードの編集は日常的な作業かもしれませんが、一般的な会社のウェブ担当者にとってはFTPをつなげたり、PHPというプログラムのコードを触ることは気が重い作業です。

せっかくのWordPressの機能を使っていない

下の画像はWordPressのナビゲーションを修正する画面です。
この機能を使えば誰でも簡単に文言や順番を変更することが可能です。

しかし、下のように、ナビゲーションメニューやコンテンツに関するデータをPHPファイルに直接書き込む設計があります。

弊社では、極力WordPressの機能を利用し、装飾や特別な機能が必要な場合でも、将来変更の可能性のあるテキストなどは極力コード内への記述を避けます。

日々更新すべき情報を、PHPに手書きで記載してしまっている

その他、弊社が目にした実際の例です。全てウェブ制作会社が作成したホームページです。
・日々増える商品やサービス名をPHPに記述している
・トップページのお客様の声一部抜粋、のようなカスタム投稿タイプの抽出で済ませるべき部分をいちいち手書きしている
・スタッフ紹介のような、将来変更が確実な記事をPHPに書き込んでいる

これでは、ちょっとした変更でもPHPコードを触る必要があり、WordPressの利点が生かされません。
PHP内に商品などの固有名詞、会社情報やスタッフ等の変更が確実な情報、サイトのキャッチフレーズのような、SEOに関するテキストなどが書き込まれている設計は要注意です。

例えば商品名を直接PHPに書き込んでいると、その商品名に変更があった時、終売アイテムになった時など、このページでは正確な情報、あちらのページではいつまでも古い情報のまま、ということが起こります。
この場合は、投稿タイプやカスタムフィールドから一意的なデータを取り出し、一回の変更でサイト全体に反映させる設計にすべきです。

投稿 ３、現場でPHPコードを触る必要性を減らす設計 は studioDoghands に最初に表示されました。

同じ情報を、複数のページで「別個に」編集する必要があるサイト

この設計も良く見かけます。
例えば、「スタッフ紹介」。
トップページのスタッフ紹介セクションと、サービス紹介のスタッフ紹介セクションが連動しておらず、退職者や新入社員が出た場合、二度手間になる設計です。
この設計で数年経つと、ページ毎に情報も異なってしまったり、退職済のスタッフが詳細されているコンテンツが残ってしまいます。
他にも、一覧では無くなっている、とっくに終売になっている商品が、別のコンテンツでひっそりと表示されつづけているパターンです。
また、商品を追加する度に、サイドバーにも手作業でリンクを追加しなければならないサイトもこれに入ります。

弊社では、同じ情報は極力ひとつのソースから読み込み、修正の手間を軽減しています。

『変わる可能性のあるデータ』がサイト内に「テキスト」として点在しているサイト

非常に多く見受けられる、良くない設計です。

例えば、電話番号。
電話番号が、会社概要やヘッダーだけでは無く、あらゆるページに直に書き加えられているサイトがあります。

ブログや商品紹介ページに「興味のある方は担当○○まで（0120~）」のように文章として記入してしまうと、将来の変更時に大変です。
通常は変更し忘れ、サイト内に異なる電話番号が点在することになります。

電話番号だけでは無く、用語の説明、保証に関する記載、「福岡で愛され続けて○○年」の年数など、「サイト上に複数存在している同一のテキスト」は、最初からデータをひとつにしておき、将来一括で簡単に変更できるようにしておくべきです。

弊社では、よく使う情報はショートコード（例[doghands tel]）化しておき、将来の変更に備えます。

技術的な補足

ショートコードはWordPressが提供している機能の一つで、コンテンツ内でのPHP関数の実行を可能にする技術です。
お知らせの一覧を表示したり、プラグインによりイベントカレンダーを表示したりします。
これは自作が可能で、このショートコードを作成しておくことで、[doghands tel]と電話番号を置換したり、[doghands business_hours]とすることで営業時間のテキストと置換することが可能です。

投稿 ４、重複する作業を減らす設計 は studioDoghands に最初に表示されました。

ホームページ、特にコーポレートサイトやブランディングサイトではクオリティの高い写真や画像の利用は効果的です。
しかし、「情報」にも画像を多用した場合、デザイナーがいないと更新できないサイトになってしまいます。

デザイナーがいないと修正できないサイト

情報を「絵」で提示しているサイトは更新が面倒です。

通販サイトのキャンペーンバナーなどは「絵」であるメリットが大きいので利用も良いのですが、コーポレートサイトでの更新面を考えるとテキストをCSSで装飾する方が優れています。

例えば、
・当社の3つの強み！
・注文までの7つのプロセス
・当社の人気セミナーベスト5を解説！
などを絵（バナー）にしてしまうと、変更が面倒です。検索にもインデックスされません。
写真やイラスト含めた画像と内容を伝えるテキストデータは分離しておくのが、運用しやすいサイトのポイントとなります。

弊社では極力画像とテキストはデータとして分けておき、バナーのように画像の上にテキストを配置したい場合でも、CSSで処理します。

画像の場合、キャンペーンの日付が変わった場合すぐに対応できません。

画像とテキストを分けておけば、情報の修正は簡単です。

レスポンシブを意識しなくて済むコンテンツ構成

画像のビフォア・アフターなど、左右配置を基準にしない方が、運用/スマホ等での閲覧にメリットがあります。
左右配置はコードも多くなり、上下配置は簡単です。
場合によってはPCでは左右、スマホでは上下のパターンも有ります。
文章面では「右の画像では・・・」のように、左右に言及しないのがコツになります。

弊社ではレイアウトを作成する際、左右配置に意味を持たせないことを念頭に置いています。

投稿 ５、日々の更新ではテキストを画像で扱わない は studioDoghands に最初に表示されました。

ワードプレスには「カスタム投稿タイプ」という機能があります。
これは、ブログのように「増え続けるコンテンツ」や、「メインのコンテンツから分けて置きたいコンテンツ」に利用します。
※技術的な設定方法は省略します

カスタム投稿タイプを利用しないと運用が面倒に

弊社がリニューアルを担当した、実際のサイトの例です。
そのサイトでは400ページ近くの記事が「固定ページ」にまとめられていました。
その中には、「お客様の声」や「セミナー情報」「サービス」などが雑多に存在していました。

このような設計の場合、サイトの更新はどうなるでしょうか？
お客様の声、セミナー情報、サービスを追加する度に、親ページやトップページ、場合によってはサイドバーなどのリンクも忘れずに更新しなければなりません。
また、削除の場合も同様に、他のページに情報が残っていないか確認が必要です。
終売アイテムがいつまでも商品一覧ページに掲載されており、クリックすると404ページになるようなサイトがこの典型です。

また、このままコンテンツを増やし続けるとページの把握も大変で、数回引き続きが発生すれば誰もページ構成など分からなくなり、結果として似たようなページが量産されてしまいます。

カスタム投稿タイプを利用して分かりやすく簡単な運用を行う

そんなサイトにならないように、設計段階から適切にコンテンツを分類する必要があります。
この際に利用するのが「カスタム投稿タイプ」です。

カスタム投稿タイプのメリット

上記の例で言えば、「お客様の声」「セミナー情報」「サービス」などを、それぞれ別のカスタム投稿タイプで作成します。
これにより
・管理画面が見やすくなり、担当が誰でも更新できる
・それぞれの投稿タイプごとに、テンプレートを用意できる。例えば「セミナー情報」投稿タイプでは、「講演者」「開催場所」「日時」などの記入欄を設ける等
・情報をまとめ、使い回しができる。例えば「お客様の声」を追加した場合、特に作業をしなくても「お客様の声一覧」「トップページ」「サイドバー」などに反映できる
・同様に、削除の場合も自動で反映できるので、終売アイテム、退職スタッフ、停止したサービスなどがずっとサイト内に残ることは無い
・それぞれの投稿タイプに、専用のカテゴリーを追加して、まとめて表示できる。例えば「お客様の声」に「業種」カテゴリーを追加。「製造業」のお客様の声のみまとめて表示、等

カスタム投稿タイプを利用しなくても良い場合

例えば、「お客様の声」が5件程度であり、今後も増えないのであれば固定ページ1枚の方が更新も楽でしょう。
・似たようなコンテンツが
・増え続ける
場合に、カスタム投稿タイプの利用を検討します。

カスタム投稿タイプを利用することが多いコンテンツ

・コラム
・ブログを分ける場合（お知らせと社長ブログを分ける、等）
・セミナー/イベント情報
・お客様の声
・よくあるご質問（質問と答えを1記事とし、一覧ページにまとめる）
・商品/サービス情報
・スタッフ/講師/医師情報等
・店舗情報（複数展開の場合）
・資料ダウンロード

固定ページに100記事以上存在する場合は、コンテンツを分離することが運用を楽にすることに繋がるか検討しても良いと思います。

投稿 ６、「似たようなコンテンツが増える」場合はカスタム投稿タイプを利用 は studioDoghands に最初に表示されました。

カスタムフィールドとは、WordPressで利用できる機能のひとつで、記事の作成時に独自のフィールドを追加します。
特に商品情報など、多くの決まったフォーマットを記入する必要のあるコンテンツでこの機能を利用しない場合、記入ミスや手間が大きく増えてしまいます。

※フォーマットがあると楽なコンテンツの例
お客様の声→「お客様名」「感想」のフィールド
よくあるご質問→「質問」と「答え」のフィールド

例として、下記の項目が必要なコンテンツを想定します。
商品名、説明、価格、サイズ、素材、カラー、保証についての文言。
※実際のホームページでは、もっと多くの項目が必要になります。

カスタムフィールドを利用しない場合

これが通常の入力方法です。

この場合、下記のデメリットがあります。
・HTMLタグの知識が必要
・タグを間違えると表示が崩れる
・「商品名」や「スペック」など、決まりきったタイトルも入力しなければならない
・もしレイアウトを変える、例えばサイズと価格の順序を入れ替える場合、全ての記事を入れ替えなかえればならない
・「保証について」の内容のように、統一された内容も入力しなければならない
・担当者によってデザインを変えてしまうかもしれない。
・担当者により、用語や単位（サイズをmmからCM）を変えてしまうかもしれない
・セミナーの会場が「東京」か「福岡」の2択なのに、毎回アクセス方法や地図を入力している

カスタムフィールドを利用する場合

カスタムフィールドを設定した場合、管理画面はこのようにシンプルになり、追加修正が容易になります。
フィールドはセレクトボックスやテキストエリア、特定の投稿へのリンクなど、様々なものが利用可能です。

技術的な補足

これらの表示テンプレートはPHPで作成する必要があります。

弊社では、投稿内容を精査、カスタムフィールドの利用にメリットがあると判断した場合、積極的に活用しています。

投稿 ７、カスタムフィールドの適切な利用で入力を効率化 は studioDoghands に最初に表示されました。

「これは制作会社に聞かないと」「これは○○さんに聞かないと」という要素が多いホームページの設計は避けるべきです。
特殊な設定や、現場で判断しなければならない要素は極力避け、新人スタッフ等への引き継ぎも容易にしておくべきです。

この為、弊社では
・技術的なドキュメントは全て共有
・簡易的なマニュアルを共有
の他、
・プロジェクト中に、スラッグ（アドレス）や画像の命名ルールをお客様と作成
等も行っています。
これは、例えば新人スタッフに「○○の商品を追加しておいてください」とお願いした時に、
・この画像はどんな名前にしよう
・タイトルはこれで良いのか？
等で迷わないようにする為です。また、社内で命名ルールを統一しておかないと、データの重複も出てきてしまいます。

設計に関しても、先に記載したPHPコードの修正の必要性など、プログラマー側の理由による仕様は避け、極力管理画面で目で見て分かる形を心がけています。

投稿 ８、属人的な要素を低減し、引き継ぎを容易に は studioDoghands に最初に表示されました。