ume

レイアウトの決め方

この記事の対象者

  • これから初めてオリジナルアプリを制作しようとしている方

  • アプリを初めて作成される方

レイアウトとは

⇨何を、どこに、どのように配置するのかを決める.
レイアウトの概念はインテリアやポスター、新聞、チラシ、雑誌などあらゆる分野の中で使われている.

なぜレイアウトが大切か

例 部屋のものを探すとき.
レイアウト(物の配置)がめちゃくちゃだと物を探すのが大変、なぜなら探しているものが何かの下になっていて隠れていたりするかもしれない。 一方綺麗部屋だと(物の配置が一目瞭然)でパッと見ればどこに何があるのかがわかりすぐに見つかる。 つまりwebサイトなどではレイアウトが整っている方がユーザーが快適にブラウジングを楽しむことができ「また使いたい」とし自然に思ってもらいやすい。

レイアウトの目的(何をどこに配置するか)

  1. サイトを訪れたユーザーが自然に文字や画像を読みやすいように調整してあげる。

  2. サイト開発者がサイトを通じてユーザーにどのような順序でサイトをブラウジングしてほしいかレイアウトを整えることで自然に誘導する。

視線をコントロールする誘導パターン

* F型パターン

このパターンはWebサイトで最も多い視線移動の仕方です。

  1. まず左上から右に向かって読む

  2. 次に左上に戻ってから下に進み、気になった箇所で右に向かって読む

  3. また左に戻り、徐々に下に進んでいく

特徴.
F型パターンを意識したページは、文章を注意深く読んでもらうために効果的です。そのため、重要な情報や読者にとって特に重要なページに使用するのに適しています。

* Z型パターン

Webサイトを閲覧する際にユーザーの視線が「左上→右上→左下→右下」の順に動くパターンのこと。

このZ型パターンを意識したレイアウトは、画像が多いページや雑誌などによく使われる。

* 大小の法則 「要素が複数あったときに、『大きいもの→小さいもの』の順で視線が誘導される」という法則。なので重要な部分は大きくフォントを調節した方が読みやすい。

黄金比

黄金比とは、「縦1:横1.618」の比率のこと。世の中の長方形の縦横の比率で最も多いのが黄金比で、多くの人にとって見やすく美しいバランスであるとされています。