レイアウトとは？

『いちばんよくわかるWebデザインの基本～きちんと入門編～』
を読んで学んだことをアウトプットしていこうと思います！

そもそもレイアウトとは、見た目が美しい配置を作ることではなく
ユーザーが欲しい情報を的確に伝えることです。

ユーザーに体験してほしいストーリーを考えて、
動線まで意味づけされたレイアウトをつくることが大切になってきます。

レイアウトの４つの原則

レイアウトの4つの原則を用いると、規則性が出て美しい配置になります。

1.近接の原則
関連する項目をまとめてグループ化させることで、
視覚的・知覚的にも認識しやすいレイアウトになります。

2.整列の原則
要素を統一化することです。
文字を読む視線は左から右に移動するので、
左に揃っていると文章は読みやすくなります。

3.反復の原則
共通の要素を繰り返し使用することで、
ユーザーが、早くサイトに慣れ親しむことができます。
（同じ種類の線やアイコンなど。）

4.対比の原則
全体の一部をあえて揃えないことで、要素に意味を持たせ
情報を組織化することです。

文字のサイズや色でコントラストをつけてみましょう。

Webデザインにおけるレイアウトとは？

大きく分けるとグリッドレイアウトとフリーレイアウトの２つです。

グリッドとは格子状の意味で、垂直と水平に画面を分割して
デザインされたコンテンツをグリッドデザインと呼びます。

フリーレイアウトは、あらかじめ決められたページ幅で
コンテンツをレイアウトしていく手法です。

モバイルファーストによって、フリーレイアウトの手法は
激減してしまいました。
対象となるユーザーのデバイスによって、
レイアウトしていくことが大事です。

ナビゲーションのレイアウト

ナビゲーションの役割は、ユーザーが目的の情報やページへ
迷うことがないように誘導させることにあります。

ユーザーに合わせて多くのナビゲーションがあるので、
サイトのコンテンツに応じて使い分けることが大切です。

ユーザーの視線の動線を考える。

人は左上から右下へと視線が流れるように移動します。
この誘導方法をグーテンベルク・ダイヤグラムと呼びます。

サイトのロゴが左上にあるのも、この方法を使っているからです。

ほかにも、Z型（左上→右上→左下→右下）や
ツイッターのタイムラインのようなF型もあります。

ここ最近では、ほとんどのサイトがF型を取り入れているので、
迷った際はF型を意識するとよいでしょう。

タッチデバイス向けのレイアウト

iOSやAndroidにはヒューマンインターフェイスガイドラインがあり
タップできる最小のサイズは44×44pxとなっています。

モバイルの端末が縦向きの状態をポートレートモード
横向きの状態をランドスケープモードといいます。

PCサイトは枠の横幅を決めているものが多くpxが固定されてるため
見切れてしまうことがあります。
一方スマホサイトは、リキッドレイアウトといって
pxではなく％で固定することで、ブラウザの幅に合わせて
コンテンツの幅・位置を変えることができます。

レスポンシブWebデザインとは？

1つのHTMLファイルをCSSにより異なるデバイスの画面サイズに
応じた、ページのレイアウト・デザインに調整して表示させる
手法のことです。
URLが変わらず、SEO的にもメリットがあります。

デメリットとしては、画像の容量が大きいので
表示速度が低下してしまうことです。

まとめと感想、、、。

Webサイトをデザインする上でのレイアウトには、
ユーザーがどの端末で見るかといった、デバイスも考慮して
作らなければならないのが大変だなと思いました。

私たちが何気なく見てるサイトもユーザー目線で
見やすいレイアウトになっていると知れて感動しました。

次回は、デザインの見た目を決定する上で重要な
「配色」について学んでいきます。

Yuka.