ちょっと意識するだけ！デザイン力がワンランクUPする14個の注力ポイント

デザインをしたいと考えた際、Illustrator、Photoshopといったソフトの使い方やCSSなど覚えなければいけないことがたくさんありますが、まず身につけたいのは基礎力です。

技術面を覚えても基礎が身についていなければ、本当に良いデザインができているか、どのようにデザインしたらいいか判断することが難しくなります。

今回は、デザイン基礎力の注力したいポイントをピックアップしてご紹介します。
今からデザインを始める方、再度基礎から学習したい方にオススメです。ぜひご覧ください。
　　

デザインで注力したい基礎15ポイント

1. 関連する要素をグルーピングする

http://webdesign-trends.net/entry/859

人は近くにあるものを自然と「関連がある」と認識しますので、位置的に近くにするだけで理解しやすいデザインにすることができます。これは、デザインの原則上では「近接」と呼ばれるもので、どのようなデザインでも考慮すべきテクニックです。

逆に、関連がある要素をまとめて位置関係が整理できていないと、見る人はどの要素同士が関係があるのか理解するのに時間がかかってしまいます。
　　

2. 要素同士の余白を均等にはしない

http://bulan.co/swings/design4principals/

「近接」の原則に従ってレイアウトしていく際に気を付けたいのが、要素同士の余白です。
何でも均等にすると綺麗に見えそうな印象を持ってしまいがちですが、情報をまとめるためにも位置関係に応じて適切に余白をとることが大事です。

画像の例の場合、「コーヒーのイラスト・メニュー名・メニューの解説」が1つのセットとなっており、セットの周囲に余白があります。これは関連するもの同士の余白が狭いため1セットとして捉えることができていますが、もし全ての要素の余白が同じならどこまでが関連のあるまとまりなのか相手には伝わりません。
　　

3. 透明な線を作り要素をきちんと整列する

http://creive.me/archives/6905/

レイアウトを美しく見せるためには、意識的に揃えて整列させる必要があります。整列していない無造作な状態では要素がバラバラに見え、情報が伝わりにくいだけでなく、見栄えも悪くなります。

透明の線ができるように意識して揃えると、初心者でも綺麗に要素を整列させることが可能です。
　　

4. 効果的な位置に揃える

http://tsutawarudesign.web.fc2.com/miyasuku1.html

整列させる位置には左揃え・右揃え・中央揃え・左右両端揃えの4パターンがあり、用途に応じて効果的な位置に揃える必要があります。よく理由もなく「中央揃え」する方がいらっしゃいますが、慎重に使わないとバラバラな見た目になってしまうことがありますのでできる限り避けるべきです。

一般的に使いやすく揃えやすいのは「左揃え」ですので、初心者の方はまずは「左揃え」を基本にしてみてください。
　　

5. 優先順位を決め目立たせる箇所とそうでない箇所に違いをつける

http://30sec.hatenablog.com/entry/2015/05/07/222610

デザインの要素が全て単調だと、見ている人はどこに注目していいかわからなくなってしまいます。メリハリをつけるためにも要素の優先順位を決め、特に見てほしい部分にはコントラストをつける必要があります。

コントラストはフォント、色の濃さ、余白のサイズ、線の太さと様々な要素に変化をつけることで取り入れることができます。
　　

6. 重要な箇所は大胆に目立たせる

http://tsutawarudesign.web.fc2.com/miyasuku1.html

コントラストを付ける時に注意したいのが、目立たせる部分とそうでない部分の差をしっかりとつけることです。
あまりわからないくらいの差であれば、コントラストとしては効果的ではありません。また、どれも大事だからとあれこれ強調しては本当に大事な箇所がわからなくなります。

要素と要素の違いをはっきりとつけるのがコントラストを上手くつけるためのポイントです。
　　

7. 要素を繰り返して一体感を出す

http://www.live-commerce.com/ecommerce-blog/repetition-design/

人は何かを見た時に自然とパターン化できるものがないかを探しており、パターン化することで理解スピードが早まります。そこで、デザインにおいては要素をパターン化して繰り返し反復し、一体感を出す必要があります。画像の例でいえば、赤丸のアイコンを統一して使ったり、書体も同じものを採用しています。

このようにある特徴を繰り返すことで、人が認識しやすいデザインにすることが可能です。
　　

8. デザインに合うフォントを選ぶ

http://coliss.com/articles/build-websites/operation/design/20-design-rules-by-canva.html

フォント選びもデザインの重要なポイントです。
フォントには多種多様なデザインがありそれぞれ与える印象が異なりますので、デザインにあわせて適切なフォントを選択する必要があります。フォントを決める際にはどのようなイメージを持っているか、デザインに合うかを考えましょう。

実際の広告、ブランドでどんなフォントを用いているか見てみるのも参考になります。
また、複雑すぎる見た目にしないためにもデザインに取り入れるフォントは2、3種類までにおさえておきます。
　　

9. フォントの縦横比を変えない

http://xn--dckc6ac6a2e3a0a6gtj9hv517b6i1c99wa024cckzb.com/beautiful-font

フォントは通常、縦横比を変えていない「生体」が最も美しく見えるよう作られています。しかし、デザインに慣れないうちはスペースになんとか埋めようと横幅を無理に狭くしたり、引き延ばしてしまいがちです。

状況によっては若干縮めたり伸ばしたりするのが有効なこともありますが、やりすぎると見づらくなってしまいますので、生体を基本とし縦横比を変えるときもやり過ぎないことが重要です。
　　

10. カーニング、トラッキング

http://commte.net/blog/archives/4547

デザインで文字を使用する際、より美しく見やすく調整する作業をカーニング・トラッキングといいます。カーニングでは文字と文字の間を調整し、トラッキングでは文字のブロック同士の間を調整します。

これらを調整しているのとしていないのでは見た目のバランスが大きく違ってきますので、覚えておきましょう。
　　

11. 図版率

https://www.nasuno-design.com/2015/03/17/%E4%BB%8A%E5%9B%9E%E3%82%82%E5%BD%B9%E3%81%AB%E7%AB%8B%E3%81%A4-3gatu-%E3%83%81%E3%83%A9%E3%82%B7%E4%BD%9C%E6%88%90%E8%A1%93%E3%82%BB%E3%83%9F%E3%83%8A%E3%83%BC%E9%96%8B%E5%82%AC%E5%A0%B1%E5%91%8A/

レイアウトのバランスを大きく左右するものとして重要な一つが「図版率」です。
図版率とは文字と図の量のバランスのことで、文字が多くなる＝図版率が引くくなります。通常図版率が低いほど堅苦しいイメージになり、図版率が高いと読みやすさが向上します。
しかし、図版率が高すぎる（100%）と今度は文字がない分伝えたいことが伝わらなくなりますので、ちょうどいいバランスを考えるのが大事です。
　　

12. ホワイトスペースを活用する

ホワイトスペース（余白）はただ余った部分ではなく、活用の仕方次第ではメリハリが作れたり上手く視線誘導ができたりとデザインにとって重要な要素です。

デザイン力を高めるためには、余白を効果的に活用できるようになる必要があります。
　　

13. 色数を絞り込む

http://www.slideshare.net/marippe/ss-9003317

たくさんの色を使うとカラフルで美しくなる場合もありますが、そうでない場合には使う色数は絞り込んだほうがいいでしょう。また、各色をどのように取り入れるのかも重要なポイントです。

使う色を選択する際には3色を基本とし、ベースカラー・メインカラー・アクセントカラーの比率を考えて使ってみてください。
　　

14. 理論に基づいて色を選ぶ

http://hue360.herokuapp.com/

色は好きなものを選べばいいのではなく、どの色の組み合わせがマッチするか、どのようなイメージを与えるかといった理論に基づいて選ぶ必要があります。
便利な配色ツールも沢山登場していますので、これらを使うなどして適切な色を選びましょう。