【デザインの基礎】おしゃれなデザインを作るためのコツまとめ

疲れ果てた人のアイコン画像疲れ果てた人

センスが無いからデザイン苦手…

黒猫のアイコン画像黒猫

デザイン初心者はよく「センスが無いから」と言いますが、デザインは理屈ありきです

ノンデザイナーでも下記の5つの基礎を抑えるだけでかっこよく見えるデザインが作れちゃいますよ!

  • 色の基本
  • 文字の基本
  • 写真や画像の基本
  • レイアウトの基本
  • 効果的なデザイン

絶対に抑えておきたいデザインの基本をわかりやすく解説します。

目次

色の基礎 最低限知っておくべき色彩学

色の基礎 最低限知っておくべき色彩学
  • 光と色
  • 色を表現するRGBとCMYK
  • 精細な色を表現する色の三属性
  • 色の配色

最低限知っておきたい色の仕組みについてかんたんに解説します。

RGBの仕組み

人は光の波長を『色』として認識しています。

少し不思議に感じますが3色の組み合わせだけで人が認識できるほぼすべての色を表現する事が可能。

光の3原色
  • Red(赤)
  • Green(緑)
  • Blue(青)

それぞれの頭文字をとってRGBと呼び、3色の配合比率により下記のように色が変化します。

255=100%(8bit)
液晶画面の3色のLED光
3色の光が重なると白になり、3色の光が消えると黒に
黒猫のアイコン画像黒猫

今あなたが見ているこの画面も3色の光で色を表現しているんですよ

うさぎのアイコン画像うさぎ

この光の3原色で色を表現することをRGBカラーモデルと呼びます

黒猫のアイコン画像黒猫

デザインソフトでよく見る【R:255/G:92/B:92】などの数値は光の3原色の配合量を表しています

ディスプレイの光と物質の色は別物

『光の3原色』とは別に『色の3原色』が存在します。

色の3原色はCMYKとも呼ばれ、主に印刷物で利用されています。

色の3原色
  • Cyan(水色)
  • Magenta(赤紫)
  • Yellow(黄色)
うさぎのアイコン画像うさぎ

RGBだけじゃダメなの?

黒猫のアイコン画像黒猫

RGBはあくまでも『光』だからディスプレイで発光させるもの。
CMYKは『塗料』として印刷物に利用するんだよ

  • RGBは『光』なのでCMYKと比較して鮮やかな色から繊細な色まで色表現の幅が大きい。
  • CMYKは『塗料』なのでインクの原料に依存し、完璧に色を表現することは出来ない。

RGBとCMYKの違い

RGBとCMYKの色の見え方の違い
  • 光の3原色(RGB):光の発光
  • 色の3原色(CMYK):光の反射

本や絵画はテレビやスマホのように画面から光が出るわけじゃないので、インクに当たり反射した光を色として認識している。

RGBは見せたい色の光を直接発光する加法混色だがCMYKは見せたくない光を減らす減法混色となっています。

うさぎのアイコン画像うさぎ

印刷物を扱う場合にはCMYKの知識は必要不可欠!

色の三属性『色相』『明度』『彩度』

色の三原色図解

すべての色は『色相』『明度』『彩度』の三属性によって表現されています。

  • 色相:色み
  • 明度:色の明るさ
  • 彩度:色の鮮やかさ

彩度を高くし鮮やかな色にしたり、明度を下げて濃い色にしたり3つの数値の変更だけで自由に『色』が作成可能。

黒猫のアイコン画像黒猫

3属性の仕組みを理解して色を理論的に作れるようになりましょう!

色の配色はツールが最適

トレンドカラーやセンスの良い組み合わせをまとめたものから、色の際立つ補色を使った『ダイアード配色』や近隣色を使った『アナロジー配色』など様々な配色をかんたんに作成可能。

初心者からプロまで便利に使えるAdobe Colorがおすすめ。

文字の基礎

タイポグラフィーの基礎(フォント選定や文字装飾)

デザインの重要要素のひとつ『タイポグラフィ』

文字を見やすく、美しく、読みやすいように配置することができればデザインのクオリティが大きく向上します。

文字のデザインは非常に奥が深く、プロでも悩むことの多い部分ですが『フォント選定』と『文字組み』の基礎は初心者でもしっかり覚えておきましょう。

フォントの選定で重要な2つのポイント
  • イメージに合ったフォント
  • 情報が伝わりやすいフォント

フォントによってデザインの印象や文字の読みやすさが大きく変化します。

『印象』と『伝わりやすさ』どちらも目的に合った最適なものを選んでいきましょう。

フォントのイメージ(印象)

フォントも色同様にイメージを左右する大きな効果があります。

フォントを選ぶ際は『フォントのイメージ』を目的に合わせましょう。

明朝体のデザインイメージ
明朝体
丸ゴシック体のデザインイメージ
丸ゴシック

フォントや文字の太さを変えるだけで全体のイメージが大きく変化する。

例えば明朝体は『高級感』や『信頼性』といったイメージを、丸ゴシックは『柔らかさ』『楽しさ』といった印象を与えます。

さらに色のイメージをあわせると下記のように変化する。

上の文章は明朝体、下の文章は丸ゴが適していますよね。

合う色、フォントは目的によって異なるのでイメージに適したものを選ぶようにしましょう。

書体のイメージ例

ゴシック体/丸ゴシック体/明朝体/手書きフォント/デザイン書体のイメージ比較
フォントイメージ例
ゴシック体力強さ、モダン、シンプル
丸ゴシック体やわからさ、かわいらしさ
明朝体高級感、信頼感、エレガント
手書き書体カジュアル感、やさしさ、親しみやすさ
デザイン書体デザインされたそれぞれ印象の異なるフォント

Adobe Fontsなら多くのフォントが使い放題!

フォントは有料のものから無料のものまで多くありますが、PhotoshopやIllustratorといったAdobe CCを利用しているユーザーならAdobe Fontsがおすすめ。

デザインはもちろん、Webフォントとしても利用できちゃいます。

情報が伝わりやすい文字

情報を伝える上で重要なポイントは3つ

  • 可読性(Readability)
  • 判別性(Legibility)
  • 誘導性(Inducibility)

可読性(Readability)

フォントと文字組みによる判別性の違い比較図

可読性は文章の読みやすさに影響する項目。

日本語フォントだと明朝体、欧文フォントだとサンセリフ体が文章に適した可読性の高いフォント。

可読性はフォントだけでなく文字組み(文字間や行間など)に大きく左右されます。

媒体ごとに適したフォントがある
  • ゴシック体:Web、アプリ、プレゼン、漫画など文章を『見る』ものに最適
  • 明朝体:小説、論文といった文章を『読む』ものに最適

判別性(Legibility)

フォントによる判別性の違い比較図
Iとlと1(アイと小文字のエルと数字のイチ)Oと0(オーとゼロ)など

判別性は似通った形状の文字を誤認すること無く容易に判別できるかどうかという項目。

文字に端に飾りのついたサンセリフ体などは文字に特徴が生まれるため似た形状の文字と判別しやすくなる。

誘導性(Inducibility)

フォントによる誘導性の違い比較図

誘導性は文字に視線を集める効果を期待したもので、主に見出しやタイトルで使用される。

明朝体は長文時には判別性や可読性が高いですが、文字を読むことを目的としていない広告や注意書きではゴシック体のほうが視界に入った際の判別性、可読性が上がり誘導性が高くなります。

黒猫のアイコン画像黒猫

フォント選定の際は『フォントのイメージ』と『可読性』『判読性』『誘導性』を考慮してみてね

文字組み

文字組みとは文字の組み合わせデザインのことで、下記の要素の組み合わせのことを指します。

文字組みに関わる要素
  • フォント(書体)
  • 文字サイズ
  • 文字間
  • 行間
  • 改行
  • 規格

Webデザインではデバイスごとに自動でサイズ変更するレスポンシブデザインが主流ですが、本や雑誌などの印刷物を扱うDTPデザインでは独自の文字組みのルールも存在している。

最低限覚えて置きたい文字組み

  • 全角と半角を統一する
  • 行間と行長を見やすく整える
  • カーニングで文字間を整える
  • 近接、整列、反復、対比の4原則を使う
  • 改行位置に記号が来ないよう禁則処理を行う

文字の細かい調整がデザインの質を上げる

文字の装飾

文字の装飾

文字そのものをデザインとして表現するタイポグラフィもあります。

装飾フォントだけでなくデザインに合わせて加工するものまでさまざま。

テキストが『絵』になるので、写真や画像がなくても文字だけで魅せることが可能。

装飾性の強い文字や筆記体は『グラフィック』としては良いですが、『文字』として見た場合は判別性、可読性が下がるため注意が必要。

文字をメインとしたアイキャッチの作り方

文字で誘目性を高めるには文字の装飾や文字を目立たせる工夫が不可欠!

アイキャッチデザインのコツとして文字を目立たせる方法などを紹介しています。

写真の基礎 画像を扱う上で抑えておきたいポイント

強調するためのトリミングや切り抜き

トリミング位置による印象の違い比較

写真は撮影後であってもトリミングによって大きく印象を変えることが可能です。

背景を大きく含めることで場所を強く印象づけることができますが、トリミングでアップにすることで被写体をより力強く印象づけることができます。

また、写真を切り抜いて使用することで背景による印象を強調したり余白感を出すことが可能になります。

大すきのアイコン画像大すき

同じ写真でもトリミングと切り抜きだけで大きく印象を変えることが出来ますね!

写真のレタッチ

写真をより魅力的に表現するためには修正、補正、加工、合成といったレタッチ作業が必要。

現在はAIが優秀になってきているためPhotoshopがあれば補正や人物の切り抜きがボタン一発でできるまでに進化しているので作業はだいぶ楽になっています。

最新版のPhotoshopはAIが優秀!

写真の著作権に注意

写真は著作権で保護されています。

詳しくない人でも『フリー写真サイトから探してきた写真を使う』くらいの意識はあると思いますが、仕事として商用利用する場合にはそれ以上の注意が必要。

フリー素材サイトでは『すべて自由に使えます、商用利用もOKです』としていますが、まれに著作権を無視した写真が投稿されることがあります。

うさぎのアイコン画像うさぎ

「フリー素材で10万部印刷したが、あとで著作権侵害と連絡を受けた…」なんて事になったら大惨事&大損害

黒猫のアイコン画像黒猫

ストックフォトなら保証もあるし、権利の憂いなく安心して高品質な写真が使えますよ!

レイアウトの基本 デザイン基本4原則

レイアウトはデザインの基本原則を使うだけで劇的に改善します。

デザインの基本4原則は下記の通り。

近接・整列・反復・対比
  • 近接
  • 整列
  • 反復
  • 対比

4つの基本原則を取り入れるだけで見やすくて整ったデザインになります。

【近接】グループ化による情報整理

近接の解説
ドリンク名をギリギリまで近づけ、イラストに少し近づける

近接とは関連する情報を近づけてグループ化することです。

人は近接しているものを関連情報として意識するため、グループ化することで情報が整理された伝わりやすいデザインになります。

近接は近ければ近いほど関連性が強いと認識される

【整列】揃えて規則性・統一性を向上

整列使用例

整列とは文字通り要素を整列させ規則性をもたせることです。

見えない線にそって整列させることで整った見た目になり、読みやすさも向上しますね。

線に沿ってレイアウトを行うグリッドデザインは『近接』と『整列』が意識せずとも適用されるため整って見えやすい。

【反復】ルール化で視認性・可読性を向上

反復デザインの仕様比較

反復とは同じ要素を繰り返し使用することです。

フォーマットの統一として利用されることの多い反復はデザインに欠かすことの出来ない要素。

Webデザインにしても雑誌デザインにしても見出しの装飾が毎回変わったり、並べ替えのルールが変わると内容が伝わりにくくなってしまいます。

【対比】強弱をつけ伝えたいものを強調

対比とは情報に強弱をつけることです。

強調は対比があってこそ成り立つのですべてを目立たせたいという考えは捨て、情報に優先順位をつけましょう。

対比を使用したデザイン例
対比なしと優先順位をつけた状態の比較

一番伝えたい情報が最初に目に入るように対比をつけ、後述する視線の流れを意識したレイアウトにすることで伝わりやすいデザインに仕上がります。

デザイン基本原則をさらに詳しく解説

デザイン4原則は非常に重要なポイントです。

意識せずとも取り入れられるようしっかり理解しておきましょう。

心理効果を使った効果的なデザイン

人間の心理を考慮してデザインを行うことで『伝えたい印象を強くしたり』『購入に導いたり』と様々な効果が期待できます。

  • なぜその色を選んだのか?
  • なぜその写真を選んだのか?
  • なぜそのレイアウトを選んだのか?

心理学を学べば「なんとなくデザインした」という状態から、理由を説明できるようになります。

色の心理効果

色には想像以上の心理効果があり、色が変わるだけでデザインの印象がガラッと変わります。

黒色デザイン
橙色デザイン
赤色デザイン
緑色デザイン
うさぎのアイコン画像うさぎ

『高級感』『リーズナブル感』『飲みやすさ』『女性向け』『フルーティー感』などなど…色だけで印象が大きく変わりますね

さらに色には視覚だけでなく触覚、味覚、聴覚、嗅覚といった五感にすら影響を与える効果も。

例えば下記の箱は同じ重さにも関わらず、実際に持ったときに感じる重量は約1.8倍も大きくなります。

色による重量感の変化

色が五感に与える効果はたくさんあります。

  • サイズ感の変わる膨張色と縮小色
  • 距離感の変わる進出色と後退色
  • 温度の変わる暖色と寒色

さらに色には香りや味にまで影響を与える効果まであります。

色の効果について下記の記事に詳しくまとめましたのであわせてご覧ください。

心理学をデザインに取り入れる

デザインに取り入れられる心理効果は色だけではありません。

広告効果を求めることの多いデザインでは多くの心理学が効率的に利用されています。

心理学を使用したデザイン例

人物の目線の先に視線を集めるバンドワゴン効果や赤ちゃんの写真を使用して安心感を与えるベビーフェイス効果は多くのマーケティングデザインに取り入れられています。

心理効果は広告デザインなどでは特に意識したいポイントですね。

デザインの種類と用途に応じた知識

デザインと言っても幅広く、それぞれの用途に応じたデザインスキルが求められます。

デザインの種類 一例
  • Webデザイン
  • DTPデザイン
  • UIUXデザイン
  • 動画デザイン
  • グラフィックデザイン
  • ファッションデザイン
  • インテリアデザイン

各分野ごとに専門のデザイナーが存在しており『デザイナー』『デザイン』と聞いて思い浮かべるものはひとそれぞれ。

ここでは芸術系デザインではなく情報を伝えるためのデザインを主としてデザインの種類を解説します。

Webデザイン

Webデザインイメージ

WebデザインはWeb上でディスプレイ表示するデザイン全般のことを指します。

主なWebデザイン
  • ホームページ(Webサイト)
  • Webサービス
  • ブログ
  • 広告バナー
  • 商品紹介ページ(ランディングページ)

Webデザイナーはサイトのデザインだけでなくコーディングからシステム実装まで一貫して行うことも多い。

デザインだけでなく下記のような知識があることでより良いデザインができるようになりますよ。

Webデザインに必要な知識
  • html
  • css
  • JavaScript
  • php
レスポンシブデザインイメージ

現在のWebデザインは幅広い端末に自動でサイズをあわせるレスポンシブデザインが主流。

スマホ、タブレット、デスクトップ…あらゆる端末で見やすいよう文字や画像をレイアウトする必要があります。

さらにコーポレートサイト、ソーシャルサイト、ブログなど、それぞれの特徴を活かしたデザインができるようジャンルごとの知識も必要。

DTPデザイン

DTPデザイン

DTPとはパソコンでデザインデータを作成し印刷すること。

WebデザインとDTPデザインの根本的な違いは印刷を行うためのデータかどうか。

WebデザインとDTPデザインの違い

比較項目WebデザインDTPデザイン
閲覧媒体ディスプレイ(PCやスマホ)印刷物(ポスターや本)
カラーモデルRGBCMYK
主な使用ソフトPhotoshop / XDIllustrator / InDesign
データ形式ラスタ形式(ビットマップ)ベクタ形式

印刷物の場合はディスプレイの光ではなく、インクで色を表現するCMYK表現になるため色の扱いもWebデザインとは異なります。

また、紙を裁断する位置を示すトンボや、カットした際のズレを目立たなくするための塗り足しといった印刷物に欠かせないルールもあります。

そして入校時にはアウトライン化したベクタ形式のデータが求められます。

UI UXデザイン

UIとUXデザインと違いは下記の通り。

  • UI (User Interface):操作するためのデザイン
  • UX (User Experience):商品によって与えられた体験や経験

UIが実際に実装される設計であるのに対し、UXはユーザーが経験したことや感じたことすべてを指す。

UIデザインは見栄えの良さだけでなく実際の使い勝手を考慮してデザインする必要があります。

例えば下記のボタンUIは色や影をつけてあげるだけで『伝わりやすく』『使いやすく』なりますよね。

ボタンイメージ

下記のフリマアプリのメニューでは現在開いているページが赤くなることで自分がどのページを開いているのか理解しやすくなりますし、適切なアイコンが大きく表示されていることで迷うこと無く目的のページに移動することが出来ます。

どれだけ洗練された先鋭的なデザインでも、情報を理解してもらわなければ意味がありませんよね。

下記のようなデザインはただの自己満足、相手に伝わるデザインを心がけましょう。

  • わかりやすいけど使いにくい
  • 操作方法を理解するのに時間がかかる
  • 芸術的でかっこいいが使い方がわからない

ユーザーの満足度(UX)を上げるためには製品の品質だけでなくUIの向上も必要。

以前セブンイレブンのコーヒーメーカーのUIがわかりにくく、テプラまみれになったという話が有名になりました。

セブンイレブンのコーヒーメーカーのユーザーインターフェースの事例

おしゃれなデザインで高級感を出そうとしたけれど操作方法がうまく伝わらず、結果として全国の機械がテプラまみれになりUI、UXともに悪くなってしまった例です。

デザイナーからしたら「こんなの見ればわかるでしょ」って感じかもしれませんが、ユーザーが増えれば増えるほど情報を確実に伝えるのは難しくなっていきます。

誰もが理解しやすいように細かい箇所まで意識してデザインすることが求められます。

大すきのアイコン画像大すき

現在は機械がカップを自動検知し、最適な商品を抽出してくれるから選択ボタンが不要になってますね

黒猫のアイコン画像黒猫

操作に迷うこと無く、できたての珈琲を飲めるということでUI的にもUX的にもすぐれたデザインになりました

UIデザインはAdobe XDがオススメ

デザインに使用するソフト

デザインに使用するソフト

デザインに使うためのソフトはどれがいいのか?なにが違うのか?

それぞれの特徴と使うべき理由をわかりやすく解説します。

有料ソフトと無料ソフトの違いと選び方

ここでいう有料ソフトとは業界標準のAdobe Creative Cloudを指します。

Adobe CCのデザインソフト

無料ソフトや安価のソフトでも基本的なデザインは作成できますが、まともにデザインを学びたいなら上記のAdobe CCしか選択肢はありません。

無料ソフトでなく有料ソフトを使うべき理由は下記の4つ。

  • Adobe CCなら何でもできる
  • 学ぶための環境が整っている
  • ソフトのスキルが評価される
  • 仕事を受注する際の条件にもなっている

業務利用されているPhotoshopやIllustratorがあれば機能不足で困ることはありません。

さらに利用者が圧倒的に多いため使い方に迷った際は検索すればすぐに解決するから安心。

もっとも重視すべきポイントは無料ソフトはいくら使えても評価されないということ。

黒猫のアイコン画像黒猫

「無料ソフトを使える人」と「Photoshopを使える人」では評価されるのは後者!

うさぎのアイコン画像うさぎ

どうせ学ぶなら評価されるスキルを得ましょう。ソフト代以上の価値がありますよ

PhotoshopとIllustratorの違いと使い分け

デザインスキルを身につける上で欠かせないPhotoshopとIllustrator

最終的には両方使えるようにするべきですが、まずは自身が行いたい作業に適したソフトから学んでいきましょう。

  • Photoshop:写真の加工や合成(ビットマップ)
  • Illustrator:印刷物やロゴのデザイン(ベクター)

写真の細かい加工はPhotoshopでなければ出来ませんし、ベクター形式のデータはIllustratorでしか作れません。

よく使われる使い分け例は下記の通り。

利用シーンPhotoshopIllustrator
印刷物(写真)
印刷物(名刺、ポスター、パネルなど)
ロゴ作成
イラスト作成
画像加工
画像合成×
Webデザイン

どちらのソフトも単体で多くのことが出来ますが、用途に応じて使い分けしましょう。

XDやInDesignは必要?

Adobe XDはレイアウトやUI、プロトタイプ作成には便利ですが、結局素材は別のソフトで作る必要があるので『作業効率を上げるため』に使うイメージ。

InDesignは本や雑誌といった『ページもの』の冊子デザインを行う場合に使用。業務にもよりますがIllustratorしか使わない場合が多いので必要になってから学べばOK

全部のソフトが利用できるAdobe Creative Cloudを安く買う方法

もAdobe CCは普通に買うと高いですが安く買う方法があるのでご紹介します。

下記の全てのCreative Cloudが使い放題のマスターコレクション(通常月額6,000円)が半額近い価格で利用可能。

使えるソフト例
  • Photoshop
  • Illustrator
  • InDesign
  • XD
  • Premiere Pro
  • After Effects
  • Animate
  • Audition
  • Lightroom

さらに追加料金なしでオンライン講座もついてくるので『学べるのに普通に買うより安い』っていうヤバい裏技。

Adobe公式オンラインスクールに入って学割料金で購入するというもので、Adobe公認価格です。

オンライン講座ではAdobe CCの超基礎から必要なスキルを学ぶことができるのでこれからはじめたい人にもピッタリ。


  • 写真
  • 文字
  • レイアウト
  • 心理効果
  • デザインの種類とジャンル
  • ソフト

知っているだけでかんたんにデザインが良くなるものを解説してきました。

デザインはセンスがなくてもこれらの基本を抑えておくだけで見やすい整ったデザインになりますよ。

黒猫のアイコン画像黒猫

もし参考になったと思ったらシェアしていただけると嬉しいです。よろしくおねがいします!

よかったらシェアしてね!

コメント

コメント一覧 (2件)

  • 今回も完全保存版ですね!すごく参考になります。覚えることたくさんなのでお気に入りにいれて何度も読ませていただきますね。

    フォントの使い分けとか苦手なので見易さとか勉強になりました。次回の更新も楽しみにしています。

    • みかんさん

      ありがとうございます。
      フォントに関してはちょっと説明不足な部分もあるので近日中に補足&別記事にて深堀り解説していきたいなとおもっています。
      もうしばらくお待ち下さい。

コメントする

目次
閉じる