デザインの4原則を理解する為に使えるツール7選
いきなりですが、皆さんは、自分のデザインはどこか素人臭いなぁとか、あるいは世の中のデザインを見てどこか違和感があるなぁと感じたりすることはないでしょうか？
ですがそれをどう修正したら良いか分からない・どこがおかしいのか言語化できない。
そんな悩みを解決するのに役立つ書籍があります。
このノンデザイナーズデザインブックはデザインの4原則について書かれ、長年読み継がれている名著です。
今回はこの書籍で紹介されている内容の概念を一部紹介したいと思います。
ここでは簡単な紹介と事例に留めますので、より詳しく学びたいという方はぜひ書籍に目を通してみてください。
4つの基本原則
デザインの基本原則として以下の4つが挙げられます。
- 近接
- 整列
- 反復
- コントラスト
近接
関連する項目をまとめてグループ化することを言い、情報の組織化を目的としています。
近接によって情報伝達速度の向上を見込めます。一つ一つの要素の意味や意図を理解し、どの要素同士を近くに配置するのか、遠ざけるのかを適切に判断する必要があります。
整列
要素を一つの規則で並べることを言います。
これも情報の組織化が目的です。
具体的には要素同士を一つのデザインの中で全て統一した文字揃えにすると統一感が出て落ち着いた印象を与えることができます。
整列はデザインの統一感に影響し、また素人感を感じさせないデザインを実現できます。
反復
一つの特徴を全体を通して繰り返すことを意味します。
見出しには同じフォント、フォントサイズ、カラーを必ず使用するなどの方法が例として挙げられます。
反復はデザインに一貫性を与えると共に、見る側に一定のルールを与えることによって、情報を受け取る際の予測が容易になります。
コントラスト
その名の通り、要素ごとに明確な違いを作ることを表します。
コントラストの原則はデザイン上の重要なものとそうでないもをを明確にすると共に、デザイン的な面白さや特徴を与える効果も期待できます。
コントラストのコツとしては明確な変化を付けることが重要です。(微量の差ではその違いが意味のないものとして受け取られてしまうことがあるからです)
これらの原則はそれぞれが単体で適用されることはほとんどなく、4つが組み合わさることによって効果が発揮されます。意識して世の中のデザインを見てみると、確かに良いデザインには必ずこの原則が適用されていることが分かります。
ですがいざこれらの原則を自分のデザインに適用しようとしても、そう簡単でないことは想像に難くないですね。
そこでノンデザイナーズデザインブックの筆者も述べているとおり、日頃からこれらの原則を意識して身の回りのものを見て、どんな部分に原則が適用されているか判断できる目を鍛えることが大切なのではないでしょうか。
ここからはエンジニアが特に身近である、Webデザインに限ってこれらの原則を読み取る為に効果的だなと思ったツールを紹介していこうと思います。
効果的なツール
「近接」を読み取るツール
DimensionsはChrome拡張です。
表示しているWebサイトに存在する要素同士の距離を視覚的に表示することができます。
上記のように近接によってグループ化された要素間の距離がpx単位で表示されます。
近接の原則は各要素間の距離を明確に離さなければいけないのでDimensionsを使用することでその手助けになるかと思います。
こちらもChrome拡張として提供されているツールです。
デベロッパーツールを開かなくても表示しているページの要素を書き換えることが可能です。
このツールの使い所としては、要素同士がどんなルールで近接されグループ化されているのか(= 要素の内容が異なると違和感が出るのか)を確認する為に有用だと思います。
「整列」を読み取るツール
こちらもChrome拡張として提供されています。
Rulerという名前の通りWebページ上で定規のように使用することができます。
このように要素を選択することでガイドが表示されるので、要素同士がきちんと整列されているのかを判断することができます。
「反復」を読み取るツール
Chrome拡張として提供されているこのツールは、表示されているWebページの全体像をキャプチャして保存することができるツールです。
反復の原則は全体を通して見出しや要素の特徴が繰り返されていることが必要です。
このように全体のキャプチャを取得することで、反復が適切に行われているか一目で分かるようになります。
「コントラスト」を読み取るツール
こちらはWebページで使用されているフォントを取得することができるツールです。
またそのフォントが無料で使えるものなのか、有料であればいくらなのかを一括で取得することできます。
コントラストを付けるにはフォントを変えてみるというのもひとつの手です。
このツールでどんなフォントが使用され、どのようにコントラストが付けられているか見てみると良いでしょう。
この2つのサイトもフォントに関するツールです。
fontmapでは形状が似ているフォントをAIが判断してmap化しているサイトです。
特徴的なフォントを直感的に判断することができます。
Fonts That People Actually Useは異なるフォントの組み合わせを使用しているWebサイト一覧で表示してくれるサイトです。
見出しと本文でフォントを変える際など、どのような組み合わせで使用されることが多いかなど判断する際に使えるツールだと思います。
まとめ
今回はデザインの4原則とその原則を適切に使用する為に効果がありそうなツールを紹介させていただきました。
原則については大枠でしか説明できなかった部分が多いので、興味のある方はぜひご自身で調べてみてください。
今回はWebデザインに限定しましたが、この原則は理解しておくだけで書類の作成やちょっとした文章を書いたりする際にも役立つものです。
また今回紹介したツールに関しても全て無料で使用することができるので、空き時間にちょっと触るだけでもデザイン力の向上に繋がるかもしれませんよ！
