• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加


これからレスポンシブサイトを構築する場合に、Webサイトディレクターやサイト運営担当者が最低限必ずおさえていただきたい7つのポイントをご案内いたします。

今までのワークフローとは違う考え方が必要

レスポンシブサイトを構築する場合、今までのPC主体のワークフローとは考え方を変えなければなりません。サイト内のデータ量やコンテンツ配置などを、デバイス解像度に合わせながら調整することが前提となります。

ディレクション・デザイン・構築・更新を実施する方が導入前にこれらのポイントを理解することで、レスポンシブサイトのメリット(高いユーザビリティと高い運用効率)を存分に生かした構築が実現できます。

※この内容は2013年1月現在のレスポンシブサイト構築で基礎的な事項をまとめたものです。日々の技術革新によりアップデートされた技術情報や発展的な内容が欠落する可能性があることをご理解ください。

【1】ワークフローはモバイルファーストで

通信速度やブラウザサイズ、操作性など最も制約が多いモバイル(スマホ)を基準にコンテンツ・デザイン・素材・レイアウトを考え、それらをタブレットやPCへ流用・調整していくことでユーザビリティや運用効率が共に高いレスポンシブサイトの構築が実現します。

【2】ブラウザファーストで考える

safari

ブラウズ環境の多様性を解決するために、最もシンプルな最低限のコンテンツや表現を前提に、「最低限を満たせばよい」という思考が重要です。細部へのこだわりすぎることで、それを実現するための膨大なコストが必要になってきます。

レスポンシブサイトでは完全に望みどおりの表現はできないというある種の割り切りも必要になってきます。

【3】 HTMLは1ソース、画像素材、テキストなどのコンテンツも基本共通化

CSSで振り分け

基本的にはあらゆるデバイスで同じHTMLのソースを利用する。デザインの調整・可変はCSSで行う。画像素材、テキストなどのコンテンツも基本的にあらゆるデバイスで共通化させることを前提とする。

共通化することで、可変させた時の作業量も大きく減らすことができ、結果コストを下げることにつながります。

【4】 デバイス毎に完全なデザインを作りコーディングして完成させるのは難しい

レスポンシブサイトの構築や更新業務が初めての場合、多様なデバイスに対応させたインターフェースを完成させるためには、これまでのように完璧なワイヤーフレーム作成→完璧なデザイン作成→コーディング・完成というようなワークフローでは、当初(完璧なデザイン)の思い通りにいかないことが多いです。そのため、

  1. デザインラフ(ワイヤーとデザインをラフ作成)
  2. コーディング
  3. 実機検証
  4. 修正

というようなワークフローで徐々に2→3→4を繰り返し修正改善を積み重ねることで全体的な効率や品質を高め、構築させていくことが必要になります。

【5】ブレイクポイント(break point)を決定する

ブレイクポイントとは

ブレイクポイントとはレイアウトを切り替える際の切り替えポイントを指します。スマートフォン/タブレット/PCそれぞれの端末や画面サイズにより適切なユーザビリティおよびレイアウトのサイトを提供するため、一般的には端末の画面サイズにより切り替えポイントを指定することになります。

現在は3つないし4つのブレイクポイントを設けるのが主流なってきておりますが、ブレイクポイントの変更・追加は常時可能なので、必要に応じて調整してください。

一般的ななブレイクポイントの設定パターンと端末例は下記のようになります。

3つ設ける場合:768px以下|769~960px|それ以上
4つ設ける場合:320px以下|321~768px|769~960px|それ以上

ブレイクポイント設定

【6】ワイヤーフレームとデザインを作成する

mediaqueries
ブレイクポイントごとのサイトイメージが判断できるよう、ワイヤーフレームとデザインを作成します。イメージを掴むためのものであるため、詳細に作成する必要はありませんが、ブレイクポイントを3つ設ける場合はワイヤーフレームとデザインも3点用意しましょう。

マルチデバイスでほぼ同じデザイン(画像やコンテンツブロック)の利用を前提とした場合は、デザイン案の作成は1つに省略し、それぞれデバイスごとのレイアウトをワイヤーフレームで確認するだけでも構いません。

例えばPCでは左右2カラムに配置することは可能ですが、小型のタブレットやスマホでは2カラムでの閲覧は難しい場合があります。このためメニューカラムの表示位置は、メインコンテンツの下に表示するなど、事前に考慮しておく必要があります。

【7】基本的に画像は全デバイスで共通

PCやタブレットでの閲覧を前提に高解像度の画像を利用します。ただしこれは画像点数が少ない場合には問題ありませんが、画像点数が多いと環境により閲覧が難しくなる可能性がある。画像を多用する場合には、できる限り画像を利用しない他の方法も検討しましょう。

以上となります。

▼次回は『レスポンシブサイト構築で制作担当者が必ずおさえる7つのポイント』として、実務担当者が実際のデザイン構築において必ず知っておきたいポイントをご案内します。