記事種別

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

  • このエントリーをはてなブックマークに追加
  • プッシュ通知を受け取る

モバイル化、マルチスクリーン化時代を攻略する「レスポンシブECサイト」とは? 第10回は、レスポンシブECサイト導入をする際の構築・ディレクションワークフローの「後編」をお届けします。

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

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

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

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

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

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

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

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

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

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

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

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

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

ECzine主催無料イベント3/17「選ばれ、愛されるeコマースのつくりかた」

基調講演に、通販が売上の3割を占める「よなよなエール」のヤッホーブルーイングさんをお迎えして、愛されるメーカーECについてお話しいただきます。

ほかにも、ECサイトのコンテンツマーケティングやメディア化の失敗、マーケティングオートメーションなど、ECの最新トピックスが盛りだくさん!ぜひ会場にお越しください。

↓お申し込みはこちら↓
★☆3/17開催 「ECzine Day 2015 選ばれ、愛されるeコマースのつくりかた」☆★

※この続きは、会員の方のみお読みいただけます(登録無料)。



  • このエントリーをはてなブックマークに追加
  • プッシュ通知を受け取る

バックナンバー

連載:レスポンシブECサイトのススメ

もっと読む

2015年10月の人気記事ランキング

All contents copyright © 2013-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5