レスポンシブなサイト構築ワークフロー
全デバイスにワンソースで対応したレスポンシブWEBデザイン。2014年に入り導入や構築のお問合せをいただく機会が増えました。その中でいくつか構築案件を担当させて頂き、どのような工程でレスポンシブWEBデザインを作っていけばいいのか、そのポイントをワークフローとしてまとめてみました。
- クライアントと握るべきポイント
- モバイルファーストで考える
- 通常のディレクションとの違い
- 具体的な作業の進め方
クライアントと握るべきポイント
まずはじめにクライアントとレスポンシブWEBデザインで構築に入る前に、どこに注意をして取り決めをしていくべきか、を決めなければなりません。通常のサイト構築と異なり全デバイスに対応しているレスポンシブWEBデザインだからこそ、様々な制約の中で構築をする必要があります。
どのデバイスに対応させるのか?
まずはどのデバイスに対応させるのか?iPadやNexus、Galaxyやパソコンなどなど…決めていきましょう。
どのOSに対応させるのか?
次にどのOSに対応させるのかも重要になってきます。iOS、Android(2.x系〜4.x系)、シェアは少ないですがWindows Phoneも考慮にいれるべきか、外すべきか等決めましょう。
どのブラウザで対応させるのか?
ブラウザ対応もかなり重要です。IE、ChromeやFirefox、Safariなど主要ブラウザへの対応。IEであれば特にバージョン毎に仕様が大きく変わります。今でこそシェアは少ないですが、標準ではレスポンシブWEBデザインに対応していないIE8への対応については別途見積もりを検討してもいいかもしれません。
フィーチャーフォンはどうするの?
ここはクライアントによってもまちまちです。今まで公式サイトを運営していて、そこからの流入も捨てられないのであれば、フィーチャーフォン(ガラケー)でも最適化されたサイトを作らなければなりません。
結局はクライアントのサイトへどのようなユーザーがどのようなデバイスでアクセスしているのか、現状を把握をしなければなりません。そして今後どのようなユーザーをメインとしてサイト構築をしたいのかを設計段階で決めましょう。
Google Analyticsでアクセスシェアは簡単に確認できますし、アクセスが少ないものについては、思い切って対応しないという判断も必要です。
モバイルファーストで考える
レスポンシブWEBデザインでは、「モバイルファースト」で考えることが重要になってきます。
モバイルファーストで構築するとは、「最低限必要な要素を配置した軽量なコンテンツ設計から始める」ことです。
物理的にデバイス面積の小さなモバイル端末に合わせてコンテンツ設計をすることで、面積の大きなタブレットやPCに展開した時にも整合性のチェックや動作の確認などの作業が最低限で済みます。
逆に面積の大きなPCを中心に設計をしてしまうと、モバイルに展開した時に制約によって漏れてしまうコンテンツが発生したり、タッチデバイス特有の動きに対応できていなかったりと出戻り作業が発生し、無駄なコストを生み出してしまいます。
できるだけモバイルデバイスに合わせたコンテンツ設計で、モバイルファーストの意識を常に持ちながら構築を進めていきましょう。
通常のディレクションとの違い
通常のウェブサイトを作るワークフローは、ワイヤーフレームを作成し、デザインカンプを作り、コーディングという流れになります。(サイト企画などの実作業以外は除く)
レスポンシブWEBデザインではその作業にデバイスごとの作業が追加されます。
スマホ用のワイヤーフレーム、タブレット用のワイヤーフレーム、PC用のワイヤーフレーム……それぞれデバイスごとにモックアップを作成し、コンテンツ設計をきっちりと行ってから実装に入らなければいけません。
ピクセルパーフェクトなデザインをする必要はありませんが、このワイヤーフレームをきっちりと作っておくことで無駄な出戻り作業は発生しなくなります。
具体的な作業の進め方
ワイヤーフレーム作成
まずはワイヤーフレームを作成します。クライアントとワイヤーフレームの確認作業には、CacooやPowerPoint、エクセルなどを使います。
ディレクター必見!Cacooで作るワイヤーフレームがとても便利
この時に意識したいのが先に述べた「モバイルファーストで考える」ということです。特段クライアントからの要望がなければ、スマートフォン中心に設計をして、その後他のデバイスに展開していきましょう。
またaishipRなどのASPを利用する場合、その機能の範囲内で実現できる構成になっているかも念頭に入れておいてください。
注意点としては、各デバイスに展開した時にコンテンツの動きの整合性や配置の違和感がないようにしなければなりません。この設計がめちゃくちゃだと、デザインの時にデザイナーさんが、コーディングの時にコーダーさんが困り、結果ディレクターが困ることになります。(僕も何回も困りました…)
レスポンシブWEBデザインではこの整合性を取るのに経験がなければ苦労します。逆にこの設計がきっちりとできているだけで後の工程はすごく楽になるのです。
デザイン作成
デザインは全体を一気に作ってしまうより、ファーストビュー(デバイスにアクセスした時にユーザーが初めて目にする部分)の範囲でテイストをクライアントと確認するようにしましょう。全体を作ってから修正が入るよりも出戻りのリスクを抑えることができます。
コーディング→実機確認
ディレクターがチェックすべきポイントととしては、
- ワイヤーフレーム通りコンテンツ配置が行われているか
- デザイン通りのコーディングが行われているか
それぞれ必ず実機で確認するようにしてください。
パソコンのブラウザ幅を縮めたり、パソコン上でスマートフォンやタブレット端末をエミューレートするアプリもあります。
作業段階でこのようなツールを使うことは効率的ではありますが、必ずどのような動作をするのか、実際に触ってみてボタンがタップしやすい大きさなのか、タップしやすい位置にあるのか、ユーザーを迷わせることがないかを確認するには実機で見るしか方法はありません。
また初めに決めた対応するデバイスやブラウザでもきちんと動作をしているのか、忘れずに確認をするようにしましょう。
終わりに
いかがでしょうか。
通常のサイト構築のディレクションとの違いは、レスポンシブWEBデザインは設計段階で比較的大きな工数が発生します。しかしこの設計を乗り越えれば後の工程は比較的スムーズに進めることが可能です。
とにかく「モバイルファースト」で「ワイヤーフレームをきっちり作る」。この2つを念頭に入れてサイト構築を進めていきましょう。