こんにちは、りょうちんです。
Webのデザインをしていて、どうもしっくりこないとか、レイアウトを感覚的に動かしたりしていませんか？
それはもしかしたら、『デザインの基礎原則』をわかっていないからかもしれません。
基本原則さえわかってしまえば、試行錯誤する時間が減るので作業は速くなり、ユーザーを迷わせない良いデザインをすることができます。
そのデザインの基本原則とは、
- 近接
- 整列
- 反復
- コントラスト
と、たった4つだけです。
今回は、このデザインの4つの原則と、それらのことをもっと深く勉強できる名著をご紹介します。
基礎知識って意外と忘れてて、なんとなくやってしまいがち。基礎という土台を固めるのがレベルアップの近道です！
デザインの4つの基本原則を押さえよう
ご紹介する4つの基本原則を覚えると、ユーザーが迷わず正しい情報を得ることができます。
まずはこのブログの紹介文を例に、ダメなデザインを作ってみました↓
ごちゃっとして、どこを読んで良いのか迷いますよね。
それでは、デザインの基礎原則を説明しながら、この例を修正していきたいと思います。
デザインの基本原則1：近接
近接は、各要素を配置する距離に関する原則です。
人は瞬時に各要素をグルーピングして認知しています。
認識してほしい要素を近づけてレイアウトしてみると、こんな感じになります↓
ブログの説明と、りょうちんのプロフィールの部分が別れ、それぞれのグループとして捉えられるようになったと思います。
でも、まだ少し改善ができそうです。次を見てみましょう。
デザインの基本原則2：整列
整列は、各要素の位置を揃える原則です。
整列を行うと、情報を読み取りやすくなり、ユーザーへの負荷が軽減します。
また、整列方法によって、情報の伝わる印象も変えることができます。
整列によって先程の例を修正してみました↓
先程の中央揃えより、左揃えにしたほうが、文章が落ち着いて読みやすくなったのではないでしょうか。
ただ、まだ少し、ユーザーが考えないで情報を読み取れる方法がありそうです。
次でさらに修正してみます。
デザインの基本原則3：反復
反復はレイアウトのパターンを繰り返してレイアウトする原則です。
反復によって、ユーザーは文章構造などを素早く認識することが出来ます。
Webサイトの例でいうと、各ページの見出しと本文の体裁を同じにすることで、文章の構造を読み取りやすくなります。
反復を使って、例を修正しました↓
いかがでしょうか。英字を同じフォントと色にして、その下の日本語を黒文字にすることで、各要素を反復してレイアウトをしています。
ユーザーがここを読めば良いんだなと瞬時にわかりやすくなります。
読みやすくなりましたが、ブログについて伝えたいのか、りょうちんについて伝えたいのかが、あまり差がありません。
次は、もう少しブログについて印象を与えるデザインに修正してみましょう。
デザインの基本原則4：コントラスト
コントラストは、情報の強弱に関する原則です。
すべてのフォントが同じサイズのサイトがあったら見ずらいですよね？
なので、見出しは大きなフォントするなど、強弱をつけます。
先程の例は少しシンプルなイメージでしたが、ちょっと情報にコントラストを付けてよりユーザーにインパクトを与えるデザインにしてみます。
（個人的にはシンプルが好きなのですが…）
いかがでしょうか。ブログ名が引き立ち、ブログの情報にまず意識が行くようになりました。
以上、4つの基礎原則についてでしたが、今回はわかりやすいようにシンプルな例にしてみました。
もっと多くの例で詳しく学ぶには、次の書籍をぜひ読んでみてください。
具体例や詳細は名著「ノンデザイナーズ・デザインブック」を読もう
ノンデザイナーズ・デザインブックは、1998年に初版が発行され、今でも読まれ続けられている名著です。
デザインを大学などで本格的に勉強をしたことがない人に向けて、抑えておきたいデザインの基礎知識を教えることをコンセプトとして、書かれています。
最新の第4版にはWebの例も載っており、時代に合わせて内容がアップデートされています。
この記事でご紹介した4つのデザインの基礎原則が最初に書かれています。
さらに、その他にも、初心者が押さえておきたい知識が丁度いい量で紹介されています。
大きく分けると下記の3つの内容になります。
その1：色に関する基礎知識
色は色彩学という学問があるほど奥が深く、本格的に学ぶと結構勉強量が必要になってきます。
しかし、この本では初心者が知っておくべきことを厳選して書かれていて、非常にわかりやすいです。
書かれている内容としては、
- 補色、トライアド、類似色といった色の組み合わせの説明
- 色を選ぶポイント
などです。
このあたりはぜひ押さえて置くと、今後色を選ぶのに迷いが減ります。
その2：わかりやすいフォントの使い方のコツ
バナーやサイトのメインビジュアルをデザインするときに、フォントをどう使うか迷うことはありませんか？
この本では欧文フォントを中心に、フォントの効果的な組み合わせを解説してくれています。
※補足で日本語フォントについても書かれています。
これを読むとフォントを使い方について迷いが減るはずです。
その3：日本語での補足サンプル
この本は作者が外国人なため、サンプルは英字のデザインが中心です。
しかし、日本語版のために日本語を使ったデザインのポイントも、補足として紹介されています。
名刺、ポスター、Webサイトといったサンプルで幅広くサンプルが書かれているので、普段日本語を使ったデザインをしている多くの人にも非常に勉強になります。
まとめ：これらのデザインの基礎を学んで、効率的に良いデザインを
いかがだったでしょうか。
基礎知識は何事も土台になるので、そこをすっ飛ばすと後々に余計なことを試行錯誤することになります。
ぜひ、基礎を学んで安定感のあるデザインスキルを身に着けましょう。
デザインに興味があるエンジニアの方にもおすすめですよ！
では、またね〜(^_^)/~
コメント