あとで読む
今回の記事「レスポンシブWebデザインで行こう！の、その前に」は、実践型プロジェクト管理と精緻なサイト設計に強みをもつ株式会社グランフェアズ 代表取締役 大和誠司氏に寄稿していただきました。
前回記事(2)では、レスポンシブWebデザインへの誤解やレスポンシブWebデザイン以外でのサイト構築の方法について解説しました。
今回は、レスポンシブWebデザイン導入にあたって事前に精査しておきたいポイントについてまとめていきます。
ここからはより具体的に、レスポンシブWebデザインの導入に当たって事前に精査したいポイントをまとめます。
投資としてコストパフォーマンスが悪かったり、システムによって選択できなかったりする場合もあるため、これらをプロジェクトの始動時に検討すると、手戻りによる時間やコスト（人的を含む）の無駄遣いを防ぐことができます。
前回記事(2)では、レスポンシブWebデザインの導入では「初期・運用ともに工期・コストを抑えられる」と書きましたが、それはあくまでも「レスポンシブWebデザイン」「アダプティブWebデザイン」「動的配信」の3つの方法を比較した場合のことです。
これまで、PC向けサイトとモバイル向けサイトを別々で用意したときは、それぞれのサイト構築は別のタイミング（同時プロジェクトでも少しずらして）で進行したと思います。
またモバイル向けサイトはPC向けよりコンテンツを削ったかもしれません。
それぞれは完全に独立していて、別の制作会社や別のチームで対応することもできました。
レスポンシブWebデザインで構築する場合は、全てを同時並行で進める必要があります。
それも、PC向け／モバイル向けの2種類ではなくあらゆるスクリーンサイズに対応するため、デザイナーや開発者は一般的ではないサイズであってもデザインの一貫性が保たれるように、実装しながら試行錯誤を繰り返していきます。
当然、チェックする量も増えます。
そのため、過去のサイト制作よりも工期と予算がかかることを想定しておきましょう。
たとえば「新規サービスで具体的なターゲットのデータはないが、明らかにPCを持たない世代に向けたもの。まだこれからなので多重管理は避けたい」といった場合は、対応するスクリーンサイズを減らし、モバイル向けにフォーカスすることで工数を抑えるのも一つの手です。
極端に言うと、スマートフォンではコンテンツが見やすくボタンの配置もわかりやすいが、PCではテキストが横に間延びして読みにくく、ボタンが画面の端にあるため押しにくい、といった状態です。
この例のように、モバイルでの使い勝手に予算を集中投下するといった判断も、ターゲットユーザーを把握していれば可能になります。
事業を複数持っている企業のコーポレートサイトはたくさんのターゲットユーザーが想定されます。
このように、ステークホルダーが多ければ多いほど、レスポンシブWebデザインに向いています。
なぜなら、多種多様なスクリーンサイズでアクセスされるからです。
このような場合は、すべてのユーザーに一定の優れたUXを提供することがサイトホルダーとしてのおもてなしであり、ひいてはその企業の姿勢を示すことになります。
上記の「予算とスケジュール」で触れましたが、ユーザーの90％がスマートフォンなど、明らかにユーザーの偏りがあれば、そのスクリーンサイズで最も快適に閲覧できるように作ることを検討すべきです。
特にBtoCサービスを提供するサイトの場合、ターゲットユーザーが限定されることがあります。
管理の多重化を許容できるなら、既存のPC向けサイトはそのままに、モバイル向けサイトをアダプティブWebデザインで最適化する方法もありますし、PCとモバイルでユーザーの利用シーンが全く異なるなら、モバイルアプリを開発するという選択肢もあるでしょう。
繰り返しになりますが、レスポンシブWebデザインは、あらゆるスクリーンサイズで一定の優れたUXを提供するために汎用化する技術です。この「UX」にはコンテンツも含まれます。
レスポンシブWebデザインのデメリットとして、モバイル閲覧時の表示の遅さが挙げられますが、この大きな要因の一つが、旧来の「デスクトップから考える」という進め方にあります。
デスクトップはスクリーンが広いため、思いつく限りの情報を掲載することができ、見通しのいいメニューから深い階層に誘導することも難しくありません。
旧来のように画像での装飾にこだわることもできます。
PCサイトからサイトの設計・コンテンツの精査を始めてしまうと、いざモバイル向けのサイトにしたときに以下のような問題が出てくることがあります。
といったことになり、モバイルユーザーを思って改修したのに、モバイルユーザーに不快感を与える結果になってしまいます。
これらの症状を回避するため、モバイルファースト（モバイル向けサイトから設計・コンテンツを考える）が推奨されますが、それが難しいとしても、常にモバイルでの見え方・操作を念頭に入れながら、並行して設計をしていくという考え方が必要です。
もしプロジェクトメンバーに「PC向けサイトのデザインをすぐ出して」という人がいたら、まずは、今から取り組もうとしていることはどういうことなのかを納得してもらってからスタートすることをお勧めします。
少し制作寄りな話になりますが、レスポンシブWebデザインは「グリッド」と呼ばれるブロックを積み上げてレイアウトを構成し、そのブロックの積み方をスクリーンサイズに応じて可変させることで、あらゆるスクリーンサイズに対応します。
よって、一つのブロックの中身が非常に細かい場合、別の言い方をするとページ内のコンテンツがブロックに分解できないような内容を扱うサイトは、レスポンシブWebデザインに向いていません。
おそらくその場合は現状、PCでの閲覧が主だと思われるので、現在のPC向けサイトはそのままに、別のコンテンツ内容でモバイル向けサイトを作成する、アダプティブWebデザインが候補になります。
ASP型のECシステムでショッピングカートがレスポンシブWebデザインに対応しているサービスはまだまだ少ない状況です。むしろ、対応しているサービスの方が限られていると言った方がいいでしょう。
また、対応済みとしているサービスも実際には不完全な場合があるので、注意が必要です。
さらに、ECシステムの仕組み自体は対応していても、そのシステムを組み込むベンダーが不慣れなことも散見されます。
ASP型のECシステムの対応が遅れていることから、フルスクラッチでオリジナル開発したり、オープンソースをカスタマイズしたりすることも選択肢になりますが、プログラミングとUIを同時に担当できるベンダーは少なく、実際には分離して進められることが多いと思います。
この場合、デザイン会社から提供されたHTMLをシステム会社が組み込むフローになるのですが、相互の連携やUIへの対応不足により、表示速度の遅さやレイアウトの崩れ、ボタン等のタッチアクションの反応悪化、といった不具合がよく起こります。
これらを避けるには、開発に強いUI会社を選択するか、開発とUIデザインを橋渡しする会社（人物）を別途アサインするかを検討したほうがいいです。
ECサイトにレスポンシブWebデザインを適用する場合、このベンダー選択が重要な要素になります。
あまり多くはありませんが、CMSでも対応していないものがあります。
具体的に言うと、システムで管理しているテンプレートがPC用とモバイル用で分かれていて、振り分けを解除できない場合はレスポンシブWebデザインを実装することができません。
WordPressやMovableType等の一般的なものであれば気にする必要はありませんが、現在使っているCMSが特殊な場合は、事前の確認が必須です。
「レスポンシブWebデザインの優位性」として「二重（多重）管理を避けられる」点を挙げました。すべてのスクリーンサイズに対してテンプレートとなるHTMLは1つなので、共通部分の変更は一回で済みます。
ここで注意したいのは、そのHTMLは「レスポンシブWebデザインで制作されたHTML」だという点です。レスポンシブWebデザインはこれまでの制作技術と多くの部分で異なるため、HTML構造を変更する場合は、その技術への知識が必要です。
HTMLは1つでも、すべてをサイトオーナー側で管理することは難しいということを前提に運用体制を組み、運用予算を想定しておきましょう。
また同時に、事前に運用要件（担当者、リテラシーレベル、更新頻度、更新範囲、承認フローなど）を洗い出し、CMSの機能や範囲を適切に定めることと、プロの手を借りる範囲を決めておくことも重要です。
この記事では、最近特に依頼が多くなったレスポンシブWebデザインでの構築について、それ以外の選択肢を踏まえつつ、採用する上での注意点をご紹介しました。
本記事がウェブ担当者のみなさまの「転ばぬ先の杖」となれば幸いです。
次回はより具体的に、レスポンシブWebデザインでの構築技術について、弊社が導入している方法をご紹介します。
株式会社グランフェアズ 代表取締役／CEO
株式会社三越で、前例のない企画を多数成功に導き、最年少でバイヤーへ就任。マーケティング業務に携わる中でWebに可能性を見出し転身。現在は、事業会社での経験とテクノロジーを融合したリアルなマーケティングをベースに、Webの内外から業務改善を行うことで課題解決を行っている。
