こんにちは。山田どうそんです。
この記事では、ノンデザイナーのためのデザインの基本原則について解説します。
この記事を読んで頂いてる方の中には、デザインが苦手にも関わらず、コンテンツを作成しなければならない方もいるのではないでしょうか。以前の僕もデザインに対して苦手意識がありました。
そのような状況の中、デザインの知識もないまま、バナーやブログのアイキャッチ画像・YouTubeのサムネイを作成していたのですが、物凄く見栄えが悪く、やはり僕にはセンスが無いと諦めていました。
しかし、デザインの4つの基本原則を学んだことで、YouTubeのサムネイルやWordPress（ワードプレス）のアイキャッチ画像等、見栄え良くデザイン性のあるコンテンツを作ることができるようになりました。
この記事を最後まで読んで頂くと、ノンデザイナーでデザインが苦手な方でも、見栄えが良くデザイン性のあるコンテンツを作れるようになります。
是非、この機会にデザインの4つの原則を学んで頂き、見栄えの良いデザイン性のあるコンテツ作成に役立てて頂ければと思います。
なぜ最低限デザインスキルが必要なのか
なぜ最低限のデザインスキルが必要なのかについて解説します。
以前、コピーライターの方と仕事をしていたことがありました。そのコピーライターの方は「インターネットのビジネスはコピーが全てでデザインは関係ない」と声高らかに話してました。その方はコピーライターでデザインができる方ではありませんでした。
コピーライターの中には同じように話す方がおりますが、それは大きな間違いですので注意が必要です。その方々は自分がコピーライターのため、ポジショントークとして話しているだけです。
これらの考え方は間違っています。
この方が話していたのは次の意味と全く同じです。
「人は見た目なんて関係ない。ひげがボサボサでパジャマを着ていて不潔で髪がボサボサで臭くたって能力が高ければ問題ない」
いかがでしょうか。あなたは、実際、能力が高くても不潔な人と一緒にビジネスをしたいと思いますか？また、初対面で会った人を一目見て、能力が高いと判断することはできるでしょうか。判断できないですよね。
このことから、デザインとは見た目を表現するものなので、マーケティングとダイレクトに直結する部分です。なぜなら、人はわかりやすいもので価値を判断しているからです。
例えば、本の出版者の方から聞いた話しですが、本の売上げは、勿論内容も重要ですが本の表紙でほぼ売り上げが決まるそうです。本の内容が全く同じでも表紙が違うだけで、ベストセラーになる本とならない本があるそうです。なぜなら、人はコンテンツの価値を正しく判断できないからです。
わかりやすく説明すると、ビジネスに詳しいあなたは「著：コヴィー博士の7つの習慣」という本をご存知ですよね。この本は約1500〜1800円ですが、一方で誰が書いているのかわからない無名の著者が出版している本も約1500円〜1800円で販売されています。
金額がほぼ同じでも内容の価値は全く違います。「7つの習慣」は世界中の有名な方々が読んでおり人生に大きな影響を与えるぐらい有名な本です。
しかし、無名の著者が出版している本と金額がほぼ同じです。そのため、人はそれぐらい価値を正しく判断できないということが証明されているのです。
コンテンツの価値を比較すると全く別物にも関わらず、人はそれを正しく判断できないため、コヴィー博士の7つの習慣、また、無名の著者が出版している本にも同じ金額を支払うのです。
インターネット上でも同じようなことが起きています。なぜなら、コンテンツの内容は購入しなければ全てを把握できません。そのため、人はコンテンツを購入するかしないかをどこで判断しているかというと、見た目で判断しています。
信用できそうだ、マーケティングができそうだ、クオリティ高いコンテンツを提供してくれそうだという信用を一瞬で与えてくれることができるのがデザインです。
そのため、デザインの見栄えが悪い＝お客様の信用を得られないのです。
つまり、デザインスキルは売上に直結するということです。
そのため、ノンデザイナーでデザインができない方でもデザインの最低限の基本は知識として身に付けなければ、インターネット上で稼ぐことは非常に難しいわけです。
よくあるのが、「デザイン苦手だからプロに任せる」と言っている方もいますが、売上がない状況で外注に依頼するのは大変危険です。
コンテンツは大量に作成する必要があります。それを一つ一つ外注していたらどれだけの金額が必要になるでしょうか。外注に依頼した場合、5000円〜10000円ほどかかります。例えば、毎月20万円〜30万円費用としてかかっていたら、あっという間に資金不足になり、結果としてビジネスができない状況になります。
まずは、自分で最低ラインのところまでデザインスキルを身に付けることは、非常に重要であり、ビジネスをされる方は必須ということです。この記事で学んで頂く前にしっかりと理解して下さい。
デザイン４つの基本原則
デザインの基本原則は次の4つです。
- コントラスト：同じではない要素をはっきりと区別して違うように明確にすること
- 反復：同じような要素を視覚的に繰り返すことで一体感を表現すること
- 整列：コンテンツの全てを意図的に配置すること。すると、すっきりとした洗練さを作り出すことができる
- 近隣：同じグループの要素は近づけて視覚的にわかりやすく表現すること
次の章でそれぞれ具体的に解説します。
コントラストについて
コントラストとは、同じではない要素をはっきりと区別して違うように明確にすることです。コントラストをつけることでデザイン性が高いコンテンツを作ることができます。
図形とタイトルの実例を基にコントラストの良い例と悪い例を解説します。
図形の良い例と悪い例
図形を基にコントラストの良い例と悪い例を解説します。
良い例
下記の画像は色が違うため、丸と三角の図形が一瞬で判断できます。これが、良いコントラストです。
悪い例
下記の画像は、丸と三角の異なる図形ですが同じ赤い色が使われています。このようなコントラストの場合、一瞬パッと見た場合、異なる図形だと判断するまでに時間がかかります。
タイトルの良い例と悪い例
タイトルを基に良い例と悪い例を解説します。
良い例
タイトルと本文のフォント（タイトル：ゴシック体、本文：明朝体）・大きさが違うため、一目でタイトルがわかります。これが、良い例です。
悪い例
下記の画像はタイトルと本文のフォント・大きさが全て同じで、行間もなく均一に並んでいるため、一瞬でタイトルを読むことができません。この状態はコントラストの悪い例です。
このように、コントラストを付けないと見た目の違いを一瞬で判断できないため、見てる側にも非常に負担をかけます。
反復について
反復とは、同じような要素を視覚的に繰り返すことで一体感を表現することです。
図形とタイトルの実例を基に反復の良い例と悪い例を解説します。
図形の良い例と悪い例
図形を基にコントラストの良い例と悪い例を解説します。
良い例
下記の画像は、丸い図形は全て同じ色に統一しています。これが反復させているデザインです。このように反復させることで周りに異なる図形があっても、丸い図形を一目で判断することができます。
このように、同じ種類の図形を反復させることで、よりデザイン性がわかりやすく見てる側もわかりやすいです。
悪い例
下記の画像は、図形は丸と三角だけですが、全ての図形の色が異なり反復されていません。これらのデザインの場合、ごちゃごちゃしている印象があり、見栄えの悪いデザインの例です。
タイトルの良い例と悪い例
タイトルを基に良い例と悪い例を解説します。
良い例
下記の画像は、①・②・③がタイトルと本文で一つのまとまりと考えて下さい。
①・②・③はタイトルと本文のフォント・大きさは全て同じく統一されており、反復されています。デザインは、このように同じ要素のまとまりの場合、同じフォント・大きさに反復した方が統一感があり、見やすいデザインになります。
悪い例
下記の画像は、①・②・③がタイトルと本文で一つのまとまりと考えて下さい。
①・②・③はそれぞれのタイトルと本文のフォント・文字の大きさが全て異なり統一感がなく反復されていません。複数の要素を使い過ぎると、このように見栄えの悪いデザインとなります。
整列について
デザインの整列は、コンテンツの全てを意図的に配置することで、すっきりとした洗練さを作り出すことができます。
図形とタイトルの実例を基に整列の良い例と悪い例を解説します。
図形の良い例と悪い例
図形を基に整列の良い例と悪い例を解説します。
良い例
下記の画像は、中央にきれいに整列されており、非常に整った状態のためデザイン性が高い印象を与えてくれます。
悪い例
下記の画像は、丸・三角・四角の図形がバラバラに並んでいます。そのため、デザイン性が低い印象を受けます。
タイトルの良い例と悪い例
タイトルを基に良い例と悪い例を解説します。
良い例
下記の画像は、タイトルも本文もきれいに左側に整列されており、行間も均等です。デザインはこのようにきれいに整列されていることで、デザイン性が高い印象を与えてくれます。
悪い例
下記の画像は、本文が整列されておらず行間の幅もバラバラで整列されていません。そのため、デザイン性が低い印象を受けます。
近接について
近接とは、同じグループの要素を近づけて視覚的にわかりやすく表現することです。人間はかたまりで認識するため、視覚的に判断します。
そのため、関連性のあるものをグルーピングして見てる側に負担をかけないよう意図を伝えることが非常に重要です。
キャラクター画像とタイトルの実例を基に近接の良い例と悪い例を解説します。
キャラクター画像の良い例と悪い例
キャラクター画像を基に近接の良い例と悪い例を解説します。下記は親子の画像という設定です。
良い例
下記の画像は、手を繋いでいるため自然な印象で、親子だということが一目瞭然でわかります。
悪い例
下記の画像は、親子にも関わらず距離が離れているため、不自然な印象を受けます。近接の悪い例です。
タイトルの良い例と悪い例
タイトルを基に良い例と悪い例を解説します。
良い例
下記の画像は、タイトルの下にサブタイトルがあり近接されています。また、本文は本文でまとめられており近接されています。そのため、デザイン性が高い印象を受けます。
悪い例
下記の画像は、デザインの基本を知らない方によくありがちなデザインです。中央にタイトル、右下にサブタイトル、本文がバラバラのため、デザイン性が低い印象を受けます。
8色の三属性を知る
8色の三属性について解説します。
見栄えが悪くデザイン性が低い原因とは、色にあると言われています。デザインの基本を理解していない場合、無駄に複数の色を組み合わせてしまいがちです。
色には次の3つの属性があります。
- 色相：赤黄青のような色彩のことです。
- 明度：色の明るさ度合いのことです。明るくなるにつれて白に近づき、暗くなるにつれて黒に近づきます。
- 彩度：色の鮮やかさのことです。彩度が強いほど色が鮮やかになり、彩度が低いほど色が弱く穏やかになります。
これらの3つの原則を守りつつ、色の三属性をしっかり理解することで、バランスの良いデザインになります。
色相環について
色相環について解説します。
色相環とは、下記の画像のように円状を視覚的にわかりやすくしたものです。
上にオレンジ、下に青、左側に緑、右側に赤、右斜め下にマゼンタ、左上に黄色があり色のバランスが視覚的に表現されています。
デザインツール等はこの色相環を使い色をつけています。
オレンジと青は比較的反対に位置しています。
色温度で表すと、オレンジ色は暖かみを感じ、青色は冷たく感じるように反対側にある色というのは、一緒に使ったりもしますが、相反する真逆な色を使う場合と似たような赤とマゼンタのように近い色を使う場合では、表現が変わります。
そのため、この色相環にあるルールに反して、対比されている色を使うことで、デザイン性が低くなる傾向があります。
色相環にある対比されている色を使うことを補色といいますが、この補色を意図的に使うか使わないでは、全く意味が違ってきます。
色にはそれぞれ意味があります。
赤色は情熱的、青色は寒い雰囲気を表します。このようにデザイン一つとっても、それをどのように表現するかによって、色味というのは選択する上で変わってきます。
理解して表現するために、色相環を使うことは非常に役立ちます。
色相環の種類は多くありますが、「マンセル」の色相環は、非常に有名で使われることが多いです。
深い知識を全て覚える必要はありませんが、このように、赤の反対は緑があり、オレンジの反対には青があるのは、適当に置かれているわけではなく、必ず意味があって置かれていることを理解して下さい。
そのため、色を使う場合、これらのことを踏まえて使うことで、見栄えの良いデザインを作ることができます。
色が感情に与える影響
色が感情に与える影響について解説します。色は感情と密接に関係があります。例えば、デザインをする場合、相手にどのようになってもらいたいかによって、色の選択は変わってきます。
色には大きく次の３種類があります。下記の画像を参考にして下さい。
- 左上が暖色
- 右下が寒色
- 暖色、寒色、どちらにも当てはまらない色が中性色
また、素人っぽさが出てしまう原因の一つに、色を意識せず適当に使ってしまうことが挙げられます。
相手の状況を考えて色を選択しているか、または、適当に選択しているかは、たとえ相手が色の知識がない場合でもなんとなく伝わります。
そのため、暖かい雰囲気を出したい場合は赤や黄色を沢山使ったり、クールさや知的な雰囲気を出したい場合は寒色を使うなど、これらを意識しながら、色を使うことは非常に重要です。
特にビジネスのプロであれば、色を論理的に意識して使うことを理解した上で使って下さい。
初心者は一つのコンテンツで３種類までがおすすめ
デザイン初心者は一つのコンテンツで3種類がおすすめの理由について解説します。
見栄えの悪いデザインとは、色を何種類も使っている傾向があります。
色の知識がない状態で、色の種類を多く使うことで、見栄えの悪いデザインになります。
下記の画像は、非常に色のバランスが整っています。
例えば、白をベースにグレー×青、グレー×赤、グレー×緑のように、モノトーンカラーに対して一つ明るい色を入れることで、見栄えの良いデザインになります。
白とグレーは、様々な色と相性が良くバランスが取りやすい色です。特にグレーの場合明るい色と相性が良く、白ははっきりした色味のため、ダークな色でもバランスを取ることができます。
そのため、基本的には色をこの3色だけとルール決めして使うことで、実は見栄えの良いデザインを作ることができます。多くても4種類です。
例えば、目立つ色だけ赤を使い、ベースの色は青を使う等でも良いです。
デザインに自信がない方は、白×グレー×お好きな色を組み合わせることで、失敗することはありませんので、是非、参考にして下さい。
Adobeカラーを使って色のバランスを取る
Adobeカラーとは、Adobeが無償提供しているツールです。インターネットで「Adobeカラー」と検索すると、下記の画像のサイトが表示されます。
Adobeカラーを使って色のバランスを取る方法について解説します。
Adobeカラーのツールについて
Adobeカラーのツールには、色のバランスを取ってくれる機能があります。
このツールを使うことで、例えば、一つの色を決めたら、その色に合わせたバランスの色を自動でAdobeカラーを抽出してくれます。
また、色には「＃」と「英数字」の組み合わせで、カラーコードが付けられています。
Adobeカラーの使い方
インターネットで、「カラーコード」と検索すると下記の画像のように複数のサイトが表示されます。
お好みの色をクリックすると、カラーコードが表示されます。カラーコードに表示されている「＃」+「数字」をコピーします。
Adobeカラーのサイトで、中央のカラーコードの項目に前回コピーしたカラーコードを貼り付けEnter（エンター）キーを押して下さい。
中央に表示しているカラーを起点に、類似色を抽出して表示してくれます。左右に表示された類似色を取り入れることで見栄えが良いデザインを作ることができます。
微調整の方法
スライダーを動かすと下記の画像のように彩度を弱めたり色相を変えたり、微調整することができます。
色の抽出方法
左側のサイドバーに抽出の種類を選択できる項目があります。ここでは、「モノクロマティック」「トライアド」「補色」について解説します。
「モノクロマティック」を選択すると、彩度の違う色が抽出されます。
「トライアド」を選択すると、三角形のラインで色が抽出されます。
「補色」を選択すると、対面にある色を補色で抽出されます。このように、各項目に合わせて色が抽出されます。
色で一番重要なことは色の組み合わせによるバランスです。一つの色をベースに、Adobeカラーを使ってバランスを取ることで、見栄えの良いデザインを簡単に作ることができますので、是非、活用して下さい。
日本語ゴシック体と明朝体の基本
見栄えの良いオシャレなデザインを作るためには色の他に、フォント選びも大変重要です。フォント選びを意図的にしっかりと行うことで、下記の画像のようなオシャレなデザインを作ることができます。
また、基本的なデザインの構成は、見せるフォントはゴシック体、読むフォントは明朝体を使うことが基本的な使い方です。フォントによって全く違った表現になります。そのためデザインをする上では、フォントについて知っておくことは大変重要です。
日本語フォントの種類
日本語フォントには大きく次の2種類のフォントがあります。
- ゴシック体
- 明朝体
それぞれの特徴について解説します。
ゴシック体
ゴシック体の特徴は、文字の端がしっかりと止まっており統一感があります。ゴシック体はタイトル等、強調したい文字でよく使われるフォントで、スライド形式で使われることが多いフォントです。
僕もほとんどゴシック体で作成しています。なぜなら、文字が太くて両端がしっかりとしているため、遠くにいる方も見やすいという特徴があるからです。
下記の画像のゴシック体はMacにデフォルトで入っているヒラギノフォントを利用しています。MacとWindowsでは、デフォルトで入っている種類は違いますが、購入したりフリーでダウンロードして使うことができますので、参考にして下さい。
明朝体
明朝体の特徴は、文章を読みやすくするときによく使われるフォントで、習字で先端を止めて書いているようなイメージのフォントが明朝体です。小さい文字でも読みやすい特徴があります。
下記の画像で利用している明朝体の種類はあおぞら明朝体フォントです。
欧文フォントのセリフ体とサンセリフ体の基本
欧文フォントには次の大きく2種類のフォントがあります。
- サンセリフ
- セリフ
それぞれの特徴について解説します。
サンセリフ
サンセリフ体とは、日本語のゴシック体と同じです。見せるデザインの場合はサンセリフを使うことが一般的です。
サンセリフで有名な種類はサンセチカが有名です。
セリフ
セリフの特徴は、日本語の明朝体と同じです。読まれる文章の時に使うことが一般的です。
下記の画像で使っている種類は、Adobe Garamond（アドビガラモンド）です。
日本語をそのまま日本語フォントで英文で表現することはできますが、日本語フォントで英文にすると、日本語がベースになっているため、全てではないですが見栄えが悪くなる傾向があります。
フォントを使う場合は日本語は日本語フォント、英文は欧文フォントのように意図的に使い分けた方がデザイン性が高まりますので、参考にして下さい。
デザインフォントについて
デザインフォントとは、デザイン性を重視しているフォントです。一般的にはあまり使われておりません。例えば、アニメやドラマ、コミック雑誌等で使われています。
筆で書いたようなフォントもデザインフォントに含まれますが、公共で使われるものではありません。
また、知識が豊富なデザインのプロの方であれば使うと大変おしゃれになりますが、使い方をあやまると非常にデザイン性が低くなるため注意が必要です。
そのため、初心者にはあまりおすすめできません。最初のうちはゴシック体と明朝体は大きく外すことはないため、おすすめです。
ただ、アクセント等で使うことがあると思いますので、知識として覚えておいて頂ければと思います。
Adobeフォントがおすすめな理由
フォント選びでおすすなAdobeフォントについて解説します。
フォントとは、基本的に有料で購入するのが一般的です。特にしっかりしたフォントについては有料です。MacやWindowsのデフォルトで入っているフォント以外を使いたい場合は購入する必要があります。
下記の画像に表示している「モリサワフォント」は非常に有名で、雑誌やテレビ等の公共の場で使われています。料金は5万円〜10万円ですが、「モリサワフォント」は大きく外すことはないためおすすめです。
また、Adobeで提供しているAdobe Creative Cloud（アドビクリエイティブクラウド）、約6500円/月を使っている場合は「モリサワフォント」を無料で使うことができます。
「モリサワフォント」は「A-OTF」の表示です。また、Adobeフォントは数多くの種類があるためおすすめです。
無料のフォントを使う場合の注意点ですが、無料のフォントにはデザインフォントは数多くありますが、一般的に使うゴシック体や明朝体はあまりありません。
有料のフォントは一味違うデザイン性のものを作成することができるため、有料フォントを利用する場合は、Adobeフォントをおすすめします。参考にして下さい。
自動切り抜きツールremove.bg（リムーブビージー）で人物を切り抜く方
簡単に人物を切り抜くことができるemove.bg（リムーブビージー）という無料で使えるおすすめのツールについて解説します。
remove.bg（リムーブビージー）は人物をAIで検出して切り抜いてくれます。以前はPhotoshop（フォトショップ）のペンツールを使って人物の輪郭を切り取ってぼかす等の作業をする必要があり、プロのデザイナーでなければ切り抜くことはできませんでした。
現在はremove.bg（リムーブビージー）のツールを使うことで簡単に人物を切り取ることができるようになりました。remove.bg（リムーブビージー）の使い方について解説します。
remove.bg（リムーブビージー）の使い方
remove.bg（リムーブビージー）の使い方について、僕がYouTubeで撮影したサムネイル画像を例として解説します。
下記の画像は、remove.bg（リムーブビージー）のサイトです。
サイトを開いた状態で、切り抜きたい画像を選択します。
アップロード中の画面が開きます。
切り取りが完了しましたが、①のように切り抜けない箇所がある場合もあります。その場合は、②「Edit（エディット）」をクリックします。
Erase（イレース）をクリックします。すると、左側の画面に丸いマークが表示されます。このマークで不要な部分を消すことができます。
Photoshop（フォトショップ）を使った場合と比較すると、全てきれいに消すことはできませんが下記の画像のようにほぼ消すことができました。
切り取り作業が終了したら、Download image（ダウンロードイメージ）をクリックします。
画像サイズは無料版は「666×375」と多少画質は下がりますが、下記の画像のようにダウンロードをして使うことができます。是非、活用して下さい。
Canva（キャンバ）で人物を切り抜く方法
Canva（キャンバ）というツールを使って人物を切り抜く方法について解説します。
Canva（キャンバ）とは、世界中で1000万人以上が利用されている非常に優れたデザインツールでWeb上で全て行えるツールでインターネットが使える場所でしたら利用することができます。人物を切り抜く機能は最近追加されました。
Canva（キャンバ）について詳しく解説しているサイトがありますので、良ければ参考にして下さい。
ノンデザイナー向けデザイン制作ソフトCanva(キャンバ)の使い方についてはこちら
人物を切り抜く方法
Canva（キャンバ）の場合、始めに画像の不要な部分を切り抜きます。「切り抜き」をクリックします。
人物を切り取る場合はギリギリの部分まで合わせ切り抜きし、「完了」をクリックします。
「エフェクト」＞「Background remover（バックグランドリムーバー）」をクリックします。すると、自動で切り取りしてくれます。
Canva（キャンバ）は制限があるため前回解説したremove.bg（リムーブビージー）と比較すると多少残ってしまいます。
また、切り取ったあとの微調整もできないため背景で工夫したり、画像の大きさを調整する必要がありますが、おおむねきれいに切り取れている印象はあります。
Canva（キャンバ）は頻繁にグレードアップもしているため、将来的に切り取ったあとの微調整もできるようになる可能性もありますが、現時点ではできません。remove.bg（リムーブビージー）で切り取ってからCanva（キャンバ）を使うという方法で、是非、お試し下さい。
切り抜いた画像でYouTubeサムネイル画像を作る
切り抜いた画像をCanva(キャンバ）でYouTubeサムネイル画像を作る方法について解説します。
「Canva（キャンバ）トップページ」＞「デザイン作成」＞「YouTubeサムネイル」をクリックします。
画面左側でお好みのテンプレートを選択します。ここでは、便宜上シンプルなテンプレートを選択し解説します。また、わかりやすく解説するために周りのイラスト等は削除します。
中央にタイトルを入れます。タイトルのフォントは左上をクリックすると変更できます。
①「画像または動画をアップロード」の画面に、前回解説したremove.bg（リムーブビージー）で切り取った画像を②→③の手順で挿入します。
左上に画像が挿入されます。画像をクリックするとテンプレートへ挿入されます。人物画像・タイトルのサイズや位置を調整します。タイトルが前面にある場合人物画像が隠れるため、「配置」＞「前面へ移動」を選択し調整します。
サムネイルが完成しました。他のYouTuberの方でもこのような顔を前面に出してるサムネイルを掲載していますよね。これらのサムネイルを作成する場合、Canva（キャンバ）を使うと簡単に作成できますのでおすすめです。
多くの方はPhotoshop（フォトショップ）を使ってこのようなサムネイルを作成していますが、Canva（キャンバ）はノンデザイナーでデザイン知識がない方でも簡単にサムネイル画像を作成できます。
Canva（キャンバ）とremove.bg（リムーブビージー）を併用してご利用下さい。
まとめ
この記事では、ノンデザイナーのためのデザインの基本原則について解説しました。
見栄えの良いデザインにするためには、色・フォントについて学んで頂き意図的にデザインを作成することの重要性がご理解頂けたのではないでしょうか。
深く学ぶ必要はありませんが、この記事で解説した便利なツールも利用して頂きながら、クオリティ高くデザイン性のあるコンテンツ作成に、是非、役立てて下さい。
