1．リキッド（可変幅）でデザインする
PC向けのWebサイトのレイアウトには、ブラウザーのウィンドウサイズに関わらず一定の幅で表示を固定する「固定幅」デザインと、ブラウザーの幅に合わせて変化する「可変幅（リキッド）」デザインがあります。
PCサイトにおける固定幅と可変幅の違い。固定幅ではブラウザーのウィンドウ幅を変えてもレイアウトは変わらない
スマートフォンサイトのデザインでも固定幅、可変幅を選択できますが、特別な理由がなければ可変幅を採用しましょう。スマートフォンの画面サイズは端末によって異なり、本体の向き（縦・横）によっても画面サイズが変動するため、画面幅を固定するのは好ましくありません。
たとえば、画面よりもコンテンツ幅が大きい場合、コンテンツが表示領域外にはみ出しますが、iPhoneではスクロールバーが表示されないので、はみ出していることが一目では分かりません。逆に、縦向きでの表示を前提に固定幅で制作すると、横方向にしたときに余白部分が目立ち、IS01のように横向きでしか表示できない端末では閲覧しづらくなります。
スマートフォンではスクロールバーが表示されないため、画面領域外にあるコンテンツが分かりづらい
縦画面を前提に固定幅で制作すると横向きにしたときに余白が目立つ
実際に可変幅に対応するのはHTML/CSSコーディング段階での作業になりますが、デザインカンプを作る際には横幅を問うような装飾を施さないように注意します。たとえば、横方向に伸縮しづらいボタンや背景画像は避け、伸縮しても違和感がないようにしましょう。
可変幅では伸縮した際に違和感がないように素材をデザインする
2．画面の向きに応じてデザインする
スマートフォンでは本体の向きによって画面の幅が大きく変わるため、縦向きの画面では最適なデザインでも横画面では見づらくなる場合があります。たとえば、以下のように横画面にしたときに単純に1行の文字数を増やすと読みづらくなります。
Wikipediaのスマートフォンサイト。横向きにすると本文部分が単純に横に伸びるため読みづらい
そこで、縦画面と横画面でレイアウトを変更して、本文の長さが変わらないようにするのも手です。画面幅に応じた複雑な制御は、CSSの「メディアクエリー」を使って対応できます。具体的な実装方法は今後の連載で紹介しますが、デザイン段階では縦・横両方の画面カンプを用意しておきましょう。
イザ！のスマートフォンサイト。横向きにするとナビゲーション部分が移動する。1行の文字数は変わらない
3．文字はなるべく画像化しない
PCサイトでは、もっとも利用者の多いWindowsのInternet Explorer（IE）に合わせて、本文（テキスト）をMSゴシックでデザインし、タイトルや見出しには見栄えのよい画像を使うのが一般的です。
Windows XPのIEとiPhoneのSafariの表示の違い。PCサイトではアンチエイリアスが効かない環境を想定して、大きな見出しには画像を使うことが多い
一方、スマートフォンでは通信速度の遅い3G回線でも閲覧されることを考慮し、画像の使用頻度を減らしてページの容量を抑えるほうがよいでしょう。iPhoneのヒラギノ角ゴやAndroidのDroidフォントは常にアンチエイリアスが効いた状態で表示されるので、画像化しなくても十分美しく表示されます。また、CSS3のテキストシャドウなどを使うとそれなりに見栄えよくできます。こうした特徴も踏まえて、タイトルや見出しをデザインするときは画像化する必要があるか、十分に検討しましょう。
Yahoo! JAPANのスマートフォンサイト。見出し部分は画像を使わず、CSS3のテキストシャドウで処理している
4．アクセシビリティを考慮し十分なコントラストを
iPhoneをはじめ現在市場に出回っているスマートフォンは、すべてフルカラー液晶を搭載しているため、色についてはそれほど気を使う必要はありません。ただし、将来的には電子ペーパーを利用したAndroid端末など、白黒液晶や色数に制限のある端末が現れる可能性もあります。アクセシビリティに配慮する意味でも、背景色と文字色には十分なコントラストを取ってきましょう。
太陽光には反転色が有効
外出先などの強い太陽光の下でスマートフォンを使うと、白地に黒の文字を組み合わせたデザインが見づらいことがあります。そこで、あえて背景を黒などの濃い色にし、文字色を白にすると読みやすくなります。サイトの印象を大きく左右するため、必ず採用できる方法ではありませんが、選択肢として頭に入れてくとよいでしょう。
NAVERのトップページ。背景を黒に、文字を白にして見やすくしている
