はじめてのマルチデバイスサイト

Paul is a Developer Advocate

完成したプロジェクトを表示する多数の端末

マルチデバイスサイトの構築は、思っているほど大変ではありません。このガイドでは、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>

はじめてのマルチデバイス サイト

コンテンツを作成して構造を決める

ページの構造を作る

TL;DR

ページにコンテンツを追加する

ヘッドラインとフォームを作る

動画と情報のセクションを作る

画像のセクションを作る

表組みのデータ セクションを追加する

フッターを追加する

まとめ

レスポンシブにする

TL;DR

ビューポートを追加する

シンプルなスタイル設定を適用する

スタイルガイド

色

スタイル用画像を追加する

最初のブレークポイントを設定する

デザインの最大幅を抑制する

パディングを変更してテキストのサイズを小さくする

広いビューポートに要素を適合させる

フォーム要素を回り込ませる

動画要素を回り込ませる

画像をタイル表示する

DPI に応じて画像をレスポンシブにする

表

まとめ

はじめてのマルチデバイスサイト

表組みのデータセクションを追加する