このページの本文へ

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

HTML5/CSS3で作るスマートフォンサイトの基本

2010年09月21日 10時00分更新

たにぐちまこと/H2O Space.

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

 スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。

前回作成したスマートフォンサイトのワイヤーフレーム。今回はこのワイヤーフレームからデザインを制作、HTML/CSSをコーディングする

Photoshopでデザインカンプを作成する

 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。

 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。

Photoshop用のデザインテンプレート「iPhone 4 GUI PSD (Retina Display)」。ブラウザー枠や標準的なUIパーツなどの画像が1枚のPSDファイルに揃っている

 iPhone 4 GUI PSDにはさまざまなパーツが1枚のPSDファイルにまとめられています。ダウンロードしたPSDファイルをPhotoshopで開いて、最初に必要なパーツ(右側にあるiPhone 4の端末イメージ)だけを新しいファイルにコピーしましょう。レイヤーリストにある「iPhone 4」というグループを右クリックして、「グループを複製」を選びます。

図7-1-1
iPhone 4のレイヤーグループを選択して「グループを複製」を選択する

 保存先のドキュメントに「新規」を選択すると、レイヤーグループだけをコピーしたドキュメントが作成されます。

図7-1-2
保存先を「新規」に設定する
図7-1-3
新しいドキュメントが作成され、iPhone 4の端末イメージだけが複製される

 iPhone 4 GUI PSDはiPhone 4の画面解像度(640×960ピクセル)を前提に作成されているので、3GS以前(320×480ピクセル)用のサイトを作るには半分のサイズにする必要があります。[イメージ][画像解像度]メニューから、大きさを50%に設定しましょう。

図7-1-4
iPhone 4 GUI PSDはiPhone 4用なのでサイズを50%に変更する

 以降の作業をしやすくするため、余計なレイヤーを削除または非表示にしたら準備は完了です。このファイルをテンプレートとして保存しておき、デザインカンプのベースに利用するとよいでしょう。

図7-1-5
シャドウ(Shadow)や映り込み(Reflection)などのレイヤーは不要なので非表示にする

 あとは、このテンプレートの中に今回のサイトのデザイン要素を配置していきます。必要に応じてiPhone 4 GUI PSDからiPhoneのパーツ類をコピーして利用すると、標準パーツなどは楽に作れます。また、作業中にiPhoneの枠を外した状態を確認したり、カンプ完成後に画像をスライスしたりしやすいように、パーツのレイヤーは分けて作成しておきましょう。

 こうして完成したデザインカンプが以下の画面です。前回作成したワイヤーフレームと同様、ページの一部がiPhoneの枠からはみ出ていますが、制作上は特に問題ありません。

図7-1-6
完成したデザインカンプ

 画面上部のボタンは、iPhone 4 GUI PSDに含まれるボタンの色合いを変更して利用しました。すでにデザインされた部品を再利用することで、適切な大きさのボタンを簡単に作成できます。

図7-1-7
ボタンはiPhone 4 GUI PSDのボタンを流用して作成した
書影

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

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

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

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

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

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

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

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

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

ランキング