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

よろしければこちらもご覧ください
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

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

前回の記事『スマートフォン向けサイトを具体的に効率良く構築するには?』では、フィーチャーフォン向けサイトに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
=============================
 

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

XMLサイトマップ
検索エンジンに対して、サイト内にあるページをリストアップして伝えるファイル。XM ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]