[[planning-layout]]
=== サイトレイアウトの設計

[role="summary"]
ウェブサイト（モバイル向けとデスクトップ向け）のナビゲーションとレイアウトの設計方法。

(((設計,サイトレイアウト)))
(((サイトレイアウト,設計)))
(((レイアウト,設計)))

==== 目標

モバイルとデスクトップのどちらのブラウザーにも対応する、サイトのナビゲーションとレイアウトを設計する。

==== 前提知識

* <<understanding-themes>>
* <<block-regions>>
* <<preface-scenario>>

// ==== サイトの前提条件

==== 手順

サイトの構築とコンテンツの作成を始める前に、サイトのレイアウトを設計するのはよい考えです。
ただし、実装を始める前でも、あるいは、草稿コンテンツを配置した状態のサイトがすでにいくつかある場合でも、予算の関係や顧客の意見次第では、設計を見直す必要が生じる場合があります。

. サイトが訪問者に提供するべき情報の一覧を作成します。農産物市場のシナリオでは、次のようなものが含まれます。
+
  * 地図と道順が記載された市場の場所
  * 市場が営業する期間と時間
  * 市場の歴史
  * 生産者の一覧
  * 各生産者の詳細
  * 検索機能付きのレシピの一覧
  * 各レシピの詳細
  * 最近追加されたレシピの一覧

. 各情報を配置する、サイト上のページやページタイプを決定します。
+
  すべてのページに表示する情報::
    所在地、営業時間、最近追加されたレシピの一覧
  生産者の詳細ページ:: 
    生産者ごとに用意する、生産者の情報ページ
  レシピの詳細ページ:: 
    レシピごとに用意する、レシピの詳細ページ
  ホームページ::
    場所、地図、道順、営業時間
  About ページ::
    市場の歴史
  生産者の一覧ページ:: 
    生産者の詳細ページにリンクする、生産者の一覧ページ
  レシピの一覧ページ:: 
    レシピの詳細ページにリンクする、検索機能付きのレシピの一覧ページ

. 各ページで、もっとも重要な情報を決定します。スマートフォンなどの携帯端末を利用したサイト訪問者は、最初に表示されたコンテンツだけを閲覧し、わざわざ下へスクロールして、すべてのコンテンツを閲覧しようとはしない傾向があります。

. メインのサイトナビゲーションに表示するべきページを決定します。たとえば、「ホーム」、「About」、「生産者」、「レシピ」の各ページで構成することが考えられます。

. スマートフォンなどの小さな画面と、デスクトップなどの大きな画面で表示した場合を想定して、各ページ向けの大まかなデザインスケッチを作成します。サイト訪問者の多くがスマートフォンのブラウザーを利用することを考慮した場合、あまりスクロールしなくても必要な情報にたどり着けるように、スマートフォンサイズのレイアウトから始めるのはよい考えです。
+ 
これらのページレイアウトを設計するにあたり、情報を表示するべきページが適当かどうかについて、設計を見直す必要が生じる場合があります。
たとえば、サイトがデスクトップサイズのブラウザーで表示された場合は、「所在地」、「営業時間」、「最近追加されたレシピの一覧」を、すべてのページの右サイドバーエリアに配置するのが適当と判断するでしょう。
一方で、スマートフォンのブラウザーで表示された場合には、「所在地」と「営業時間」は各ページの最上部に短く表示し、「最近追加されたレシピの一覧」はホームページの最下部だけに表示するのが適当と判断するでしょう。

==== 理解を深める

<<planning-structure>>

// ==== Related concepts

// ==== Additional resources


*帰属情報*

Written by https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
Translated by https://www.drupal.org/u/hgoto[Hayato Goto], https://www.drupal.org/u/takafumi[Takafumi].
Reviewed by https://www.drupal.org/u/takafumi[Takafumi], https://www.drupal.org/u/hgoto[Hayato Goto].
