ワイヤーフレーム作成から実機確認まで　レスポンシブECサイト構築ディレクションの注意点

　前回までは、レスポンシブなサイト構築のワークフローの基本的な考えかたについてお伝えしました。今回は、具体的なディレクションの作業について解説していきたいと思います。

ワイヤーフレーム作成のコツと3つの注意点

　まずはワイヤーフレームを作成します。クライアントとワイヤーフレームの確認作業には、CacooやPowerPoint、エクセルなどを使います。CacooはWeb上で作図ができる無料のサービスで、とても便利なのでオススメです。詳細は以下の記事をご参照ください。

●ディレクター必見！Cacooで作るワイヤーフレームがとても便利

モバイルファーストで考える

　この時に意識したいのが、先に述べた「モバイルファーストで考える」ということです。特段クライアントからの要望がなければ、スマートフォン中心に設計をして、その後他のデバイスに展開していきましょう。

ASPの範囲内で実現できる構成か

　また「aishipR」などのASPを利用する場合、その機能の範囲内で実現できる構成になっているかも念頭に入れておいてください。ワイヤーフレーム作成の時点で逐一担当ASPのサポートなどへ機能の確認をすることをおすすめします。構築をしていて「コレが出来ない」などの矛盾を防ぐためです。

各デバイスに展開した際の整合性

　注意点としては、各デバイスに展開した時にコンテンツの動きの整合性や配置の違和感がないようにしなければなりません。この設計がめちゃくちゃだと、デザインの時にデザイナーさんが、コーディングの時にコーダーさんが困り、結果ディレクターが困ることになります（僕も何回も困りました……）。

　レスポンシブWebデザインでは、この整合性を取るのに経験がなければ苦労します。逆にこの設計がきっちりとできているだけで、後の工程はすごく楽になるのです。

デザインはファーストビューでテイストを詰める

　デザインは全体を一気に作ってしまうより、ファーストビュー（デバイスにアクセスした時にユーザーが初めて目にする部分）の範囲で、テイストを確認するようにしましょう。全体を作ってから修正が入るよりも、出戻りのリスクを抑えることができます。