レスポンシブECサイトを成功に導くポイント（準備〜コーディング編）

1. レスポンシブECサイトを成功に導くポイントをご紹介

レスポンシブECサイトを成功に導くポイントをご紹介

今回は初めてレスポンシブECサイトを構築する方や、今までのECサイトからレスポンシブECサイトへ移転される方に、レスポンシブECサイトを成功に導くポイントをご紹介したいと思います。

もちろん、現在レスポンシブECサイトを運営されておられる方も今一度整理をする意味でご参考にしていただいて構いません。

１．サイト構築前の準備

コンセプトワークを行いましたか？

コンセプトシートに添って、構築(リニューアル)するサイトのコンセプトをまとめます。

コンセプトワークはサイトの存在意義を決定するために非常に重要です。「誰に」「何を」「どのように」サイト上で伝えるのかを明文化させましょう。

下記のコンセプトシートに沿って答えをまとめていただくと、必要な情報が定義することができます。そちらに沿って、今後ECを運営する際の指針としてください。
コンセプトシートはこちら

サイトマップは作成しましたか？

サイト制作時に「制作漏れ」や「重複ページ」などを発生させないため、制作を予定しているページを全て一覧にまとめましょう。事前にExcelファイルなどで一覧化することで、メニューやTOPページからリンクするページを決めやすくなるメリットがあります。

また、ページ一覧はそのまま内部SEOのキーワード一覧表としても使用することができますので必ず作成しましょう。

ガラケーへの対応は行いますか？

個人でのガラケー所有率は2014年2月の調査では41.9%と過半数を割っており、スマートフォン所有率（同54％）と大きく差が開いています。

年代別では、15歳〜19歳（21%）、20代（27.4%）、30代（37%）と年代が若くなるにつれてガラケーの所有率は低くなる傾向があり、また全体の所有率についても年々低下しています。

ガラケーへの対応についてはサイト構築後にCSSなどで調整が可能です。構築前にガラケーへの対応をどこまで（表示ができる程度なのか、十分サイトとして機能する程度なのか）決めるのかは、そこまで意識する必要はありません。

参考：スマホの所有率、女性が男性を上回る

クレジットカード決済などの申し込みは済みましたか？

クレジットカード決済、キャリア決済、コンビニ決済などの利用は事前審査が必要です。通常申込〜ご利用開始まで1ヶ月半〜必要となりますので、申し込みは出来る限り構築前にすることをオススメします。

対応させるデバイスは決めましたか？

各デバイスの出荷台数は、PC2億7670万台（前年比-6.6%）、タブレット2億7070万台（前年比+38.6%）、スマートフォン18億9510万台（前年比+10%）となっています。

PCの出荷台数は年々下降しており、既にモバイルデバイスが普及の中心にあるので、モバイルデバイスを中心とした対応をおすすめします。

参考：Gartner Says Worldwide Traditional PC, Tablet, Ultramobile and Mobile Phone Shipments Are On Pace to Grow 6.9 Percent in 2014

対応させるブラウザは決めましたか？

日本のブラウザシェアは、IE（39％）、Chrome（32%）、Firefox（13％）、Safari（11％）となっています（2015年8月現在）。IEに関してはver11のシェアが32％、ver10が同2%、ver9が同3%ですので、メインはIE11を中心に対応すれば問題ありません。

上記のブラウザシェアを参考にすると、IE11、Chrome、Firefox、Safariで表示崩れが起きないように確認をしましょう。またIEについてはIE8以前の古いブラウザは標準ではレスポンシブWebデザインには対応していません。対応させる場合は、別途JSを組む必要があり工数が必要になりますので注意ください。

参考：Stat Counter（日本のブラウザシェア）

対応させるOSは決めましたか？

スマートフォンのOS別契約数は1位：Android 3,274万件（57.1％）、2位：iOS 2,394万件（41.8％）、その他66万件（1.2％）となっています。対応OSはAndroidとiOSの2つをメインにすれば基本的に問題ありません。

参考：スマートフォン市場規模の推移・予測（2014年4月）

またAndroidのバージョン別シェアはver4.1（33.5%）、ver4.2（18.8%）が多くなっています（2014年5月現在）。iOSのバージョン別シェアではiOS7が88%と圧倒的に多数を占めていますので、Androidではver4〜、iOSでは7へ基本的に対応できるようにしましょう。

OS毎の最新バージョンシェアはディベロッパーサイトで確認することができます。ほぼ毎月アップデートされていますので、参考ください。

Android：Googleが公開しているAndroidの各バージョンシェア率
iOS：App Store Distribution

２．ワイヤーフレーム作成前

ワイヤーフレームを作る

トップページに盛り込むコンテンツが全て洗い出されていますか？

各コンテンツへの動線を漏れることなく確保するために、トップページに盛り込むコンテンツを全て洗い出しましょう。必要と思われるコンテンツをブレストにて徹底的に洗い出し必要な要素に優先順位をつけましょう。

トップページに配置するコンテンツの配置優先順位は決定しましたか？

配置されたコンテンツはページの下部に行けば行くほど、ユーザーに認知されなくなります。認知をしてほしいリンクやバナー（特集や売り出したい商品など）の優先順位を決定し、どのような順番で配置をするのかを決めましょう。

ブレイクポイントは決めましたか？

日本で利用されている主要なモバイルデバイスはiPadやiPhoneになります。一般的にレスポンシブWebデザインで採用されているブレイクポイントは480px、768pxが主流になっていますので、特に問題がない限り、ブレイクポイントはこの2つに設定しましょう。

参考：レスポンシブWebデザインのブレークポイント調査

３．ワイヤーフレーム

ワイヤーフレーム作成に便利なツールを使いましょう。

紙とペンを使った手描きのワイヤーフレームはラフを作成するときに便利です。ラフから実際のサイズや実機確認をするためのワイヤーフレームに落としこむ際には、ExcelやPowerPointを使用して作成しましょう。

またCacoo（https://cacoo.com/lang/ja/）などのオンラインツールを使えば複数人で同時に編集したり、ワイヤーフレームに使えるテンプレートなどが予め用意されているので、すぐに使い始めることができます。

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

ショップの特徴が一目で理解できますか？

他のショップとの違いをファーストビュー（ユーザーがサイトを訪れて初めて目にする範囲）で伝え、お店の特徴を理解してもらいましょう。

何のショップか一目で理解できますか？

モバイルの小さな画面ではユーザーにどのようなショップなのか、ひと目で理解してもらうことが次のコンテンツに進んでもらえるかどうかの重要な要素となります。ファーストビュー（ユーザーは訪れてはじめて目にするサイトの範囲）で理解してもらえるよう、コンテンツを整理しましょう。

商品ページなどの重要な目的ページへの導線が確立されていますか？

モバイルユーザーは一般的に目的意識（ある目的に対しての到達意欲）が高いとされています。ユーザーを迷わせることがないように、重要なページへはたどり着きやすく、無駄のない動線を確保しましょう。

重要なメニューはタッチしやすいサイズで、右片手でもタッチしやすい位置にありますか？

タッチのしやすい推奨サイズは44px以上です。またスマホユーザーの約半数は右片手で操作をしている統計があります。タッチしやすい位置を考慮してボタン配置を行いましょう。

参考：モバイルサイトのナビゲーションメニューは画面下に置くべき | Webクリエイターボックス

余白を取りすぎて、間延びしていませんか？

必要のない余白はできるだけなくし、モバイルの小さな画面でも情報をきちんと伝えられるような構成を心がけましょう。

ワイヤーフレームを実機で確認しましたか？

デザイン工程に入る前に、PC、タブレット、スマートフォン各端末で実際にモックアップを確認しましょう。ボタンのサイズや配置、バナーの大きさ、余白などを確認することで、その後の工程での出戻り作業を防ぐことができます。

タブレット端末からも使いやすい構成になっていますか？

タブレット端末からでも買い物がしやすいデザインになっているかを確認しましょう。タブレットはPCに近い画面サイズを持ちますが、操作方法はスマートフォンに近い端末です。

そのため「PCに近いデザイン」ながら「タッチ操作で使いやすい」デザインであることが重要です。専用のデザインを作成することが困難な場合は、PC向けのデザインで代用することが推奨されています。

参考：Google ウェブマスター向け公式ブログ: モバイルサイトを改善するためのチェックリストと動画をご紹介します

原典（英語）：Tablet Usability: Findings from User Research

タブレットでも使いやすいPCデザインを作ることで、より効率的にタブレット対応を実現させることができます。

PC・スマートフォンどちらでもすべての情報にアクセスできますか？

デバイスによってコンテンツの差異があれば、ユーザーを迷わせる要因になり、満足度を下げる要因となります。極端なコンテンツ差異がなく、全ての情報にアクセスできるように調整しましょう。

商品詳細ページにSNSボタンは本当に必要ですか？

SNSボタンの設置はページ速度を著しく低下させる可能性があるため、理由のない設置は推奨しません。本当に必要なものなのか、きちんと検討しましょう。

ロールオーバー無しでも使いやすレイアウトになっていますか？

タッチデバイスではロールオーバー（マウスを画像などに載せた時に、画像が入れ替わったりする動作）が使えません。UXを損ねないためにも最小限の使用にとどめましょう。

スライダーメニューの多用は避けましょう。

自動的にスライドをするメニューはタップしにくく、クリック率を低下させます。またユーザーが意図しないコンテンツをタップする可能性もあるので、できるだけタップしてもらいたいバナーなどは静止させましょう。

４．デザイン

レスポンシブWebデザインについてのスライド5選

ファーストビューのデザインでテイストを確認しましょう。

ファーストビューをデザインし、それぞれ実機で確認してからその後の作業に入りましょう。全体をデザインしてから確認するよりも、初期の段階でテイストを確定できるので出戻り作業がなくなります。

アイコンなどは高精細のものを用意しましょう。

retinaディスプレイ対応のiPhoneなどはPCのアイコン素材をそのまま使うと、ぼやけて表示される可能性があります。アイコンなどはできるだけ2倍の大きさで作成し、縮小表示させ、くっきり表示されるようにしましょう。

スマートフォンで鮮明に表示させたい画像は横幅640px以上で作成されていますか？

iPhoneなどの高精細ディスプレイでは、640px以下の画像は引き伸ばされ表示される場合があります。鮮明に表示させるには640px以上で作成しましょう。

またその際は容量に注意してください。全ての画像を640pxで作成すると、容量が大きくなりページ読み込み速度を低下させるため、必要のない画像は小さく作成しましょう。

ファビコンは用意・設置しましたか？

必要であればファビコンを作成しましょう。ブラウザのタブやブックマークした際のアイコンとして表示されるので、ユーザーがアクセスしやすく、サイトのブランディングにもつながります。

参考：無料ですぐできるfaviconの作成と設置のしかた : Web Memo.SE

屋外で使用しても見やすい配色を心がけましょう。

モバイルユーザーは屋内でサイトを見るとは限りません。屋外など、どこで閲覧しても見やすく、読みやすい配色を心がけましょう。

カート内もデザインは統一されていますか？

カート内も通常のコンテンツと違和感のないデザインを心がけましょう。カートのデザインが大きく異なると別サイトにリンクしたと誤解され、離脱の可能性が高くなります。

画像に文字を入れすぎていませんか？

レスポンシブWebデザインでは基本的に全デバイスで共通の画像を使うため、PCの大きな画面で読める画像内の文字も、スマートフォンで読めない場合があります。

この場合は、まずスマートフォンでのきちんと読めるか確認をしてから、作成しましょう。AppleのiOSガイドラインには14px以上が推奨とされています。

参考：iOSヒューマンインターフェイスガイドライン

ボタンを押した際の動作は設定済みですか？

スマートフォンやタブレットなどのタッチスクリーンでは、ボタンを押したかどうかが分かりやすくデザインすることで、操作に違和感を与えません。CSSでタップ後のデザインをしましょう。

参考：株式会社アクトゼロ／コンテンツマーケティング・ソーシャルメディアマーケティング | ACTZERO Inc.

ドロップダウンメニューには、「▼」をつけましょう。

タップした後の動作をイメージし、ユーザーにタップができるということを視覚的にわかりやすいデザインをしましょう。

リンク先がある場合は「＞」で次のリンク先を示しましょう。

こちらもタップした後の動作をイメージし、ユーザーにタップができるということを視覚的にわかりやすいデザインをしましょう。

５．コーディング

mediaqueryの中にmediaqueryを記述していませんか？

mediaqueryの中にmediaqueryを記述すると、スタイルが正しく適用されない可能性があります。CSS記述時は注意しましょう。

---悪い例---
@media only screen and (max-width: 768px) {
/* Tablet style */
@media only screen and (max-width: 480px) {
/* SmartPhone style */
}
}
 
---いい例---
@media only screen and (max-width: 768px) {
/* Tablet style */
}
@media only screen and (max-width: 480px) {
/* SmartPhone style */
}

大きな画像はリサイズ済みですか？

サイズの大きな画像をスマートフォンで読み込む際、モバイル回線では時間がかかる可能性があります。読み込み速度の低下はユーザー満足度や検索エンジンからの評価も下がりますので、なるべく最適な画像サイズにリサイズしましょう。

widthは％で設定していますか？

画像を固定幅で指定すると、横幅の狭い端末閲覧時に画面から画像がはみ出てしまいます。必ずサイズは画面幅に対して%（相対的に）指定しましょう。CSSフレームワークを使用すると効率的です。

viewportは設定しましたか？

スマートフォン、タブレットで表示する際のサイトの見え方の指定することができます。縦幅や横幅の他に拡大縮小の倍率や、ピンチイン・アウトを許可するかどうかの指定も出来ます。

記述はHTMLのにmeta要素として追加します。

Flashは使用していませんか？

スマートフォンで再生できないコンテンツは検索エンジンの順位に影響を及ぼしますので、使用はしないようにしましょう。

参考：Googleがスマホへの対応が不適切なサイトの順位引き下げを発表 | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ

必要に応じてCSSスプライトは使用していますか？

CSSスプライトとは、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示するテクニックです。画像を連結することで読み込み速度の改善が見込めます。必要に応じて使用してください。

参考：CSSスプライトについてあれこれ。

レビューは商品ページから確認できますか？

商品に関する「お客様の感想（レビュー）」を掲載することで、安心して商品を購入できるサイトにすることができます。
商品レビューがあるサイトでは、無いサイトよりも売上が増加しやすいというデータもアメリカで発表されています。

地図などのiframeが、スマートフォンのスクロールを妨害していませんか？

横幅いっぱいに地図を設置すると、ユーザーが画面をスクロールする際の妨げになるので、スクロールがしやすいように必要な余白を設けましょう。

参考：モバイルデバイスにおける地図と所在地検索 – U-Site

画像の遅延読み込みは正しく設定されていますか？

画像を多く使用してるページでは、全ての画像を読み込ませると時間がかかってしまいます。画面に表示されている領域のみの画像を読み込むように設定することで、ユーザーにストレスを与えることなく読み込みをすることができます。

容量の大きい画像の軽量化は実施済みですか？

容量が大きく、読み込みに時間の必要な画像はユーザー満足度やや検索エンジンからの評価を落とす可能性があります。劣化をさせないロスレス圧縮でサイズを小さくし読み込み速度を改善させましょう。

参考：【無料ツール】レスポンシブサイトで画像サイズを悩むならロスレス圧縮を！｜モバイルファーストラボ

IE8への対応は問題ありませんか？

標準でIE8はレスポンシブWebデザインには対応していません。PCでの表示崩れなどがないかチェックしましょう。ウィンドウズXPのサポートが終了した今は、IE8への対応は考えなくてもいいかもしれません。

アクセスするユーザーがどのような環境で閲覧をしているのか、把握をして少なければ対応しないという選択肢もあります。

テキストリンクは使っていませんか？

スマートフォンやタブレットなどのタッチデバイスではテキストがリンクであるのかそうでないのか、見分けがつきません。テキストリンクを使う場合は、アンダーラインでの装飾や、青色の文字色など一般的なリンクのデザインにしましょう。

画面ポップアップや、モーダル表示は使用していませんか？

OSによって動作しない可能性があります。また画面専有面積が大きければユーザーの操作性も損ねてしまう可能性がありますので、使用は控えましょう。

スマートフォンでは「電話」のタップで電話がかけられますか？

スマートフォンでは、ボタンタップですぐに電話がかけられうようにすることで、ユーザーの利便性を向上させます。電話番号などを記載する場合は、スマートフォン時には電話をかけられるようにコーディングしましょう。

会員登録ページ／マイページ／カートページのレイアウト調整は完了していますか？

レイアウトやデザインの差異があると、ユーザーは別サイトへリンクをしたと誤解を招く可能性があります。他のページと同じようにレイアウトやデザインを調整をしましょう。

リンク切れの確認は済みましたか？

サイト内にリンク切れがあると、ユーザーと検索エンジンからの評価を落とします。ウェブサイトエクスプローラーなど無料ツールでリンク切れチェックを実施しましょう

参考：Website Explorer(ウェブサイト・エクスプローラ)の詳細情報 : Vector ソフトを探す！

スマートフォンの実機で確認した時に、テキストは読みやすいですか？

一般的に14px以上のフォントサイズが読みやすい目安と言われています。必ず実機で確認するようにしてください。

参考：iOSヒューマンインターフェイスガイドライン

モバイル回線で読み込んだ場合、ファーストビューは1秒以内に表示されますか？

Googleの調査によると、読み込みに 1 秒以上かかった場合、ユーザーの集中が途切れてしまう傾向にあります。読み込み速度の改善ポイントを見つけるために、Googleの無料ツールを活用しましょう。

参考：PageSpeed Insights

また必要に応じてモバイル回線（3G／LTE）での読み込み速度の計測や、ファイルサイズの確認などができるアプリがあるので、活用ください。（有料）

参考：iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 Web Developer Tools

SSLページでもjQueryは動作しますか？

「http://～」から始まるアドレスでjQueryを呼び出した場合、SSLページでは正常に動作しません。アドレスを「//～」から始めるか、SSLページのみ「https://～」から始まるアドレスに変更しましょう。

NG:&amp;amp;lt;script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;

OK:&amp;amp;lt;script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;

OK:&amp;amp;lt;script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqSery.min.js”&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;

次回はオープンから集客後までのポイントをご紹介いたします。

クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。

資料請求