続、スマートフォン向けサイトを具体的に効率良く構築するには？

■特別編、フィーチャーフォン向けサイトをそのままスマートフォンで表示する

前回の記事『スマートフォン向けサイトを具体的に効率良く構築するには？』では、フィーチャーフォン向けサイトにCSSを適応させてスマートフォン向けにリデザインする方法をご紹介いたしましたが、もっと簡単に手間をかけずにスマートフォン向けサイトを構築できないか？と思っている方に

「フィーチャーフォン向けサイトをそのままスマートフォンで表示する」

という方法をオススメします。

以前の記事『ショッピングサイトのスマートフォン対応状況』では、フィーチャーフォン向けサイトをそのままスマートフォンで表示している『Amazon』や『ニッセン』の例を挙げました。

これらのサイトはスマートフォンで見てもフィーチャーフォンと同じようなデザインとなっています。ここで重要なのは「小さい画面に最適化されたサイトを表示する」ということです。

小さい画面といえばフィーチャーフォンです。フィーチャーフォン向けのサイトでは小さい画面で必要最低限の情報を伝えるのに最適なデザインとなっていることが多いです。それをそのまま小さい画面であるスマートフォンで表示するだけで、情報量の多いPC向けサイトを表示するよりも閲覧者へ情報が伝わりやすくなります。

そこで、スマートフォンでそのままフィーチャーフォン向けサイトを表示させてみるのですが、スマートフォンの横幅は一般的に320px、フィーチャーフォンは240pxです。なのでこのままだと文字や画像が小さかったり、意図しない隙間が空いたりします。

これを防ぐおまじないをご紹介します。

<meta content="width=240, initial-scale=1.32, minimum-scale=1.32, maximum-scale=1.32">

240pxを1.32倍の拡大表示をすることでフィーチャーフォン向けサイトをそのままスマートフォンで表示できるのです。

コストをかけずにスマートフォン向けサイトを構築されたいと思われている方は、すでにフィーチャーフォン向けのサイトがあるのであれば、それを上記のおまじないを使ってまずはフィーチャーフォン向けサイトをスマートフォンで表示するようにして、こだわりたいなと思っている部分は前回の記事『スマートフォン向けサイトを具体的に効率良く構築するには？』を参考にCSSを使ってみてはどうでしょうか。

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