【デザイン】基礎編 -レイアウト4つの原則-

ポートフォリオの作成準備中。

今日はデザインについてのお勉強。

デザインとは

誰に使われるのか、ターゲットへのゴールを明確にして、イメージしてくことが大切。

印象×機能=Webデザイン

• 印象
  訪れるユーザーに対して最初に与える印象や感情のこと。色の使い方やフォント、レイアウト、画像の選定などで印象が決まっていく。

• 機能
  情報が整理され、わかりやすく伝えるか。ユーザーが求める情報や目的が簡単に見つけられること、直感的なナビゲーションになってなっているかが重要。

• Webデザイン
  トレンドを知ることも大切。印象と機能の両方がバランスがよいことでユーザーが使いやすさとポジティブな印象を与えることができる。

レイアウトの4つの原則

近接

• 関連する項目はグループ化してまとめること。
• 他のグループとは十分な余白を与えること。

整列

• ページ上のすべてのものを意図的に揃え統一化。
• 要素に視覚的な関係を持たせる。

反復

• 繰り返すことで、デザインに統一感と一貫性を与える。

コントラスト

• 色、サイズ、線の太さ、形、空間などを対比し、異なる要素をはっきりと違うものとして見せる。

人の視線の流れ

Z型の法則

初めてアクセスしたサイトで全体を見る時のパターン。
ユーザーがウェブページを見るときに、まず左上から右上、左下、右下の順に目を動かす。

具体的には、まずページの左上から右上に向かって目を向けて、ロゴやバナー画像など目立つ部分を見る。その後、左下に目を移してメニューやコンテンツの始まりを探し、最後に右下に目を向けてフッターや追加情報をチェックする。

F型の法則

具体的な情報を得るために内容を読むときに見られるパターン。
視線が左から右、左から右へと繰り返し見る。

具体的には、まずページの上部に目を向けて、ヘッダーやタイトルなどの情報をチェックし、その後、左側に目を戻してナビゲーションや目次、サイドバーなどを見ていく。

これらの法則を理解して、コンテンツを配置すること大切！

---

デザイン考えるのって難しいけど楽しい！
デザインと機能あわせて実装していくために、ワイヤーフレームをしっかり固めています。