初めてスマホサイトをデザイン制作する時の注意点12項目

ここ数年、メディアで取り上げられるweb・IT系の話題はスマートフォンに関係するものが多く、パソコンは影の薄い存在になりました。

私は普段仕事で主にPCサイトのデザインをしていますが、スマホ時代への変化の影響から最近では徐々にスマートフォンサイトのお仕事も増えています。

そんなスマートフォンサイトを制作する場合、PCサイト制作の時とは異なる注意しなければならないポイントがいくつかあります。

そこで、スマホサイトをデザイン制作する際の注意点を私なりにまとめてみました。

初めてスマートフォンサイトをデザインすることになった人にとっても役立つ基本的なチェックポイントです。

初めてスマートフォンのデザイン制作をする際のチェックポイント12項目

iPhone4から採用されているRetinaディスプレイの横幅の解像度が640pxとなるので、基本的に横幅は640pxのサイズでデザインしましょう。

横幅を640pxでデザインした場合、横幅の解像度が320pxの端末でも綺麗に表示できるよう、画像や余白、フォントのサイズなどをすべて2で割り切れる数値で作成しましょう。

スマートフォンを横向きにした場合、サイトの横幅が変わるので、横幅の変化にも対応できるリキッドデザインにしましょう。

PCサイトでは2カラムや3カラムなどのレイアウトは普通ですが、スマートフォンは画面が小さいので基本的には1カラムのシンプルなレイアウトにしましょう。

PC用サイトでサイトバーにあるカテゴリ一覧などは、スマホ用サイトではタップで開閉できるアコーディオンメニューにするのが基本です。

パソコンではマウスを使って操作しますが、スマートフォンでは画面を指でタッチして操作します。

なので、PCサイト制作の感覚でスマホサイトをデザインしてしまうと、操作しずらいインターフェイスになってしまいます。

例えば、パソコンであればクリックだけでなくマウスオン（ポインタを上にのせる）によって表示が変化する表現も使えますが、スマホサイトの場合は基本的にできません。

指によるタッチ操作を想定した使いやすいインターフェイスにデザインしましょう。

スマートフォンの場合、画面サイズや通信速度の関係から、PCサイトの閲覧に比べて画面遷移（ページの移動）をすることに対してストレスを感じます。

なので、できるだけ画面遷移をしなくても済むようなサイト構成にしましょう。

通信速度の関係から、画像を多く使用したスマホサイトは画面表示に時間がかかり、ユーザーにストレスを与えます。

なので、できるだけ画像を使わずCSS3で表現可能なデザインにしましょう。

PCと違いスマートフォンでは指でタッチして操作するので、小さなリンクボタンなどは間違ってタッチしまったりと操作しにくくなります。

iOSやAndroidのガイドラインではリンク領域を44px以上とされていますので、リンク部分は44px以上のサイズで作成しましょう。

iPhoneで使える日本語のデバイスフォントはヒラギノ角ゴW3とW6だけ。

またAndolidは機種によって使えるデバイスフォントが異なります。

なので、デザインする際にはiPhoneでの表示を想定してヒラギノ角ゴW3とW6を使用して制作しておきましょう。

スマートフォンで読みやすい文字サイズは、ユーザーの年齢や画面サイズなどによっても違うので一概には言えませんが、一般的には16pxと言われています。

ただ、コンテンツの内容やサイトのジャンルなどによっては16pxでは大きすぎてバランスが悪くなる場合もあります。

あまり小さすぎると読みづらくなるので、少なくとも12px以上のフォントサイズで作成するようにしましょう。

ユーザーによってはスマホでPC版のサイトを見たいという場合もあるので、「PC版への切り替えボタン」を設置してPC版のサイトデザインに切り替えられるようにしておきましょう。

デザイン制作はパソコンでするわけですが、実際にはスマートフォンで使われるサイトです。

なので、パソコン上だけでなく、実際のスマートフォンでもデザインの確認をしましょう。

私の実感としては、現在PC版しかないサイトもまだまだ多く、そのようなサイトのスマホ版を制作する仕事がしばらくは続きそうです。

初めてスマホサイトをデザインする方や経験が少ない方は、とりあえず今回まとめたチェックポイントは最低限おさえておきましょう。