ノンデザイナーでも大丈夫！どこでも使えるデザインの基礎を覚えよう

ノンデザイナーでもデザインが重要な理由

ノンデザイナーにとっても、デザインは重要です。なぜならデザインは、デザイナー以外にも求められるスキルだからです。冒頭でも述べたように、ノンデザイナーでも、デザインに取り組まなければいけないシーンもあるでしょう。もしデザインの知識がなければ、よい成果物を作り出すことはできません。デザインの知識があれば、資料などの完成度をより高い水準まで引き上げることも可能です。色覚効果を用いて、より訴求性の高い資料が作れるようになります。

たとえばフライヤーの作成ひとつを取ってもそうです。デザインの知識があれば、より集客力のあるフライヤーを作成できます。

社外のデザイナーに発注などをおこなう際などでも役立つでしょう。イメージを伝えられやすくなります。

また社内における活躍の範囲も広がる可能性もあります。「あの人はデザインに精通している」という立ち位置が作られれば、新しい仕事を任される機会もあるでしょう。

したがってノンデザイナーにとっても、デザインは重要である、というわけです。

使えるデザインの基本1：配色

まずは配色について解説します。配色だけでも分かっていれば、ある程度のレベルでデザインできるようになります。

配色には黄金比がある

配色には、必ずおさえておきたい「配色の黄金比」があります。

• ベースカラー・75％
• サブカラー・20％
• アクセントカラー・5%

黄金比を守った上で配色すれば、見栄えがよい、あるいは視認性の高いデザインになります。3種のカラーの役割について解説します。

ベースカラーの役割

ベースカラーには、比率からも分かるように、デザイン全体の方向性を決定づける役割があります。Webデザインでも紙面でも、背景や余白部分に使われることが多いです。可読性（読みやすさ）を担保するため、グレーや白など、無難な色が選ばれやすいです。もちろん全てにおいて無難な色が使われるというわけではありません。方向性によっては、オレンジや赤など、目立つ色が使われるケースもあります。

サブカラーの役割

サブカラーは、もっとも視線、注目を集めやすい色です。もっとも訴求したい部分を強調する役割を担います。何色を採用するかで、見る人に与える影響は大きく変化します。またデザイン全体の方向性を固める、という役割も。

アクセントカラーの役割

アクセントカラーは、デザイン全体を引き締める役割を担っています。ベースカラーとサブカラーだけでは、デザインにまとまりが出ません。アクセントカラーを加えることで、より統一感のあるデザインが作られます。

色の持つ効果を知る

色によって、与えられる効果は大きく違います。訴求したい内容に沿った効果がある色を選択することが、たいへん重要です。

主な色の効果は、おおむね以下の通りです。

• 白色 → 清潔・純粋・正義・空虚
• 灰色 → 真面目・落ち着き・知的・不安
• 黒色 → 高級感・重厚感・落ち着き・悪
• 赤色 → 情熱・モチベーション・興奮・警戒心
• オレンジ色 → 活発・楽しい・明るい・安っぽい
• 青色 → 知性・爽快感・さわやか・冷徹
• 黄色 → 元気・無邪気・未来・危険

上記のとおり、色にはさまざまな効果があります。適切な色を選択し、デザインに活かすことが重要です。

色の組み合わせを理解する

誰しもが多少なりとも知っていることではありますが、色には相性のよい組み合わせ、相性の悪い組み合わせがあります。色の組み合わせについて、より深く理解しておくことが重要です。相性のよい組み合わせを用いれば、よりよいデザインが完成します。しかし相性を考えずに色を組み合わせてしまうと、見栄えの悪いデザインになりかねません。

代表的な色の組み合わせに、「補完色相配色（コンプリメンタリー）」があります。色彩相関図で向かい合っている色同士は、相性が良い、とされています。実際、補完色相配色は、あらゆる製品やWebサイトのデザインで用いられています。

そのほか、

• 類似色相配色（アナログス）
• 3色配色（トライアード）
• 分裂色補色（スプリットコンプリメンタリー）

などの組み合わせがあります。

上記の組み合わせで使っている色は3色です。他にも4色、5色を使う組み合わせも存在します。しかし4色以上になると、デザインの難易度は急激に跳ね上がります。ノンデザイナーであれば2色から3色で組み合わせたほうが無難でしょう。

使えるデザインの基本2：レイアウト

レイアウトは、専門性が高く、複雑な分野です。とはいえ、基本的な知識があれば、ある程度整ったレイアウトを創り出すことが可能です。

大小をつける

大小をつけるのは、レイアウトにおける基本中の基本です。おそらくノンデザイナーは、まず大小について考えるでしょう。優先順位に応じて、大小を使い分ける必要があります。

たとえば優先順位のもっとも高い情報は、もっとも大きく表現されます。

次に優先順位が高いものは、もっとも高い情報よりもわずかに小さく表現されます。つまり優先順位に沿って大小をつけることが重要、というわけです。

ノンデザイナーがやりがちなミスは、「サイズが大きすぎて収まらないので小さくする」ということ。確かに見栄えはよくなるかもしれません。しかし優先順位による大小の関係が崩れてしまうので、よいレイアウトへとつながりません。見栄えだけでなく、伝えるべきことを正しい順序で伝えられるデザインに仕上げることが重要です。

視線誘導を意識する

視線誘導とは、情報を「見てほしい順番で見てもらう」ようにコントロールすることを指します。視線誘導をおこなえば、伝えたい情報をより正確に伝えられます。たとえば横書きの画面やフライヤーを見るとき、人間は、

• 左から右
• 上から下
• 右から左

という順序で視線を向けます。つまりアルファベットの「Z」字状に視線が動くということです。したがって「Zの法則」と呼ばれています。Zの法則にしたがって情報を配置すれば、より正確に伝えたいことが伝えられます。手順や道筋などを示したいとき、特に効力を発揮する手法です。

グリッドシステムを基準にする

レイアウトでは「グリッドシステム」が頻繁に用いられます。グリッドシステムとは、画面や紙を、線で分割する考え方のことです。

紙面を縦横の線で区切り、領域を分けます。領域ごとに個別な情報を当て込むなどすれば、よりクオリティの高いレイアウトが作られます。

よく使われるグリッドシステムは、

• タテ2分割
• タテ3分割
• タテ、ヨコ4分割

などです。

領域を視覚化することは、レイアウトを作るうえで大きな助けになります。グリッドシステムでは、さらい細かい「11分割」なども提唱されています。とはいえ11分割ほどになってくると、デザインの難易度は相当なものになります。ノンデザイナーがグリッドシステムを用いるのであれば、上記した3つのうちいずれかを採用するのがベターです。

使えるデザインの基本3：文字（フォント）

文字（フォント）ひとつとっても、工夫すべき点はいくつもあります。文字のデザインだけでひとつの学問が成り立つほど、奥が深いです。しかし下記するポイントがおさえられていれば、ノンデザイナーとしては十分なデザインを創ることができます。

フォントを伸縮させてはならない

原則として、フォントは伸縮させてはいけません。なぜならフォントを伸縮させてしまうと、美しい文字ではなくなってしまうからです。フォントは、デザインされた段階で美しく見えるよう、徹底的な計算されているものです。したがって伸縮させてしまうと、計算が狂い、見栄えの悪いフォントになってしまいます。スペースの都合上、文字を伸縮させたくなることもあるでしょう。しかし伸縮させずに、フォント全体のサイズを変える、という手段を取るべきです。

フォントの大きさに対しておこなってもよい改変は、サイズ変更のみです。繰り返しになりますが、絶対にフォントを伸縮させてはいけません。

フォントファミリーで統一する。

フォントファミリーとは、あるテーマを共通して持っているフォント群の総称です。フォントファミリーのみを使って文章を作成すれば、デザイン性は向上します。

たとえば「Yu　Gothic UI」というフォントがあります。ファミリーは、「Yu Gothic UI　Light」や「Yu Gothic UI　Semlight」などです。つまりYu Gothic UIとファミリーだけで文章を作成すればよい、ということです。デザインにおけるフォントは、かならずフォントファミリー単位で選定しましょう。

可読性を意識する

情報を伝えるにあたり、可読性はたいへん重要です。したがって可読性の高いフォントを選ぶ必要があります。さまざまなフォントが存在しますが、可読性については一長一短です。デザインは優れているが、サイズが小さすぎると誤読を招くもの。デザインはシンプルだが、どんなサイズでも可読性が高いものなどさまざまです。

たとえばポピュラーなフォントである「MS　明朝」や「MS　ゴシック」。両者はデザイン性という面では突き抜けていません。しかし、大きなサイズでも小さなサイズでも可読性を落とさないという利点があります。

逆に「century Gothic」というフォントは、デザイン性が高いです。一方でサイズが小さくなると「a」と「o」が区別しづらく、誤読の原因になります。言ってしまえばこうと言う決まりがなく、サイズや状況に合わせて適切なフォントを選ぶことが重要です。適切なフォントを選べば、可読性を確保することが可能です。

カーニングをおこなう

カーニングとは、簡潔に言えば文字と文字の間にある空間を調整することです。カーニングすることで、視認性や視覚性を高めることができます。カーニングをおこなわない場合、原則として文字と文字の間にある空間は、等間隔に近づけるでしょう。パソコンで文章を作成している場合は、強制的に等間隔となります。しかし空間が等間隔であるからといって、視認性や視覚性が高まるわけではありません。視認性や視覚性にコミットするならば、等間隔を崩してカーニングする必要があります。カーニングのやり方は、となり合っている文字によって違います。文字同士のバランスや、レイアウトの目的を考えて、適切なカーニングを実施しましょう。

デザインの勉強になる書籍や本を紹介

ノンデザイナーズ・デザインブック

ノンデザイナー向けの書籍として、もっともポピュラーな部類に入る一冊です。初版が発行されてから、20年近く増刷されています。本書では、デザインにおける「4つの基本原則」をベースとして、基本的なデザインを解説しています。本書で語られている4つの基本原則は、以下の通りです。

• コントラスト
• 近接
• 反復
• 整列

本来であれば複雑なデザインの要素を、上記のように簡素化して解説しています。プレゼンテーションやパンフレット作成、簡単なWeb制作に対応する程度の知識なら、本書で十分学べます。あらゆるビジネスシーンで活かされるノウハウを得られる、優れた一冊です。またKindle版もリリースされています。

デザイナーになる! 伝えるレイアウト・色・文字の大切な基本と生かし方

デザイナーの入門書として書かれ書籍です。まったくデザインの知識がない人を対象にしている書籍なので、基本的な知識が学べます。上述してきたデザインのポイントを、もう一歩専門的な領域へ踏み込んだような内容です。

本書は、下記のような3章構成になっています。

• 1章：デザイン構築の流れ・デザイナーとしての心構え
• 2章：レイアウト、色、文字の基礎知識
• 3章：作品例の紹介

特に2章は、ノンデザイナーがデザインする上で、大きなヒントになります。デザインの仕事をするとき、この書籍を手元に置いておくと、大いに役立つでしょう。また余裕があれば1章に目を通し、デザイナーとしての心構えについて学ぶのもよいでしょう。より専門性の高いデザインを創り出すノウハウが得られます。

まとめ

デザインは、やはり専門性が高く、奥深い分野です。ノンデザイナーが少し勉強しただけで、高い専門性を身につけることは難しいでしょう。しかし初歩的なデザインであれば、ノンデザイナーでも十分に可能です。デザインの基礎中の基礎をおさえることができていれば、たいていのことは対応できます。またデザインの基礎知識があるだけで、そうではない人と差別化を図ることも可能です。デザインは基礎知識の段階であれば、理解するのはさほど難しくはありません。ぜひ基礎知識を学んで、デザインに活かしていきましょう。