✦ Design Dojo — 実践デザイン道場
ツール習得から
実制作まで
完全攻略
Canva・Figma・Photoshopの使い方を基礎から習得し、バナー・LP・Webサイトを実際に制作する課題＆解説コース。
Canva
Figma
Photoshop
第 1 章 / 全6章
● Canva — ブラウザで完結
Canvaの基礎から
実践操作まで
実践操作まで
無料で使えるデザインツールの王道。テンプレートが豊富でSNS・バナー・LP・プレゼンまで対応。初心者が最初に使うべきツール。
Canvaでできること
SNS投稿・ストーリー
1080×1080・9:16など規格サイズが選択肢に並ぶ
バナー・広告
Google広告・WEBバナーのサイズテンプレートが豊富
LP・チラシ
縦長デザインをページとして設計できる
プレゼン資料
Canva Presentationsでそのまま発表も可能
AI機能（無料）
背景削除・画像生成・テキスト生成がワンクリック
Webサイト公開
Canva Sites機能で独自ドメインなしで公開できる
Canva 基本操作フロー
1
canva.com にアクセスしてアカウント作成
Googleアカウントで即登録可能。無料プランで十分。学生はEducation認定で一部Proが無料。
2
「デザインを作成」→ サイズを選ぶ
カスタムサイズも可（例：バナー300×250px / SNS 1080×1080px）。単位はpxで統一。
3
テンプレートを選んでベースを作る
「テンプレート」タブ→キーワード検索（例：「美容サロン」）→ 気に入ったものをクリックで適用。
4
テキスト・画像・色を自分用に編集
テキストをダブルクリックで編集。左パネルの「素材」「写真」「アップロード」で画像追加。「カラーパレット」で色を統一。
5
「共有」→「ダウンロード」で書き出し
Web用：PNG（透過あり）またはJPG。印刷用：PDF（印刷）。動画あり：MP4またはGIF。
Canva 必須ショートカット
T
テキスト追加
R
四角形
C
円形
Ctrl+D
複製
Ctrl+Z
元に戻す
Ctrl+G
グループ化
Ctrl+A
全選択
Del
削除
Ctrl+]
前面に出す
Canva無料版でもUnsplashの写真素材が無料で使用可。「写真」タブ→Unsplashで検索。商用利用OKの高品質写真が即使えます。
Canva vs 他ツール比較
| 項目 | Canva（無料） | Figma（無料） | Photoshop |
|---|---|---|---|
| 難易度 | ★☆☆ 簡単 | ★★☆ 中級 | ★★★ 上級 |
| バナー制作 | ◎ 最速 | ○ 可能 | ◎ 高品質 |
| LP設計 | ○ 可能 | ◎ 推奨 | △ 向かない |
| Webサイト設計 | △ 簡易版 | ◎ プロ向け | ✕ 設計外 |
| 写真レタッチ | △ 基本のみ | ✕ 対応外 | ◎ プロ品質 |
| 月額費用 | 無料〜¥1,500 | 無料〜¥1,700 | ¥3,280〜 |
Canvaで「背景を削除」できるのは無料プランでも使える？
✅ 正解！ 2024年以降、背景削除は無料プランでも月に一定回数使用できます。またAI画像生成「Magic Media」も無料枠あり。積極的に活用しましょう。
● Figma — UIデザインの業界標準
Figmaの基礎から
プロの設計術まで
プロの設計術まで
WebサイトやアプリのUI設計に特化したプロツール。コンポーネント・オートレイアウト・プロトタイプが強力。チームでのリアルタイム協業が可能。
Figmaの3大機能
コンポーネント
ボタン・カード・ナビゲーションを部品化。1か所変更で全ページ自動更新
オートレイアウト
要素を追加すると自動でサイズ調整。CSSのflexboxと同じ思想
プロトタイプ
画面遷移を設定してスマホで動くデモを作成。ユーザーテストに使う
グリッドシステム
12カラムグリッドをフレームに設定。整列の基準線が自動表示
カラー・テキストスタイル
ブランドカラーを変数化。変更すると全体に反映
リアルタイム協業
URLを共有するだけで複数人同時編集。コメント機能付き
Figma プロジェクト開始フロー
1
figma.com でアカウント作成・ログイン
無料プランで2プロジェクト・3ページまで利用可。まずは無料で十分。「Drafts」からスタート。
2
フレーム（F）を作成 → デバイスサイズを選択
右パネルのFrame一覧からiPhone 14（390×844）やDesktop（1440×900）を選択。これが1ページの骨格になる。
3
グリッドを設定（Ctrl+Shift+4）
右パネル「Layout Grid」→ 「＋」→ Columns 12 / Gutter 16 / Margin 20px。これが見えない骨格。
4
カラー・テキストスタイルを先に登録する
左パネルの「Assets（F3）」→ 「Local Styles」→ 「＋」。Primary / Text / Background / Accent の4色を最低登録。
5
ワイヤーフレーム → ビジュアルデザイン → プロトタイプの順で進める
いきなり色をつけない。グレーの四角＋テキストでレイアウトを確定してから色・フォントを当てていく。
Figmaでよくあるミス：グリッドなしで始める・コンポーネント化を後回しにする。必ず最初の10分でグリッドとスタイル登録を済ませましょう。
Figma 必須ショートカット35選
F
フレームツール
R
四角形
T
テキスト
V
選択ツール
P
ペンツール
O
円形ツール
Shift+A
オートレイアウト
Ctrl+G
グループ化
Ctrl+D
複製
Alt+ドラッグ
その場で複製
Ctrl+K
スケール変更
Ctrl+Alt+K
コンポーネント化
オートレイアウト 実践レシピ
A
ボタンの作り方（テキスト＋余白を自動計算）
①テキスト「今すぐ申し込む」を作成 → ②Shift+A でオートレイアウト適用 → ③パディング：上下12px・左右24px を設定 → ④背景色・角丸を追加。テキストが変わっても幅が自動調整される。
B
カードリストの作り方
①カード1枚をコンポーネント化（Ctrl+Alt+K）→ ②親フレームでオートレイアウト（縦方向・Gap 16px）→ ③カードを複製するだけで自動整列・間隔維持。
Figmaのコミュニティ（Community）タブでは有名UIキット（iOS・Material Design）が無料でダウンロードできます。模写の練習にも最適です。
Figmaで「オートレイアウト」を追加するショートカットキーは？
✅ 正解！ Shift+Aでオートレイアウトを追加（Mac: Shift+A）。要素を選択した状態で使います。CSSのflexboxに対応する概念で、Figmaを使いこなす上で最重要機能です。
● Photoshop — 写真加工の最高峰
Photoshopの基礎
操作と写真加工術
操作と写真加工術
Adobe Photoshopは写真レタッチ・合成・バナー制作のプロツール。難しそうに見えるが、基本操作を10個覚えるだけで制作物のクオリティが別格になる。
Photoshopでできること（優先度順）
切り抜き・背景削除
被写体選択→削除でAIが自動判別。人物・商品の切り抜きが秒速
色調補正
トーンカーブ・色相彩度・レベル補正。写真の雰囲気を大幅変換
レタッチ・修正
肌の質感補正・不要物の消去・傷の除去
フィルター・加工
ぼかし・グロー・シャープ化で写真の印象を操作
バナー制作
複雑な合成を含む高品質バナーはPhotoshopが最強
書き出し最適化
Web用に最適化したPNG/JPGのファイルサイズ圧縮
Photoshop 基本ワークフロー（バナー制作）
1
新規ドキュメント作成（Ctrl+N）
幅×高さをpxで入力（例：1080×1080）。解像度は72ppi（Web用）。カラーモード：RGBを選択。
2
写真を配置（Ctrl+Shift+P → Place Embedded）
「ファイル」→「埋め込みを配置」→ 写真を選択。スマートオブジェクトとして配置されるため、元画質を保ったまま拡縮できる。
3
被写体を選択して背景を削除
「選択範囲」→「被写体を選択」（AIが自動判別）→ レイヤーマスクを追加（Ctrl+Shift+I で反転 → マスク適用）。
4
調整レイヤーで色調補正
「レイヤー」→「新規調整レイヤー」→「トーンカーブ」。元のレイヤーを直接変更しないので後から何度でも修正できる（非破壊編集の原則）。
5
テキスト追加 → 書き出し
T キーでテキストツール → 「ファイル」→「書き出し」→「Web用に保存（レガシー）」→ PNG-24 または JPEG 品質80%。
Photoshop 必須ショートカット
V
移動ツール
M
矩形選択
W
クイック選択
T
テキストツール
B
ブラシツール
E
消しゴム
Ctrl+T
自由変形
Ctrl+J
レイヤー複製
Ctrl+M
トーンカーブ
非破壊編集の3原則：①スマートオブジェクトで配置 ②調整レイヤーで補正 ③レイヤーマスクで切り抜き。元データを壊さずいつでもやり直せる状態を保つのがプロの習慣。
Photoshopで写真の色調補正を「後から何度でも変更できる」方法はどれ？
✅ 正解！ 調整レイヤーは元のピクセルを変更しない「非破壊編集」の基本。イメージ→色調補正から直接変更すると元に戻せなくなります。常に調整レイヤーを使う習慣を。
📸 実践課題 01 — バナーデザイン
バナー制作課題
全3レベル
全3レベル
初級・中級・上級の3段階。それぞれに制作条件・採点基準・解説をセットで収録。CanvaまたはPhotoshopで取り組もう。
初級課題
1
条件
①サイズ：1080×1080px ②商品名「カフェラテ ¥550」を中心に配置 ③色は2〜3色に絞る ④フォントは2種類まで ⑤Canvaのテンプレートを使用してOK（大幅に改変すること）
この課題で身につくこと：Canvaの基本操作・配色の絞り方・フォント選び・余白の重要性
❌ NG例の特徴
NG1
色が5色以上：テンプレートの色をそのまま使い、さらに自分の好きな色を追加してしまう
NG2
テキストが多すぎる：「本日のスペシャルカフェラテ♪新入荷の豆を使用！ぜひご賞味ください！」と説明しすぎる
NG3
フォントが3種以上：見出し・本文・英語・数字でそれぞれ違うフォントを使う
NG4
余白なし：四隅ギリギリまで文字や画像を詰め込む
✅ プロの解答アプローチ
01
配色を決める：コーヒーのイメージから「ベージュ#F5EFE0・ブラウン#3D2010・白」の3色に絞る
02
情報を1つに絞る：「Cafe Latte ¥550」だけを大きく。説明文は入れない
03
フォントは2種：英語見出しに「Playfair Display」、価格・補足に「Zen Kaku Gothic New 細め」
04
余白を贅沢に：正方形の20%は余白。画像は中央ではなくやや上に配置（三分割法）
採点基準（100点満点）
色は3色以内に絞れているか30点
0.5秒で内容が伝わるか25点
フォントが2種類以内か25点
余白が十分にあるか20点
提出前チェックリスト
色を3色以内に絞った使用色をカウントして確認済み
フォントは2種類まで見出し用・本文用の2種のみ
1080×1080pxで書き出したPNG形式で保存
スマホ画面で実際に見た縮小表示でも読めるか確認
2
条件
①サイズ：300×600px（ハーフページバナー）②人物フリー素材を1枚使用（Unsplash等）③「初回限定 ¥29,800→¥9,800（67%OFF）」を必ず入れる ④ブランドカラーは「白・黒・ゴールド」の3色 ⑤CTAボタン「今すぐ予約」を下部に配置
ポイント1
写真は縦長に切り取り、上半分に配置。下半分をテキストエリアに。縦長バナーは「写真→テキスト」の2分割が基本。
ポイント2
「67%OFF」を最大フォントサイズに。¥9,800の文字を大きく、¥29,800は小さく取り消し線付きで。視線ヒエラルキーを作る。
ポイント3
CTAボタンは背景と最大コントラスト。黒背景なら白ボタン、白背景ならゴールドボタン。サイズは全幅の80%以上に。
注意
「医療広告ガイドライン」に注意：実際の医療広告では誇大表現・体験談・ビフォーアフターは規制されています。この課題はデザイン練習用として取り組んでください。
視線ヒエラルキーが明確か30点
写真のトリミングと配置25点
CTAボタンの目立ち度25点
ブランドトーンの一貫性20点
📄 実践課題 02 — LPデザイン
ランディングページ
設計＆制作課題
設計＆制作課題
「売れるLP」の構成を理解して実際にFigmaで設計する課題。コンバージョンに直結する8セクション構成を体で覚える。
LPの8セクション構成（必須知識）
1
ファーストビュー（Hero）
3秒で伝える
MUST2
問題提起（Pain Point）
共感を得る
MUST3
解決策・サービス紹介
ベネフィットを伝える
MUST4
社会的証明（実績・口コミ）
信頼を築く
HIGH5
選ばれる理由（差別化）
競合と比較させる
HIGH6
料金・プラン
背中を押す
HIGH7
FAQ（よくある質問）
不安を取り除く
HIGH8
最終CTA（行動喚起）
申し込みを促す
MUSTHeroセクションでユーザーの70%が離脱するかどうかを決める。「誰に・何を・どんなベネフィットを」を3秒で伝えられるかが最重要ポイント。
LP制作課題（Figma使用）
LP
条件
①サービス名：「おうちでプロ飯 オンライン料理教室」②ターゲット：30〜40代の共働き主婦 ③フレームサイズ：375px幅（スマホ優先） ④全8セクションを設計 ⑤コンポーネントを最低3つ作成（ボタン・カード・ナビ）
Hero
キャッチコピー例：「忙しいママでも、週3回作れるようになる」— 具体的な数字と行動を入れる。背景は料理写真、テキストは白。CTAボタン「無料体験に申し込む」。
Pain
「こんなお悩みありませんか？」形式：✓ 毎日の献立が思いつかない ✓ 外食・惣菜代がかさむ ✓ 子供に手料理を食べさせたい。チェックリスト形式で共感を誘う。
Service
機能ではなくベネフィットで伝える：「毎週新レシピ」→「季節の食材を使った飽きないレシピが毎週届く」。「動画あり」→「失敗しないよう手元まで映したプロの動画解説」
Social
数字を使った信頼構築：「受講生3,200人」「満足度97%」「料理時間が平均30%削減」。口コミはアバター画像＋名前＋属性（30代・2児の母）のセットで。
Price
おすすめプランを目立たせる：3プランのカード並び。真ん中のスタンダードプランにボーダー色＋「人気No.1」バッジ。月額制の場合は「コーヒー1杯分の値段で…」の比較を入れる。
CTA
最終CTAで希少性・緊急性を加える：「今月の残り枠：8席」「2024年3月31日まで初月無料」などでクロージング。ボタンは全幅いっぱいのサイズに。
全8セクション完成しているか30点
コンポーネント3つ以上作成20点
Heroで3秒伝達できるか25点
スマホ375pxで崩れていないか25点
提出前チェックリスト
全8セクションを設計したMUSTの4セクションは必須
コンポーネントを3つ以上作成したボタン・カード・ナビが基本セット
Heroセクションでベネフィットが伝わる機能説明ではなく価値で伝えているか
カラースタイルを登録した右パネルのLocal Stylesに色を登録済み
375px幅で全セクション確認したスマホサイズで見て崩れていない
LPのコンバージョン率を最も左右するセクションはどこですか？
✅ 正解！ ファーストビューを見たユーザーの70%以上が3〜8秒でページを離れるかを決めます。Heroで「誰に・何を・なぜ今」を即座に伝えることが最重要です。
🌐 実践課題 03 — Webサイトデザイン
5ページWebサイト
完全設計課題
完全設計課題
コーポレートサイトの定番5ページ（トップ・サービス・実績・会社概要・お問い合わせ）をFigmaで設計する集大成課題。
5ページ構成マップ
01 TOP
ヒーロー・サービス概要・実績・CTA
02 SERVICE
サービス詳細・料金・特徴
03 WORKS
制作実績・ポートフォリオ
04 ABOUT
会社概要・チーム・理念
05 CONTACT
お問い合わせフォーム
Webサイト設計課題（Figma）
WEB
条件
①対象：フリーランスWebデザイナー（自分自身のポートフォリオでも可）②PCとスマホの両方のフレームを作成 ③共通ヘッダー・フッターをコンポーネント化 ④カラースタイル・テキストスタイルを必ず登録 ⑤Worksページにダミー実績を3〜6件掲載
TOP
ヒーローは「何者か」を一言で：「UI/UXデザイナー | 山田花子」+ 代表作のスクリーンショット1枚。スクロールするとサービス概要3点・実績件数・お問い合わせCTAへ誘導。
SERVICE
料金は明示する：Webデザイン / LP制作 / バナー制作の3つをカード形式で。「相談・見積もり無料」を明記して問い合わせハードルを下げる。
WORKS
実績カードに必ず入れる情報：①サムネイル（作業後スクショ）②クライアント業種 ③使用ツール ④「詳細を見る」ボタン。フィルター機能（バナー / LP / サイト）があると◎。
ABOUT
プロフィールに数字を入れる：「デザイン経験3年」「制作実績200件以上」「クライアント継続率90%」。使えるツールをアイコン一覧で視覚化する。
CONTACT
フォームは最低限の項目に：名前 / メール / 予算感 / お問い合わせ内容の4項目。予算感は「〜10万 / 10〜30万 / 30万〜 / 未定」の選択式に。
共通
ナビゲーションはコンポーネント化必須：ヘッダー・フッターを変更すると全ページに反映されるようにする。Figmaの「Main Component」と「Instance」の概念を実践で体験する。
PCフレーム（1440×900）を作成した12カラムグリッド設定済み
SPフレーム（375×812）を作成したモバイルグリッド（4カラム）設定済み
カラースタイルを登録したPrimary / Text / BG / Accent の最低4色
テキストスタイルを登録したH1〜H3 / Body / Caption の5種
ヘッダーをコンポーネント化した全ページでInstanceを使用
フッターをコンポーネント化した全ページでInstanceを使用
Worksカードをコンポーネント化した3件以上のダミー実績を表示
プロトタイプで画面遷移を設定したTOP→各ページへのリンク
スマホで動くデモを確認したFigma MirrorまたはURL共有で実機確認
総合採点基準（100点満点）
全5ページ完成・コンポーネント化30点
PC・SP両方のデザイン20点
カラー・テキストスタイル登録15点
プロトタイプ画面遷移15点
デザインの完成度・ブランド統一20点
Figmaでヘッダーを「コンポーネント化」するメリットは何ですか？
✅ 正解！ Main ComponentをInstanceとして全ページに配置することで、ナビゲーションのテキスト変更・色変更が一括反映されます。5ページ×2サイズ=10フレームを一気に更新できます。
1
/ 6