【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【保存版】レスポンシブWEBデザインのディレクションワークフロー

【保存版】レスポンシブWEBデザインのディレクションワークフロー

レスポンシブなディレクション

レスポンシブなサイト構築ワークフロー

全デバイスにワンソースで対応したレスポンシブWEBデザイン。2014年に入り導入や構築のお問合せをいただく機会が増えました。その中でいくつか構築案件を担当させて頂き、どのような工程でレスポンシブWEBデザインを作っていけばいいのか、そのポイントをワークフローとしてまとめてみました。

  1. クライアントと握るべきポイント
  2. モバイルファーストで考える
  3. 通常のディレクションとの違い
  4. 具体的な作業の進め方

クライアントと握るべきポイント

まずはじめにクライアントとレスポンシブWEBデザインで構築に入る前に、どこに注意をして取り決めをしていくべきか、を決めなければなりません。通常のサイト構築と異なり全デバイスに対応しているレスポンシブWEBデザインだからこそ、様々な制約の中で構築をする必要があります。

どのデバイスに対応させるのか?

まずはどのデバイスに対応させるのか?iPadやNexus、Galaxyやパソコンなどなど…決めていきましょう。

どのOSに対応させるのか?

次にどのOSに対応させるのかも重要になってきます。iOS、Android(2.x系〜4.x系)、シェアは少ないですがWindows Phoneも考慮にいれるべきか、外すべきか等決めましょう。

どのブラウザで対応させるのか?

ブラウザ対応

ブラウザ対応もかなり重要です。IE、ChromeやFirefox、Safariなど主要ブラウザへの対応。IEであれば特にバージョン毎に仕様が大きく変わります。今でこそシェアは少ないですが、標準ではレスポンシブWEBデザインに対応していないIE8への対応については別途見積もりを検討してもいいかもしれません。

レスポンシブWebデザインをIE8に対応させる方法

フィーチャーフォンはどうするの?

ここはクライアントによってもまちまちです。今まで公式サイトを運営していて、そこからの流入も捨てられないのであれば、フィーチャーフォン(ガラケー)でも最適化されたサイトを作らなければなりません。

結局はクライアントのサイトへどのようなユーザーがどのようなデバイスでアクセスしているのか、現状を把握をしなければなりません。そして今後どのようなユーザーをメインとしてサイト構築をしたいのかを設計段階で決めましょう。

Google Analyticsでアクセスシェアは簡単に確認できますし、アクセスが少ないものについては、思い切って対応しないという判断も必要です。

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

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

レスポンシブWEBデザインでは、「モバイルファースト」で考えることが重要になってきます。

モバイルファーストで構築するとは、「最低限必要な要素を配置した軽量なコンテンツ設計から始める」ことです。

物理的にデバイス面積の小さなモバイル端末に合わせてコンテンツ設計をすることで、面積の大きなタブレットやPCに展開した時にも整合性のチェックや動作の確認などの作業が最低限で済みます。

逆に面積の大きなPCを中心に設計をしてしまうと、モバイルに展開した時に制約によって漏れてしまうコンテンツが発生したり、タッチデバイス特有の動きに対応できていなかったりと出戻り作業が発生し、無駄なコストを生み出してしまいます。

できるだけモバイルデバイスに合わせたコンテンツ設計で、モバイルファーストの意識を常に持ちながら構築を進めていきましょう。

通常のディレクションとの違い

通常のウェブサイトを作るワークフローは、ワイヤーフレームを作成し、デザインカンプを作り、コーディングという流れになります。(サイト企画などの実作業以外は除く)

通常のディレクション

レスポンシブWEBデザインではその作業にデバイスごとの作業が追加されます。

レスポンシブなディレクション

スマホ用のワイヤーフレーム、タブレット用のワイヤーフレーム、PC用のワイヤーフレーム……それぞれデバイスごとにモックアップを作成し、コンテンツ設計をきっちりと行ってから実装に入らなければいけません。

ピクセルパーフェクトなデザインをする必要はありませんが、このワイヤーフレームをきっちりと作っておくことで無駄な出戻り作業は発生しなくなります。

具体的な作業の進め方

ワイヤーフレーム作成

ワイヤーフレーム作成

まずはワイヤーフレームを作成します。クライアントとワイヤーフレームの確認作業には、CacooやPowerPoint、エクセルなどを使います。

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

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

またaishipRなどのASPを利用する場合、その機能の範囲内で実現できる構成になっているかも念頭に入れておいてください。

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

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

デザイン作成

デザイン作成

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

コーディング→実機確認

実機確認

ディレクターがチェックすべきポイントととしては、

  • ワイヤーフレーム通りコンテンツ配置が行われているか
  • デザイン通りのコーディングが行われているか

それぞれ必ず実機で確認するようにしてください。

パソコンのブラウザ幅を縮めたり、パソコン上でスマートフォンやタブレット端末をエミューレートするアプリもあります。

作業段階でこのようなツールを使うことは効率的ではありますが、必ずどのような動作をするのか、実際に触ってみてボタンがタップしやすい大きさなのか、タップしやすい位置にあるのか、ユーザーを迷わせることがないかを確認するには実機で見るしか方法はありません。

また初めに決めた対応するデバイスやブラウザでもきちんと動作をしているのか、忘れずに確認をするようにしましょう。

終わりに

いかがでしょうか。

通常のサイト構築のディレクションとの違いは、レスポンシブWEBデザインは設計段階で比較的大きな工数が発生します。しかしこの設計を乗り越えれば後の工程は比較的スムーズに進めることが可能です。

とにかく「モバイルファースト」で「ワイヤーフレームをきっちり作る」。この2つを念頭に入れてサイト構築を進めていきましょう。

レスポンシブWEBデザインの構築、お見積もりのお問合せはコチラから

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+