navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。今運営中のECサイトをレスポンシブ化する~ワイヤーフレーム作成2つのポイント~現状のECサイトをレスポンシブ化する際のポイントをご案内します。今回サンプルとする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と2は逆の場合も並行して進める場合もありますが、いずれにしてもレスポンシブ化の中でこの2つが実際の作業で最も重要となります。この2つの作業が完了すると完成といっても過言ではありません。逆にこの2つを疎かにすると、その後の作業にとんでもなく時間を要する場合があります。今回は、この中でも特に“ワイヤーフレーム作成”のポイントについてご案内します。2つのポイント今回は3デバイス対応を前提にしますので最低3デバイス分のワイヤーフレームが必要となります。その作成にあたり、重要な点が以下の2点です。PCサイトデザインのバイアスにハマらない共通コンテンツと特有コンテンツの可視化このそれぞれについて、ポイントを解説します。1.PCサイトデザインのバイアスにハマらない今回PCとスマホサイトのデザインを統合して、レスポンシブ化させるわけですが、できる限りこれまでのPCサイトのバイアスに捉われず、全く新しく思考されることをお勧めします。既存PCサイトのバイアスにかかると、どうしてもPCファーストでワイヤーフレームを思考しレスポンシブ化が上手くいかないからです。図:スマートフォン・タブレット・PCそれぞれのTOPページワイヤーフレームPCファーストでのワイヤーフレーム作成とは、その言葉の通りワイヤーフレーム自体を、PCサイト→タブレットサイト→スマホサイトの順に作ることです。その際の多くの方がPCは既存のデザインをベースに考え、最終的にスマホのワイヤーフレーム作成で行き詰ってしまいます。PC向けの大きなブラウザ向けに考えたレイアウト・デザインが前提となり、スマホを考えた場合に歪が出てくるからです。このまま思考を進めると最終的にスマホでは「PCと異なるデザインを・・・」となってしまいます。これでは『デバイス間でコンテンツを共通にすること』の目的から大きくズレてしまいます。今のECサイトを白紙に戻すぐらいの勢いで、モバイルから思考してワイヤーフレームを作成してみてください。理想的なスマホでのワイヤーフレームを作成します。その後、そのワイヤーフレームを基準にタブレットのワイヤーフレーム→PCのワイヤーフレームと進めます。そこでPCサイトのデザイン(コンテンツレイアウト)が大きく変わってしまうかもしれませんがそれでよいのです。レスポンシブ化して前述の目的を達成させるべくマルチデバイスECサイトにしようとしているので、それに応じたデザインになるべきなのです。前述の目的のポイントを集約すると次の2点です。ワイヤーフレームでもこの2点が全てと言っても過言ではありません。実際の作業の中で既存サイトがある場合、そのサイトコンテンツを前提に3デバイス分のワイヤーフレームを作成されると思います。ここで重要なのが、『どれだけコンテンツを共通化できたか』です。要は、デバイス毎で同じ画像やテキストなどの素材を利用することで、運用工数を削減しようとしているので、徹底してPCとスマホでバラバラのコンテンツを統合するようにします。しても『デバイス毎に最適な表示にする』を満たすためにデバイス特有にしなければいけないものは、特有コンテンツとします。その作業の完成確認としておすすめするのが以下のようなワイヤーフレーム内の共通・特有コンテンツの可視化です。図:各ワイヤーフレームのコンテンツに番号記載し可視化(黄色が特有コンテンツ)例えば、3デバイスで全く同じものを利用するときは、同じ通し番号を付けます。ここで言う、[1]や[2]です。してもデバイス特有にならざるを得ないコンテンツ、例えばスマホだけのキャンペーンバナーなどです。[S2]のようにします。(Sはスマートフォンの略)、図のST1...はスマートフォンとタブレットのみのコンテンツです。201]...のようにします。することで、実際どれだけのコンテンツが特有なのかが一目で分かり、さらに共通化できないか?を考えることができます。これまで画像で作っていたメニューもHTML+CSSで表現し、デバイス間で共通にできないか検討します。テキスト画像もできるだけ減らし、背景画像+HTML、CSSでこれまで画像文字で表現していたものを共通コンテンツにします。そもそもコンテンツが特有である必要性も考えてください。これにより、本当に特有でなければいけないもの以外は全て共通にできると思います。ワイヤーフレームはスマホから、牌流定石の如く作成その作業は自らの手牌に固執せず、相手の捨て牌から流れを決める「牌流定石」のように、PCサイトに固執せず、各デバイスのコンテンツはその他のデバイスのコンテンツからの流れで生成されるかのようなワイヤーフレームの制作が必要となります。その際に中心になるのはやはりスマートフォンのワイヤーフレームです。PCサイトが売上の中心であっても、ワイヤーフレームはスマホから作成していきましょう。結局デザインをリニューアルすることに・・・ということになるかもしれません。この2つの点をしっかりと押さえて、ワイヤーフレームを作成しておくとコンテンツの移行(コーディング)する際の作業もスムーズで、何よりもレスポンシブ化の本当の目的を周到したECサイトが完成することになります。結果的にリニューアルせざるを得ないということは、現状はデバイス毎のデザインなので、レスポンシブに合わせたデザインにせざるを得ないということなのです。それもレスポンシブ化の牌流定石なのかもしれません。cc”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。2014年~2015年頃には最も多いインターネット利用端末がモバイルとなり、いよいよインターネットマーケティングにおいてモバイルファースト時代が到来します。』へとパラダイムシフトしています。ファースト)に移行することが必要となります。お手伝いすることです。ご利用いただくまでになりました。ウ』を基にこれからも本当に必要とされるサービスの開発と改善を行い、『モバイルマーケティングでは最も役に立つ、絶対必要な存在』になりたいと思います。多くの商品やサービスをもっと消費者の身近な存在にすることで感動あふれる世の中にしたいと思います。2019.03.20EC業界では現在、リアル店舗との連携を行うO2O対応やオムニチャネル化が進んでいます。2013.06.10みなさんこんにちは、アルバイトの岡本です。月曜日は最新の市場動向や調査結果、キャリア各社の動きなどをご紹介いたします。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。サイト内検索スマートフォンカテゴリの最新記事2019.02.01スマホからの売上UP!後払い決済を導入すべき理由とは2018.09.14ECサイトには必須?Google提唱のマイクロモーメントの意味と対策2018.06.06インスタグラムからECサイトで直接購入可能に!ショッピング機能「ShopNow」が日本解禁。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。