今運営中のECサイトをレスポンシブ化する～ワイヤーフレーム作成2つのポイント～

現状のECサイトをレスポンシブ化する際のポイントをご案内します。今回サンプルとするECサイトの条件や目指す状態は以下と仮定します。

・PC向け、スマホ向けの2デバイス向けECサイトのデザインはそれぞれ別々に構築
・テキストや画像素材は共通部分もあるが、基本的に2デバイス向け別々のデザイン
・サイト内のページ（サイト構成）も別に構築され、PC⇔スマホで完全に全ページが対応しているわけでなく、特有のページが複数ある

・対応デバイス：スマホ・PC・タブレットの3デバイス
・１つのECサイトで基本的に3デバイスに対し同じ画像やテキストなどのコンテンツとし、ページもURLもソースコードも全て１つにし、完全ワンソースマルチデバイス対応とする

ECサイトの目的を明確にする

現状のECサイトを今回レスポンシブ化するわけですが、まず進める前にその目的を明確にしたいと思います。

１番の目的は『ユーザビリティの向上による売上拡大』になると思います。レスポンシブ化することで、あらゆるデバイスに最適なECサイトを提供でき、PCのみならずスマホやタブレットなどのスマートデバイスでの表示上の満足度を高めることができます。

またあらゆるデバイスに対して１つのページのみとすることで、対応していないページが存在しないようなことが無く、クロスデバイスでのユーザビリティも高まります。

この１番目の目的『ユーザビリティの向上による売上拡大』の中でも特にポイントなのは『デバイス毎に最適な表示とコンテンツ充実』と『どのデバイスで見ても同じコンテンツを見るようにする』ということです。

2番目の目的は『デバイス毎のECサイト運営を効率化させる』ことです。現状ページやコンテンツがそれぞれバラバラに作成されているものを１つのECサイトに集約することで、デバイス毎のECサイトという考え方ではなくECサイト＝１つという考え方になります。

この１つのECがどのようなデバイスで見てもレスポンシブに最適化し、しかも、どのようなデバイスでも全て同じコンテンツを見ることで、運営者側はデバイス毎にコンテンツやページを分けて作成する手間が無くなり、あらゆるデバイスに対して実質１つのECサイトを運用することになります。

この2番目の目的『デバイス毎のECサイト運営を効率化させる』のポイントはコンテンツや顧客、商品などの情報管理が一元化することでの運営効率なのですが、中でもサイト更新でのポイントは『デバイス間でコンテンツを共通にすること』です。

レスポンシブ化の作業ステップ

次に実際にサイトをレスポンシブ化していく作業ステップは以下のようになります。

1. レスポンシブ化のワイヤーフレーム作成（TOP、下層ページ雛形、商品ページ雛形）
2. レスポンシブ化のサイトマップ作成
3. コンテンツ移行作業（HTMLや画像を移行させる）
4. 商品カテゴリ登録や商品登録
5. 実機テスト、調整
6. レスポンシブ化でオープン

※在庫管理、受注管理などのバックヤード部分の調整は上記に加味していません

上記１と２は逆の場合も並行して進める場合もありますが、いずれにしてもレスポンシブ化の中でこの２つが実際の作業で最も重要となります。この２つの作業が完了すると完成といっても過言ではありません。逆にこの２つを疎かにすると、その後の作業にとんでもなく時間を要する場合があります。今回は、この中でも特に“ワイヤーフレーム作成”のポイントについてご案内します。

レスポンシブ化の際のワイヤーフレーム作成　2つのポイント

今回は3デバイス対応を前提にしますので最低3デバイス分のワイヤーフレームが必要となります。その作成にあたり、重要な点が以下の2点です。

1. PCサイトデザインのバイアスにハマらない
2. 共通コンテンツと特有コンテンツの可視化

このそれぞれについて、ポイントを解説します。

１．PCサイトデザインのバイアスにハマらない

今回PCとスマホサイトのデザインを統合して、レスポンシブ化させるわけですが、できる限りこれまでのPCサイトのバイアスに捉われず、全く新しく思考されることをお勧めします。なぜなら、特に既存PCサイトのバイアスにかかると、どうしてもPCファーストでワイヤーフレームを思考しレスポンシブ化が上手くいかないからです。

画像を見る
図：スマートフォン・タブレット・PCそれぞれのTOPページワイヤーフレーム

PCファーストでのワイヤーフレーム作成とは、その言葉の通りワイヤーフレーム自体を、PCサイト→タブレットサイト→スマホサイトの順に作ることです。その際の多くの方がPCは既存のデザインをベースに考え、最終的にスマホのワイヤーフレーム作成で行き詰ってしまいます。

PC向けの大きなブラウザ向けに考えたレイアウト・デザインが前提となり、スマホを考えた場合に歪が出てくるからです。そしてこのまま思考を進めると最終的にスマホでは「PCと異なるデザインを・・・」となってしまいます。これでは『デバイス間でコンテンツを共通にすること』の目的から大きくズレてしまいます。

今のECサイトを白紙に戻すぐらいの勢いで、モバイルから思考してワイヤーフレームを作成してみてください。まずは理想的なスマホでのワイヤーフレームを作成します。その後、そのワイヤーフレームを基準にタブレットのワイヤーフレーム→PCのワイヤーフレームと進めます。

そこでPCサイトのデザイン(コンテンツレイアウト)が大きく変わってしまうかもしれませんがそれでよいのです。なぜならレスポンシブ化して前述の目的を達成させるべくマルチデバイスECサイトにしようとしているので、それに応じたデザインになるべきなのです。

２．共通コンテンツと特有コンテンツの可視化

前述の目的のポイントを集約すると次の2点です。ワイヤーフレームでもこの2点が全てと言っても過言ではありません。

『デバイス毎に最適な表示にする』
『デバイス間でコンテンツを共通にする』

実際の作業の中で既存サイトがある場合、そのサイトコンテンツを前提に3デバイス分のワイヤーフレームを作成されると思います。ここで重要なのが、『どれだけコンテンツを共通化できたか』です。要は、デバイス毎で同じ画像やテキストなどの素材を利用することで、運用工数を削減しようとしているので、徹底してPCとスマホでバラバラのコンテンツを統合するようにします。

そしてどうしても『デバイス毎に最適な表示にする』を満たすためにデバイス特有にしなければいけないものは、特有コンテンツとします。その作業の完成確認としておすすめするのが以下のようなワイヤーフレーム内の共通・特有コンテンツの可視化です。

画像を見る
図：各ワイヤーフレームのコンテンツに番号記載し可視化（黄色が特有コンテンツ）

例えば、3デバイスで全く同じものを利用するときは、同じ通し番号を付けます。ここで言う、[1]や[2]です。どうしてもデバイス特有にならざるを得ないコンテンツ、例えばスマホだけのキャンペーンバナーなどです。これは[S1] [S2]のようにします。（Sはスマートフォンの略）、図のST１…はスマートフォンとタブレットのみのコンテンツです。同様にPC特有のものには[P101] [P 201]…のようにします。

こうすることで、実際どれだけのコンテンツが特有なのかが一目で分かり、さらに共通化できないか？を考えることができます。

例えば、これまで画像で作っていたメニューもHTML＋CSSで表現し、デバイス間で共通にできないか検討します。テキスト画像もできるだけ減らし、背景画像＋HTML、CSSでこれまで画像文字で表現していたものを共通コンテンツにします。またそもそもコンテンツが特有である必要性も考えてください。これにより、本当に特有でなければいけないもの以外は全て共通にできると思います。

ワイヤーフレームはスマホから、牌流定石の如く作成

その作業は自らの手牌に固執せず、相手の捨て牌から流れを決める「牌流定石」のように、PCサイトに固執せず、各デバイスのコンテンツはその他のデバイスのコンテンツからの流れで生成されるかのようなワイヤーフレームの制作が必要となります。

またその際に中心になるのはやはりスマートフォンのワイヤーフレームです。PCサイトが売上の中心であっても、ワイヤーフレームはスマホから作成していきましょう。

結局デザインをリニューアルすることに・・・ということになるかもしれません。この２つの点をしっかりと押さえて、ワイヤーフレームを作成しておくとコンテンツの移行（コーディング）する際の作業もスムーズで、何よりもレスポンシブ化の本当の目的を周到したECサイトが完成することになります。

ですから、結果的にリニューアルせざるを得ないということは、現状はデバイス毎のデザインなので、レスポンシブに合わせたデザインにせざるを得ないということなのです。それもレスポンシブ化の牌流定石なのかもしれません。

aishipR　岩波

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/8233
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝