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

1.なぜスマートフォン用CSSを作るのか

PC用のサイトへ誘導することも、携帯用のサイトへ誘導することもスマートフォンに対しては適切とは言えません。

スマートフォンではPC向けに作成されたサイトへもアクセスすることができます。しかし画面内にページの全体が表示されなかったり、全体が表示されても今度は文字サイズが小さすぎて読みづらかったり、またPC向けのファイルサイズの大きな画像を読み込むのに時間がかかったりと、決して快適なWEBブラウジングは行えません。

携帯向けサイトへアクセスすると、こうした問題の多くは解決されます。ですが携帯のようなナンバーキーでの操作ではなく、スマートフォンは画面に直接指で触れるタッチパネルで操作を行います。このユーザーインターフェースの違いが携帯向けサイトとスマートフォン向けサイトの大きな隔たりとも言えます。

携帯向けに最適化されたサイトは、このナンバーキーでの操作が加味されたサイトと言えるでしょう。それが逆にスマートフォンでは適さない、または扱いづらいといったこともあります。

更にスマートフォンは先述の通りPCサイトも閲覧できる高機能な端末です。携帯向けに最適化されたコンテンツよりも、もっとリッチなコンテンツを提供し、楽しんでもらうことが出来るのです。

このPCと携帯の良いところを併せ持った、スマートフォン向けに最適化されたサイトを作成することが、スマートフォン利用者が増加している今、サイトオーナー様に求められるものなのです。

2.スマートフォンCSSを使えばこんなことが出来る

CSS（カスケーディング・スタイル・シート）とは、HTMLソースとは別に用意されるデザインを指定するための専用ファイルです。CSSが読み込まれるまではシンプルなページでも、CSSを読み込ませることによってデザイン豊かに、リッチなページを表示することが出来ます。

aishipにはスマートフォンCSSが標準搭載され、簡単に管理画面からそのスマートフォンCSSを編集することで、スマートフォン向けにリッチなデザイン表示が可能となります。

3.スマートフォンECサイトデザインの特徴

スマートフォン用ECサイトでは、下記のような特徴があります。

・メニュー部
・カテゴリ表示部
・商品画像の見せ方

例えばメニュー部では、通常携帯サイトではテキスト一覧で表示されるものですがスマートフォンの場合、CSSを適応することでタッチしやすい表示を実現できます。

またカテゴリ用アイコンも、画像を並列に表記するだけではなく、画像を角丸にしたり、画像に影をつけて存在感や可愛らしさを表現することができます。

更に大きな特徴として、商品画像をアニメーション形式に回転させることができます。携帯サイトではFlashなどでなければ表現できず、また画像登録とは別にFlashの作成なども必要となる動作ですが、スマートフォンならCSSを使用することで、登録された画像を回転させることができるのです。

このように、スマートフォン向けにCSSを作成することで携帯向けサイトやPC向けサイトとは異なる、スマートフォンに適したサイトを提供することが出来ます。

スマートフォンCSSを活用して、適切なサイトレイアウトでアクセスした方にストレスを与えず、何度もサイトを訪れてもらえるような魅力的なスマートフォン向けサイトを作成しましょう。

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