デザインの現場で絶対に必要になる基礎知識７選

こんにちは、アシスタントデザイナーの秋田です！

デザイン知識ゼロで入社した私が、一番最初に学んだ現場で使う基礎知識をまとめました。

近年では、未経験でキャリアチェンジしてデザイナーを目指す方も珍しくないかと思います。私もその一人です。デザイン教育を受けていない人にとって、デザインは何から勉強し始めたらいいのか迷ってしまうことがあるかと思います。

この記事は、全て先輩デザイナーからのフィードバックにより得た知識をまとめています。実際に現場で使う知識なのでデザインに興味がある方や、これからデザインの勉強をされる方にとって少しでもヒントになったり、参考になれば幸いです。

1. 「デザイン＝見た目を綺麗にすること」ではない

「デザイン」と聞くと、皆さんはどんなことが頭に浮かぶでしょうか？「見た目を綺麗にすること」と思われる方が多いのではないでしょうか。もちろんそれも間違いではありません。しかし、なんのために見た目を綺麗にするのでしょうか？

Wikipediaには、デザインとは「審美性を根源にもつ計画的行為の全般を指すものである。意匠。設計。創意工夫。英語のdesignには本項の意味より幅広く、日本語ではデザインと呼ばない設計全般を含む。」と書かれています。このように、デザインは「計画」「設計」などの言葉を用いて説明されています。つまり、見た目を綺麗にすることだけがデザインではなく、何らかの目的を達成するための計画や設計を含めた一連のプロセスがデザインなのです。

デザインの本質は、「目的を達成したり、課題を解決したりする最適な方法を生み出す」ことです。色や形などの見た目を綺麗にすることは、あくまで一つの手段であり目的ではないのです。誰の何のための設計なのかを思考し、目的を達成するための計画を立て実現化すること。これが現代のデザインの役割です。

2. 知らない人は絶対にいない「デザイン基本 4大原則」

デザインの基本 4大原則は、デザインに携わった人なら必ず知っています。先ほど説明した「誰のための設計なのかを思考し、目的を達成するための計画を立て実現化する」というデザインの本質にも大きく関わってくるものです。デザインは見た目の美しさももちろん大切ですが、美しいだけでは目的を達成することはできません。目的を達成するために「情報を意図した形で適切に伝える」ことが重要です。このデザインの4大原則を抑えると、伝えたいことをわかりやすく、美しくまとめるための基礎を身につけることができます。

以下に紹介するのが「デザインの基本 4大原則」です。

1. 近接
2. 整列
3. 強弱
4. 反復

それぞれ図解を用いて説明いたします。

①近接【関係する要素をグループ化する】

近接とは、「関係するデザイン要素を近づけてグループ化すること」です。

人は距離の近い集まりを「関係のあるもの」だと認識する習性があります。関わり合っているはずの要素が意図なく配置されていては、情報を理解するのに時間がかかってしまいますね。つまり、関係し合う要素同士を近づけてグループ化することで、直感的に情報の関連性を理解することができます。

下の画像は、色とその名前を並べています。しかし、それが上と下どちらの色の名前を指しているのか、パッと見たときに瞬時に理解するのは難しいですね。

関係している情報を近づけたものが下の画像です。色と、下にその名前が書かれていることがすぐ理解できます。

そして、近接で重要なのは「異なる要素と空白を取ること」です。関係するものを近づけて、関連しないものとの間に余白を取ります。

空白を埋めたくなるというのは、非デザイナーの方のあるあるです。空白があると、それを埋めようと文字を大きくしたり、装飾のグラフィックを入れてみたり…。せっかく関係し合う要素をまとめてグループ化しても、空白がないと全てが一つのグループに見えてしまい混乱を招きます。画面をいっぱいに使うことが目的ではありません。「わかりやすく伝える」という本来の目的を忘れず画面レイアウトする癖をつけましょう！

②整列【見えない線で繋げる】

整列とは、「要素を見えない線で繋げてレイアウトすること」です。要素がルールなくバラバラに配置されていると、画面がごちゃごちゃしてしまいます。そこで、情報を整理して揃えます。

デザイン上のグラフィックやテキストの色・大きさ・フォント・位置などを揃えることで、すっきりと整理することができます。デザイン上の様々な要素が視覚的に関連し合うことで統一感が出るのです。揃えない場合は、なぜ揃えないのか理由が必要です。デザインは全て意図的に作られたものである必要があるため、「なんとなくでバラバラに配置した」ということがないようにしましょう。

コツは、「見えない線で繋げること」です。テキストは「右寄せ」「中央揃え」「左寄せ」なども意識して、整理して配置することを意識しましょう。

③強弱【はっきりと差をつける】

異なる要素に差をつけて、違う情報だとはっきり分かるようにすることが大切です。また、強弱をつけることでデザインに面白みが出て、人の目を惹きつけるという効果もあります。例えば、見出しは大きく強調し目を引くようなフォントや色にする、本文は小さくし読みやすいベーシックなフォントや目に優しいカラーを使用する、といったような方法で異なる情報に差をつけます。また、目立たせたい要素を大きくしたり、他要素とは違う表現を取り入れてみることでも、強弱・メリハリをつけることができます。

コツは「臆病にならず思い切って差をつけること」です。中途半端な強弱にすると、異なる情報だとはっきり伝えることができない上に、ぼんやりしたデザインになってしまいます。はっきりと異らせることで強弱が生まれ、情報の優先度も伝わることでしょう。思い切りが大切です！

④反復【デザイン要素上の特徴を繰り返す】

反復は、「デザイン上のある特徴を繰り返すことで統一感を生み出すこと」です。

一つのデザインの中で、同じ要素を繰り返して使用すると全体に一貫性が生まれます。例えば、色・フォント・レイアウト・ライン・装飾などがこれにあたります。これはノンデザイナーの方でも無意識的に取り入れていることが多いです。社内のプレゼン資料など、レイアウトやカラーはどのページも同じものを使用していることでしょう。同じ資料内で急にレイアウトもカラーも何もかも変わってしまっては、別の資料に変わってしまったと混乱させてしまうかもしれません。

Webデザインでは、デザイン上のレイアウトのスタイルやルールを「トーン&マナー」といいます。デザインのスタイルやルールも繰り返すことで、同じものだと直感的に伝えることもできます。浮いてしまっている要素がないか、表現の揺れがないか、見直すことはとても大切です。

どんな自由なデザインも、まずは基本を知ることから

「デザインの基本 4大原則」を意識してデザインすることで、情報を意図した形で伝えるための表現の幅が広がります。そして、これらは「どれか一つの原則だけを使用する」ことはありません。必ずこれらの原則が関連し合います。近くにあるデザインに目を向けてみると必ずどこかにこの原則が使用されています。

もちろんこの原則に必ずしも従わなければいけない訳ではありませんが、基本を押さえた上に表現される自由なデザインは、より洗練されるはずです。

デザインだけでなくあらゆる場面で役に立つ原則なので、ぜひご活用ください。

3. 余白がデザインを左右すると言っても過言ではない

余白は、読んで字のごとく「余ったスペース」と捉えることができます。しかし、デザインにおける余白は余ったスペースではなく「意図的に作られた空間」といえるでしょう。美しいと感じるデザインは、余白が必要な場所に計算され作られています。

この余白のことを、デザイン用語では「マージン」や「ホワイトスペース」などと呼びます。余白の扱いで、デザインのクオリティは大きく変わります。

余白があるともったいなく感じて、伝えたい情報をできるだけ画面いっぱいに詰め込みたくなりますよね。しかし、画面全体が情報で溢れてしまっては、一番伝えたいことが何なのか分からなくなってしまいます。そのデザインで本当に伝えたいポイントはどこなのかを見失わず、そのポイントをよりわかりやすく伝えるために余白を作りましょう。

余白を作る上で重要なことは「画面内の余白が全て同じ役割ではない」ことを理解することです。例えば、ある一つの要素を強調させるための余白と、タイトルと本文を分けるための余白は役割が違います。

また、余白の量で与える印象を変えることもできます。余白をたくさん作ることでシンプルですっきりとした印象になったり、あえて余白を少なくすることで賑やかで活気のある印象になります。

余白がデザインのクオリティを左右するといっても過言ではありません。私自身も先輩デザイナーに、余白について何度も丁寧にフィードバックいただきました。それほど余白は重要で、余白でデザインの印象は変わります。街の中の広告やポスターなど、気にして見てみるととても面白いですよ！

4. カーニングって知ってる？

5. 粗密があると目を引くデザインになる

粗密は、「粗」と「密」を使い、注目させたいポイントへ目線を誘導することです。強弱とも少し似ていますが、違います。粗密を意識してデザインすることで注目させたいポイントを作り出すことができます。

具体例を挙げて説明いたします。

上の画像は、要素の大きさや間隔を均等に並べています。平坦で、動きがありませんね。注目するポイントがない画像です。

先ほどの画像に「粗」を作りました。一部にカエルとウサギがいないスペースを作ると、何もない空間なのに、そこに何かあるのではないかと目を引きます。

こちらは画面上に「密」を作りました。こちらも目を引きますね。兄弟なのかなと想像したりしますね。しませんかね。

ここでお伝えしたいのが「粗」「密」どちらの場合も、少ない割合の要素に目が引かれるということです。このように単調な画像でも、「粗密」を意識するだけで、目線を意図した場所に誘導することができます。

粗密と強弱を組み合わせ、画面に動きをつけ、より目を引くデザインを作りましょう！

6. 色の配色比率「70：25：5の法則」とは

デザインでカラーを使用するときには「色の配色比率 70:25:5の法則」を意識しましょう。

一般的に、カラー3色を「70：25：5」の比率にして配色すると、バランスの取れた美しい配色になるとされています。「ベース 70%」「メイン25%」「アクセント5%」ですね。

色をたくさん使うデザインは熟練デザイナーでも悩みます。色を使いすぎると、賑やかになりすぎてしまったり画面がごちゃごちゃして見えてしまいます。そのため、意図的に色をたくさん使うとき以外はなるべく3色に抑え、上記の配色の割合を参考にすることをおすすめします。

また、この配色比率と合わせて「トーン」も一緒に意識しましょう。

「トーン」の概念を理解して非デザイナーから脱却しよう

色には「色相」「明度」「彩度」の三属性があります。

それぞれを簡単に説明したものが下記です。

• 色相…色の違い
• 明度…色の明るさ
• 彩度…色の鮮やかさ

トーンとは、この三属性のうちの「明度」と「彩度」が近い色をグループ化したものを指します。

デザインの教育を受けていない人にとって、このトーンの概念は知られていないことも多いです。最も彩度の高い「ビビットトーン」を基準に、白を足していくと明度は高く、彩度は低くなります。黒を足していくと明度・彩度ともに低くなります。また、各トーンには、それぞれの色味がもたらすイメージがあります。例えば、ビビットトーンであれば賑やかで生き生きとしたイメージ、ペールトーンであれば透明感のある優しいイメージがあります。

この「トーン」と先ほどの「色の配色比率」を合わせて色使いを考えてみましょう。架空のアプリ画面を例に挙げています。

• 背景などの広い面積を占める→「ベース」→薄いグレー
• そのデザインの主役となる色→「メイン」→ブルー
• 目立たせたい、ユーザーの目を引く色→「アクセント」→濃いオレンジ

それぞれのトーンは以下です。

• ベース→「ペールトーン」
• メイン→「ブライトトーン」と「ライトトーン」の中間
• アクセント→「ビビットトーン」

この画面のベースを「ビビットトーン」にすると、色の主張が強すぎて目が痛くなってしまいます。また、ベースはメインやアクセントを邪魔しない色にすると扱いやすいです。

アクセントカラーは一番割合が少ない、かつ一番目立つ色である必要があります。メインカラーの反対色をアクセントカラーにすると強くメリハリをつけることもできます。

このように色の概念を踏まえてカラーを決めることで、見栄えだけでなく視認性など全体のクオリティの向上を図ることができます。もちろんこの方法だけが正解というわけではありません！何をデザインするのか、誰に届けるのかで全く違ったカラー選びになります。使う色に迷ったときにはぜひ参考にしてみてください！

カラーを選ぶときに参考になるおすすめのサイト

そもそも何色にしようか思いつかない！というときは、サイトで探しましょう！

【Palettable】

Palettableはランダムで色を提案してくれるサイトです。

表示されている色が好みだった場合、【Like】を押します。すると、その色に合うような色をランダムで提案してくれます。

【Dislike】を押すと違う色を提案してくれます。自分では思いつかなかった色を提案してくれたりするのでとても面白いです。

【Flat UI Colors】

Flat UI Colorは世界各国の有名デザイナーと協力して作成されたカラーパレットが紹介されているサイトです。

色数はそこまで多くはありませんが、使いやすい色が揃っているのと、使いたい色をクリックするだけでコピーしてくれます。使いたい色をクリックして貼り付けるだけなので、急いでいるときにも良いかもしれません。

【HELLO COLOR】

HELLO COLORは、2色の色の組み合わせを自動で提案してくれるサイトです。クリックするだけで、色々な組み合わせを見ることができます。また、スペースキーを押すと2色の組み合わせに合う色も表示してくれるので、とても使い勝手が良いです。

7. 納品時には、サイズの圧縮をするのが礼儀

高画質な画像を使いたい場合って、実はそんなになかったりします。例えば、アイキャッチ画像などは、サイズが大きいまま使用すると読み込みに時間がかかったり、動作が遅くなるため絶対に軽い方が良いです。また、当たり前ではありますがファイル名も整理して渡しましょう。パッと見たときになんのファイルなのか分かるような名前にします。

ファイルサイズの圧縮におすすめのサイト

【Squoosh】

Squooshは、画像をブラウザ上で簡単にファイルの圧縮を行うことができるサイトです。GoogleChromeLabsで開発された無料画像圧縮ツールです。

サイトを開いたら、そのまま圧縮したい画像をドラック&ドロップします。

Squooshでは画面左端のパネルで、圧縮率やファイル形式などを変えることができます。また、リアルタイムに画像の状態を確認することができる点がとても便利です。デメリットとしては複数のファイルを一括で圧縮することができないので、一つずつ操作する必要があります。

ただ、ブラウザ上で簡単に圧縮ができるので非常に重宝しています。ぜひ使ってみてください！

まとめ

デザイン未経験の私が入社してから得た、現場で必要になる基礎知識をご紹介しました。

総じていえることは、これらの知識はデザインを届ける相手のために存在しています。それは、ユーザーであったり、一緒に働く仲間であったりとさまざまです。自分の好きなことを表現するのは「アート」です。アートとデザインは違います。これらの知識を身につけることで、より分かりやすく情報を伝えることができたり、円滑にコミュニケーションを取ることができます。

もちろん必要になる知識はこれだけではありません！今後も学んだ知見をアウトプットしていきます。