スマートフォンサイトをデザインする上で知っておくべき10のTIPS

【求人】株式会社トゥーアールではフロントエンドエンジニアを募集しております。

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

iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。

1.実機で確認する

当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。

2.横幅は320pxもしくは640pxでデザインする

スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Retina displayなど高解像度デバイスに対応する場合は640pxでデザインします。640pxでデザインする場合は余白やフォントサイズなどがすべて2で割り切れるようにデザインしないといけません。Retina display対応する場合でも320pxでデザインしてしまい綺麗に見せたい画像(ロゴなど)のみ倍の解像度の画像を用意するのもありです。

3.横向きを想定したデザインにする

基本は320pxですがデバイスを横に向けたときiPhoneなら480px、Androidなら500px前後のサイズになります(Viewportの設定により変わりますが基本はこれです)。対応としてリキッドにするケースと中央にセンタリングさせるケースがありますが、背景画像などは320pxではなく550pxぐらいまで引き伸ばされた場合を想定して用意する必要があります。

4.フォントはヒラギノ角ゴで

利用するフォントは基本的にヒラギノ角ゴ W3を利用し、画像を利用してほしい文字のみそれ以外のフォントを利用するようにしましょう。ただ、Androidではヒラギノ角ゴが入ってない為、Droid Sans Japaneseや新ゴRなどのフォントが採用され、デザインが若干違って表示されることも理解しておきましょう。

5.ボールド体で表現しない

Androidの標準フォントであるDroid Sans Japaneseにはボールド体が存在しないためボールド体が表現できません。その為、ボールド体やヒラギノ角ゴ W6などでの表現はやめましょう。

参考:Androidでfont-weight:boldを適用する方法

6.フォントサイズは12px以上で作成する

可読性の問題もありますが、iPhoneには特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしくなるバグが存在します。ですので12px以上で作成しましょう。

参考:iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

バグを理解した上で小さいフォントサイズを利用する場合も、Androidでは7px以下のフォントサイズは表示できませんので最低8px以上で作成しましょう。

7.1pxのこだわりを捨てる

iPhone向けのトレンドとして1pxの影を利用した立体感のあるテキスト表示がありますが、Andoridではぼかし距離0のtext-shadowが利用できません。1pxの影はiPhoneでしか表現できないことを理解してデザインすると良いでしょう。

8.極力画像を使わずコーディングできるように意識する

CSSで再現できるのはドロップシャドウや角丸、グラデーションぐらいです。これらを利用して作られたデザインは画像を使わず読み込み時間の軽いサイトを作ることができます。テクスチャやベベル、エンボスなど色々な表現を利用しだすと画像を使わざなる得なくなり重いサイトになりがちです。ユーザーの読み込み時間も考慮してデザインしましょう。

9.リンクの領域は44px以上で

スマートフォンは指で操作するタッチデバイスという特徴上、小さいリンクなどは非常に押しにくいです。リンクはボタンなどにし最低44px以上にしましょう。ナビゲーションなど上下にリンクが並んでいるタイプですと誤タッチしやすいですのでもっと高さをしっかりとったほうが良いでしょう。

10.Webクリップアイコンを準備する

ホーム画面にブックマークする際に利用されるのがWebクリップアイコンです。iPhone 3Gで57×57ピクセル、iPhone 4で114×114ピクセルのアイコンが利用できるのでこれらもあらかじめ用意しておきましょう。

参考:iPhone / iPad サイズ別 apple-touch-icon.png 作成 - Fonland

11.ハイライトカラーを指定する

a要素をタッチした際のハイライトするカラーも考えておきましょう。Androidでは-webkit-tap-highlight-colorが使えない代わりに:hover擬似クラスが使えたりしますので必要ならhover時のデザインを用意しておきましょう。

参考:Androidと-webkit-tap-highlight-color

どうでしょうか?他にも色々とあると思いますがとりあえず思いついたものを列挙してみました。

関連エントリー

Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidの画面キャプチャを撮る
MacのAndroid エミュレータでサイト制作
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
PC用とiPhone用のサイトを切り替える.htaccess

スポンサードリンク

«7月のセミナー情報 [名古屋] | メイン | [書評]Webデザイナー/コーダーのための HTML5コーディング入門»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/752
コメント

>確認しもていいです
となっています

投稿者:匿名 | 2013年3月 2日 00:14

ありがとうございます。修正しました。

投稿者:西畑一馬 | 2013年3月 3日 23:06

はてなブックマークからきました

とても参考になりました

ありがとうございます

投稿者:ユッキー | 2013年4月30日 14:32

なるほど

参考になりました

他の記事も拝見させていただきます

ありがとうございます

記事の更新期待しております

投稿者:毒舌野郎 | 2013年4月30日 21:35
コメントを投稿