スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。
最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。
デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
iPhone 4 GUI PSDにはさまざまなパーツが1枚のPSDファイルにまとめられています。ダウンロードしたPSDファイルをPhotoshopで開いて、最初に必要なパーツ（右側にあるiPhone 4の端末イメージ）だけを新しいファイルにコピーしましょう。レイヤーリストにある「iPhone 4」というグループを右クリックして、「グループを複製」を選びます。
iPhone 4 GUI PSDはiPhone 4の画面解像度（640×960ピクセル）を前提に作成されているので、3GS以前（320×480ピクセル）用のサイトを作るには半分のサイズにする必要があります。[イメージ][画像解像度]メニューから、大きさを50％に設定しましょう。
以降の作業をしやすくするため、余計なレイヤーを削除または非表示にしたら準備は完了です。このファイルをテンプレートとして保存しておき、デザインカンプのベースに利用するとよいでしょう。
あとは、このテンプレートの中に今回のサイトのデザイン要素を配置していきます。必要に応じてiPhone 4 GUI PSDからiPhoneのパーツ類をコピーして利用すると、標準パーツなどは楽に作れます。また、作業中にiPhoneの枠を外した状態を確認したり、カンプ完成後に画像をスライスしたりしやすいように、パーツのレイヤーは分けて作成しておきましょう。
こうして完成したデザインカンプが以下の画面です。前回作成したワイヤーフレームと同様、ページの一部がiPhoneの枠からはみ出ていますが、制作上は特に問題ありません。
画面上部のボタンは、iPhone 4 GUI PSDに含まれるボタンの色合いを変更して利用しました。すでにデザインされた部品を再利用することで、適切な大きさのボタンを簡単に作成できます。
HTML制作の準備
デザインカンプが完成したら次はHTMLの制作ですが、実際のコーディングに入る前にいくつか必要な準備があります。
第2回で紹介したとおり、スマートフォンサイトの制作では実機での確認が欠かせないため、実機からアクセスするためのWebサーバーが必要です。今回は私が普段使っている開発サーバーにサブドメインを設けてファイルを随時アップロードしながら確認することにしました。ローカル環境にWebサーバーを立てるか、レンタルサーバーなどを利用してテスト環境を用意してください（第2回を参照）。
HTMLテンプレートを用意する
iPhone、Androidに搭載されているブラウザー（ともにレンダリングエンジンはWebKit）はHTML5を積極的にサポートしています。今回のようなスマートフォン専用サイトではPCサイトのように過去のブラウザーを気にする必要はありませんので、HTML5でコーディングしましょう。以下のようなHTMLテンプレートを用意します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML 4.01やXHTML 1.0に比べ、DOCTYPEが極めてシンプルになり、meta要素の記述も少なくなっています。このHTMLテンプレートのhead要素に、必要な設定を追加していきます。
まず、スマートフォンサイトならではの手続きとして、第2回で紹介した「viewport」を設定します。viewportはhead要素内に以下のように記述して設定します。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
次に、リセットCSSを組込みます。文字のサイズや太さ、マージンなどのスタイルはブラウザーによって異なるため（ブラウザーの標準スタイルが適用される）、リセット用のCSSを適用してブラウザーの標準スタイルを無効にするわけです。HTML5用のリセットCSSはいくつかありますが、私はHTML5 Doctorが配布しているリセットCSSを愛用しています。最新版はGoogle Codeからダウンロードできます。
ダウンロードしたCSSファイルは適当なフォルダにコピーし、ファイル名を変更します。ここでは「_shared/css」に「reset.css」という名前にしましたので、HTMLからは次のように参照します。
<link rel="stylesheet" href="_shared/css/reset.css">
最後に、title要素を実際のサイト名に変更したらHTML制作の準備が整いました。ここまでに設定したhead要素を確認しておきましょう。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>プレイグループ木場校</title>
<link rel="stylesheet" href="_shared/css/reset.css">
</head>
続いて、ページのコンテンツ（内容）をマークアップしていきます。
マークアップの方針を決める
スマートフォンはPCに比べて通信速度の遅い3G回線で利用されることが多いので、画像を多用するとページが表示されるまでに時間がかかります。必要のない画像の使用は控え、ダウンロードするコンテンツの容量を抑えましょう。今回は、ヘッダー部分とフッター部分だけを画像として切り出し、それ以外のタイトル文字やボタンなどはCSS3を使って装飾します。
 |
|---|
| デザインカンプのうち、ヘッダーとフッター部分だけを画像として切り出し、それ以外はCSS3で装飾する |
基本的な要素をマークアップする
まずは、基本的な要素をマークアップしていきます。Photoshopでヘッダーとフッターの画像を切り出して保存します。ここでは、写真を多用しているヘッダー部分をJPEG形式で、フッター部分はPNG形式で保存しました。
サイト名はh1要素、小見出しはh2要素といった具合にマークアップを施していきます。実際のHTMLは以下のようになりました。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>プレイグループ木場校</title>
<link rel="stylesheet" href="_shared/css/reset.css">
</head>
<body>
<header id="top">
<h1><img src="_shared/images/ttl_main.jpg" width="320" height="123" alt="PLAYGROUP KIBA powered by CREATIVE WORLD"></h1>
</header>
<div id="wrap">
<section>
<h2>プレイグループ木場校へお越しの方へ</h2>
<p>プレイグループ木場校のご見学、ご面談、お打合せにお越しの方は、こちらの地図などを参照して、お気をつけて起こし下さい。<br>
迷われた場合などは、お気軽にお電話いただければ幸いです。</p>
</section>
<nav>
<ul class="clearfix">
<li><a href="#access">アクセス</a></li>
<li><a href="#tel">電話</a></li>
<li><a href="#mail">メール</a></li>
</ul>
</nav>
<section>
<h3>アクセス</h3>
<p>東京都 江東区 東陽 3-12-9 1F</p>
<aside>
<p>木場駅から 徒歩 3分（1番出口）<br>
東陽町駅から 徒歩7分（1番出口）<br>
豊洲駅から バス15分<br>
（錦１３甲 錦糸町駅前 行き）東陽三丁目下車<br>
西大島駅から バス14分<br>
（都０７ 境川経由）東陽三丁目下車</p>
</aside>
</section>
<section>
<h3>お電話でのお問い合わせ</h3>
<p>080-7004-5806 <マネージャー直通電話番号><br>
03-5647-6881 <代表></p>
<aside>
<p>10:00〜18:00＜土日・祝日を除く＞<br>
万が一留守番電話になった場合は、お名前とお電話番号を伝言してください。こちらから折り返し致します。</p>
</aside>
</section>
<section>
<h3>メールでのお問い合わせ</h3>
<p>info@playgroup-kiba.com</p>
</section>
</div>
<footer>
<p id="btnTop"><a href="#top">Page Top</a></p>
<p><img src="_shared/images/txt_footer.png" width="320" height="30" alt="© CREATIVE WORLD & Learning Network. All Rights Reserved."></p>
</footer>
</body>
</html>
上のHTMLのソースコードを見ると、header、footer、nav、sectionなど、HTML 4.01やXHTMLでは見慣れない要素がいくつかあります。ここで使用頻度の高いHTML5の新要素について解説しましょう。
- header要素／footer要素
- その名の通り、ヘッダーとフッターをマークアップする要素です。ここでは、ページの冒頭とコピーライト表記部分をそれぞれマークアップしました。
- nav要素
- ナビゲーションをマークアップする要素です。ここでは、画面上部に並んだ3つのボタンをマークアップしています。
- article要素
- 「article（記事）」という名前の通り、独立した記事をマークアップします。たとえばブログサイトでは投稿したエントリーを区切るときなどに使用します。今回のサイトでは使用していません。
- section要素
- sectionは「区画」などと訳され、一般的にはこれまでdiv要素でマークアップしていた要素に置き換わります。ただし仕様書では「単なるスタイルを整えるためのマークアップなどにはdiv要素を使うように」とされており、1つの考え方として「section要素の先頭に見出しが立つかどうか」が判断の基準になります。ここでは、<header>と<footer>に挟まれたメインコンテンツ部分をマークアップしました。
マークアップしたHTMLを実際にiPhoneで表示すると以下のようになります。スタイルをまだ適用していないので、画像や文字が並んだだけの状態です。
 |
|---|
| 基本的なHTMLのマークアップが完了した状態。スタイルを当てていないので画像や文字が縦に並んでいる |
CSSでスタイルを整える
続いて、マークアップを施した要素に対してCSSでスタイルを整えていきます。新しいCSSファイルを作成してHTMLからリンクします。
<link rel="stylesheet" href="_shared/css/base.css">
このCSSファイルの中にスタイルを記述していきましょう。bodyやp要素など基本的なスタイルを整えると以下のようになります。
body {
font:14px/1.231 "ヒラギノ角ゴ Pro W3";
}
#wrap {
padding: 10px;
}
section, nav {
margin-bottom: 1em;
}
p {
margin-bottom: 1em;
}
/* clearfix */
.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
 |
|---|
| 基本的なスタイルを適用した状態 |
body要素に対しては標準のフォントサイズ、フォント名を指定しました。iPhoneにはヒラギノ角ゴシックが、Androidには別のフォントが収録されているので、本来はフォント名（「ヒラギノ角ゴ」）を指定する必要はありません。ただ、フォントを指定しないと制作途中のページをMac版のSafariで開いたときに「ヒラギノ明朝」で表示されるため、Safariを使ってちょっとした確認をするときに違和感が出ないように指定しました。
「clearfix」はfloatプロパティで回り込みするときに背景の指定が効かなくなる現象を回避するテクニックで、PCサイトの制作でもよく使われています。PCサイトでは必要なInternet Explorer向けの記述を外せるので、シンプルに記述できます。
角丸エリアを作る
基本的なスタイリングができたら、今度は見出しやボタンなど画像を使用しなかった部分に対してCSS3で装飾を施していきましょう。まずは、aside要素でマークアップした交通アクセス情報を、角丸エリアに装飾します。角丸エリアのCSSは次のようになっています。
 |
|---|
| 交通手段を示した部分には背景を敷き、角丸を適用している |
aside {
background-color: #ebebeb;
-webkit-border-radius: 8px;
border-radius: 8px;
padding: 10px;
}
aside p:last-child {
margin-bottom: 0;
}
aside要素に背景色、余白を設定し、合わせてborder-radiusプロパティを適用しています。border-radiusはCSS3で追加されたプロパティで「要素の角を丸くする」という意味です。値には、角をどの程度丸めるか（アール）を数値で指定します。ここでは、8ピクセルのアールを付けました。border-radiusプロパティはiPhone OS 3.2以前のSafariでは利用できませんが、代わりに-webkit-border-radiusというベンダープレフィックス付きのプロパティ（WebKit先行実装プロパティ）を利用できます。そのため、-webkit-border-radiusプロパティも合わせて指定しています。
p:last-childはCSS3で追加されたセレクターの1つで、「最後の要素」という意味です。p要素には基本的に下方向に余白を付けていますが、aside内の最後のp要素だけ余白を打ち消すことで、ボックスエリア内の余白を調整しています。
CSSでドロップシャドウを表現する
続いて、タイトル部分のテキストにCSS3でドロップシャドウを適用してみましょう。次のような記述になります。
 |
|---|
| タイトル文字にドロップシャドウを適用する |
h2 {
font-size: 121%;
text-shadow: 1px 1px 2px #ccc;
color: #f4b800;
margin-bottom: 10px;
}
文字の大きさや色、余白を設定するとともに、text-shadowプロパティで影を付けています。text-shadowプロパティは次のような構文で値を指定します。
text-shadow: 横位置, 縦位置, ぼかし, 色;
ここでは、文字に対して右下に1ピクセルずらした位置に、2ピクセルのぼかし具合でグレーのドロップシャドウを設定しました。これらの設定項目は、Photoshopのデザインデータから調べられます。
Photoshopでデザインカンプを開き、タイトルのレイヤーの右側に記述されている「レイヤー効果」アイコンをダブルクリックします。表示されたダイアログの「ドロップシャドウ」をクリックすると次のような設定項目が表示されます。
 |
|---|
| Photoshopでタイトルのレイヤーを選択し、レイヤー効果をクリックする |
 |
|---|
| レイヤースタイルのパネルからドロップシャドウを開く。影の角度や距離を調べる |
設定画面の「角度」と「距離」からは、text-shadowの1番目と2番目に指定する値が分かります。角度が120度で位置が1ピクセルなので、text-shadowに指定する横位置と縦位置は1ピクセルにしました。正確には、135度が正確な「右上」ですが、text-shadowではそこまで細かな指定は難しいので多少妥協します。
「サイズ」の設定項目からはtext-shadowの3番目の値が分かります。ここでは2ピクセルと指定しました。影の色は「描画モード」の色を拾うことで指定できます。このようにPhotoshopの設定項目を参照すると、CSS3でもかなり正確にデザインを再現できます。
ボタンのグラデーションを表現する
ページ上部のジャンプボタンは、ここまでに解説したテクニックを組み合わせて作ります。CSSは次のようになります。
 |
|---|
| 3つのボタンはCSS3のテクニックを組み合わせて作成する |
nav {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #9cc900;
background: -webkit-gradient(linear, left top, left bottom, from(#c3fb00), to(#9cc900));
font-size: 107%;
width: 300px;
}
nav li {
text-align: center;
float: left;
font-weight: bold;
border-left: 1px solid #fff;
text-shadow: -1px -1px 0 rgba(150, 150, 150, 30);
}
nav li:first-child {
border: none;
}
ボタンはリスト要素でマークアップし、floatで回りこませて横に並べています。-webkit-border-radiusでボックスを角丸にする方法はすでに解説したとおりです。
このボタンの背景色は、上から下に向かってグラデーションしています。このとき利用するのが、WebKit先行実装プロパティの-webkit-gradientです。次のような構文になっています。
-webkit-gradient(グラデーションの方向, 開始位置, 終了位置, 開始色, 終了色)
値は以下のように設定します。
- グラデーションの方向
- linear（線形）またはradial（円形）で指定します。linearとradialでは後に指定できる値が変わってくるので、ここでは「linear」の場合のみを紹介します。
- 開始位置, 終了位置
- グラデーションの開始位置と終了位置を、「top」「bottom」「left」「right」の組み合わせで指定します。今回は「left top, left bottom」つまり「左上から左下」と指定しています。
- 開始色, 終了色
- グラデーションの開始色と終了色を指定します。
これでグラデーションを表現できます。なお、グラデーションを指定したbackgroundプロパティとは別にbackground-colorプロパティも指定しています。これは、WebKit系以外のブラウザーのための指定です。ボタンの文字色は背景と同じ白なので、背景色を指定しないとWebKit以外の環境で閲覧したときに文字が読めません。iPhone/Android専用サイトという位置づけとはいえ、それ以外の環境からアクセスされた場合でも、最低限、文字が読めない状態を避けるために、背景に濃色（ここではグラデーションの終了色と同じ色）を敷いています。
ドロップシャドウでエンボスを表現する
ジャンプボタンでは、もう1つ変わったテクニックが使われています。よく見ると文字が彫り込まれたような、いわゆる「エンボス」効果がかけられています。と言ってもCSS3にはエンボスを直接表現できるプロパティはありませんので、ここではドロップシャドウを応用してエンボス風の見た目を表現しています。
text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
ポイントは、位置を表す値の「-1ピクセル」という指定。これによって影を「左上」に表示し、彫り込まれたように見せているわけです。
色の指定も少し変わっています。アルファ値（透明度）を表現できる「rgba」という方法で記述しています。rgbaは以下のように4番目の値に透明度（0〜1の間の値、0が透明・1が不透明）を指定します。
text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
デザイン時に透明度を使っている場合はPhotoshopで調べて、rgbaで正確に設定しましょう。
仕上げる
最後に、残っていた「PAGE TOP」ボタンに次のようなCSSを適用してページを仕上げます。PAGEトップボタンはここまでに紹介したテクニックで装飾しています。
#btnTop {
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#cbcccf), to(#acaeb0)) #cbcccf;
width: 7em;
font-size: 85%;
text-align: center;
float: right;
margin-right: 10px;
}
#btnTop a {
text-shadow: 1px 1px 0 #ddd;
display: block;
padding: 5px 0;
color: #444444;
text-decoration: none;
}
以上で、スマートフォンサイトの基本的な見た目がほぼ完成しました。この続きは次回、制作していきましょう。
 |
|---|
| 見た目はほぼ完成した「プレイグループ木場校」のスマートフォンサイト |
