スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（13）～

サイトを作成している時
「何とかページ容量を軽くする方法はないかな」
そんな風に悩まれたことはありませんか？

aishipでは1つのページをスマートフォンとフィーチャーフォン（携帯電話）とで共有しているので、スマートフォンでは問題ないページ容量であったとしても、フィーチャーフォンから見た時にページ容量を超えてしまって閲覧できないといった現象にしばしば遭遇します。
最近のフォーチャーフォンでは300KBを上限とする容量の大きな機種が主流ですが、100KBと上限とする数世代前の機種を使っているユーザーさんもまだまだ存在するようです。また300KBの機種を使っているユーザーさんであったとしても、少しでもページ容量が軽い方がストレス無くサイト内を閲覧できるということは当然と言えば当然です。

aishipの機能やCSS3の小ワザを少し活用して、ページ容量を軽くするためのいくつかの方法をご紹介致します。

【1.画像を別々に用意する】
フィーチャーフォン用の画像は横幅が240px基準で作成されており、また解像度を多少抑えても支障なく閲覧出来るため、比較的軽いサイズの画像を用意することができます。
反面スマートフォンの場合は640px基準で作成されます。PCサイトも閲覧できる容量の大きさが強みであり、解像度が高く、容量の大きい画像を作成することになります。

さて、サイトのメイン画像を1つ作成したとしましょう。

HTML：　width="100%"

とIMGタグに指定することで、どの端末から見ても画面いっぱいに画像を表示させることができますが、もしフィーチャーフォン用の画像を使用している場合、スマートフォンから見るととても荒い画像になってしまいます。
これを避けるためにスマートフォン用の画像を使用した場合、容量が大きすぎて、その画像のためにページコンテンツが全て表示されない可能性もあります。

そんな時にはCSSで、画像の表示を切り分けてみましょう。

HTML：
<div class="sample-ftr">
<a href="#" class="f01">商品一覧</a><br />
<a href="#" class="f02">特定商取引法</a><br />
<a href="#" class="f03">配送料とお支払い</a><br />
<a href="#" class="f04">お問い合わせ</a><br />
<a href="#" class="f05">サイトTOP</a><br />
</div>

CSS：
div.sample-ftr {
width: 300px;
border-radius: 8px;
-webkit-border-radius: 8px;
margin-left: auto;
margin-right: auto;
}

div.sample-ftr a {
width: auto;
height: 45px;
text-indent: -9999;
background-size: 300px 45px;
-webkit-background-size: 300px 45px;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
}

a.f01 { background-image: url(画像名.jpg);}
a.f02 { background-image: url(画像名.jpg);}
a.f03 { background-image: url(画像名.jpg);}
a.f04 { background-image: url(画像名.jpg);}
a.f05 { background-image: url(画像名.jpg);}

div.sample-ftr br { display: none;}

aishipでは、スマートフォンから閲覧した時にのみCSSが読み込まれ、ページに適用されます。これを利用してCSSで

・このエリアにスマートフォン用の画像を背景画像として表示する
・フィーチャーフォン用の画像を非表示にする

と指定しました。
こうすることでCSSの適用されないフィーチャーフォンではHTMLに記述されている通りにフィーチャーフォン用の画像のみが表示され、スマートフォンではCSSの記述に沿ってスマートフォン用の画像が表示されるようになるのです。
メイン画像1つだけでもページの容量をカンタンに抑えることが出来る方法です。容量の大きな画像を設置しているページで、ぜひ行ってみてください！

【2.そもそも画像を表示しない】
ざっくりとした言い方ではありますが、テキストと画像であればテキストの方が容量が軽いのが一般的です。
例えばページの下部にフッターメニューと呼ばれるリンクの一覧を表示させる時、スマートフォンではタッチしやすいようにリンクの幅に余裕を持たせたり枠線を設けたりすることを過去の記事でもオススメしてきました。

フッターメニューに限らず、リンク部分はタッチしやすくリッチなデザインにしておくことをおすすめしています。リッチなデザインにする方法の1つに画像を使用することが挙げられますが、画像を用いてデザインする場合でも、フィーチャーフォンの時には画像を表示させない方法もあります。

HTML：
<div class="sample-cate">
  <a href="#" class="f01">カテゴリ1</a><br />
  <a href="#" class="f02">カテゴリ2</a><br />
  <a href="#" class="f03">カテゴリ3</a><br />
  <a href="#" class="f04">カテゴリ4</a><br />
  <a href="#" class="f05">カテゴリ5</a>
</div>

CSS：
div.sample-cate {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

div.sample-cate a {
  width: 50px;
  height: 50px;
  text-indent: -9999;
  background-size: 50px 50px;
  -webkit-background-size: 50px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  margin: 2px;
  display: block;
  float: left;
}

a.f01 {	background-image: url(画像名.jpg);}
a.f02 {	background-image: url(画像名.jpg);}
a.f03 {	background-image: url(画像名.jpg);}
a.f04 {	background-image: url(画像名.jpg);}
a.f05 {	background-image: url(画像名.jpg);}

div.sample-cate br {	display: none;}

フィーチャーフォンではCSSが読み込まれないのでテキストリンクのみが表示されます。スマートフォンではCSSの記述どおり、背景に画像が適用された状態で表示されるようになります。「軽量の画像だから大丈夫」と油断せず、小さな画像も多用すれば大きな容量になります。この方法でまた少しページ容量を軽減させることができるのです。

いかがでしたか？
画像の読み込ませ方1つで、ページの容量は大きく上下します。容量を軽減させたいとお考えの方は、ぜひ試してみて下さいね！

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』　松井　）

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