マルチデバイスのサイト運用負荷をレスポンシブWebデザインで軽減する
Posted by 角谷 仁
今回はコンテンツをレスポンシブWebデザインで運用することで、運用負荷を軽くするアイディアをご紹介したいと思います。
レスポンシブWebデザインはフォーマット化すれば怖くない
すでにご存じの方も多いかと思いますが、レスポンシブWebデザインはワンソースでマルチデバイスに対応できるというのが大きなメリットです。デバイス別でコンテンツを作らなくてよいので、運用負荷が軽くなります。しかし一方で、“なんだか難しそう”“デザイン表現に限界があるんでしょ？”ということで避けられるケースがあるのも事実かと思います。
それをクリアするために、最近では必要なレイアウト分をパターン化して運用フォーマット（テンプレート）を構築するケースが増えてきています。フォーマット化するので、運用も簡単で負荷は軽くなります。ポイントはデザインクオリティと運用の柔軟性を保つことです。以下に事例をご紹介します。
事例：日々作成が必要なLPや特集ページをフォーマット化
日々たくさんのページ制作がある場合、スマートフォン・PCで分けてページ作成するのは膨大なコストにつながります。可能ならワンソース化したい部分です。
LPや特集ページはグラフィカル表現が必要だから・・・ということでテンプレート化できないと思われがちですが、以下の点に注力することでテンプレート化は可能です。
１． 様々なレイアウトパターンを用意すること
２． 一つ一つの画像の表現にこだわること
３． 写真・テキストのクオリティを上げること
レスポンシブはデザイン表現力に欠けると思われがちですが、一つ一つの画像に対してグラフィック表現にこだわることで商品の訴求は可能です。
また、以下の図は、メインビジュアル部分のパーツのパターン例です。商品点数やバナーの数によってテンプレートを選びます。こういったパターンを予め用意しておき、必要なパーツを選んで使えるようにしておくことで、簡単な運用が可能になります。運用にあたっては、説明書のようなものがあると便利でしょう。
レイアウトパターンは様々なものを用意しておくことで、運用にも柔軟性が出る。
事例：サイト内に新しいコンテンツを増やしたい場合
パーツのパターンを予め用意しておき、必要なものを抜き出して使う、というアイディアはLPや特集以外でも使えます。例えばサイト内でワンコーナーを増やしたい場合。通常、サイトを構築する場合には「大見出し・中見出し・小見出し・文章・リスト・画像の入れ方・ボタンの置き方・・・・・」など、ある程度フォーマットを作成します。これをパーツセットとして一覧にしておくことで、コンテンツを増やしたいときもパーツを抜き出して使うことができるので、運用がラクになります。パーツセットの数は予め運用を想定して様々なものがあると便利でしょう。
予め、様々な運用を想定しておきましょう
様々なレイアウトパターンを予め用意しておくためには、ある程度運用を見越してレイアウトを設計していく必要があります。また、実際運用するのが自社なのか、もしくは制作会社なのかなどの体制によっても必要なものが異なってきます。しっかり打ち合わせをして、使えるフォーマットを作っていきましょう。
▼TAMでは「レスポンシブWebデザイン オリジナルフォーマット作成」を行っています。
上記のようなフォーマット作成から、運用のフォローまでを行っていますので、お気軽にご相談ください！