🔰
デザインの4原則とこれから意識したいこと
転職用のポートフォリオに載せるためのwebサイトを作成中です。要件定義〜デプロイまで一人でやっています。その過程でデザインの工程がボトルネックとなっているのでデザインで学んだことを記録として残そうと思います。記録として残すことでデザインに詰まったときに見返すのが狙いです。
デザインの4原則
どうやらデザインには4原則というものがあるそうなので調べて実践して見ました。
はじめに、以下の動画が大変勉強になりました。
1.近接
関連する情報をまとめること。
(例)
- タイトルと本文を近くに配置する
- フォームの項目名(メアドやパスワード)と入力欄を近くに配置する
2.整列
要素を整列させること。
(例)
- テキストを左揃えにする
- カードを等間隔に並べる
3.反復
同じ要素を繰り返し使用すること。
(例)
- カードレイアウトを統一して使用する
- カラーリング、フォント、ボタンなどの要素を繰り返し使用する
4.対比(コントラスト)
情報の重要度に差をつけること。
(例)
- ヘッダのテキストサイズを大きくする
- 割引中の商品や選択中の項目の装飾を目立たせる
実際に試してみる (デザインの4原則)
上記4つの原則を試してみました。
近接・整列
まずは成果物から
意識したこと
- 項目名と入力欄の位置を近くに配置 (近接)
- 項目名と入力欄を左揃えに統一 (整列)
反復・対比
まずは成果物から
意識したこと
- レイアウトは同じものを繰り返して使用 (反復)
- これは架空の美容室の予約画面を表していますが、新人さんにはカードの背景色を少し変えて、左上に「new」というタグをつけています。 (対比)
これから意識したいこと (デザインの4原則)
今まで近接、整列、反復はなんとなくできていたのですが、対比はできていませんでした。対比ができていないと全ての情報の重要度が同じに見える、同じようなデザインが続いて飽きる、などの問題が生じることが考えられるため、今後は対比を特に意識してデザインに取り組みたいと思いました。
デザインにおける数値について
以下の記事が非常に勉強になりましたのでアウトプットしてみました。
まずは成果物から
意識したこと
- 見出しのフォントサイズを8pxグリッドに合わせるように40px(8の倍数)で指定
- 見出しとコンテンツ(画像と本文)の間を64px(8の倍数)で指定
- 画像のアスペクト比を黄金比(1:1.618)で指定
- 画像の対象が縦横3分割したラインの線上、叉は交点にくるように調整 (3分割法)
- 画像と本文の間を64px(8の倍数)で指定
- 本文のフォントサイズを見出しの1/2(20px)に指定
- 本文の行間をフォントサイズ(20px)の1.5倍(35px)で調整
- 見出し、本文の字間(カーニング)をフォントサイズの3%分で調整
上記の数値を意識するだけでバランスの取れたデザインとなりました。
要素を並べて見ましたが、洗練された雰囲気になったと感じています。
8pxグリッドなどは意識しすぎるとデザインが硬直するためガイドラインとして捉えていきたいと感じました。
今回はここまでとなります。
Discussion