Image may be NSFW.
Clik here to view.
スマホでネットサーフインをしていると、「あれ？ここのサイトこんなに見にくいページだったっけ？」と違和感を覚えることがありませんか？PCで見たときは快適だったのに…そう思ったらもう面倒になってそのページを閉じてしまう。これではエンドユーザーに快適なショッピングサイトとは言えません。
そこで登場したのが、今回のテーマである レスポンシブWebデザインという表示技術！
レスポンシブWebデザインとは スマホ・タブレット・PCなどどんな端末で閲覧しても、ページのレイアウトを違和感なく表示させる技術のこと。ECサイトでの採用も増加傾向にあり、これからのネットショップ運営に欠かせない存在になるでしょう。 そんな 新しい技術と、端末の多様化が進むネットショップ運営の関わり方を、具体的な数字と正直なメリット・デメリットでわかりやすくご紹介しています！
そしてカラーミーショップでも、 レスポンシブWebデザインに対応したテンプレートをご用意しております。ぜひチェックしてくださいね！
講師は以下の方々。
- メイン講師 株式会社クライマークス取締役 加藤俊司 氏 レスポンシブWebデザインのギャラリーサイトResponsive Web Design JPを運営。
- 講師 株式会社paperboy&co.EC事業部 部長 星隼人 氏
- 講師 株式会社paperboy&co.運営支援グループマネージャー 山下諭 氏
◆第１部◆ 魅せるスマホ対応！レスポンシブWEBデザイン
Image may be NSFW.
Clik here to view.
ネットショップの運営にスマートフォン（以下スマホ）サイトがなぜ必要なの？
【加藤】スマホの契約数の推移・予測を見てみましょう。2014年にはスマホの契約数はガラケーの契約数を上回る見込みです。
ガラケーとはガラパゴスケータイの略ですね。最近ではおじいちゃん＆スマホの組み合わせを見かけても驚かなくなってきました。スマホは私たちの生活にすっかり浸透しているんですね。
ではどれぐらいの割合で、スマホからサイトにアクセスがあるのでしょうか？
【加藤】エステサロンやインテリア情報サイトなどのB to Cサイトは、スマホからのアクセスが５割超の場合も。それも別にスマホに特化しているサイトではないんです。楽天やZOZOTOWNは売上の４割がスマホからの注文なんです。 そして現在スマホEC市場は非常に伸びています。たった２年前、2012年の売上に対して 2015年には２倍（2兆6,677億円）と見込まれています。 このことから、すでにECサイトのスマホ対応は売上を大きく左右する段階に入っていると言えます。
ネットショップページをスマホ対応にしないとどうなるの？
- テキストが読みにくい
- リンクが押しにくい
- フォームが入力しにくい
なんと煩わしさのオンパレード…これでは ご成約の前にお客様が逃げて行ってしまいそう。ネットショップをやるならスマホユーザーに向けたサービスの充実は必須です！この講座内ではWebサイトをスマホに対応させる５つの方法とメリット/デメリットをご紹介しています。
- １．イチから作る
- ２．スマホサイト簡易作成ツールを使う
- ３．スマホサイト変換コンバーター
- ４．システムでPCサイトとスマホサイトを出しわけ
- ５．レスポンシブWebデザイン
はい、来ました！本日のメインテーマ！ 「５．レスポンシブWebデザイン」！
そもそも「レスポンシブWebデザイン」って何でしょう。
Image may be NSFW.
Clik here to view.
【加藤】レスポンシブWebデザインとは、 １つのサイトを画面幅に応じてレイアウトを変えることで、PC/スマホに対応させる技術のことです。
「？」と思っていたら講座内では実際のサイト画面を縮めて実演してくださいました！おぉ～ユーザーの使いやすさのために生まれた技術ですね。
【加藤】今までの方法ではPCサイトとスマホサイトなど複数のサイトを持ち、ユーザーが閲覧に使っているを端末で判断して最適なサイトページを転送するか、同じURLでもやはりユーザーの端末によって出し分けるという方法が一般的でした。 それが2010年、米国の開発者イーサン・マルコッテ氏が提唱した技術によって「端末に応じて」ではなく「画面の幅に応じて」表示のレイアウトを変えることができるようになったんです。 日本でも2012年ころからレスポンシブWebデザインを採用したサイトが急増しました。 ECサイトでの採用も増加傾向にあり、株式会社paperboy&co.で運営されているハンドメイド、手作り作品の通販・販売サイトminne(ミンネ)でも採用されています。
レスポンシブWebデザインにするメリットは？
- PC用/スマホ用とでコンテンツやデザインを完全に共有できる
- PC用/スマホ用で同じURL共有できる
- SEOに有利（Googleが公式にレスポンシブWebデザインを推奨している）
では導入のデメリットは？
- イチから作ると設計が大変
- ノウハウ/経験が必要
- スマホでもPC用のデータを読み込むので、ページが長くなったり、表示がおそくなる
Image may be NSFW.
Clik here to view.
やはり個人での運用は難しそう。でもカラーミーショップなら、レスポンシブWebデザインに対応したテンプレートをご用意しております！そのうえレスポンシブWebデザインはGoogleが公式に推奨しているというのがなんとも心強いですよね。これならアクセス数も見込めそう！と期待してしまいますが、加藤氏が バッサリ斬ってくださいました。
【加藤】レスポンシブWebデザインはあくまで「検索順位が下がるリスクを減らせる」表示方法の選択肢のひとつです。導入したからと言って、検索順位が上がるわけではないんです。
あわわ…そそそそうですよね！ 「見やすいけど、買いたい商品がないサイト」では元も子もないですものね（汗）
カラーミーショップでレスポンシブWebデザインテンプレートを利用することのメリットは何があるのでしょう？
【加藤】従来のテンプレートではPCとスマホ用とでデザインの統一感がなく、タブレットに未対応であったり、スマホ用とPC用ページを別々に設定を行う必要があり、導入や管理が面倒でした。そこで導入されたのがレスポンシブテンプレートです。 ひとつのテンプレートで、PCもスマホにも対応するのでデザインに統一感を持たせることができます。もちろんタブレットにも対応していますし、管理を一元化できるので設定や運用の手間もかなり抑えることができます。
◆第２部◆質疑応答・パネルディスカッション
ここからは株式会社paperboy&co.星氏・山下氏も加わり、皆様からの質問にディスカッション形式で、回答します！
Q.Androidは機種によってさまざまな幅があります。そういった機種でも表示に問題はありませんか？
【加藤】レスポンシブのいいところは「端末に応じて」ではなく、「画面の幅に応じて」表示のレイアウトを変えることができるようになったんです。それによりどのような幅でもきれいに表示できるようになりました。
【星】スマホだけではなく、Googleグラスでもきれいに表示されるんでしょうか。
【加藤】そうですね。端末で判断してしまうと今までリリースされもの、これから先リリースされるもの、すべてをカバーするには無理がありました。画面幅での判断であれば、将来的にどんな端末でも対応できるようになります。
【星】素晴らしいですね。
【山下】ユニバーサルなデザインと言えますね
【加藤】はい。汎用的なデザインですね
Image may be NSFW.
Clik here to view.
その他にも、
Q.レスポンシブWebデザインに使用する画像の注意点を教えてください
Q.スマホからアクセスする年代/男女比率、購買数、ユーザー層など教えてください
Q.ガラケーユーザーに向けたサービスの改善と今後の対応予定は
Q.レスポンシブWebデザインの良さを維持したままテンプレートのカスタマイズをしたいと思います。注意点はありますか？
などなど、なんと１時間にわたって絶え間なくやりとりされる講師陣とご参加いただいた皆様の熱い思い。とても充実した生の声が聞けます！ぜひぜひご覧ください！
タイムシフト動画はこちら
photo credit
Team Project ECC
- Presented：StarMarketing,corp.
- Supported：grapesatellite,inc.
- Developed：Neco,co.
- Planning：運チ
- OP：Wingspan Inc.
- BGM：ALFABED RECORDS
- Voice：祇園キタ
- TEXT：Arata
- Moderator：yamap（Facebook/Twitter）