Design School Complete Course
デザインスクール級
超実践型デザイン講座
Figma・Canvaを使ったバナー・LP・Webサイト・アプリデザインまで。30万円以上のデザインスクールが教える内容をすべて無料で公開。
デザインの4大原則（CRAP理論）
プロのデザイナーが無意識に使っている4つの法則。Contrast（対比）、Repetition（反復）、Alignment（整列）、Proximity（近接）—— この4つを守るだけでデザインが劇的に改善します。
C — Contrast（対比）
重要な要素を目立たせる。大小・明暗・太細・色の差を意識的につける。「似てるけど違う」はNG。はっきり違いをつける。
R — Repetition（反復）
同じスタイルを繰り返してルールを作る。フォント・色・余白・アイコンスタイルを統一することで「まとまり感」が生まれる。
A — Alignment（整列）
要素を揃える。バラバラに配置せず、グリッドや基準線に沿って整列させる。「なんかごちゃごちゃ」の原因は大抵これ。
P — Proximity（近接）
関連する情報をグループ化する。近いものは「仲間」、離れているものは「別のグループ」と視覚的に伝える。余白の使い方がカギ。
ゲシュタルトの法則 — 人間の目の錯覚を利用する
類似の法則
形・色が似ているものはグループとして認識される。ボタンを同じ色にするのはこの法則の応用。
近接の法則
近くにあるものは関連していると思われる。ラベルとフォームを近づけることで操作が直感的になる。
閉合の法則
不完全な図形でも脳が補完してしまう。Appleのリンゴロゴや欠けた円をアイコンに使うデザインがこれ。
連続の法則
並んだ要素は流れとして認識される。カルーセルやステップナビゲーションのUXに活用。
良いデザイン・悪いデザイン — 美容サロンで比較
❌ NG例の問題点
- 色が5色以上でまとまりがない
- 「！！」連打で品格が失われる
- フォントが統一されていない
- 余白がなく窒息感がある
- 高級サロンのイメージと真逆
✅ GOOD例のポイント
- 色は3色以内（ベージュ・茶・白）
- 明朝体で上質感・信頼感を演出
- 余白を贅沢に使い「余裕」を表現
- 英語のアイキャッチで洗練された印象
- CTAは小さく上品に。押し付けない
美容・ラグジュアリー系の鉄則：引き算のデザイン。「これも伝えたい」と要素を追加するほど品格が下がります。伝えることを1つに絞り、余白・フォント・色で高級感を表現しましょう。
🔍 デザイン添削機能 — 実例で学ぶNG・OK
🎨
インタラクティブ添削ビューア
AI添削モード
⚠ のアイコンをクリックすると添削コメントが展開されます
BEAUTY SALON LUMINE
あなたの美しさを引き出す
トータルビューティーサロン
トータルビューティーサロン
カット・カラー・パーマ・トリートメント・ネイル・まつ毛・エステ
全メニュー対応しております。ご予約はお気軽にどうぞ。
全メニュー対応しております。ご予約はお気軽にどうぞ。
色彩
40 / 100
タイポグラフィ
35 / 100
余白・構成
50 / 100
訴求力
30 / 100
38
総合スコア
添削コメント — クリックで詳細表示
1
❌ キャッチコピーが抽象的すぎる
「あなたの美しさを引き出す」は誰にでも使える言葉。ターゲットに刺さらない。
✅ 改善案：「40代からの髪質改善。うるツヤ髪を30日間で」→ 具体的・ターゲット明確・ベネフィットがある
2
❌ メニュー列挙で訴求力ゼロ
「カット・カラー・パーマ…全対応」は情報ではなくカタログ。読まれない。
✅ 改善案：「初回限定トリートメント ¥8,800→¥4,400」1つの強い訴求に絞る
3
❌ ビジュアルが一切ない
美容サロンなのに仕上がりイメージが見えない。写真は最も重要な訴求要素。
✅ 改善案：施術後のビフォーアフター写真や、スタイリストの雰囲気写真を左側に大きく配置
4
❌ CTAのデザインが品格を下げている
赤いボタンは「安売り・ECサイト」のイメージ。高級サロンのトーンと真逆。
✅ 改善案：ダークブラウン背景＋ベージュ文字の落ち着いたボタンに。「ご予約はこちら →」という表現に
✓
✅ サロン名の表記は良い
英語でサロン名を表記しているのは正解。ただしもう少し大きく・上品なフォントに変更すると◎
⚠ のアイコンをクリックすると添削コメントが展開されます
BEAUTY SALON
春の新作ヘアスタイル
ご提案フェア
ご提案フェア
2024.03.01 — 03.31
ご予約 → WEB予約はこちら
色彩
82 / 100
タイポグラフィ
78 / 100
余白・構成
75 / 100
訴求力
60 / 100
74
総合スコア
添削コメント
✓
✅ 配色は完璧
ダークトーン×ゴールドは高級感の定番。ベース・メイン・アクセントの60:30:10が守れている。
✓
✅ 明朝体の使い方が良い
Shippori Mincho＋細いゴシックの組み合わせは上質感が出る。ラインの装飾も効果的。
1
❌ 訴求が弱い —「ベネフィット」がない
「春の新作ヘアスタイルご提案フェア」は情報だが、お客様が得られる価値が見えない。
✅ 改善案：「春の新作スタイル × 初回カラー20%OFF」など特典・数字を加える
2
❌ CTAが長すぎて読みにくい
「ご予約 → WEB予約はこちら」は重複している。「→」と「はこちら」が両方あるのも冗長。
✅ 改善案：「WEB予約はこちら」か「ご予約する」に統一。矢印は一方向のみ使う
📋 あなたのデザインを10項目でセルフ添削する
該当するものにチェックを入れてください。スコアがリアルタイムで更新されます。
色は3色以内に絞っているベース・メイン・アクセントの3色ルールを守っている
フォントは2種類以内見出し用と本文用の2種類のみ使用している
余白が十分にある（詰め込みすぎていない）要素と要素の間に適切なスペースがある
要素が整列している左揃え・中央揃えなど基準線が統一されている
情報の優先順位がはっきりしている最も大切な情報が最も目立つサイズ・色になっている
CTAが明確で目立つ「次に何をすべきか」がボタンやテキストで明示されている
ターゲットに合ったトーンである高級感・ポップ・プロフェッショナルなど雰囲気がターゲットと合っている
テキストのコントラスト比が十分薄い背景に薄い文字など、読みにくい組み合わせがない
スマホで見ても崩れない・読める文字が小さすぎたり、要素がはみ出したりしていない
他人（第三者）に見せて確認した作者以外の人間が直感的に意図を理解できるか確認済み
0
/ 100 点
デザインの4原則「CRAP」の「A」は何を意味しますか？
✅ 正解！ Alignment（整列）です。要素を揃えることで「まとまり」と「信頼感」が生まれます。Figma・Canvaにはオートアライン機能があるので積極的に使いましょう。
色の心理学 — 色が持つイメージ
🔴 赤情熱・緊急・食欲・危険。CTAボタン・セールに最適
🟠 オレンジ活力・親しみ・食欲。フレンドリーなブランドに
🟡 黄注意・明るさ・希望。アクセントに少量使いが◎
🟢 緑自然・安心・健康・環境。医療・食品・環境系に
🔵 青信頼・冷静・テクノロジー。企業・金融・SNSで多用
🟣 紫高級・神秘・創造性。美容・ラグジュアリーブランドに
🩷 ピンク可愛い・女性的・優しさ。美容・食品・ギフト系に
⚫ 黒高級・シック・プロフェッショナル。ファッション・ラグジュアリーに
色のイメージは文化によって異なります。白は西洋では清潔・純粋ですが、東洋では喪の色とされる場合があります。ターゲットユーザーの文化背景を必ず確認しましょう。
配色の5パターン（プロが使う黄金ルール）
① 類似色配色
色相環で隣り合う色を組み合わせる。まとまりがあり優しい印象。ナチュラル・落ち着いたデザインに。
② 補色配色
色相環で真反対の色。強いコントラストで目を引く。スポーツ・エネルギー系に最適。使いすぎ注意。
③ トリアド配色
3色を均等に配置。バランスよく活発な印象。1色をメイン、1色をアクセントに使うのがコツ。
④ モノトーン＋アクセント
白黒グレーをベースに1色だけ差し色を入れる。高級感・洗練された印象。初心者が最も使いやすいパターン。
プロの黄金比率：60:30:10ルール — ベースカラー60% ＋ メインカラー30% ＋ アクセントカラー10%。この割合を守るだけで配色が安定します。
🎛️ インタラクティブ — 配色ハーモニーメーカー
色相を選んで配色パターンを自動生成
色相（Hue）を選ぶ
0°
200°
360°
生成されたパレット（クリックでHEXコピー）
アクセシビリティ — コントラスト比の重要性
WCAG（ウェブアクセシビリティ）では、テキストのコントラスト比は4.5:1以上（AA基準）、7:1以上（AAA基準）が推奨されています。コントラストが低いと見えづらくなり、視覚障害のある方や強い光の下での視認性が低下します。
❌ コントラスト低（NG）
読みにくいテキスト
比率: 約1.5:1
✅ コントラスト高（OK）
読みやすいテキスト
比率: 約21:1
Figmaのプラグイン「Contrast」や、ブラウザで使える「WebAIM Contrast Checker」でコントラスト比を無料チェックできます。
「60:30:10ルール」の数字はそれぞれ何を表しますか？
✅ 正解！ 60%=背景・余白（ベース）、30%=メインカラー、10%=アクセント（差し色）。この比率で配色すると自然とまとまりが生まれます。
フォントの種類と使い分け
フォント種類の比較
明朝体
Serif
Serif
高品質・伝統的・信頼感
ゴシック体
Sans-serif
Sans-serif
明確・モダン・親しみやすい
等幅
Monospace
Monospace
CODE / TECH / PRECISION
手書き
Script
Script
Creative & Personal
1つのデザインで使うフォントは最大2〜3種類まで。それ以上は散漫になります。「見出し用」と「本文用」の2種類が基本です。
タイポグラフィの4大設定
フォントサイズ
本文: 14〜16px。見出し: 24〜48px。キャッチコピー: 48〜80px以上。画面サイズで相対指定(rem)が基本。
行間 (Line-height)
本文は1.6〜1.8が読みやすい。見出しは1.1〜1.3。詰まっていると読む気が失せ、空きすぎると関係が分断される。
字間 (Letter-spacing)
見出しは少しマイナスに(-0.02〜-0.04em)すると高級感が出る。ラベルやキャプションは広め(0.1〜0.15em)にすると読みやすい。
フォントウェイト
Regular(400)・Medium(500)・Bold(700)を使い分ける。重要な情報はBold、補足はRegularで強弱をつける。
タイプスケール — 階層を作る
タイプスケール（比率 1.25）
見出し→本文の「段差」が重要
Hero
64px
64px
キャッチコピー
H1
40px
40px
大見出し — セクションタイトル
H2
24px
24px
中見出し — サブタイトル
Body
16px
16px
本文テキスト。この大きさが最も多く使われます。読みやすい行間（1.6〜1.8）と適切な行長（1行40〜60文字）を意識しましょう。
Caption
12px
12px
キャプション・補足・ラベルテキスト
Google Fonts — 無料フォントの最強コンビ
| 目的 | 日本語 | 英語（見出し） | 英語（本文） |
|---|---|---|---|
| ラグジュアリー・高級感 | Noto Serif JP | Playfair Display | Cormorant |
| モダン・テック系 | Noto Sans JP | Outfit / Syne | DM Sans |
| ポップ・親しみやすい | Zen Kaku Gothic New | Nunito | Lato |
| エディトリアル・雑誌風 | Noto Serif JP | Libre Baskerville | Source Serif |
| ミニマル・シンプル | BIZ UDGothic | Work Sans | Inter |
Figmaでは右パネル「Text」からGoogle Fontsをそのまま使えます。Canvaも無料プランで数百種のフォントが使用可能です。
本文テキストの行間（line-height）として最も読みやすい値はどれですか？
✅ 正解！ 1.6〜1.8が本文の黄金比です。行間が狭すぎると息が詰まる感じ、広すぎると行の繋がりが分断されます。見出しは1.1〜1.3が適切です。
グリッドシステム — 見えない骨格を作る
Webデザインの標準は12カラムグリッド。12は2・3・4・6で割り切れるため、様々なレイアウトに対応できます。Figma・Canvaともにグリッド設定が可能です。
12カラムグリッド（基本）
8カラム（本文）＋ 4カラム（サイドバー）
3カラムレイアウト（カード系）
余白（ホワイトスペース）の8ptグリッド
8の倍数で余白を設定する（Figma標準）
4px— アイコンとテキストの隙間、極小
8px— リスト行間、コンポーネント内
16px— カード内余白（基本単位）
24px— コンポーネント間の余白
40px— セクション内の区切り
64px— セクション間の大きな余白
96px— ページ上下のヒーロー余白
余白は「贅沢」ではなく「設計」です。 余白を削ると情報が詰まって読む気がなくなります。Appleのサイトが「高級感」に見えるのは余白の多さが理由の一つです。
構図法 — 視線を誘導する
三分割法
画面を縦横それぞれ3分割した線の交点（4点）に重要な要素を配置する。写真・バナーの構図として最も基本的なルール。
黄金比（1:1.618）
自然界に存在する美しい比率。Appleのロゴも黄金比で設計されている。FigmaのGolden Ratioプラグインで簡単に使える。
Z字・F字の視線
人の視線はWebページを「Z」または「F」の字に動く。最初に目に入る左上・左端に最重要情報を置くのが基本。
ネガティブスペース
何も置かない空間も設計の一部。余白があることで重要な要素が際立ち、視線が自然と誘導される。
レスポンシブデザイン — デバイスブレークポイント
320〜480px
スマホ
スマホ
768px
タブレット
タブレット
1024px
小型デスク
小型デスク
1280px+
デスクトップ
デスクトップ
モバイルファーストで設計することが現在の基本。スマホのレイアウトを先に決めてから、大きい画面向けに拡張していくアプローチが推奨されています（スマホからのアクセスが全体の約6割）。
Webデザインで標準的に使われるグリッドのカラム数はいくつですか？
✅ 正解！ 12カラムは2・3・4・6で割り切れるため、あらゆるレイアウトに対応できます。FigmaのLayoutGridで12カラムを設定するのが業界標準です。
Figma vs Canva — どっちを選ぶ？
F
Figma
- プロフェッショナル向けUIデザインツール
- コンポーネント・オートレイアウト機能
- プロトタイプ・インタラクション設定
- デベロッパーとの連携（CSS書き出し）
- チームリアルタイムコラボレーション
- 無料プランで2プロジェクトまで利用可
C
Canva
- 直感的な操作・初心者に最適
- 豊富なテンプレート（SNS・バナーなど）
- 素材・写真・動画が豊富に内蔵
- AI機能（背景削除・生成）が充実
- Webサイト・プレゼン・印刷物にも対応
- 無料プランでほとんどの機能が使える
プロは両方使います。 本格的なUIデザイン・設計はFigma、素早いバナー制作・SNS投稿はCanvaという使い分けが一般的です。まずCanvaで感覚を掴み、次にFigmaに移行するのが最短ルートです。
Figma 必須ショートカット30選
V
選択ツール
R
四角形ツール
O
円形ツール
T
テキストツール
P
ペンツール
F
フレームツール
Ctrl+G
グループ化
Ctrl+D
複製
Ctrl+Z
元に戻す
Ctrl+C
コピー
Alt+ドラッグ
その場で複製
Shift+A
オートレイアウト追加
Ctrl+Alt+C
スタイルコピー
0〜9
透明度変更(10〜100%)
Ctrl+\\
パネル非表示（集中）
Ctrl+Shift+H
水平中央揃え
Figma 初期設定チェックリスト（プロジェクト開始前に必ずやること）
🚀 Figmaプロジェクト設定チェック
Figmaでグループを作成するショートカットキーは？（Windows）
✅ 正解！ Ctrl+G（Mac: ⌘+G）でグループ化、Ctrl+Shift+G（⌘+Shift+G）でグループ解除です。複数要素を選択した状態で使います。
バナーの標準サイズ一覧
| 用途 | サイズ（px） | 使用場所 | ポイント |
|---|---|---|---|
| レクタングル | 300×250 | Google広告・ブログ | 最も汎用的。必ず作る |
| リーダーボード | 728×90 | ページ上部・下部 | 横長。テキスト中心に |
| ハーフページ | 300×600 | サイドバー | 縦長で視認性高い |
| Instagram正方形 | 1080×1080 | Instagram投稿 | 比率1:1。インパクト重視 |
| Instagramストーリー | 1080×1920 | ストーリー・リール | 上下エリアに重要情報を |
| Twitter(X)ヘッダー | 1500×500 | プロフィールヘッダー | 中央に主要コンテンツ配置 |
| Webトップバナー | 1920×600 | サイトヒーロー | 背景画像+テキストが基本 |
クリックされるバナーの5要素
⚡ 訴求（Proposition）— 0.3秒で伝わるか？
バナーを見る時間は平均0.3秒。「誰に・何を・どんなベネフィットを」が瞬時に伝わらないと無視される。「50%OFF」「1日で学べる」など数字・具体的な言葉が効果的。
👁️ ビジュアルヒエラルキー — 視線を誘導する
「メインビジュアル → 見出し → サブテキスト → CTA」の順に視線が流れるように設計する。最も重要な要素を最も大きく・目立つ色に。
🎨 配色 — ブランドを守りつつ目立たせる
掲載先のサイトカラーと被らない配色を選ぶ。ホワイト系サイトには暗色バナー、ダーク系サイトには明色バナーが目立ちやすい。
📝 コピーライティング — 短く・強く・具体的に
見出しは10文字以内、サブは30文字以内が理想。「品質に自信」より「顧客満足度98%」、「早い」より「最短30分で完成」。数字と具体性が命。
🔴 CTA（Call to Action）— 次の行動を促す
ボタンのテキストは「今すぐ登録」「無料で試す」「詳しくはこちら」など行動を明示する動詞で。色は背景と最も対比が高い色を選ぶ。
Canvaでバナーを作る実践手順
サイズ選択
Canva
背景設定
写真orカラー
テキスト配置
H1→CTA順に
配色調整
60:30:10ルール
書き出し
PNG/JPG
バナーデザインセルフチェックリスト
🖼️ バナー完成前の最終確認
バナーデザインで「CTA」とは何の略ですか？
✅ 正解！ CTAは「今すぐ申し込む」「無料で試す」などユーザーに行動を促す要素です。色・大きさ・言葉選びがクリック率（CTR）を大きく左右します。
LPの黄金セクション構成（AIDA理論）
1
ファーストビュー（Hero）
3秒で「これは私のためのページだ」と思わせる。キャッチコピー・ビジュアル・サブテキスト・CTAを配置
MUST
2
問題提起（Pain Point）
ユーザーが抱える悩み・課題に共感する。「こんなお悩みありませんか？」形式が定番
MUST
3
解決策・サービス紹介
問題を解決できることを示す。機能列挙でなく「ベネフィット（得られる未来）」を訴求
MUST
4
社会的証明（信頼性）
お客様の声・導入実績・メディア掲載・資格・認定マークで信頼感を構築する
MUST
5
特徴・差別化ポイント
競合との違い・独自の強み。アイコン+3〜6項目で視覚的に整理する
HIGH
6
料金・プラン
シンプルな比較表で提示。おすすめプランを目立たせる（推奨プランは中央・アクセントカラー）
HIGH
7
FAQ（よくある質問）
購入の不安を解消する。「本当に効果あるの？」「返金保証は？」など購入ブロッカーに先回りして答える
HIGH
8
最終CTA（行動喚起）
ページ最下部で再度申し込みを促す。希少性・限定感（「残り○席」「〇月○日まで」）を加えると効果的
MUST
ファーストビューは最重要。ユーザーの70%以上がファーストビューだけを見てページを離れます。ここに全力を注ぎましょう。
コンバージョン率を上げる心理学テクニック
希少性・緊急性
「残り3席」「〇月〇日23:59まで」などで行動を後押し。人は失うことを恐れる（損失回避バイアス）。
社会的証明
「3,500人が受講済み」「満足度98%」「★4.9（2,100件）」など数字を使った口コミ・実績。
返報性
無料特典（PDF・動画・サンプル）を先に提供することで「もらったから申し込みたい」という心理を生む。
安心感の付与
「30日間返金保証」「SSL認証」「プライバシーポリシー明記」など不安要素を先回りして解消する。
LPのファーストビューで最も重要な目的は何ですか？
✅ 正解！ ユーザーは平均3〜8秒でページを離れるかを判断します。「誰のための」「何ができる」「どんないいことがある」をファーストビューで即座に伝えることが最重要です。
Webサイトの種類と設計方針
コーポレート
企業の信頼感を伝える。清潔感・プロ感が最優先
ポートフォリオ
個性と実績をアピール。作品が主役のレイアウト
ECサイト
購買導線が命。カート・決済への最短ルートを設計
ブログ・メディア
読みやすさ最優先。コンテンツが主役の清潔なレイアウト
ナビゲーション設計の原則
3クリックルール
ユーザーが目的の情報に3クリック以内でたどり着けるようにサイト構造を設計する。深すぎる階層は離脱の原因。
ヒックの法則
選択肢が多いほど決断に時間がかかる。ナビゲーション項目は7±2個が限界。多すぎるメニューは整理・グループ化する。
現在地の明示
パンくずリスト・アクティブなメニューの強調表示で「今どこにいるか」をユーザーに常に伝える。迷子にさせない。
検索の重要性
コンテンツが多いサイトは検索機能が必須。ユーザーの30%は検索から目的に到達する。検索バーは目立つ場所に配置。
UIコンポーネントの設計パターン
Primary
Secondary
ボタン設計
主要アクションはFilledボタン。補助的なアクションはOutline or Ghost。1画面に同じ重要度のボタンを並べない。
プログレスバー
フォーム・チェックアウト・ステップ型UIに必須。「あと何ステップか」を見せることで離脱率が激減する。
Webデザインの「3クリックルール」とは何ですか？
✅ 正解！ 情報へのアクセスに4クリック以上かかると離脱率が急上昇します。サイトマップを作成してから設計を始め、最短の動線を設計しましょう。
UIとUXの違いを正しく理解する
UI（User Interface） = 見た目・操作画面のデザイン（色・フォント・ボタンの形）
UX（User Experience） = ユーザーが感じる体験・感情の設計
例：アプリの「購入ボタン」がUI。「タップしてから決済完了まで迷わず完了できる体験」がUX。美しいUIでも使いにくければUXは最悪。良いUXのためにUIを設計するのがプロのアプローチ。
UX（User Experience） = ユーザーが感じる体験・感情の設計
例：アプリの「購入ボタン」がUI。「タップしてから決済完了まで迷わず完了できる体験」がUX。美しいUIでも使いにくければUXは最悪。良いUXのためにUIを設計するのがプロのアプローチ。
モバイルアプリのナビゲーションパターン
🏠
Home
🔍
Search
❤️
Saved
👤
Profile
タブバー（BottomNav）
iOS標準。4〜5項目。LINE・Instagram・Twitter
ドロワー（サイドメニュー）
Android標準。項目が多い場合に有効
←
詳細ページ
本文コンテンツ…
スタック（画面遷移）
一覧→詳細など階層的な遷移に使用
カルーセル・スワイプ
写真・カード表示。Tinder・Spotifyなど
タッチターゲット — 指で押しやすいサイズ
Appleのガイドラインでは最低44×44pt（ポイント）、Googleのマテリアルデザインでは最低48×48dpのタッチターゲットを推奨しています。小さすぎるボタンは誤タップの原因。高齢者や視覚障害のある方も考慮してください。
✕
24px ❌
小さすぎ
小さすぎ
△
36px △
ギリギリ
ギリギリ
✓
44px ✅
推奨最小
推奨最小
✓
56px ✅
快適
快適
FigmaでのUIデザイン実践フロー
📋 情報設計（IA）— 画面一覧を決める
必要な画面をすべて書き出す。「ホーム・一覧・詳細・カート・決済・マイページ」など。Figmaのページ機能で管理する。
✏️ ワイヤーフレーム — 骨格から設計する
グレーの四角と線だけで画面レイアウトを設計。この段階ではデザインは考えない。「何を・どこに・何の順で」だけを決める。
🎨 ビジュアルデザイン — 見た目を設計する
ワイヤーフレームに色・フォント・画像を当てていく。カラースタイル・テキストスタイルをFigmaに登録してから作業開始。
🔗 プロトタイプ — 動くデモを作る
Figmaのプロトタイプ機能で画面遷移を設定。実際にスマホで操作できるデモを作ってUXを検証する（Figma Mirrorアプリを使用）。
🧑🤝🧑 ユーザーテスト — 実際に使ってもらう
5人のユーザーにプロトタイプを操作してもらうだけで、85%の問題が発見できる（ニールセン・ノーマングループの研究）。
Appleのガイドラインが推奨するタッチターゲットの最小サイズはいくつですか？
✅ 正解！ 44×44ptがApple HIG（Human Interface Guidelines）の推奨最小サイズです。これ以下だと指で正確にタップしにくくなります。
デザイン案件のプロセス全体像
📞 ヒアリング — 依頼を正確に理解する
「誰に・何を・なぜ・いつまでに・予算は？」の5点を必ず確認。曖昧なまま進むと後でやり直しが発生する。ヒアリングシートを用意しておくと◎。
📝 提案・見積もり — 明確な条件提示
納品物・スケジュール・修正回数・著作権の扱いを明文化する。「何回まで修正可」を必ず契約時に決める（無制限は後でトラブルの原因）。
🎨 デザイン制作 — まずは方向性を確認
いきなり完成品を作らない。まずラフ・ワイヤーフレーム・カラーパレット案を確認してもらう。方向性が固まってから詳細を詰める。
🔄 修正対応 — 建設的に進める
「なんか違う」という曖昧なフィードバックは深掘りして具体化する。「色？構図？文字の大きさ？」と聞き返し、修正範囲を明確にする。
📦 納品 — ファイル整理・引き渡し
Figma・AI・PDF・PNG形式でそれぞれ整理して納品。フォントの埋め込み・画像の解像度・カラープロファイルを必ず確認。
デザイン料金の相場（2024年）
| 案件種類 | フリーランス相場 | 制作会社相場 | 備考 |
|---|---|---|---|
| バナー1枚 | ¥3,000〜15,000 | ¥10,000〜30,000 | サイズ・複雑さで変動 |
| LP（1ページ） | ¥30,000〜100,000 | ¥100,000〜500,000 | 実装込みはさらに高い |
| コーポレートサイト | ¥100,000〜500,000 | ¥500,000〜3,000,000 | ページ数・機能で大きく変動 |
| アプリUI（10画面） | ¥100,000〜300,000 | ¥300,000〜1,000,000 | プロトタイプ込みの場合 |
| ロゴ | ¥20,000〜80,000 | ¥100,000〜500,000 | ブランドガイドライン込みは高め |
駆け出しのうちは安くする必要はありません。品質に見合った料金を設定することで、価格で選ぶクライアントではなく、品質で選ぶクライアントと仕事ができます。
ポートフォリオで差をつける7つのルール
プロセスを見せる
完成品だけでなく、リサーチ→ワイヤー→デザインの思考プロセスを見せると評価が上がる。
ターゲットを絞る
「なんでもできます」より「LPデザイン専門」の方が強い。初期は専門性を打ち出す。
数字で語る
「CVR 3倍に改善」「直帰率20%減少」など、デザインが与えたビジネス貢献を数字で示す。
オンラインで公開
Behance・Notion・自分のサイトで公開。URLで送れる状態にしておくことが必須。PDFは相手の手間。
🎓 コース修了 — 次の学習ステップ
推奨学習リソース
Refactoring UI（英語書籍）・Figma公式チュートリアル・Dribbble・Awwwards（デザイン参考）・Pinterest（ムードボード収集）
実践課題リスト
①好きなアプリをFigmaで模写 ②架空のサービスのLPを作る ③実在するサイトをリデザインする ④30日間毎日1バナーを制作する
仕事の獲得方法
クラウドワークス・ランサーズ（初案件）→ Twitter/X・Wantedly（認知獲得）→ SNS・紹介（安定）の順で展開するのが最短ルート。
デザインは「センス」より「ルール」です。 このコースで学んだ理論を繰り返し実践することで、必ずプロのクオリティに到達できます。最初の1作品を今日中に作り始めてください。
フリーランスデザイナーとしてクライアントとの修正回数を事前に決めるべき理由は？
✅ 正解！ 「修正3回まで込みの金額」と決めておかないと、細かい修正が延々と続き、時給換算で最低賃金以下になることも。契約時に明文化することがプロのルールです。
第 1 章 / 全10章