画面サイズの多様化。スマートフォンサイトの作り方はこれからどうなるか

Apple - iPhone 6

クライアントの予算に余裕のある時にはセットで依頼があるスマートフォンサイト制作。その作り方も様々です。

私がスマートフォンサイトを作るときによくやっているのは、
以下のscriptをheadに記述し、320px幅で作ったデザインを端末の画面サイズに合わせてzoomする方法です。

<script>
　$(window).bind('resize load', function(){
　　$("html").css("zoom" , $(window).width()/320 );
　});
</script>

iPhone4のRetinaディスプレイが登場した時も、幅は320pxの2倍である640pxだったので、画像素材をそれに合わせて作っておけば違和感なく表示できていました。

この方法では、320pxという決まった幅でデザイン・コーディング作業をするので、比較的簡単にスマートフォンサイトを作ることができます。
ですので「この作り方最高！」と思っていました。そう、iPhone6が発売されるまでは。

iPhone6、iPhone6 Plusの画面幅

iPhone6は画面幅が今までのiPhoneとは異なる倍率になっています。

iPhone3 320px
iPhone4 640px
iPhone5 640px
iPhone6 750px
iPhone6Plus 1080px

日本人の多くが所有しているiPhone様なので、もう画面サイズの多様化からは逃れられません。iPhone6や6Plusのサイズにも最適化されるスマートフォンサイトの作り方を新たに考える必要がでてきます。

MVNOが流行ったり、Y!mobileの大々的な宣伝でnexusやらの大画面スマートフォンも増えてくると思いますし、この先iPhone5sがターゲットから外れた時に320pxの枠で作るのも変です。

今まで作ったスマートフォンサイトをnexus5で見た感じ、意外とまだ大丈夫！いい感じ！と思えたのですが、後々違った方法でのスマートフォンコーディングが必要になってくるかもしれません。

スマートフォンサイトの作り方のメリット・デメリット

320pxズームで作る方法

メリット

・幅が決まっているのでデザイン、コーディングがしやすい
・どんな端末で見てもデザインが同じで崩れない

・ピクセルベースで作れるので複雑なレイアウトも可能

デメリット
・単純に拡大されるだけなので大画面スマートフォンで見ると野暮ったい（文字が大きく表示され、かんたんスマホっぽくなる）
・横向き表示は見れたものじゃない

iPhone5sがターゲットのうちはこの方法で作っていくと思います。そのうち、320pxの基準値を大きくして制作することも考えられます。
ですが、この方法で作ってるスマートフォンサイトほとんど見ませんよね…。

横幅100%の伸縮デザインで作る方法

参考：味の素（株）商品情報サイト～Eat Well, Live Well.～AJINOMOTO

メリット
・様々な画面サイズに適応できる
・横向き表示にしても使用に耐えられる

デメリット
・％表示を使うのでコーディング感覚が難しい

・伸縮するので「これ！」ときまったデザインがない

・複雑なレイアウトには向かない

・大画面スマートフォンで見ると、余白が多く間延びしたデザインになる

スマートフォンサイト集をみてるとこのタイプが一番多かったです。

ウィンドウサイズに応じたレスポンシブデザインで作る方法

参考：Lipton chilled ｜ リプトンチルド飲料 森永乳業

メリット
・画面サイズに応じた適切なレイアウト、情報量を表示出来る
・HTMLは一つで済むのでソース修正はPC、スマートフォン、タブレットとあわせても一箇所だけで済む

デメリット
・CSSの記述が複雑かつ多くなる
・HTMLの記述を充分に考えてつくらないといけない
・デザインの段階からもHTMLの知識が必要なので敷居が高い
・レイアウト修正が入った時は地獄

とても理想的なんですが、デザインの数だけコーディングが必要で、しかもそれを一つのHTMLで作らないといけないのでものすごく大変です。
しかし、wordpress使ってる人はテンプレートを使って簡単に導入できそうな気もします。他にはBootstrapなどのCSSフレームワークを使ったらいいのでしょうか。
予算と制作期間をがっつり組んでもらわないと気が進まないコーディングです。

サイトをちらほら見てみたところ、「横幅100%の伸縮デザイン」が無難ですが有望な印象。多いということは、ある種、正解の一つです。

スマートフォンサイトの作り方を勉強したのもiPhone4が発売したかどうかの3、4年くらい前なので、最近のトレンドを踏まえた上でもう一回勉強しなおさないといけないですね。時代の流れは早いです。

HTML5+CSS3で作る スマートフォンサイト実践デザイン入門