スマートフォン向けのサイトを効率良く構築するには？

1.スマートフォンは画面が小さい
2.携帯サイトをスマートフォンで表示してコストダウン
3.CSSを使ってスマートフォンらしく

■スマートフォンは画面が小さい

スマートフォンで一般的なPC向けのレイアウトで作成されたWebページを閲覧するのには小さい画面では拡大縮小を繰り返さないといけません。また、画面を拡大してしまうと今どこを見ているのかわからなくなります。

画面を上下左右とスクロールできてしまうと現在位置を見失ってしまいます。PCの画面は横長なので大体のWebページは縦スクロールだけで閲覧できます。

また、携帯（ガラケー、フィーチャーフォン）は縦スクロールしかできないので縦長のレイアウトとなっています。

スマートフォンでPC向けのサイトを表示してしまうと上下左右とスクロールすることになりとても大変です。これをPCや携帯と同じように縦スクロールのみにすると大変閲覧しやすくなります。

そこで小さい画面で縦スクロールを実現するために、縦長のレイアウトを採用するのがスマートフォンに最適と考えられます。

■携帯サイトをスマートフォンで表示してコストダウン

スマートフォンはPC向けのレイアウトが可能であることから、PC向けサイトで出来ることは大概のことが実現可能なので、PC向けでありながら小さい画面に合わせたスマートフォン向けのレイアウトを用意するのが理想です。

ですが、PC向けも携帯向けも、さらにスマートフォン向けも運用していかないといけないとなると大変です。そこで、これまで運用してきたPC向けか携帯向けかをスマートフォンで利用できないかと考えます。

スマートフォンに近いデバイスは携帯です。小さい画面でかつ縦スクロールでWebページを閲覧します。つまり、画面のサイズで大きく2つに分類し、大画面向けのレイアウトと小画面向けのレイアウトを用意すればよいのです。

携帯サイトをそのままスマートフォンで表示することで、コストをかけずにスマートフォンに最適なレイアウトを提供することができます。

■CSSを使ってスマートフォンらしく

しかしながら、携帯サイトをそのままスマートフォンで表示すると味気ないです。現時点ではスマートフォンはPCブラウザ以上の表現が可能です。これを活かさない手はありません。

例えば、スマートフォンの場合に外部CSSを読み込ませます。携帯サイトにスマートフォンらしいスタイルを適応させることでよりリッチなサイトにすることができます。

基本的なレイアウトは携帯サイトを利用することで手間がかかりません。さらに、CSSを利用することでスマートフォンならではの表現を実現することができます。最小限のコストでスマートフォン向けのサイトを効率良く構築するのです。

ここから先はCSSのテクニックとなります。アイデア次第でいろいろなことができます。スマートフォン向けショッピングカートのaiship

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