スマホサイト制作の基礎知識まとめ

レティーナ対応のスマホサイトサイズ

サイトサイズを決める上でwebで活用されている『ピクセル』。 実はこの『ピクセル』は『デバイスピクセル』と『CSSピクセル』の2種類ございます。 私たち制作会社が『ピクセル』と読んでいるほとんどの場合は『CSSピクセル』のことです。 今まで、この2種類のピクセルを意識せずにいれたのは『デバイスピクセル』と『CSSピクセル』の値がほとんど変わらなかった為です。 レティーナディスプレイが登場したことにより、スマホサイトデザイン制作時に少し今までの考えから工夫して制作する必要がでてきました。（※レティーナディスプレイは代表的なところで言うと『iPhone4』、『iPhone5』など多くの端末で採用されています。）

レティーナディスプレイはピクセルの密度が違います。

iPhoneのレティーナディスプレイ画面の横幅320pxで画像を作成すると画像がぼやけてしまいます。 それは iPhoneのレティーナディスプレイのデバイスピクセル比が2倍だからです。 よって横幅640pxでデザインを制作するのが一般的です。

 スマホサイトコーディング時の注意

リキッドレイアウト

スマホサイトは端末を『縦』、『横』で持ち方を変えると画面が自動回転します。 『縦』の時も『横』の時もユーザーにとって最適な見せ方を実現する為にピクセル指定で組み上げるのではなくパーセント指定の『リキッドレイアウト』で構築します。   デザイン時は640pxで作成しましたが、 デバイスサイズは320pxなのでデザインで作った半分のサイズでコーディングします。 例えばデザイン制作時に文字が30pxであれば15pxの文字でコーディングし、デザイン制作時に角丸が10pxであれば5pxでコーディングをいたします。

viewportの設定

スマートフォンでページが適切なサイズで閲覧できるようにviewportの設定が必要です。 viewportの属性に関しては下記をご確認ください。

width=device-width	『サイトの横幅＝デバイスの横幅にする』という意味
initial-scale=1	ページが最初に読み込まれる時の拡大率
maximum-scale=1	ユーザーが操作可能な拡大率の上限
minimum-scale=1	ユーザーが操作可能な拡大率の下限
user-scalable=0	ユーザーが拡大縮小できるかどうかを『yes』か『no』で設定。もしくは数値で『1(yesのこと)』か『0（noのこと）』で指定

参考

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

ロールオーバーは考えない

スマホサイトはオンマウスによってhoverやロールオーバーの効果が使用できません。 jQueryなどを用いてタップした時にボタンの色を変える演出は可能です。

画像表示

CMSの利用でPCサイトで使う画像をそのままスマホサイトにも使用せざるを得ない時、幅が画面をはみ出してしまうのを回避する為、下記をCSSに記載します。

img {
    max-width:100%;
    height:auto;
}

 画像は写真以外はどんどんPNGを使用する

スマホは問題なくPNGが表示される上に、PNG-8であればGIFよりも軽く書き出すことができる。

アイコンなどの画像は倍のサイズで作成しているはずなので、コーディング時に半分のサイズを指定する。

特にアイコンやボタンなどは画像が歪みやすい為、デザイン制作時に画像サイズは偶数のピクセル数にしておくと綺麗に表示が行えます。写真などの画像は奇数サイズのものをリサイズしても気になりません。

背景画像のサイズはCSS3のbackground-sizeを利用する。

～アイコンなどで背景画像を半分に設定する～（デザインでは100px70px）

.tit-01 {
	background:url(../images/tit-01-bg.png) repeat-x bottom;
	-webkit-background-size:50px 35px;
	-moz-background-size:50px 35px;
	background-size:50px 35px;
}

※IE、Firefox、GoogleCrome、Safari、Opera等の各ブラウザーで正しく表示が行えるようにベンダープレフィックスをしっかりと記載します。

ブロック要素にaタグOK

HTML5からaタグでブロック要素（divとか）を囲っても良いことになりました。
なので、単純にテキストリンクだと小さくてタップしにくい箇所に対して、その上のブロック要素ごとaタグで囲めばタップしやすくなります。

スマホを横向きにすると文字が勝手に拡大されてしまう現象・・・

body {
  -webkit-text-size-adjust: 100%;
}

上記をスタイルに記述すれば解決！

アンドロイドでfixedを使うと画像がぼやける問題

表示したい要素に画像しか入っていないと起こる現象らしいです。

<p id="btn-menu">&nbsp;<img src="/sp/share/images/btn-menu.png" alt="メニュー" width="52" height="34" /></p>

『 』を入れると何故か画像が鮮明になります。

iPhone4ではfixedが効かない

fixedとはヘッダーとかを固定するスタイル。
iPhone4ではfixedが効きません。

スマホサイトにcannonical設定

スマホサイトとPCサイトは同じコンテンツのケースが多数です。
Googleサイドからみると重複するコンテンツがあるという事で検索エンジンの評価を下げる事に繋がりかねません。そこで単なる重複コンテンツではないことをcanonicalタグで設定します。

<link rel="canonical" href="https://www.doe.co.jp/">

突き抜けてしまう英語に対して自動改行をさせる

URLなどにword-break:break-all;指定

CSS3でボタンを作るときの便利サイト

CSS Drive CSS3 Button Generator

ナビ用の3カラムリストをtable化

.column4-nav {
	display:table;
	width:100%;
}

.column4-nav li {
	display:table-cell;
	width:25%;
}

スマホを縦に持っても横に持っても均等に3等分してくれる。また縦方向のセンター揃えも簡単です。

参考：【備忘録】スマホサイトのコーディング例

nth-child疑似クラスが便利

例えばブロックを並べた時に、1番目から3番目だけ特定のスタイルを適用したりできる。

参考：CSS3で偶数行・奇数行など「n番目」を限定装飾する

電話番号の自動リンク解除

スマホだとテキストの電話番号部分に自動的にリンクが貼り付きますが、そうしたくない場合は以下のコードを記載します。

<meta name="format-detection" content="telephone=no">

アコーディオンの中にGoogleマップを埋め込んでいる際の座標のズレ

参考：埋め込み Google マップの座標がズレる場合のメモ。

矢印をCSS3で書くことができる

参考：【備忘録】スマホサイトのコーディング例