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

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

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

==== ゴール

モバイルとデスクトップの両方のブラウザに対して、サイトのナビゲーションとレイアウトを計画します。

==== 前提知識

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

// ==== Site prerequisites

==== ステップ

サイトの構築とコンテンツの作成を始める前にサイトレイアウトを計画するのはよい考えです。
しかし、予算の都合やステークホルダーのフィードバックに応じて、実装を始める前でも、下書きのコンテンツを配置した形でサイトの一部を構築した後でも、計画は見直し改善される必要があるかもしれません。

. あなたのサイトが訪問者に見せるべき情報のリストを作りましょう。農産物市場のシナリオでは、次のようなものが含まれるでしょう。
+
  * 道順と地図の付いた市場の場所
  * 市場がオープンしている日時
  * 市場の歴史
  * 生産者リスト
  * 各生産者の詳細
  * 検索が可能なレシピのリスト
  * 各レシピの詳細
  * 最近追加されたレシピのリスト

. 各種情報をサイトどのページに、どのページタイプに配置するのかを決めましょう。
+
  すべてのページに表示する情報::
    住所、営業時間、最近追加されたレシピのリスト
  生産者詳細ページ:: 
    個別ページに置く各生産者の情報
  レシピの主催ページ:: 
    個別ページに置く各レシピの詳細
  ホームページ::
    場所、地図、道順、時間
  アバウトページ::
    市場の歴史
  生産者リストページ:: 
    生産者詳細ページにリンクした生産者リストページ
  レシピリストページ:: 
    リスト詳細ページにリンクした検索が可能なレシピリスト

. 各ページでどの情報が最も重要かを決めましょう。モバイルフォンやその他の小さなブラウザを使ってサイトを訪問する人は最初に表示されたコンテンツだけを見て、ページを下までスクロールしてすべての情報を確認しないことがよくあります。

. これらのページのうちどれをメインサイトナビゲーションに表示するべきか決めましょう。例えば、メインナビゲーションはホーム、アバウト、生産者、レシピページで構成されるかもしれません。

. 各ページのラフデザインスケッチを作りましょう。ラフデザインスケッチでは、デスクトップブラウザーのような大きな画面での見え方とあわせて電話などの小さな画面での見え方を示すようにしましょう。サイト訪問者の多くは小さめのブラウザーを使うことを考慮し、たくさんスクロールをしなくても必要な情報が見つかるように電話サイズのレイアウトから始めるのはよい考えです。
+
これらのページレイアウトの計画を立てるときに、どの情報をどのページに配置するかという計画を見直す必要があると気づくことがあるかもしれません。例えば、デスクトップサイズのブラウザーでサイトを見たときは、住所、営業時間、最近追加されたレシピリストはすべてのページの右サイドバーエリアにあるとよいと決めるかもしれません。一方、モバイルブラウザーに対しては、住所と営業時間は各ページのトップに短いフォーマットで配置するけれど、最新のレシピリストはホームページの下の方にだけ表示したいと決めるかもしれません。

==== 理解を深める

<<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].