スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?

このエントリーをはてなブックマークに追加

スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?

スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するのがいいのでしょうか?メリットデメリット含め記事にしてみようと思います。

スマホサイトの固定幅について

まずはスマホサイトを固定幅作る場合を考えてみます。

基本情報

・retinaに合わせて幅640pxで作るのが基本
・PC、SPそれぞれHTML,CSSを別に作る場合のみ可能

viewportの指定はこんな感じ

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

cssはこんな感じ

body {
	width:640px !important;
	background:#3e4751;
	min-height:1200px;
}
#wrap {
	width:640px !important;
	background:#fff;
	min-height:1100px;
}

問題点

・Androidで幅640pxが認識されない端末がある
・普通に画面幅をはみ出して拡大されて表示されている

javascriptで強引に640pxに合わせる必要が出てくる

※実際に、仕事で使ったものをそのまま載せています。なので、backgroundとか不必要なものがあります。

function initialize() {
	$(document).on("ready", adjustAndroidZoom());
	$(window).on("orientationchange resize", function(){
		adjustAndroidZoom();
	});
}

// Android用アジャストzoom
function adjustAndroidZoom() {
	zm = $(window).width() / 640;
	$('body').css({
		'zoom' : zm,
		'visibility': 'visible',
		'background' : '#3e4751',
		'width' : '640px'
	});
}

$(function(){
	initialize();
});

固定幅のメリット

PCと同じようにデザイン(例えば960px幅のデザイン)と同じようにコーディングが出来る

固定幅のデメリット

・どうしてもリサイズや画面の向きを変えるたびにjsが走ることになる
・表示させることを考えるとよけいなjsを読みこまければいけない
・回線の問題もあるので、この辺は大きな問題かも

スマホサイトのリキッドレイアウトについて

つづいてリキッドレイアウトについて考えてみます

基本情報

・基本幅100%で作成
・PC,SPそれぞれ違うリソースでも、同じリソースでも可能

リキッドレイアウトメリット

・固定幅のように、jsを読み込ませて強引に640pxに合わせる必要も無い
・メディアクエリでレスポンシブに対応ができる

リキッドレイアウトのデメリット

・デザインの自由度は狭いかも

フラットデザインはレスポンシブと相性が良いのではないかと。

スマホサイトってリキッドレイアウトと固定幅についてのまとめ

スマホサイトの標準としてはリキッドレイアウトの流れですね。基本的にはリキッドに制作したほうがいいです。
ユーザーもスマホに慣れてきているのでその方がいいと思います。もちろんターゲットユーザーに合わせてデザインは考えなければいけません。

固定幅640pxで横幅マックスに見えるようにするのはデメリットのほうが大きいことがわかりました。リサイズや画面の向きを変えるたびにjsが走らなければいけないのはちょっと問題ですよね。固定幅にする以上しょうがないので、割り切りが必要ですね。
固定幅のやり方が分かっていることにこしたことは無いと思いますが、あまりやりたくはないですね・・・。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ