このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第5回

スマートフォンサイトをデザインする7つのポイント

2010年08月27日 10時00分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 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などの画像編集ソフトを使って白いブラウザー枠を用意しましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
取得した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よりも大きいので、ブラウザー枠は縮小して利用する
書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。

iPhone+Android
スマートフォンサイト制作入門

本体 2,380円+税、B5変形判216ページ(オール4色刷)
ISBN:978-4-04-870218-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング