PR: この記事にはアフィリエイトリンクが含まれています。購入により当サイトに手数料が支払われることがあります。
【初心者必見】Canva・Figmaを使う前に覚えるべき基礎知識｜ツールを触る前にこれだけは知っておこう
「Canvaでおしゃれなデザインを作りたい！」「Figmaを使ってみたいけど、何から始めればいい？」
そんな思いでツールをインストールしたものの、いざ使い始めると「なんか違う...」デザインになってしまう。
テンプレートを使ってもダサくなる。色を変えたらなんか変。
それは、ツールの使い方ではなく、デザインの基礎知識が足りないからかもしれません。
この記事では、Canva・Figmaを使う前に知っておくべき基礎知識を解説します。
なぜ「ツールの使い方」だけでは不十分なのか
Canvaの使い方を解説するYouTube動画は山ほどあります。
しかし、それを見て同じように作っても、なぜかプロっぽくならない。
よくある失敗パターン
- テンプレートの色を変えたら、なんかダサくなった
- フォントを変えたら、読みにくくなった
- 要素を追加したら、ゴチャゴチャになった
- 「なんとなく」で配置したら、統一感がなくなった
これらの失敗は、デザインの基礎知識があれば防げます。
ツールは「道具」に過ぎない
料理で例えると、高級な包丁を持っていても、切り方を知らなければ美味しい料理は作れません。
CanvaもFigmaも同じ。道具の使い方だけでなく、デザインの基本原則を知っているかどうかで、出来上がりが大きく変わります。
基礎知識1：デザインの4原則
デザインには4つの基本原則があります。これを知っているだけで、デザインの質が劇的に変わります。
原則1：近接（Proximity）
関連する要素は近くに、関連しない要素は離す。
| 良い例 | 「商品名」と「価格」は近くに配置 |
|---|---|
| 悪い例 | 「商品名」と「価格」がバラバラに配置 |
Canvaでよくある失敗：要素を均等に配置して、何がどこに属するかわからなくなる。
原則2：整列（Alignment）
すべての要素に「見えない線」で揃える意識を持つ。
原則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のチュートリアルを見ていると、当たり前のように専門用語が出てきます。
これらの用語がわからないと、チュートリアルを見ても理解できません。
用語を効率的に覚える方法
デザイン単語帳を使えば、1日5分のスキマ時間でデザイン用語を効率的に学べます。
用語を知っていると、チュートリアル動画の理解度が格段に上がります。
Canva・Figmaを使いこなすための学習フロー
効率的にスキルアップするための学習フローを紹介します。
| Step1 | デザイン用語を覚える（1〜2週間） |
|---|---|
| Step2 | デザインの4原則を理解する |
| Step3 | 色・フォントの基礎を学ぶ |
| Step4 | ツールの基本操作を覚える |
| Step5 | 実際に作品を作ってみる |
なぜ「ツールより先に基礎」なのか
- ツール操作に集中できる（用語で迷わない）
- 「なぜそうするのか」がわかる
- 応用が効くようになる
- どのツールでも活かせる
CanvaとFigmaの使い分け
「どちらを使えばいい？」という質問をよく見かけます。用途で選びましょう。
Canvaが向いている用途
| SNS投稿 | Instagram、Twitter、YouTubeサムネイル |
|---|---|
| プレゼン資料 | PowerPoint代わりに |
| チラシ・ポスター | 印刷物の作成 |
| 名刺 | シンプルな名刺デザイン |
| バナー | Web広告用のバナー |
Canvaの強み：テンプレートが豊富、直感的に操作できる、すぐに使い始められる
Figmaが向いている用途
| Webデザイン | ホームページのデザイン |
|---|---|
| UIデザイン | アプリの画面設計 |
| ワイヤーフレーム | ページの設計図 |
| プロトタイプ | 動作確認用の試作 |
| チームでの共同作業 | 複数人でのデザイン |
Figmaの強み：Webデザインに最適化、共同編集が強力、プロも使う本格ツール
よくある質問
まとめ
まとめ
Canva・Figmaを使う前に知るべき5つの基礎-
デザインの4原則
- 近接、整列、反復、コントラスト
-
色選びのルール
- 3色まで、70-25-5の法則
-
フォント選びの鉄則
- 2種類まで、本文は読みやすく
-
余白の重要性
- 詰めすぎない、余裕を持たせる
-
デザイン用語
- チュートリアル理解の土台
ツールの使い方を覚える前に、デザインの基礎知識を身につけましょう。
特に用語を知っていると、チュートリアル動画や解説記事の理解度が格段に上がります。
関連記事
- 【デザイン単語帳】1日5分でデザイン用語が身につく学習アプリを徹底解説
- 【保存版】デザイン用語がわからない！初心者が覚えるべき30個の基本用語
- 【解決】デザインの本が読めない…専門用語の壁を突破する方法
- デザインを独学で学ぶロードマップ｜未経験から3ヶ月で基礎をマスター
画像クレジット
本記事で使用している画像の一部は Unsplash より提供されています。
- デザイン作業イメージ: Photo by Balázs Kétyi on Unsplash
- デザイン原則イメージ: Photo by Theme Photos on Unsplash
- カラーパレットイメージ: Photo by Paweł Czerwiński on Unsplash
よくある質問
関連トピック完全ガイド
詳細解説記事
このトピックに関する5件の記事で、 包括的な情報を提供しています。
