【初心者必見】Canva・Figmaを使う前に覚えるべき基礎知識｜ツールを触る前にこれだけは知っておこう

公開日2025年12月9日

更新日2026年5月18日

読了目安約 7 分

「Canvaでおしゃれなデザインを作りたい！」「Figmaを使ってみたいけど、何から始めればいい？」

そんな思いでツールをインストールしたものの、いざ使い始めると「なんか違う...」デザインになってしまう。

テンプレートを使ってもダサくなる。色を変えたらなんか変。

それは、ツールの使い方ではなく、デザインの基礎知識が足りないからかもしれません。

この記事では、Canva・Figmaを使う前に知っておくべき基礎知識を解説します。

この記事でわかること

ツールを触る前に知るべき5つの基礎知識
デザインの4原則（これだけで劇的に変わる）
色選びの基本ルール
フォント選びの鉄則
効率的に基礎を身につける方法

なぜ「ツールの使い方」だけでは不十分なのか

デザイン作業イメージ

Canvaの使い方を解説するYouTube動画は山ほどあります。

しかし、それを見て同じように作っても、なぜかプロっぽくならない。

よくある失敗パターン

初心者がやりがちな失敗

テンプレートの色を変えたら、なんかダサくなった
フォントを変えたら、読みにくくなった
要素を追加したら、ゴチャゴチャになった
「なんとなく」で配置したら、統一感がなくなった

これらの失敗は、デザインの基礎知識があれば防げます。

ツールは「道具」に過ぎない

料理で例えると、高級な包丁を持っていても、切り方を知らなければ美味しい料理は作れません。

CanvaもFigmaも同じ。道具の使い方だけでなく、デザインの基本原則を知っているかどうかで、出来上がりが大きく変わります。

基礎知識1：デザインの4原則

デザイン原則イメージ

デザインには4つの基本原則があります。これを知っているだけで、デザインの質が劇的に変わります。

原則1：近接（Proximity）

関連する要素は近くに、関連しない要素は離す。

近接の例

良い例	「商品名」と「価格」は近くに配置
悪い例	「商品名」と「価格」がバラバラに配置

Canvaでよくある失敗：要素を均等に配置して、何がどこに属するかわからなくなる。

原則2：整列（Alignment）

すべての要素に「見えない線」で揃える意識を持つ。

整列のポイント

左揃え、中央揃え、右揃えのどれかに統一
「なんとなく」の配置をしない
Canvaのガイド線を活用する

原則3：反復（Repetition）

同じ要素を繰り返して、統一感を出す。

反復の例

色	メインカラー、サブカラーを統一
フォント	2〜3種類に絞る
形	角丸なら角丸で統一

原則4：コントラスト（Contrast）

違うものは、はっきりと違わせる。

中途半端な差は、かえって見づらくなります。

コントラストの例

見出しと本文のサイズ差を大きく
背景と文字の色差をはっきり
重要な情報は目立たせる

基礎知識2：色選びのルール

カラーパレットイメージ

「色選び」は初心者が最もつまずくポイントです。

色は3色までに絞る

基本の配色ルール

メインカラー	70%（背景や大きな面積）
サブカラー	25%（補助的な色）
アクセントカラー	5%（強調したい部分）

これを守るだけで、まとまりのあるデザインになります。

配色の基本用語

Canvaで配色を調整するとき、以下の用語を知っていると便利です。

覚えておきたい色の用語

色相	色の種類（赤、青、黄など）
彩度	色の鮮やかさ（高い＝ビビッド、低い＝くすんだ色）
明度	色の明るさ（高い＝明るい、低い＝暗い）
コントラスト	色の差（見やすさに直結）

初心者向け配色ツール

自分で色を選ぶのが難しければ、以下のツールが便利です。

ツール	特徴
Canva Color Palette	画像から配色を抽出
Adobe Color	配色パターンを自動生成
Coolors	ワンクリックで配色提案

基礎知識3：フォント選びの鉄則

フォント選びで失敗すると、素人っぽさが一気に出ます。

フォントは2種類まで

よくある失敗

いろんなフォントを使いすぎる
装飾的なフォントを本文に使う
読みにくいフォントを選ぶ

正しいフォント選び

見出し用と本文用の2種類に絞る
本文は読みやすいフォントを選ぶ
装飾フォントは見出しだけに使う

覚えておきたいフォント用語

フォントの基本用語

ゴシック体	飾りがないシンプルな書体（読みやすい）
明朝体	筆の跡のような飾りがある書体（格式・伝統的）
ウェイト	フォントの太さ
可読性	文章としての読みやすさ
視認性	パッと見での見やすさ

基礎知識4：余白の重要性

「余白」は初心者が見落としがちですが、デザインの品質を左右する重要な要素です。

余白がないとどうなる？

余白がない場合

情報が詰まって見える
窮屈な印象を与える
何が重要かわからない
安っぽく見える

余白を意識するコツ

余白の基本ルール

端から要素まで、十分な間隔を取る
要素と要素の間にも間隔を設ける
重要な要素の周りは、特に余白を多く
「詰めすぎかも？」と思ったら、余白を増やす

基礎知識5：デザイン用語

これまでに出てきた用語、すべて理解できましたか？

CanvaやFigmaのチュートリアルを見ていると、当たり前のように専門用語が出てきます。

チュートリアルでよく出る用語

「カーニングを調整して」
「トンマナを揃えて」
「コントラストを確保して」
「レイヤーを変更して」

これらの用語がわからないと、チュートリアルを見ても理解できません。

用語を効率的に覚える方法

【初心者必見】Canva・Figmaを使う前に覚えるべき基礎知識｜ツールを触る前にこれだけは知っておこう - 画像1

デザイン単語帳を使えば、1日5分のスキマ時間でデザイン用語を効率的に学べます。

デザイン単語帳の特徴

1日5分のスキマ時間で学習できる
知らない単語だけを効率的に学習
全単語に例文収録で、実際の使われ方がわかる
四択テスト＆復習機能で確実に定着
買い切り約3,000円で始めやすい

用語を知っていると、チュートリアル動画の理解度が格段に上がります。

Canva・Figmaを使いこなすための学習フロー

効率的にスキルアップするための学習フローを紹介します。

おすすめ学習フロー

Step1	デザイン用語を覚える（1〜2週間）
Step2	デザインの4原則を理解する
Step3	色・フォントの基礎を学ぶ
Step4	ツールの基本操作を覚える
Step5	実際に作品を作ってみる

なぜ「ツールより先に基礎」なのか

基礎を先に学ぶメリット

ツール操作に集中できる（用語で迷わない）
「なぜそうするのか」がわかる
応用が効くようになる
どのツールでも活かせる

CanvaとFigmaの使い分け

「どちらを使えばいい？」という質問をよく見かけます。用途で選びましょう。

Canvaが向いている用途

Canvaがおすすめなケース

SNS投稿	Instagram、Twitter、YouTubeサムネイル
プレゼン資料	PowerPoint代わりに
チラシ・ポスター	印刷物の作成
名刺	シンプルな名刺デザイン
バナー	Web広告用のバナー

Canvaの強み：テンプレートが豊富、直感的に操作できる、すぐに使い始められる

Figmaが向いている用途

Figmaがおすすめなケース

Webデザイン	ホームページのデザイン
UIデザイン	アプリの画面設計
ワイヤーフレーム	ページの設計図
プロトタイプ	動作確認用の試作
チームでの共同作業	複数人でのデザイン

Figmaの強み：Webデザインに最適化、共同編集が強力、プロも使う本格ツール