ajike switch

初心者必見!見やすくて使いやすいスマホサイトを制作する5つのコツ

こんにちは
デザイナーの石丸です。
最近はやっと春らしい暖かい日々が続くようになりましたね。
さて、最近スマホサイトのデザインを手がけることがあったので、
デザイン時の気付きやポイント、基礎ルールをまとめました。
基礎中の基礎ですが……しかしまずは基礎をしっかりと固める事が1番ですっっ!

では始めます。

1 横幅は320pxまたは640pxでデザインする
2 フォントについて
3 ボタンデザインについて
4 見出しデザインについて
5 余白のあるデザイン

1 横幅は320pxまたは640pxでデザインする

iPhone4から解像度が640×960となり、最近では横幅640pxでデザインすることが
主流となってきました。
ここで気をつけることは…
解像度が横320pxの端末では640pxの画像を320pxで指定し、コーディングすることになりますので、
フォントサイズや余白など、2で割り切れるサイズでデザインしなければいけません。

2 フォントについて

フォントサイズは12px以上が理想です。

(横幅640pxでデザインする場合は24px以上)

10px以下になると小さすぎて見づらくなってしまいます。
文章サイズは14pxが読みやすいとされています。

例_フォント

ボールド体で表現しない

一部のAndroid端末では、ボールド体が存在しません。

3 ボタンについて

ボタンサイズは最小44px

(横幅640pxでデザインする場合は88px)

小さいボタンだと、指で押しにくくなってしまいます。

またiOS , Android どちらのガイドラインでも『タップ可能領域の最小サイズは44px × 44px 』となっています。

見やすいボタンデザインに

地色と文字色にコントラストをつけ、ハッキリと見やすいボタンにしましょう。
PCは屋内で見ることが大半ですが、スマホの場合は屋外で見たり、歩きながら見たりするので文字の配色も見やすさを重視することが大事です。

例_ボタン1

『押せる感』を出す

PCとは違って、スマホはマウスオーバーの表現ができません。
一目みて『ボタン!』と分かるデザインをすることが必要です。

例_ボタン2

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

グラデーションを使ったボタンデザインでも、コーディングで対応できます。
あまり画像を使いすぎるとサイトの読み込みが遅くなり、離脱する原因となってしまいます。

3 見出しデザインについて

目立つ見出しに

スマホはスクロールして見ますが、その時に見出しがハッキリしていないと見逃す場合があります。
それを避けるためにも、見出しには背景を敷く、横いっぱいにラインを引く、などの工夫が必要です。

例_見出し

4 余白のあるデザイン

文字間や、パーツやボタンが詰まっていると大変見づらいです。
またタップ領域も大きくとることがポイントです。
文章ページなどは左右の余白を大きめにとり、文字間も広めにとると読みやすくなります。

例_余白

…と、以上基礎的なことをあげていきました。

まだまだほんの一部ですが^^;

しっかりとまずは基礎を固め、見やすい、使いやすいサイトデザインができるよう、

常に心がけて制作に取り組んでいこうと思います!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×