初めまして。広報・IR室でディレクター兼デザイナーを担当している山下と申します。今回は当社の企業サイトをリニューアルするにあたって特に注力した、 「運用効率を向上させるサイト構築のポイント」というテーマで、 構築、運用をした結果、重要度が高かった点をいくつかピックアップして紹介させて頂きます。



※今回のリニューアルでは、PCサイトの日本語・英語サイトとスマートフォンサイトを刷新しています。


1.運用体制を明確にする

プロジェクト初期は決まっていないことが多いためか運用体制の話は後回しになりがちです。しかし、サイト設計の初期段階に明確にしておくことは効率化を図る上で意外と重要です。

運用体制(人員数、スキル等)が正確に見積もれていれば、使えるリソースから逆算して効率性、効果性が高い合理的な設計をすることができるからです。

逆にここが不十分なまま進んでしまうと構築フェーズから運用フェーズにバトンタッチした途端にミスマッチが発生して、想定以上に運用負荷がかかる仕様になってしまったなんてことになりかねません。

初期段階にわかる範囲でかまわないので更新範囲と頻度、担当をリストアップして体制図を作成することをお勧めします。
コンテンツなどを企画する際に関係者にそれを共有しておけば、運用時のイメージを持ちながら判断することができます。また他部署と連携する場合は、合わせて連携フローとルールを用意しておくと運用時にスムーズに進める事ができます。


2.マルチデバイス対応は要件に合った手法を選ぶ

スマートフォン、タブレット端末の急速な普及に伴い、マルチデバイス対応は必須になりつつあります。運用効率の観点からみると、対応するデバイスが多い程、コストや運用負荷がかかるので、どこまで、どのように対応するかは慎重に検討する必要があります。

今回はスマートフォンサイトに関しては2度目ということもあり、要件は明確でしたが、マルチデバイスの対応手法の選択には検討に検討を重ねました。
まずマルチデバイス対応手法の種類を理解し、次にWebサイトの要件と照らし合わせて、プロジェクトに最も適した手法を選択することをお勧めします。

マルチデバイス対応手法を理解する

以下の3つが主なマルチデバイス対応手法になります。簡単にですがメリット・デメリットを確認していきましょう。

(1)自動変換サービス

変換エンジンを用いて「PC→スマートフォン」などPCサイトのソースを各デバイス向けに自動変換する方法。

既存のPCサイトを変換するので他の対応方法に比べて導入コストかかりません。ただし、自動変換となる分、デザイン面など細かな制御ができません。

(2)レスポンシブWebデザイン

全端末共通のHTMLファイル(ワンソース)を一つ用意し、画面サイズに応じてレイアウトを最適化する方法。
HTML開発のみで実装できるためサーバーなどを用意する必要がありません。またワンソースのためコンテンツの一元管理ができ、運用が効率的に行えます。逆にワンソースであるがゆえに各デバイスで情報構造を変えることができません。

(3)マルチデバイス対応CMS

コンテンツをCMSで一元管理し、テンプレートをデバイスごとに用意することで最適化したサイトを構築する方法。
コンテンツが一元管理でき、各デバイスに最適化することもできます。理想的な出力が可能ですが、CMS用のサーバー用意など初期導入のコストがかかります。

Webサイトの必須要件の洗い出し

次に構築するWebサイトの必須要件を洗い出して、どの手法が要件と合致するか確認しましょう。今回のリニューアルの要件では、PCサイトのほぼ全てのページをスマートフォン対応にすることと、グローバルサイトもリニューアルすることが決まっていました。1000ページ近い規模で、且つ運用人員が少数であることを勘案すると以下の必須要件となりました。

(1)コンテンツの一元管理

PCサイト、スマートフォンサイト、グローバルサイトなど複数のサイト運営を行う場合、コンテンツの一元管理ができないと、一度の更新に倍以上の作業が発生するため。

(2)デバイス毎のコンテンツの出し分け

PCサイトのほぼ全ページをスマートフォン対応にすることを考えると、ページによってはコンテンツ量や内容を調整できないとデバイス毎の最適化を図るのは難しいため。


上記の必須要件と各マルチデバイスの特性を照らし合わせ今回のリニューアルでは、(3)マルチデバイスCMS対応を選択しています。 サイト規模や予算、運用方針で最適な手法は違ってきます。プロジェクトに最適な手法を選択できるかどうかは効率化の根幹に関わり、後から変更するのは難しいのでよく検討しましょう。


3.可能な限りパーツ、画像の共通範囲を広げる

当社のコーポレートサイトは、スマートフォンサービスの情報を掲載しているため更新上げ下げが多く、関連ページ、各デバイスごとに作業していくとそれだけで1日の作業工数が埋まってしまいかねません。
デバイス毎の作業はマルチデバイス対応手法で軽減できるとして、さらに効率性を高めるなら、複数ページで共通のパーツや画像を流用できるようにするのが有効です。例えば、一つの画像を比率は変えずサイズだけを変えて使用できるように設計すれば、最も大きい画像を作れば済んでしまいます。

実際にリニューアルしたサイトから画像の例を挙げてみます。
長方形と正方形の2つのパターンが複数ページで共通して使われています。

上記は、PCサイト内だけを挙げていますが、スマートフォンサイト、グローバルサイトもほぼ同じ画像を流用できています。またCMSを使っている場合は、画像だけでなく、ページやパーツ単位も共通化することができより効率的なサイト運営をすることが可能です。


おわりに

以上、いかがだったでしょうか。リニューアルを通じで運用効率の向上に特に効果的であったポイントをまとめて紹介してみました。皆様のお役にたてば幸いです。
当社のコーポレートサイトは、機動的に日々アップデートしていく方針ですので、よろしければ時折チェックしてみてください。

Special Thanks
当社コーポレートサイトのマルチデバイス対応は、株式会社ディバータが提供している「RCMS」を利用しています。本稿のテーマである運用効率の向上にも強力なバックアップをして頂きました。この場を借りてお礼申し上げます。

RCMSについてはこちら