ノンデザイナーなら押さえたい！デザインの基礎「18個の基本原則」

最近では様々なサービスが登場し、ノンデザイナーでも"デザインできる環境"が整っています。

ただ、やはりプロのデザイナーが制作したものと比較すると、クオリティの差が歴然で……。
皆さんもこのような経験あるのではないでしょうか。

多くの方が「デザイン＝美的センスが必要」というイメージを持たれているかもしれませんが、実はデザインには原則があり、プロの方は身体にインプットされているデザイン原則のコツを如何なる時でも引き出すことができます。たとえノンデザイナーでもデザインの基礎的な部分（ポイント）を押さえておくことで、デザインスキルを高めることが可能です。

そこで今回は、デザインの基礎「18個の基本原則」をご紹介します。本記事を通じ、デザインに関する基礎を身に着けることができるので、ぜひデザインスキルを高めたい方は必見です。
　　

デザインの基本原則18個

1. レディング、カーニング、トラッキング

文字を単に打つだけでは美しいデザインはでき上がりません。美しいデザインを作り出すには文字の調整を行う必要があります。その際に身に着けたいのが、レディング、カーニング、トラッキングです。

●レディング……行間のスペースの調整

●カーニング……1つひとつの文字間の調整

●トラッキング……文字グループ間の調整

文字間が不自然なままだと、文字が窮屈になり読みづらかったり、逆にスペースが空き過ぎてまとまりがなくなることも珍しくありません。こちら3つは、デザインを行う人なら必ず身に着けておきたい基礎テクニックです。
　　

2. 文字数

文字数の多い文章（ブログ記事やニュースなど）を読む際、次に読む箇所がわからなくなったり、読むのに疲れてしまうという経験はないでしょうか。

一行の文字数は、長過ぎても短過ぎても読みにくくなってしまいます。読みやすく、ちょうどいい文字数にすることを心がけましょう。

文字数には明確な決まりはありませんが、横書きで35文字程度が読みやすいと言われています。ただし、これは媒体によっても異なりますので、実際に読んでみて「読みやすい」と感じる文字数にしてみてください。
　　

3. 孤立行

孤立行とは、文章の先頭と終わりにはみ出し部分のことで「widow（ウィドウ）」「orphan（オーファン）」といいます。孤立行があると、文字が一部だけ浮いてしまい、読みづらくなってしまいます。

印刷物に限らずあらゆるデザインにおいて避けることができない孤立行ですが、極力無くなるようにデザインすることで見違えるように読みやすく、美しくなります。はみ出した部分が頻繁にできてしまうと特に読みづらくなるので、十分注意しましょう。
　　

4. フォントの比率

デザイン初心者にありがちなのが、スペース内に上手く収めようと文字を縮めたり、伸ばしたりとフォントの比率を変えてしまうことです。フォントはそのままの比率で使うことで1番美しく見えるようにデザインしてありますので、比率を変えないようにしましょう。

フォントを入力した時にスペースが空いてしまう（または収まらない）場合は、カーニング・トラッキングで調整したり、文字サイズを変更してみてください。
　　

5. フォント選び

デザインにおいて、どのフォントを使うかは非常に重要なポイントです。フォントは色と同様、与えるイメージが異なりますので、デザインに合わせて適切なものを選択する必要があります。例えば、銀行関係のデザインを考える際に、可愛いフォントや個性的なフォントは一般的に使用しません。

フォント選びでもう1つ気を付けたいのが、フォントの数です。あまり多くのフォントを多用し過ぎないように注意し、2〜3個程度にしておきましょう。
　　

6. グリッド

格子状、方眼状のグリッドの活用は、デザインにおいて基礎的なテクニックです。グリッドを使うことで、デザイン要素をきちんと整理したり、作業を効率化できるなど多くのメリットがあります。

グリッドと聞くとWebデザインで最近耳にする「グリッドレイアウト」をイメージしますが、Webデザインだけではなく、幅広いデザインに役立ちます。情報量が多いデザインでは、特に活用したいものです。
　　

7. 階層

階層は、コンテンツの重要性に影響を与えます。目的なくコンテンツを並べるのではなく、重要性などを考慮して階層を上手く活用することで、情報をわかりやすく整理することができます。

参考画像をご覧いただくとわかるとおり、左の画像（階層無し）に比べ、右の画像（階層あり）の方が情報がわかりやすくなっています。ユーザーがどこを見ていいか迷ってしまわないように、階層を利用しましょう。
　　

8. 理論に基づく色選び

色はデザインのイメージを大きく左右する重要な要素ですので、慎重に検討しなければいけません。

そこで活用したいのが、色に関する理論です。色選びを間違えてしまえば、ユーザーの気が散ったり、伝えたいメッセージがうまく伝わりにくくなってしまいます。

例えば、法律や学校などにおいては誠実な印象を与える「青」、飲食店では食欲増進する「赤」、病院では爽やかなイメージの「緑」などをよく利用します。
　　

9. 色の組み合わせに注意する

画像引用元：Pixabay

デザイン初心者の方が悩んでしまいがちなのが、配色ではないでしょうか。配色の決め方にはいくつかの方法がありますので、キーカラーに合わせて組み合わせを選んでみましょう。

配色に関する理論には様々なものがありますが、その1つにアメリカの色彩学者 D.B.ジャッド氏が提唱した「ジャッドの色彩調和論」というものがあります。
この理論は、これまでの色彩調和論の原理を要約したものです。

秩序の原理……一定の法則で規則的に選ばれた色は調和する
なじみの原理……自然界の色の変化、いつも見慣れている配色は調和する
類似性の原理……何らかの共通性を持つ色同士は調和する
明瞭性の原理……コントラストがはっきりしている色の組み合わせは調和する

参考：
日本色研事業株式会社　HomePage
　　

10. 余白

「余白＝単なる空きスペース」と思ってしまいがちですが、実はデザインにおいて重要な要素の1つです。余白を上手く活用すれば、注目してもらいたい部分を強調したり、視線を誘導したり、洗練された印象を与えるといった効果があります。どのように余白をとれば効果的か、考えながらデザインしていきましょう。
　　

11. メディアに合わせたデザイン

デザインは使用するメディアによって仕様が異なりますので、各メディアに合わせてデザインしなければいけません。

例えば、本の場合、見開きした時の綴じ部周辺には文字やデザインを配置しないようになっています。
　　

12. 可読性、明瞭性

デザインは情報を伝えるという目的があり、ユーザーが情報を見やすく・読みやすくするためには "可読性" "明瞭性" が大切です。

可読性・明瞭性を高めるためには、可読性を低下させる原因を考えてみるとわかりやすいです。例えば、文字サイズが適切ではない、背景と文字のコントラストが低い、英文で大文字ばかりを使っている……などを原因として挙げることができます。デザイン後は、読みにくい部分がないか確認してみましょう。
　　

13. 機能するかどうかを考えること

何となく見た目がいいデザイン＝適切なデザインとはいえません。「アーティスティックでカッコいいけれど、文字が読めない」「オシャレだけれど、イメージと違う」ということになってしまうと、伝えたいメッセージをユーザーに届けることができず、デザインの目的が果たせません。

例えば「女性向けの配色」を考える時、画像左側の配色も素敵ですが、右側の配色のほうが一目で女性向けという印象を受けます。見た目にこだわるのはもちろん大事ですが、目的に応じてデザインすることが重要です。

ここでは色で説明をしていますが、フォントの種類・使うイラストの雰囲気……など検討すべき点はたくさんあります。デザイン性ばかりに目を向けたり、自分の好みでデザインするのではなく、機能するかどうかを十分に考慮しましょう。
　　

14. 時には遊び心も取り入れる

デザインの基本はもちろん重要ですが、必ず基本に沿っていないといけないわけではありません。基本を理解した上で時には規則を破ることで、独創的なデザインになることだってあります。インパクトが欲しい、違うデザインが欲しいと思った時には、規則的な中に不規則なものを取り入れたり、あえて普通とは違うレイアウトにする……など、色々な方法を試してみてはいかがでしょうか。

参考：
【非デザイナー必見！】知っておくべきデザインの基礎法則６つ｜ferret
　　

15. 近接

近接とは、情報の意味・性質が似ている要素同士を近くに配置し、そうではない要素を遠くに配置する原則です。人は物を認識する時、自然にグループ化する機能があるため、近接の原則を用いて関連する要素をまとめて配置すれば一目で処理することができるようになります。

何でも均等に並べると、きっちりして綺麗に見えるような気がしてしまいます。ただ、この近接の原則に従わずに配置すると見ている人は情報をスムーズに処理できずわかりづらくなります。

画像引用元：デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則｜WebDesignRECIPES

例えば、画像では複数色のカップケーキとそれに対応する名前が記載されていますが、どのカップケーキの名前なのかはっきりとはわかりません。これは、位置関係が整理されておらずテキストと上下のカップケーキの距離が均等なためです。CUPCAKE#5の文字がピンクか水色の名前であることはわかりますが、この場合上でも下でも問題なさそうです。

画像引用：デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則｜WebDesignRECIPES

そこで近接の原則を適用して、CUPCAKE#5のテキストをより上に配置してみるとどうでしょうか。上のカップケーキにテキストが近付き、ピンク色のカップケーキがCUPCAKE#5であることがよくわかるようになります。

このように、近接の原則では余白が大きなポイントです。ついつい余白を均等にしたり逆に隙間を全部埋めたくなることがありますが、必要に応じて余白をとり、関連性が強い物同士を近付けて組織化することが重要です。

例のような画像だけではなく、文章の見出し・段落といった要素にも近接を活用することができます。

●ポイント
・ 情報が関連するものは近く、関連が薄いものは遠く
・ 理由も無く均等に余白を作ったり、隙間を埋めたりしない

　　

16. 整列

要素を綺麗に整列することを整列の原則といいます。要素を配置する際には「見えない透明の線」を意識し、それに沿って配置してみるとキレイに整列することが可能です。何となく右側にしよう、隙間があるから何か配置しよう、という風にしていくと不揃いに見えてしまい印象が悪く、可読性も低下しますのでやめましょう。

画像引用：非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | SWINGS

例として、中央揃えに配置した名刺のデザイン画像を見てみてください。キレイに中央に寄せているかのようにも見えますが、透明な線は見えず非常に読みにくい印象を受けます。そこで、近接の原則で要素をまとめ、左揃え・右揃えで配置してみます。

画像引用：非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | SWINGS

すると要素が見やすく、わかりやすくなっています。また、左と右の端がきちんと揃い、透明の線を感じることができるようになりました。

何か理由がない限りは基本的に中央揃えは使用せず、左または右に揃えるのがポイントです。

図が1つしかない、文章が1つしかない時など、場合によっては中央揃えが効果的なシーンもありますが、効果的に使うにはテクニックが必要です。とりあえず真ん中に配置するというのはやめましょう。

●ポイント
・ 画面中に揃える基準を探し、透明の線を意識して要素を配置する
・ 意図もなく中央揃えにしないこと

　　

17. コントラスト

コントラストとは、直訳すると対照・対比という意味の言葉です。デザインに様々な手法（大きさ・色・明暗・濃淡・太さ・余白など）でコントラストを付けることで、注目させたり重要な部分をはっきりさせたり見た目にメリハリを付けることができます。

ユーザーは全てをきっちり見てくれるとは限らないので、コントラストが十分ではないデザインはどこを見ていいのかわからず、情報を上手く伝えることができません。そのため、コントラストを取り入れることが重要です。

画像引用：デザインの要素と原則｜What's Design

コントラストを活用する時のポイントは、はっきりと違いを付けることです。あまりわからない位の違いでは効果的なコントラストにはなりませんので、思い切って大胆にメリハリを付けましょう。また、コントラストを付けるには大きければいいというわけではないことも理解しておくことが重要です。参考の画像を見てみると、左の画像の方が文字が大きく目立たせているように思えますが、明らかに右の方が目立っています。

このように、コントラストには「差異」が重要で、ただ大きくするだけでは目立たないことがあります。

●ポイント
・ 要素と要素の違いをはっきりと付けること
・ 大きければいいわけではないことを理解しておくこと

　　

18. 反復

反復とは、デザインの持つ特徴をデザイン、作品全体で繰り返す原則のことです。ある特徴を繰り替えすことで作品全体に一貫性を生み出すことができます。反復させる要素は色、レイアウト、形、アイコン、テクスチャなど何でも構いません。

反復を取り入れ作品に一貫性が出ると、情報がグッと理解しやすくなります。反復は全てが同じである必要はなくその特徴だけを繰り返す形でも構いません。反復を使うことは、特別な要素を強調するのにも効果的です。デザインの要素に一貫性がなく、どれもバラバラに見えてしまうと特別な要素を入れても全く目立ちません。しかし、ある一定のルールがあり、そこに特別な要素があると人はその要素が特別であると認識することができます。

●ポイント
・ デザインの持つ特徴を繰り返し、作品に一貫性を持たせる
・ 反復は完全に同じものでなくとも構わない