マルチデバイス サイトの構築は、思っているほど大変ではありません。 このガイドでは、CS256 Mobile Web Development コース という商品のランディング ページを例に、さまざまな端末に対応したランディング ページを作成していきます。
機能だけでなく、画面サイズや操作方法が大きく異なる複数のデバイスに対応したサイトの構築に取り掛かることは、不可能ではないにしても大変な作業のように思えます。
しかし完全なレスポンシブ サイトを構築するのは、思っているほど大変ではありません。このガイドでは、レスポンシブ サイトの構築を始めるうえで必要な作業を順を追って説明していきます。作業は次の 2 つの手順に分かれます。
- 情報アーキテクチャ(IA)とページ構造を定義する。
- デザイン要素を追加し、あらゆるデバイスで適切に表示されるレスポンシブなページにする。
コンテンツを作成して構造を決める
コンテンツは、すべてのサイトにおいて最も重要な要素です。デザインでコンテンツを決めるのではなく、コンテンツに合わせてデザインをしましょう。 このガイドでは、まず必要なコンテンツを特定し、そのコンテンツを基にページ構造を作成してから、狭いビューポートと広いビューポートの両方に対応したシンプルなリニア レイアウトでページを表示します。
ページの構造を作る
必要なコンテンツは以下のとおりです。
- 自社の商品「CS256: Mobile Web Development」コースの概要を説明する領域
- 商品に関心のあるユーザーの情報を収集するためのフォーム
- 詳細な説明と動画
- 商品を利用している画像
- 説明内容を裏付ける情報のデータ表
TL;DR
- まず必要なコンテンツを特定する。
- 狭いビューポートと広いビューポート用の情報アーキテクチャ(IA)のベースを作成する。
- コンテンツ(スタイルは未適用)を含めたページのスケルトン ビューを作る。
狭いビューポートと広いビューポートの両方について、以下のように大まかな情報アーキテクチャとレイアウトを作成しました。


この情報アーキテクチャから、このプロジェクトの残りの部分で使うスケルトン ページの暫定セクションを簡単に作成できます。
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CS256: Mobile Web development - structure</title> </head> <body> <div id="headline"> <header> <h1></h1> <p></p> </header> <div id="blurb"> <p></p> <ul> <li> </ul> </div> <form method="post" id="register"> </form> </div> <div id="section1"> <h2></h2> <p></p> <ul> <li> </ul> <video></video> </div> <div id="section2"> <h2></h2> <p></p> <div id="images"> <img> </div> </div> <div id="section3"> <h2></h2> <p></p> </div> <footer> <p></p> </footer> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-52746336-1');ga('send','pageview'); var isCompleted = {}; function sampleCompleted(sampleName){ if (ga && !isCompleted.hasOwnProperty(sampleName)) { ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); isCompleted[sampleName] = true; } } </script> </body> </html>
ページにコンテンツを追加する
サイトの基本構造は完成しました。必要なセクション、各セクションに表示するコンテンツ、情報アーキテクチャ内のどこにコンテンツを配置するかが決まりました。これで、サイト構築を開始できます。
注: スタイル設定は後で行います。
ヘッドラインとフォームを作る
ヘッドラインとリクエスト フォームはこのページの重要な構成要素であり、 ユーザーに対して即座に表示する必要があります。
ヘッドラインには、コースについて簡単に説明したテキストを追加します。
<div id="headline"> <div class="container"> <header> <h1>Mobile Web Development</h1> <p>Building Mobile Web Experiences</p> </header> <div id="blurb"> <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p> <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p> <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p> <ul> <li>Android,</li> <li>iOS,</li> <li>and others.</li> </ul> </div> <form method="post" id="register"> </form> </div> </div>
また、フォームも作成する必要があります。ユーザーの名前、メールアドレス、電話番号を入力してもらうシンプルなフォームを作成します。
すべてのフォームにラベルとプレースホルダを設定する必要があります。これらを設定することで、ユーザーが各要素に注目して入力項目をすぐに理解できるようになるほか、ユーザー補助ツールがフォームの構造を認識しやすくなります。name 属性は、フォームの値をサーバーに送信するだけでなく、ブラウザにフォームの自動入力方法についてのヒントを与える役割も持っています。
ユーザーがモバイル端末で素早く簡単にコンテンツを入力できるよう、適切なセマンティック タイプを設定します。 たとえば、電話番号を入力する際には、ダイヤルパッドが表示されるようにします。
<form method="post" id="register"> <h2>Register for the launch</h2> <label for="name">Name</label> <input type="text" name="name" id="name" placeholder="Thomas A Anderson" required> <label for="email">Email address</label> <input type="email" name="email" id="email" placeholder="neo@example.com" required> <label for="tel">Telephone</label> <input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required> <input type="submit" value="Sign up"> </form>
動画と情報のセクションを作る
コンテンツの動画と情報のセクションには、もう少し詳しい情報を含めます。商品の特徴の箇条書きリストと、ユーザーに商品の良さを伝える動画のプレースホルダを含めます。
<div id="section1"> <h2>What will I learn?</h2> <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p> <p>You'll understand what it takes to:</p> <ul> <li>build great web experiences on mobile devices</li> <li>use the tools you need to test performance</li> <li>apply your knowledge to your own projects in the future</li> </ul> <video controls poster="udacity.png"> <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source> <source src="udacity.mov" type="video/mov"></source> <p>Sorry your browser doesn't support video. <a href="udacity.mov">Download the video</a>. </p> </video> <br> </div>
動画は、コンテンツをよりインタラクティブに説明する手段として、コンセプトや商品のデモンストレーションによく利用されます。
次のベスト プラクティスに従って、簡単に動画をサイトに組み込むことができます。
controls
属性を追加して、ユーザーが動画を簡単に再生できるようにする。poster
でポスター画像を追加して、コンテンツのプレビューを表示する。- サポートされている動画形式に基づいて、複数の
<source>
要素を追加する。 - ユーザーがウィンドウ内で動画を再生できない場合に動画をダウンロードできるよう、代替テキストを追加する。
<video controls poster="udacity.png"> <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source> <source src="udacity.mov" type="video/mov"></source> <p>Sorry your browser doesn't support video. <a href="udacity.mov">Download the video</a>. </p> </video>
画像のセクションを作る
画像を使用しないと、やや退屈なサイトになりかねません。画像には次の 2 種類があります。
- コンテンツ画像: ドキュメントにインライン表示され、コンテンツに関する追加情報を伝える画像。
- スタイル用画像: サイトの見栄えを良くするために使用される画像。多くの場合、背景画像、パターン、グラデーションの画像を指す。 スタイル用画像については、次のセクションで説明します。
ページの画像セクションは、コンテンツ画像の集合で構成されます。
コンテンツ画像はページの内容を伝えるうえで不可欠です。新聞記事で使用される画像と同じ役割があると考えてください。 ここでは、プロジェクトの講師である Chris Wilson、Peter Lubbers、Sean Bennet の写真を使用します。
<div id="section2"> <h2>Who will teach me?</h2> <p>The world's leading mobile web developers.</p> <div id="images"> <img src="chriswilson.png" alt="Chris Wilson: Course Instructor"> <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor"> <img src="seanbennett.png" alt="Sean Bennet: Course Developer"> </div> <br> </div>
画像は画面の幅 100% にスケーリングするよう設定されています。この設定は狭いビューポートのデバイスではうまく機能しますが、広いビューポートのデバイス(パソコンなど)では適切に機能しません。この問題についてはレスポンシブ デザインのセクションで対処します。
画像を見ることができないユーザーも少なくありません。そうしたユーザーは多くの場合、ページ上のデータを解析してその情報をユーザーに音声で伝えるスクリーン リーダーなどの支援技術を利用しています。スクリーン リーダーを使用するユーザーに画像の内容を音声で確実に伝えられるよう、すべてのコンテンツ画像のタグに alt
属性でわかりやすい代替テキストを設定する必要があります。
alt
タグを追加する際は、できるだけ簡潔な代替テキストで画像の内容を十分に説明するようにしてください。たとえば、このデモでは alt 属性の代替テキストを「名前:
役割」というシンプルな形式にしています。これで、ここが担当者とその役割についてのセクションだと理解するのに十分な情報がユーザーに伝わります。
表組みのデータ セクションを追加する
最後のセクションは、商品に関する具体的なデータを示したシンプルな表のセクションです。
表は、表組みのデータ(つまり、行と列で構成される情報)にのみ使用してください。
<div id="section3"> <h2>Mobile. Why should I care?</h2> <p>It is huge. Everywhere.</p> <table> <caption> <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p> </caption> <thead> <tr> <th>Country</th> <th>Desktop share</th> <th>Tablet share</th> <th>Mobile share</th> </tr> </thead> <colgroup> <col span="1"> <col span="1"> <col span="1"> <col span="1"> </colgroup> <tbody> <tr> <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td> <td>32%</td> <td>1%</td> <td>67%</td> </tr> <tr> <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td> <td>69%</td> <td>13%</td> <td>18%</td> </tr> <tr> <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td> <td>69%</td> <td>9%</td> <td>22%</td> </tr> <tr> <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td> <td>86%</td> <td>4%</td> <td>10%</td> </tr> </tbody> </table> <br> </div>
フッターを追加する
多くのサイトでは、メインのナビゲーションやページ内の主要なコンテンツ領域への掲載には向かない、利用規約や免責条項などのコンテンツを表示するためのフッターが必要です。
今回のサイトでは、簡単なプレースホルダのフッターを作成します。
<footer> <div class="container"> <p>We always need a footer.</p> </div> </footer>
まとめ
サイトの骨組みを作成し、主な構成要素をすべて洗い出しました。 また、ビジネスニーズを満たすための、すべての関連コンテンツを用意して配置しました。
現時点ではページの見栄えが良くありませんが、これは意図的なものです。コンテンツはすべてのサイトにおいて最も重要な要素であるため、まずはしっかりとした情報アーキテクチャと適切な密度のページ構造になってるかを確認する必要がありました。このガイドでは、適切なページ作成の基本について説明しました。次のガイドでは、コンテンツにスタイルを適用します。
レスポンシブにする
小さな画面のスマートフォンから大きな画面のテレビまで、非常に幅広い端末からウェブにアクセスできます。 各端末にはそれぞれメリットと制約があります。 ウェブ デベロッパーには、あらゆる端末を幅広くサポートすることが期待されます。
複数の画面サイズやデバイスの種類に対応できるサイトを構築します。 ページの情報アーキテクチャを策定し、基本構造を作成しました。 このガイドでは、コンテンツを含むページの基本構造について取り上げ、それを多様な画面サイズに対応したレスポンシブで洗練されたページへと作り変えます。
ウェブ開発におけるモバイル ファーストの原則に従い、まずはスマートフォンのような狭いビューポート用のエクスペリエンスを構築します。そのうえで、より大きな端末クラスへとスケールを拡大します。具体的には、ビューポートの幅を広げ、デザインとレイアウトの外観が適切かどうかを判断していきます。
これまでの作業で、コンテンツの表示方法を定めた大まかなデザインをいくつか作成しました。 ここでは、コンテンツが画面サイズに合っているかを基準に、ブレークポイント(レイアウトとスタイルが変わるポイント)をどこに設定するかを決めていくことで、各レイアウトをページに合わせていきます。
TL;DR
- 必ずビューポートを使用する。
- 必ず狭いビューポートから開始してスケールアウトする。
- コンテンツを適合させる必要がある場合は、ブレークポイントを基準にする。
- メジャー ブレークポイントを使用してレイアウトの概観をデザインする。
ビューポートを追加する
初期段階のページでも、必ずビューポートのメタタグを含める必要があります。ビューポートは、マルチデバイス対応サイトの構築に必要な最重要コンポーネントです。ビューポートがないと、サイトはモバイル端末上で正しく表示されません。
ビューポートは、画面に収めるためにページをスケーリングする必要があることをブラウザに通知します。ビューポートでページの表示を制御するために指定できる設定項目は数多くありますが、デフォルトとして、次のように設定することをおすすめします。
<meta name="viewport" content="width=device-width, initial-scale=1">
ビューポートはドキュメントの head 部に配置します。宣言が必要なのは 1 回のみです。
シンプルなスタイル設定を適用する
今回の商品と企業では厳密なブランディングとフォントのガイドラインが既に存在し、スタイルガイドとして提供されています。
スタイルガイド
スタイルガイドを利用することで、ページの視覚表現の概要を理解できるほか、デザイン全体で一貫性を確実に保つことができます。
色
スタイル用画像を追加する
前のガイドでは「コンテンツ画像」と呼ばれる画像を追加しました。これらの画像は、商品のストーリーを伝えるうえで重要なものです。 スタイル用画像は、主要コンテンツの一部として必要な画像ではなく、視覚的な効果を加えたり、ユーザーをコンテンツの特定部分に注目させるために用いられます。
このわかりやすい例としては、「スクロールせずに見える範囲」に表示されるコンテンツのヘッドライン画像があります。これは商品の詳細情報へとユーザーを誘導する目的で使用されることがよくあります。
スタイル用画像は簡単に追加できます。今回の例では、簡単な CSS によってヘッドラインの背景にスタイル用画像を適用します。
#headline {
padding: 0.8em;
color: white;
font-family: Roboto, sans-serif;
background-image: url(backgroundimage.jpg);
background-size: cover;
}
コンテンツよりも目立たないよう、ぼかしの入ったシンプルな背景画像を選び、要素全体にフィット(cover
)するよう設定しました。これにより、画像は常に正しいアスペクト比を保ちつつ画面いっぱいに表示されます。
最初のブレークポイントを設定する
幅が 600px 近くになると、デザインの見栄えが悪くなり始めます。今回の例では、行の長さが 10 語(読みやすい適切な長さ)を超える場所でデザインを変更する必要があります。
600px は画面に合うよう要素を再配置する機会になることから、最初のブレークポイントの作成に適したサイズだと言えます。ブレークポイントは、メディアクエリという機能を使用することで作成できます。
@media (min-width: 600px) {
}
大きな画面では使えるスペースが広くなるため、コンテンツをより柔軟な方法で表示できます。
注: すべての要素を一度に変える必要はありません。必要に応じて微調整していきます。
今回の商品ページを作成するには、次の作業が必要になります。
- デザインの最大幅を抑制する。
- 要素のパディングを変更し、テキストのサイズを小さくする。
- フォームを移動し、ヘッドラインのコンテンツの横に回り込ませる。
- 動画をコンテンツに回り込ませる。
- 画像のサイズを縮小し、見栄えよく並べて表示する。
デザインの最大幅を抑制する
主要レイアウトを狭いビューポートと広いビューポートの 2 つのみにしたことで、構築プロセスが大幅に簡略化されています。
また、狭いビューポート上に余白なしのセクションを作成することとしましたが、これらのセクションは広いビューポートでも余白なしのままとなります。そのため、幅の極めて広い画面上でテキストや段落の 1 行が横に極端に長くなってしまわないよう、画面の最大幅を制限する必要があります。この制限を行うサイズを 800px 付近とすることにしました。
これを行うには、要素の幅を制限して中央揃えにする必要があります。よって各主要セクションを格納するコンテナを作成して、margin: auto を適用します。これにより、画面が大きくなってもコンテンツを最大幅 800px で中央揃えのままにすることができます。
コンテナには、次のような形式のシンプルな div
を使用します。
<div class="container">...</div>
<div id="section1"> <div class="container"> <h2>What will I learn?</h2>
.container { margin: auto; max-width: 800px; }
パディングを変更してテキストのサイズを小さくする
狭いビューポートでは、コンテンツの表示スペースが限られるため、画面に収まるように文字のサイズや太さを大幅に減らすことがよくあります。
大きいビューポートでは、ユーザーがさらに大きい画面を使用する可能性を考慮する必要があります。 コンテンツを読みやすくするには、文字のサイズや太さを増やすことができるほか、パディングを変更して個々の領域を区別しやすくすることもできます。
今回の商品ページでは、セクションの各要素のパディングを幅の 5% に設定することで、パディングを増やします。 また、各セクションの見出しのサイズも大きくします。
#headline { padding: 20px 5%; }
広いビューポートに要素を適合させる
狭いビューポートでは、直線的にコンテンツを積み重ねて表示しています。各主要セクションとそこに含まれるコンテンツは、上から下へ順に表示されます。
広いビューポートでは、より多くのスペースを使用できるため、大きな画面に適した方法でコンテンツを表示できます。 これを今回の商品ページに当てはめると、IA に従って次のように変更できます。
- フォームをヘッドラインの情報の横に回り込ませる。
- 動画を主な特徴の箇条書きの右側に配置する。
- 画像をタイル表示する。
- 表を大きくする。
フォーム要素を回り込ませる
狭いビューポートでは、画面上に要素を適切に配置するために使用できる横方向のスペースが限られています。
横方向の画面スペースを有効利用するには、ヘッドラインのコンテンツを直線的に配置せずに、フォームとリストが隣り合わせになるよう移動させる必要があります。
#headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px; } #headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300; } #headline br { clear: both; }
動画要素を回り込ませる
狭いビューポートのインターフェースでは、動画は画面幅いっぱいになるようにデザインされており、主な特徴のリストの下に配置されています。 広いビューポートでは、特徴のリストの下に動画を配置すると、サイズが拡大されすぎて見づらくなります。
よって広いビューポートでは、動画要素を縦に表示する狭いビューポートのフローから外して、コンテンツの箇条書きリストの隣に表示する必要があります。
#section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em; } #section1 video { width: 50%; float: right; }
画像をタイル表示する
狭いビューポート(通常はモバイル端末)のインターフェースでは、画像は画面幅いっぱいで縦にスタックして表示するよう設定されています。 この設定では、広いビューポートになると画像がうまくスケーリングされません。
画像を広いビューポートで正しく表示するためには、画像をコンテナの幅の 30% にスケーリングして、(狭いビューでの縦方向ではなく)横方向に並べて配置するよう設定します。また、border-radius と box-shadow を追加して、画像の体裁を整えます。
#section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; }
DPI に応じて画像をレスポンシブにする
画像を使用する際は、ビューポートのサイズとディスプレイの密度を考慮してください。
ウェブは元来 96dpi の画面向けに作成されていました。しかしモバイル端末の登場により、ノートパソコンにおける Retina クラスのディスプレイを筆頭に、画面のピクセル密度は大幅に向上しました。そのため、96dpi 向けにエンコードされた画像は、高 DPI のデバイスでは見栄えが非常に悪くなることも少なくありません。
この問題には、まだあまり普及していませんが、以下の解決策があります。これに対応しているブラウザでは、高密度のディスプレイにおいて高密度の画像を表示できます。
<img src="photo.png" srcset="photo@2x.png 2x">
表
狭いビューポートのデバイスで表を見やすく表示することは難しいため、特別な配慮が必要です。
狭いビューポートでは、表の各行をキーと値のペア(キーは元々の列の見出し、値はセルの値)に変更することをおすすめします。幸い、これはそれほど難しくありません。まず、各 td
要素のデータ属性として、対応する見出しで注釈を付けます(もう少し CSS を追加するまで、視覚的な効果は得られません)。
<tbody> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td> <td data-th="Desktop share">32%</td> <td data-th="Table share">1%</td> <td data-th="Mobile share">67%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td> <td data-th="Desktop share">69%</td> <td data-th="Table share">13%</td> <td data-th="Mobile share">18%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td> <td data-th="Desktop share">69%</td> <td data-th="Table share">9%</td> <td data-th="Mobile share">22%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td> <td data-th="Desktop share">86%</td> <td data-th="Table share">4%</td> <td data-th="Mobile share">10%</td> </tr> </tbody>
ここで CSS を追加して、:before
疑似要素を使用して元の thead
を非表示にし、data-th
ラベルを表示する必要があります。これで次の動画のようなマルチデバイス エクスペリエンスが実現します。
今回のサイトでは、表のコンテンツ専用のブレークポイントを追加で作成する必要があります。モバイル端末向けのサイトを最初に構築する場合、適用済みのスタイルを取り消すことは難しいため、広いビューポートの table の CSS と狭いビューポートの table の CSS を分ける必要があります。これにより、明確で一貫したスタイルの変更が可能になります。
@media screen and (max-width: 600px) { table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } }
まとめ
ポイント: これで、さまざまな端末、フォーム ファクタ、画面サイズに対応した、はじめてのシンプルな商品ランディング ページの作成は完了です。
最後に、構築作業をスムーズに開始するためのガイドラインを以下にまとめます。
- 基本の IA を策定してコンテンツを理解してから、コーディングに入る。
- 必ずビューポートを設定する。
- モバイル ファーストのアプローチに基づいて、基本的なエクスペリエンスを作成する。
- モバイルのエクスペリエンスが完成したら、ディスプレイの幅を広げていき、表示が崩れるところでブレークポイントを設定する。
- 上記を繰り返す。