Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。

デザインに必要な環境を整える

　WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。

ブラウザー枠を用意しよう

　PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサイトでもあらかじめブラウザー枠の画像を用意してからデザインカンプを作成しましょう。

　スマートフォンのブラウザーは、実機の画面ショットを撮影することで取得できます。iPhoneでは、本体上部のスリープボタンを押したままホームボタンを押すと画面ショットを撮影できますので、Safariを起動して新規ページを開いた状態で撮影するときれいなブラウザー枠の画像を取得できます。あとは、取得した画像をiPhotoでPCと同期するか、メールに添付してPCに送りましょう。

画面ショットで取得したiPhoneのブラウザー枠

　Androidの場合は第2回でインストールした開発ツール（Android SDK）使う必要があり、手順が少し複雑です。まず、Android SDKをインストールしたフォルダの「tools→ddms」をダブルクリックして「Dalvik Debug Monitor」を起動します。この状態でAndroid端末とPCをUSBケーブルで接続すると、Dalvik Debug Monitorに接続した端末の名前が表示されます。

Android SDKに含まれる「Dalvik Debug Monitor」。接続したAndroid端末名をクリックして選択する

　端末名をクリックして、［Device］［Screen capture...］をクリックすると端末の画面がPC上に転送されますので、希望の画面を表示して（「Refresh」ボタンをクリックすると画面が更新されます）、Saveを選ぶと画面ショットを撮影できます。

接続したAndroid端末の画面がPCの画面に転送される

　あとはiPhoneと同様にブラウザーを表示して画面ショットを撮影し、ブラウザー枠を取得します。ただし、Androidの「ブラウザ」は新規ウィンドウを開くとホームページに設定されたページが開き、存在しないアドレスを開こうとするとエラー画面が表示されるので、次のような空のHTMLを表示して撮影するか、撮影後にPC上でPhotoshopなどの画像編集ソフトを使って白いブラウザー枠を用意しましょう。

取得したAndroidのブラウザー枠。画像はHTC Desireの画面

　こうして用意したブラウザー枠の画像をPhotoshopやFireworksで開くと、デザインカンプに利用できます。ブラウザー枠は配置するデザインパーツとは別のレイヤーに分けておき、表示／非表示を切り替えられるようにすると便利です。

画像パーツを用意する

　カンプを作るに当たって必要なデザインパーツは自作しても構いませんが、以下のようにiPhoneの標準的なUIパーツをまとめたPSDデータも配布されています。必要であればこうした素材集を利用してもよいでしょう。また、必要なパーツだけをその都度、実機の画面ショットを撮影してカンプで利用する方法もあります。

iPhoneのUIパーツがそろう素材集「iPhone GUI PSD Version 4」

　ブラウザー枠とデザインパーツの用意ができたら、PhotoshopやFireworksを使ってワイヤーフレームからカンプを起こしていきます。次ページではカンプ作成時に注意したい具体的なポイントを紹介します。

iPhone 4の画面ショットは縮小して使う

　iPhone 4は画面解像度が従来の480×320pxから960×640pxに向上しているため、画面ショットを撮影してPCで開くと以下のように大きく表示されます。このままデザインを進めるとiPhone 3GS以前では表示し切れない画面になるので、サイズを50％に縮小してから作業しましょう（iPhone 4専用サイトを作成する場合を除く）。

iPhone 4の画面サイズはiPhone 3G/3GSよりも大きいので、ブラウザー枠は縮小して利用する

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のトップページ。背景を黒に、文字を白にして見やすくしている

5．PNG画像を積極的に活用する

　Webサイトで一般的に利用される画像形式には、GIF、JPEG、PNGがあります。携帯サイトではキャリアや端末によって対応している画像形式がバラバラで、画像形式の選定は悩みの種でした。特に、ほとんどのキャリアや端末が対応しているGIFは256色までしか扱えないため、色数を抑えるなどの工夫が必要でしたが、iPhone/AndroidではGIF画像の代わりにPNG画像が利用できます。

　GIF形式とPNG形式を比べると以下のようなメリットがあります。

・フルカラー

　256色までしか利用できないGIFに比べ、PNGはフルカラーを扱えます。

・アルファチャンネル

　GIFは完全な透明色しか表現できませんが、PNGはアルファチャンネルを利用して半透明を表現できるのでデザインの幅が広がります。

・高い圧縮率

　GIFに比べて圧縮効率がよく、画像のデータ容量を抑えられます。

　こうしたメリットを考えると、スマートフォン専用のサイトを作る場合はGIF画像の代わりにPNG画像を積極的に活用するのがよいでしょう。

各画像形式の使い分け

　各画像形式の基本的な使い分けはPCサイトと同じです。ロゴやイラストなど、はっきりした色使いの画像はPNG、写真や絵画などの色の差が微妙な画像はJPEG、ちょっとしたアニメーションにはGIFといった具合に使い分けます。

JPEG/GIF/PNGの違い。写真などはPCサイトと同じくJPEGが基本

JPEG/GIF/PNGの違い。ロゴ画像などはGIFではなくPNGを積極的に使おう

6.装飾画像はなるべく少なく

　前に述べたとおり、スマートフォンサイトでは3G回線で利用されることを想定して、ページ容量をできるだけ低く抑える必要があります。そのため、PCサイトでは画像を使って表現していた角丸ボックスやグラデーションなどの装飾要素は、スマートフォンサイトではできるだけCSS3のプロパティを利用するのがおすすめです。

　たとえば、角丸ボックスの枠もCSS3を利用すると表現できます。画像に比べればあまり凝ったデザインにはできませんが、それほど高いデザイン性が必要でない部分はCSS3の活用を検討しましょう。

Amazon.co.jpのスマートフォンサイト。こうした角丸部分はCSS3で実装できる

　CSS3をデザインに活用するにはCSS3でどこまで表現できるかを把握し、デザイン時にどこを凝るか割り切るか、見極めが必要になります。本連載でも今後、CSS3の使い方を詳しく紹介します。

7．リンク要素は分かりやすく

　ほとんどのiPhone/Android端末は画面に直接、指で触れて操作をします。特に、iPhoneにはカーソルが存在しないので、ボタンをロールオーバーしたり、リンクマークの上でマウスアイコンや色を変えたり、といった演出ができません。

・ロールオーバー

　PCサイトではリンク部分にあえて下線を引かず、マウスを重ねた時にのみ下線を表示したり色を変えたりする場合がありますが、ロールオーバーができないiPhone/Androidではこの方法は使えません。ユーザーがリンクを探れないので、一目ですぐにリンクだと分かる必要があります。

Yahoo! JAPAN（PCサイト）。リンク部分には下線を引かず、ロールオーバーで下線を表示している。こうした処理はスマートフォンではできない

・画像リンク

　PCサイトのようにマウスカーソルが指の形に変わることがないので、画像にリンクが設定されていても、ユーザーは実際にタッチしてみないとリンクかどうか分かりません。リンクだと思ってタッチしたのに反応がないと、ユーザーはストレスを感じてしまいます。

PCではマウスカーソルが変化するのでリンクが設定されていることが分かる

　リンクを設定する画像には立体感や枠を付けたり、アイコンでリンクであることを示すなど、サイト内でルールを定めて統一するようにしましょう。

リンクの場合はリンクを示すアイコンを付けて分かりやすくする

◆

　次週は制作準備のためお休みします。次回からはより実践的なサイト制作の方法を解説する予定です。