iPhone6対応のモバイルファーストなレスポンシブデザイン 後編

2014/10/3 8966hit

前回作ったひな形を元にコンテンツを作っていきます。

目次

前編 概念について
中編 ひな形をつくる
・後編 ページを作る
完結編 PCに対応する

全体的な構図

ページの基本的なレイアウトはよくあるヘッダ、ナビゲーション、複数の記事、フッターからなるページとします。
記事はそれぞれタイトルと画像を持ち、大画面上では逆L型レイアウト+フッタからなる逆コの字型レイアウト、小さな画面では縦に一列に並ぶレイアウトで表示します。
今回はモバイルファーストなので縦一列のレイアウトから作っていきます。

優先度を付ける

ユーザーに見て欲しい順番に優先度をつけます。
今回はヘッダ、各記事、ナビゲーション、フッターの順番で見て欲しいと想定し、その順番でHTMLを書きます。

HTMLに流し込む

HTMLは以下のようになりました。
コンテンツの内容はAndroid Wear長期レビューからの流用です
HTMLについての細かな内容については次回完結編で解説します。

<!DOCTYPE html>
<html>
<head>
<title>AndroidWear長期レビュー</title>
<link rel="stylesheet" href="page301.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="UTF-8" />
</head>
<body>
<a href="/">
<header>
<h1>AndroidWear長期レビュー</h1>
</header>
</a>
<article>
<h2>ここがいい</h2>
<section>
<h3>アプリのデザインが綺麗</h3>
<img class="article_image" src="image1.png" alt="画像1" />
<p>全体的な動作に関してはSmartWatch2に比べてかなり滑らかで、アニメーションの使われ方も自然でなかなか良く出来ています。<br>
SmartWatch2は、このあたりのデザインを全くやっておらずアニメーションも皆無だったのでかなり衝撃を受けました。</p>
<p>タッチパネルの精度もSmartWatch2よりかなり良くなっています。<br>
全体的に新しいものを使っているんだ という感覚が強いです。</p>
</section>
<section>
<h3>アプリを作るのが楽</h3>
<p>コレ大事だと思います。Notificationを使ったアプリ開発は標準的なAndroidアプリで<wbr>
Notificationを作ったことがある人ならすぐに作ることが出来るレベルです。<br>
CustomActivityを使ったアプリにした所でAndroidStudioの使い方さえ知っていればそんなに難しくありません。<br>
SmartWatch2のアプリ開発のややこしい仕組みと比較して圧倒的にアプリが作りやすくなっています。</p>
<p>関連:ゼロから始めるSmartWatch向けアプリ開発 <a href="http://firespeed.org/diary.php?diary%3dkenz-1685">(1)</a><a href="http://firespeed.org/diary.php?diary%3dkenz-1689">(2)</a><a href="http://firespeed.org/diary.php?diary%3dkenz-1690">(3)</a><br>
関連:<a href="http://firespeed.org/diary.php?diary%3dkenz-1712">(コード有り)30分で作る 初めてのAndroidWearアプリ開発</a></p>

</section>
<section>
<h3>ホーム画面をカスタマイズできる</h3>
<img class="article_image" src="image1.png" alt="画像1" />
<p>SmartWatch2もバージョンアップにてカスタマイズ出来るようになりましたが、<wbr>
AndroidWearでは標準でホーム画面をカスタマイズできます。<br>
カスタマイズの範囲も大きいし、<wbr>いざとなれば自分でゼロから作ることも出来ます。<br>この差は大きい。</p>
</section>
<section>
<h3>通知が早い</h3>
<img class="article_image" src="image1.png" alt="画像1" />
<p>Notificationを使ってPushで送られてくるのでメールやFacebookのメッセージなどが着信後即効で届きます。</p>
<p>SmartWatch2はポーリングなので遅い時は数分遅れてしまいます。</p>
<p>特にSmartWatch2ではスマートフォンで既に見た内容が遅れて届いたりするのがイマイチな感あります。</p>
<p>ここはFacebookやGmailが直接作ったアプリが提供されているAndroidWearとSony製のSmartWatchの大きな差にあるようです。</p>
</section>
</article>
<nav>
<h2>メニュー</h2>  
<ul>
<li class="active"><p>AndroidWear長期レビュー</p></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1715">ChromeCastショートレビュー</a></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1670">Nexus5ショートレビュー</a></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1669">ChromeBookPixel長期レビュー</a></li>
</ul>
</nav>
<footer>
<small>2014 copyright© Firespeed</small>
</footer>
</body>
</html>


この状態でとりあえず、表示してみると以下のようになります。
PC

Nexus5

Nexus7

iPhone5


それぞれ表示されている文字数が違ったり、見た目がとてもシンプルだったりしますがすべての端末で「きちんと見る」事ができていることに注目してください。文字が小さすぎたり、大きすぎることもないし、タイトルやリンクもそれと認識可能です。

これはそもそもスタイルが適用されていないHTMLはレスポンシブであるということに基づきます。
HTMLに視覚的な要素がなければ、文書構造に基づきそれぞれのブラウザが適切にデバイスへ最適化された状態でレンダリングしようとします。

このデザインを元にCSSで装飾を行っていきます。
参考3-1

ヘッダのデザイン

ヘッダは文字サイズを本文の1.5倍とし背景色を付け文字色を設定します。
本文には薄いグレーの背景色をグラデーションしておきます。
背景色を設定するときは必ず文字色もセットで設定する癖をつけておくといいです。

今回のデザインはMaterial Designに則ってはいませんが、配色はMaterialDesignのColorで提案されている配色を流用しました。

帯のデザイン

CSSに以下のように設定します。

@charset "UTF-8";
body{
-webkit-text-size-adjust: 100%;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ccc), color-stop(0.00, #eee));
background: -webkit-linear-gradient(#eee, #ccc);
background: -moz-linear-gradient(#eee, #ccc);
background: -o-linear-gradient(#eee, #ccc);
background: -ms-linear-gradient(#eee, #ccc);
background: linear-gradient(#eee, #ccc);
color:rgba(0, 0, 0, 0.870588);
}
header{
background-color:#009688;
color:#fff;
}
h1{
font-size:150%;
}
a{
text-decoration:none;
}

ヘッダに背景色が設定されました。


参考3-2

余白の設定

ヘッダの帯の部分に色を付けることが出来ましたが、余白がついてしまっています。
これは ブラウザ標準のスタイルシートのh1やbodyにmarginが設定されているためです。
取り除くためには2つの方法があります。
1. bodyのmarginに固定値を入れてh1にその値のマイナスを入れる。
この方法ではヘッダ部分だけマージンがなくなりそれ以外はマージンがついた状態になります。

body{
margin:8px;
}
h1{
margin:-8px;
}

2. h1とbodyのmarginをゼロにする。
この方法ではすべてのコンテンツのマージンがなくなり画面端にくっつくため、必要に応じて個別にマージンを指定する必要があります。
今回はこの方法を使用します。

body{
margin:0;
}
h1{
margin:0;
}
header{
padding:0.5em;
}

帯の周りの枠がなくなり画面にピッタリと表示されるようになりました。
タイトルの余白はpaddingで再現しています。

参考3-3

ヘッダに影をつける

ヘッダが浮いて見えるように影をつけておきます

header{
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

影がついた。
些細な点ですがデザインがよりリッチになりました。

参考3-4

余談その3 モバイルにmarginは必要か?

これは難しい問題です。画面の限られたモバイル端末に置いては僅かなマージンすらコンテンツ領域に活用すべきかもしれません。一方でマージンのないコンテンツは見やすさの点で劣ります。
これについては明確な答えはないのですがコンテンツの内容や想定するユーザーによって異なってくると思います。
コンテンツの量が少なければ余白が大きくても問題有りませんし、文書を区切る余白は長文を見やすくするためにも必要です。
一方で写真や動画などは少しでも大きく見せたほうがうれしいでしょう。

記事のデザイン

記事全体のタイトル

全体のタイトル部分は本文ほど目立たせなくていいのでマージンと文字サイズ、文字色だけ設定します。

h2{
color: rgba(0,0,0,0.5);
margin: 1em;
font-weight:100;
font-size: 100%;
}

各記事のタイトル

各記事のタイトルには文字を大きくしつつ色もつけます。
レイアウトに制約のあるスマートフォンサイトでは極端なジャンプ率が使いづらいため色や罫線などを使い適切に装飾する必要があります。

h3{
font-size:130%;
font-weight:100;
color:#009688;
margin:0;
padding:1em 0 1.5em 0.5em;
}

記事を区切る

各記事の区切りが明確にわかるように、それぞれの記事が別の用紙に描かれているように表現します。
各記事の背景色を白にして、marginで隙間を付け、影を落とします。
さらに各記事の最後に大きめのpaddingをつけることで記事間に区切りを入れています。

article section{
background-color:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin:0.5em 0.5em 1em 0.5em;
padding-bottom:2em;
}

画像の配置

画像は中央寄せします。
親要素でtext-align:centerを指定するかdisplay:blockにしてmarginをautoに設定すると画像を中央寄せできます。
画像サイズが記事の枠を超えた場合に自動的に縮小されるようmax-width:100%を指定しておきます。
この指定をすると画面幅が狭い端末では自動的に画像が縮小されます。


.article_image{
display:block;
margin:auto;
max-width:100%;
}


文書部分の余白を設定

記事の文書部分に余白を設定します。
縦方向は上と下のmarginが足されるため左右のmarginの半分の値としています。

article section p{
padding:0.5em 1em;
}


参考3-5
鍵となるのは横方向はめいいっぱい使うこと、しかし消してはみ出さないこと
縦方向はある程度長くても大丈夫 ということです。

画像が荒れている問題

スマートフォンで画像をよく見るとなんだか荒れています。
これはスマートフォンがページを2倍や3倍に拡大している事に問題があります。

これの解決策は3つの方法があります。

1つはwidthやheightを指定しそこに6倍の画像を表示するという方法。
例えば先ほどの画像は300x200pxなのでその6倍1800x1200の画像(image2.png)を用意して設定してみます。

<img class="article_image" src="image2.png" width="300" height="200" alt="画像2" />

参考3-6
この方法、たった1つのファイルを元に、x3なら1/2、x2なら1/3、x1.5なら1/4、等倍なら1/6に縮小することでどの密度でもくっきり見せることが出来るというメリットが有ります。

しかし、問題点も大きいです。
まず、6倍の画像が用意できるかという問題。
幅800、高さ600pxの画像の場合は、それぞれを6倍すると4800x3600pxになり1728万画素にもなります。

そして、ファイルサイズの問題。
画像サイズが18倍にもなるのでx1端末の場合94%は無駄なデータになってしまいますし、現状最も細かく画像を表示するx3端末でさえ75%もデータを無駄にしてしまいます。
現実的には縦横2倍程度の画像を用意して、多少のデータの無駄さやx3でのぼやけを許容するというのが現実的な対策かと思います。


もう一つの解決策がsrcsetを使う方法。
srcsetを使うことで画面密度ごとに複数の画像をセットできます。
以下のように元の画像、元の画像を縦横2倍にした画像、元の画像を縦横3倍にした画像の3つのファイルを用意します。
今回はわかりやすいようにそれぞれの画像を変えていますが実際にはx3の画像をもとに2/3倍した画像、1/3倍した画像を用意します

これをimgタグのsrcsetを使用して以下のように設定します

<img src="1x.png" srcset="1x.png 1x,2x.png 2x, 3x.png 3x">

こうすると、ブラウザが自動的にどのサイズの画像を取ってきたらいいかを判別して画面に描画します。
Nexus5

iPhone5

PC


下の画像は実際のブラウザでの結果です。

参考3-7

最後にSVGを使う方法
ベクター画像であるSVGを使うことであらゆる画面密度に対応させることが出来ます。
ベクター画像が用意できることという敷居の高い問題がありますが、複数の画面密度を1つのファイルでまかないながらデータ容量も控えめになりますし、将来的に出てくるであろうx4やx5端末にも対応できる。 画面をズームしても対応可能など様々なメリットがあります。

SVGを使える場面は限られていますが、アイコンや会社のロゴのように簡単にベクターデータが手に入る場合は導入を検討してみるといいかと思います。
FirespeedではRSSのフィードアイコンがSVGで作られています。
参考3-8

関連:InkScape入門 ハニカムビーを描く
※注意 SVGでテキストを使うときはユーザーにフォントが入っていないと文字フォントが変わる可能性があるのでご注意ください。
文字のパス化によって回避することも出来ますが、その場合はフォントの著作権を確認して下さい。

今回は2番めのsrcsetを使います。

<img class="article_image" src="image1.png" srcset="image1.png 1x,image1@2x.png 2x,image1@3x.png 3x" width="300" alt="画像1" />

参考3-9

余談その4 imageにmax-widthを設定する効果と弊害。

画像ファイルには必ずwidthとheightを指定するというのは長い間常識でした。
しかし、max-widthを指定するときはheightを指定してはいけません。
この場合、幅が縮小されても高さはそのままを維持してしまい、画像が左右に圧縮されたように描画されてしまいます。




もともと、widthとheightを指定しないといけない理由は画像が読み込めていない間にもレイアウトを完了させたいためです。
画像の比率を維持したまま縮小するためには、画像の読み込み終わった後で再レイアウトを行う必要があるため、widthやheightを指定する意味もなくなってしまいます。
もちろんこれにより画像読み込み後にページの再レイアウトが発生してしまうためレンダリングが遅くなってしまいます。
明らかにページの枠を超えないという場合や、ページの枠を超えても構わないからページの描画を早くしたいという場合は、max-widthは指定せずに従来通りhtmlのwidthとheightを指定します。
参考3-10

リンクの設定

タッチパネルにおいてはマウスほど精密な操作がしづらいためリンクを大きめにしておくと親切です。
今回のサイトのように記事の中で複数のリンクが連続するような場合は特に小さすぎるリンクが押しづらくなります。

リンクを大きくするにはaタグをinline-blockとしてpaddingを設定します。
marginはコンテンツの外として認識されるのでタップできず、paddingはコンテンツの中として認識されるのでリンクの対象となります。
今回はできるだけタップの面積を稼ぎつつレイアウトへの影響を最小にしたいのでmarginは指定せずpaddingのみを指定します。


paddingを設定することでリンクの前後に空間が空き、リンクが含まれる行は行間がより開くようになります。
デザイン上は大きな制約を受けてしまいますが、ユーザーのことを考えると操作しづらくなるよりはマシかと思います。

article a{
display:inline-blodk;
padding:0.5em;
}


参考3-11

メニューのデザイン

メニュー全体を記事と同様に影をつけていきます。
このように同じ意味の装飾を付けたい場合、個別にcssを定義するより前に定義した部分に適用したい項目を追加したほうが後々の修正で一貫性をもたせやすいので便利です。

article section, nav ul{ /*article sectionを定義していた箇所でnav ulも対象にするように追記 */
background-color:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin:0.5em 0.5em 1em 0.5em;
padding-bottom:2em;
}


リストの装飾を削除する

リンクリストのデフォルトcssで定義されている余白やリストスタイルを無効化します。
デフォルトCSSの指定全てを削除して独自のレイアウトを設定するリセットCSSというテクニックがありますが、ブラウザ本来の持つレスポンシブさを犠牲にしてしまうので、今回のように必要な一部だけをリセットする手法のほうがいいかと思います。

nav ul{
padding:0;
}
nav li{
list-style:none;
margin:0;
}


リンクの文字色を設定する

記事ではリンクであることがわかりやすいようにデフォルトのリンク文字色を継承していましたが、メニューの場合サイトのデザインとの兼ね合いもあります。
そこで今回はリンクの色をヘッダの背景色と同様の緑にしてみます。
この色は記事のヘッダとかぶるため、現在のページを太字+反転表示にしリンクが押せるということを直感的に伝わるようにしてみました。

nav .active p{
background-color:#4db6ac;
color:white;
font-weight:bold;
}
nav a{
display:block;
background-color:#fff;
color:#009688;
}


リンクを大きくする

記事と同様にリンクのpaddingを付けて押しやすくします。

nav .active p, nav a{
border-bottom:1px solid #eee;
margin:0;
padding:1em;

}


押下時のリアクションをつける

リンクが押された時にリンクが反応して押下可能であることを示します。
PCやAndroidではhoverを使うことができるので、hoverを使用しリンクが押されたらリンク全体が上に浮き上がったように見えるエフェクトを追加します。
リンクのpositionをrelativeにしてtopの値を変更することでボタンを若干浮かび上がったようにし、box-shadowを設定してより浮いている感じを演出します。

nav a{
position:relative;
top:0px;
}
nav a:hover{
top:-2px;
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

このままでは浮かび上がりが急になってギクシャクして見えるのでエフェクトにアニメーションを適用します。
アニメーションを適用するにはtransition-durationを設定します。

nav a{
transition-duration:0.4s;
}
nav a:hover{
transition-duration:0.2s;
}

transition-durationはその値になるまでの時間を表します。
この場合、a:hover(浮かび上がるアニメーション)を0.2秒とし、a(落ちるアニメーション)を0.4秒としています。
アニメーションを適用する時にはアニメーションを目立たせたいがために動きを大きくしたり時間を長くしすぎないように注意することが大切です。
ユーザーにとっては動きが大きなアニメーションは追いかけるのが大変で、動きがゆっくりしたアニメーションには緩慢さを感じさせます。
特に、ユーザーの積極的に行った活動に対しては素早いレスポンスを返すことが気持ちのいいアニメーションとなります。
一方、ユーザーが消極的に行った活動に対しては多少ゆっくりにしても問題有りません。
そこで、今回はユーザーがボタンを選ぶ(積極的)時は0.2秒、ユーザーがボタンから離れる(消極的)時は0.4秒としました。

iOSデバイスの場合はhoverが使用できないので、-webkit-tap-highlight-colorを使用します。
-webkit-tap-highlight-colorを設定すると、カーソルがあたった時にその上に表示されるカーソルの色を設定できます。
カーソルの色は要素の上に重ねて表示されるため必ず半透明にする必要があります。

nav a{
-webkit-tap-highlight-color:rgba(178,223,219,0.4);
}


参考3-12

フッターのデザイン

フッター部分は濃い背景色に白文字でセンタリングとします。
また、コンテンツ本文との間に隙間をつけておきます。

footer{
text-align:center;
background-color:#004d40
padding:1em;
margin-top:4em;

}


参考3-13

出来上がったページをチェックする

それでは、出来上がったページをチェックしてみましょう。

HTML5の文法

まずはhtml5のvalidation
http://validator.w3.org/
HTML5の基本的な文法に間違いがないかチェックします。
現状ではHTML5Checkerのwarningが出てしまいますがそれ以外のエラーはないようです。
HTML

<!DOCTYPE html>
<html>
<head>
<title>AndroidWear長期レビュー</title>
<link rel="stylesheet" href="page313.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="UTF-8" />
</head>
<body>
<a href="/">
<header>
<h1>AndroidWear長期レビュー</h1>
</header>
</a>
<article>
<h2>ここがいい</h2>
<section>
<h3>アプリのデザインが綺麗</h3>
<img class="article_image" src="image1.png" srcset="image1.png 1x,image1@2x.png 2x,image1@3x.png 3x" width="300" alt="画像1" />
<p>全体的な動作に関してはSmartWatch2に比べてかなり滑らかで、アニメーションの使われ方も自然でなかなか良く出来ています。<br>
SmartWatch2は、このあたりのデザインを全くやっておらずアニメーションも皆無だったのでかなり衝撃を受けました。</p>
<p>タッチパネルの精度もSmartWatch2よりかなり良くなっています。<br>
全体的に新しいものを使っているんだ という感覚が強いです。</p>
</section>
<section>
<h3>アプリを作るのが楽</h3>
<p>コレ大事だと思います。Notificationを使ったアプリ開発は標準的なAndroidアプリで<wbr>
Notificationを作ったことがある人ならすぐに作ることが出来るレベルです。<br>
CustomActivityを使ったアプリにした所でAndroidStudioの使い方さえ知っていればそんなに難しくありません。<br>
SmartWatch2のアプリ開発のややこしい仕組みと比較して圧倒的にアプリが作りやすくなっています。</p>
<p>関連:ゼロから始めるSmartWatch向けアプリ開発 <a href="http://firespeed.org/diary.php?diary%3dkenz-1685">(1)</a><a href="http://firespeed.org/diary.php?diary%3dkenz-1689">(2)</a><a href="http://firespeed.org/diary.php?diary%3dkenz-1690">(3)</a><br>
関連:<a href="http://firespeed.org/diary.php?diary%3dkenz-1712">(コード有り)30分で作る 初めてのAndroidWearアプリ開発</a></p>
</section>
<section>
<h3>ホーム画面をカスタマイズできる</h3>
<img class="article_image" src="image1.png" srcset="image1.png 1x,image1@2x.png 2x,image1@3x.png 3x" width="300" alt="画像1" />
<p>SmartWatch2もバージョンアップにてカスタマイズ出来るようになりましたが、<wbr>
AndroidWearでは標準でホーム画面をカスタマイズできます。<br>
カスタマイズの範囲も大きいし、<wbr>いざとなれば自分でゼロから作ることも出来ます。<br>この差は大きい。</p>
</section>
<section>
<h3>通知が早い</h3>
<img class="article_image" src="image1.png" srcset="image1.png 1x,image1@2x.png 2x,image1@3x.png 3x" width="300" alt="画像1" />
<p>Notificationを使ってPushで送られてくるのでメールやFacebookのメッセージなどが着信後即効で届きます。</p>
<p>SmartWatch2はポーリングなので遅い時は数分遅れてしまいます。</p>
<p>特にSmartWatch2ではスマートフォンで既に見た内容が遅れて届いたりするのがイマイチな感あります。</p>
<p>ここはFacebookやGmailが直接作ったアプリが提供されているAndroidWearとSony製のSmartWatchの大きな差にあるようです。</p>
</section>
</article>
<nav>
<h2>メニュー</h2>
<ul>
<li class="active"><p>AndroidWear長期レビュー</p></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1715">ChromeCastショートレビュー</a></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1670">Nexus5ショートレビュー</a></li>
<li><a href="http://firespeed.org/diary.php?diary%3dkenz-1669">ChromeBookPixel長期レビュー</a></li>
</ul>
</nav>
<footer>
<small>2014 copyright© Firespeed</small>
</footer>
</body>
</html>

CSSの文法

http://jigsaw.w3.org/css-validator/でCSSの文法もチェックします。
ベンダープレフィックスを使っているため警告が出ていますがそれ以外にエラーはないようです。

body{
-webkit-text-size-adjust: 100%;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ccc), color-stop(0.00, #eee));
background: -webkit-linear-gradient(#eee, #ccc);
background: -moz-linear-gradient(#eee, #ccc);
background: -o-linear-gradient(#eee, #ccc);
background: -ms-linear-gradient(#eee, #ccc);
background: linear-gradient(#eee, #ccc);
color:rgba(0, 0, 0, 0.870588);
margin:0;
}
header{
background-color:#009688;
color:#fff;
padding:0.5em;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
h1{
font-size:150%;
margin:0;
}
a{
text-decoration:none;
}
h2{
color: rgba(0,0,0,0.5);
margin: 1em;
font-weight:100;
font-size: 100%;
}
h3{
font-size:130%;
font-weight:100;
color:#009688;
margin:0;
padding:1em 0 1.5em 0.5em;
}
article section, nav ul{
background-color:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin:0.5em 0.5em 1em 0.5em;
padding-bottom:2em;
}
article a{
display:inline-block;
padding:0.5em;
}
article section p{
padding:0.5em 1em;
}
.article_image{
display:block;
margin:auto;
max-width:100%;
}
nav ul{
padding:0;
}
nav li{
list-style:none;
margin:0;
}
nav .active p{
background-color:#4db6ac;
color:white;
font-weight:bold;
}
nav .active p, nav a{
border-bottom:1px solid #eee;
margin:0;
padding:1em;

}
nav a{
display:block;
background-color:#fff;
color:#009688;
position:relative;
transition-duration:0.4s;
top:0px;
-webkit-tap-highlight-color:rgba(178,223,219,0.4);
}
nav a:hover{
top:-2px;
transition-duration:0.2s;
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
footer{
text-align:center;
background-color:#004d40;
color:#fff;
padding:1em;
margin-top:4em;

}

PageSpeed Insights

GoogleのPageSpeed Insightsを使用することでモバイルのアクセシビリティやパフォーマンスのアドバイスを受けることが出来ます。

パフォーマンスで警告が出たのは以下の3つ
>スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する
これはCSSを別ファイルに設定しているために起きる警告です。
ページのレイアウトはHTMLファイルの他CSSを読み込まないとレイアウトできません。
スタイルシートをインラインに組み込むことでこの警告をなくすことが出来ます。
ただし、これはCSSのキャッシュが使えなくなる事を意味して複数ページを移動するたびにスタイルシートを読まないといけなくて逆に遅くなるとか、Webサーバー側での対応をしないと管理が大変になるなどの問題もあります。
とりあえず、今回は放置しますが、どうしても消したい場合はstyleタグ内にCSSをコピペすれば消えます。

>表示可能コンテンツの優先順位を決定する
これは上記にも書いたmax-widthを使っている問題です。
今回はパフォーマンスよりレイアウトを優先したので仕方が有りません。

>圧縮を有効にする
コンテンツを圧縮することで転送データの量を減らすことが出来ますが今回の内容とはずれるので省略します。
気になる方はgzipなどを調べてみてください。

アクセシビリティに関しては満点でした。

実機でチェックする

もちろん実際に携帯でも動きをチェックする必要があります。
機械的なチェックでは見えてこない問題点が見えてくることがあります。
今回はリンクにアニメーションが設定されているため、その挙動もチェックしておく必要があります。

多解像度時代のデザイン手法

ディスプレイのサイズをコンテンツで吸収する

完成したモバイル版の全体像を見て行きましょう。
レイアウトに関わる主要な指定は以下のとおりです。

余白や隙間のサイズを固定で指定して、コンテンツのサイズを指定していないことがわかると思います。
これによりあらゆるディスプレイに最適化出来るだけでなく、コンテンツの量が増減したりユーザーがフォント設定を変えた場合でもレイアウトが破綻しなくなります。

クラッシクなWebではしばしばデザインが紙面上で唯一のサイズに最適化する形で行われ、コンテンツのサイズをきっちり指定し、余った部分を余白として可変サイズにしていました。
余白を固定しコンテンツを可変とするスタイルはその逆の手法と言えます。
そのため新しいデザインでは、紙よりもむしろユーザーの実体験に近い実機上で行うべきでしょう。

実機上でデザインする

Chromeデベロッパーツールを使うことで実機を使ってデザインを行うことが出来ます。
ChromeでWebページの項目を右クリックして「要素を検証」を選ぶことでデベロッパーツールが起動します。
デベロッパーツールを使うとHTML上で指定した項目にどのようなCSSがあたり、どのようにレイアウトされているかを見ることが出来、CSSの値をブラウザ内で変更してリアルタイムにその結果を見ることも出来ます。
参考:Chrome DevToolsでCSSデザイン

さらにモバイル向けではAndroidを使ってPC版同様にChromeデベロッパーツールによるデザインが可能になりました。

Android上に表示されているページをDevToolsで見る

まず、Android側がUSBデバッグモードになっている必要があります。
設定を開き端末情報を開きます。

ビルド番号を連打して開発者向けオプションを有効にします。

開発者向けオプションを選びます。

USBデバッグにチェックを入れます。

PCとUSBケーブルで接続するとPCを信頼するかどうかのダイアログが表示されるため、OKを押します。これでPC上からAndroid端末のデバッグが行えるようになります。


PC上でChromeを開いたらメニュー-ツール-デバイスの検証を選びます。
Open tab with urlにデバッグしたいタグを開くか、現在開いているページの一覧からinspectを選びます。

これでスマートフォン上で見ている画面を直接PC上でデバッグできます。

一番右上の携帯電話型アイコンをクリックすることで現在の画面をPC上でも見ることが出来ます。
画面上での操作はリアルタイムにスマートフォン側と連動し、Chromeデベロッパーツール上で行った修正は即時にスマートフォン側で表示されます。
これにより、実際のデバイスを持って実際のユーザー体験により近い状態でデザインを行うことが出来ます。



次回はいよいよ最終回
今回モバイル向けに出来上がったページをPC向けに機能を追加していきます。
完結編 PCに対応する

前:iPhone6対応のモバイルファーストなレスポンシブデザイン 中編 次:iPhone6対応のモバイルファーストなレスポンシブデザイン 完結編

関連キーワード

[iPhone][Android][モバイル][HTML5][IT]

コメントを投稿する

名前URI
コメント