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

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

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

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

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

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

レスポンシブしてる?

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

現状のECサイトの前提条件

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

目指すレスポンシブ化ECサイト

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

目的を明確にする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ワイヤーフレーム
図:スマートフォン・タブレット・PCそれぞれのTOPページワイヤーフレーム

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

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

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

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

2.共通コンテンツと特有コンテンツの可視化

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

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

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

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

共通コンテンツ
図:各ワイヤーフレームのコンテンツに番号記載し可視化(黄色が特有コンテンツ)

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

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

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

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

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

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

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

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

aishipR 岩波

photo credit: ZERGE_VIOLATOR via photopin cc

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+