スマホサイト製作のTIPS

画像に関すること
デザインに関すること
TIPS

画像に関すること

最大解像度に対応した画像を用意する

デバイスピクセルが等倍を想定した画像は、高解像度だと引き伸ばされて荒くなります。最低でも2倍基準の画像は用意しておきましょう。

画像サイズは偶数にする

奇数幅の画像は縮小時にサイズが半端になるため滲みます。偶数幅の画像を使いましょう。

可能な限り画像を使わずCSSでの装飾で済ませる

CSSで描写する方が軽いので、可能であればCSSで済ませましょう。グラデーションや簡単な図形ならCSSでも実装可能です。

テキストは画像よりもフォントを使う

従来は見出しやナビゲーションなどに画像が使われていました。しかしテキストを表現するには画像よりも装飾したテキストの方が綺麗に表示されます。作業量的にも画像よりもテキスト＆CSSの方が好ましいです。

デザインに関すること

ボタンサイズは大きめに設定する

画面が小さい端末では、ボタンサイズが小さいと操作ミスが起こります。最低でも幅7mm、ボタン間隔2mmを取りましょう。お金のやり取りや登録などの慎重な操作を要する場面ではもっと大きく取るべきです。

必要な所だけスマホ用サイトとして作りこむ

例えばヘッダーとフッターだけスマホサイトとして専用で作り込み、コンテンツはリンクで取得する方法があります。残りはPC用サイトへリンクして取得すれば、運用・維持にかかるコストを抑えられます。

解像度が大きい端末を基準にデザインする

解像度が大きい端末を基準にデザインしたサイトを小さい端末で見てもそう変わりはありません。
しかしその逆は汚く写ります。
大きい端末基準でサイトをデザインしましょう。

ファーストビューを大事にする

ユーザーが最初に閲覧する画面をファーストビューといいます。ここがサイトの第一印象になるので、情報や要素を凝縮させてユーザーにサイトを魅せることが重要です。サイトにアクセスした際に最初に画面に表示される箇所に便利なボタンや魅力的な情報を詰め込みましょう。

リキッドデザインにする

表示幅が変わってもサイトのレイアウトを崩さず表示させます。これは解像度の違う環境への配慮に加え、スマホを横向けにした際に表示幅が変わるための措置です。縦長（ポートレート）と横長（ランドスケープ）それぞれにデザインする必要があります。

widthは可変幅で指定して調整し、解像度が高い環境でも左右に広がり過ぎないようにします。調整が難しいレイアウトの場合はCSS自体を別途指定することも可能です。

画面幅が狭いので、横幅を使い切るのが望ましいです。幅の伸縮に合わせてレイアウトを切り替えると綺麗です。（ボタンの列数が変わるなど）

スマホは縦向きと横向きの両方の表示方法があります。縦向きを基調に作りますが、横向きにしても問題なく表示されるように設計しなければなりません。

指でタップするメニューは大きめに設定する

指でタップする場所が小さすぎるとタップできません。 48px程度あれば問題ないでしょう。

フォントサイズ

1/2サイズでもぼやけないよう、偶数に設定します。 4の倍数であった方がより好ましいです。最低でも16px以上が好ましいでしょう。

フォントは標準フォントを使いましょう。 iPhoneならヒラギノ角ゴ、windowsならメイリオです。各端末の標準フォントを全てCSSに指定してやれば親切です。

アコーディオンメニューを使う

クリック時にコンテンツを展開するインターフェースをアコーディオンメニューといいます。小さい画面でも必要なコンテンツを表示させつつスマート感を演出できます。

階層は浅く長く

同じ量のコンテンツを用意する場合、複数ページに分けるよりも同一ページに長い方が見やすいです。またカテゴリなどの階層が深いとそれだけ多くの操作・ページ遷移が必要になります。なるべく階層を浅く、コンテンツを長くしましょう。

ページ内リンクを作る

コンテンツを下まで読み進めた先に何もないと、いちいち上に戻る操作が必要になります。トップへ戻る、次のページへなどのボタンがあると親切です。

アニメーションはCSSとJavaScriptで描写する

アニメーションを描写する場合はCanvasが一番軽く、またJavaScriptも軽いです。なるべくこれらで済ませたいですね。

CSS Media Queryでデバイス毎にCSSを切り替える

メディアクエリによって、デバイスや解像度などの条件ごとにCSSを切りかえることができます。特定の端末時に外部からCSSを読み込んだり、特定の行を読み込ませたりもできます。

media screen and (max-width: 480px){/* 専用のスタイル */}

画像を切り替えるコーディング

メディアクエリを利用して解像度が違うデバイスごとに使用する画像を切り替えることができます。スマホでは小さい画像を使ってやると軽くなっていいですね。

media sccreen and(min-device-pixel-ratio:2){
  h2{
    text-indent:-9999px;
    Background:url(hoge.jpg) no-repeat;
    background-size:300px 30px;
  }
}

jQuery Mobile

JavaScriptのフレームワークとして人気のjQueryですが、スマホサイトに対して最適化されていません。スマホに最適化されたjQueryはjQueryMobileと言い、以下のような機能を持ちます。

jQueryUIスマホ用インターフェース製作が簡単に可能
jQTouchウェブアプリをネイティブアプリのような画面・動作にする
jSencha TouchiPhoneやAndroidのようなタッチ端末で利用できるウェブアプリ操作特化フレームワーク

スマホ寄りのサイトを作る場合、使用を検討してみてもいいのではないでしょうか。

バルーンポップアップ

特定の場所にマウスを重ねるなどのタイミングで、ポップアップ表示をすることができます。入力時の補足などに主に使われていますかね。

JavaScriptとCSSで記述が可能なため、処理が軽いのが特徴です。またjQeuryなどにも処理があるので、割と簡単に実装できます。

解像度が低い画面でタイムリーに注釈が出せるのでお勧めです。

TIPS

スマホを横にした時にフォントサイズが拡大するのを防ぐ

スマホを横にした時にレイアウトが横長に変わり、その影響でフォントサイズが変化する場合があります。
それを嫌うのであればテキストの自動調整をnoneにします。

ody {
  text-size-adjust:none;
}

数字が電話番号として認識されないようにする

数字の羅列が電話番号として認識され、無意味なリンクを作ってしまうことがあります。
防ぐには数字の羅列を勝手に電話番号と認識しないよう設定します。電話番号リンクはhref属性で設定します。

<a href="tel:0123456789">01-2345-6789</a>

B!
LINE