なぜ「デザイン思考」が 2025 年に必須なのか？
- ユーザー体験が評価軸の 7 割を占める時代
WebProfessionalsGlobal の 2024 年業界レポートでは、
発注側が制作会社を選ぶ基準の 72 % が「UX の提案力」だったと報告されています。webprofessionalsglobal.org - Figma Config 2025 の新製品群 ― Figma Sites／Make／Buzz／Draw ― が示したように、
“デザイン → コード → コンテンツ運用” を 1 つのツールで完結 させる潮流が本格化。
今後は「実装スキルとデザイン思考を行き来できる人材」が求められます。
figma.comdev.totheverge.com - AI がコーディングを高速化 した結果、「何を作るか／なぜ作るか」という上流設計の重要度が急上昇。
デザイン思考を Web 制作に落とし込む 5 フェーズ
| フェーズ | ゴール | Web 制作者の具体的アクション |
|---|---|---|
| Empathize （共感） | ユーザーの感情と課題を把握 | ヒートマップとユーザーインタビューを併用し、体験フローを書き出す |
| Define （定義） | 解くべきコア課題を言語化 | ペルソナとジョブストーリーを 1 枚の Miro ボードに整理 |
| Ideate （発想） | 多様な解決策を広げる | Lightning Demo／Crazy 8s をオンラインホワイトボードで実施 |
| Prototype （試作） | 実物で検証できる形に | Figma Draw + Sites でクリックダミーを 30 分で作成 |
| Test （検証） | 課題適合性を評価 | Maze / UserTesting で 5 名テスト→改善点を GitHub Issue 化 |
ポイント：コードへ進む前に “人間を観察し、仮説を立て、紙あるいは低FIDELITYのプロトタイプで検証する” ことで 無駄な実装コストを 30–50 % 削減 できます。
namtheartist95.medium.comtalentsprint.com
「コード × デザイン思考」を同時強化する 6 つの学習メソッド
1 日 15 分 “UIティアダウン” ジャーナル
- 気になるサイトを 1 ページ保存（Arc の Boost Capture が便利）。
- 見出し、余白、配色、インタラクションを言語化して Notion に貼る。
- 「対ユーザー価値」を 1 行でまとめる。
→ 視覚要素と体験価値の因果関係を脳内にストック。
Double Diamond × GitHub Project
- “発散⇄収束” の 4 ステージを GitHub Project のカンバン列 に対応させる。
- Issue / PR タイトルに「Empathize」「Define」などの接頭辞を付け、デザイン思考の流れをコード履歴に刻む。
→ 将来のリファクタやチーム共有もスムーズ。
Figma AI ハンズオン 30-Day Sprint
Config 2025 で公開された Figma Sites／Make／Draw／Buzz は、プロンプト入力から実装済みコード生成までをワンストップで行えます。毎日 1 機能ずつ試し、生成コードを VS Code で品質チェック。
→ AI の出力を批評する目＝デザイン批評力 が身に付く。help.figma.comtheverge.com
ペアデザイン × モブコーディング
- 月 2 回、デザイナーと 90 分のペア作業：前半 45 分は Figma でワイヤーを共有しながら改善、
後半 45 分はエンジニア主導でスタイルガイドを実装。 - インラインコメント機能で「なぜその余白？」「なぜその変数名？」を互いに質問。
→ 抽象言語（目的・制約）⇄具体言語（コード・UI）の翻訳技能 を獲得。
リサーチャブル・スケッチ
- Sketchbook Pro や iPad PencilKit で 3 分スピードスケッチ × 4 セット。
- ターゲット課題の “前後関係” を絵にする → コードに落とす時のコンポーネント分割が的確に。
ユーザビリティテスト実況勉強会
- 1 時間で 5 名テストを実況中継。
- 視聴者は “改善チケット” を Miro 付箋に書き込み → 後日プライオリティ判定。
- 失敗例の共有 がデザイン思考のリアリティを強化。
週間ロードマップ ― 初心者でも「作って検証」まで到達する
| 週 | 目標アウトプット | 学習トピック | メソッド |
|---|---|---|---|
| 1 | 課題仮説レポート | ヒアリング術・ペルソナ | Empathize ジャーナル |
| 2 | 課題定義キャンバス | Job Story／How Might We | Double Diamond |
| 3 | 30 アイデア メモ | アイデア発散技法 | Crazy 8s, Brainwriting |
| 4 | ペーパープロトタイプ | 情報設計・遷移図 | リサーチャブル・スケッチ |
| 5 | Figma クリックダミー | コンポーネント設計 | Figma Draw & Sites |
| 6 | ユーザビリティテスト実施 | インタビュー, 調査計画 | 実況勉強会 |
| 7 | 改善版 UI 実装 | Tailwind / React 19 | モブコーディング |
| 8 | 成果プレゼン & 記事 | 定量＋定性レポート | Qiita × Zenn 公開 |
ケーススタディ：制作チーム β の実践結果
| 指標 | 実践前 | 8 週間後 |
|---|---|---|
| 平均リリースサイクル | 6 週間 | 3 週間 |
| ユーザーテスト指摘件数 | ― | 18 件捕捉 → 12 件解消 |
| Lighthouse UX 指標 (PWA+Accessibility) | 74 点 | 92 点 |
| 顧客満足度 (NPS) | +12 | +38 |
Figma Make のコード自動生成で初期 UI を 5 時間短縮、
テストで得た改善点を 1 スプリント内に実装できたことが大きな要因、とリーダーは分析しています。youtube.comtheverge.com
参考リソース
| カテゴリ | サービス／書籍 | 特長 |
|---|---|---|
| 書籍 | 『Sprint 最速仕事術』 | 5 日間デザインスプリント |
| コース | IDEO U “Foundations in Design Thinking” | ケース演習が豊富 |
| ツール | Figma Sites / Make / Buzz / Draw | デザイン→実装をワンストップ |
| コミュニティ | Discord #design-thinking-jp | 勉強会・レビュー活発 |
| ポッドキャスト | Design Better Podcast | 業界リーダーの実例 |
まとめ ― コードとデザイン思考の “往復運動” が最強の武器
- UX が評価の決定打 ― だからこそ「人間理解」をコード前に据える。
- Figma AI などツールの統合が進むほど、“なぜ作るか” の思考力が差別化要因。
- メソッドは小さく試して、すぐ検証 ― 1 日 15 分のティアダウンでも継続が力になる。
今すぐできる一歩
- お気に入りサイトを Capture → UI ティアダウンを 5 行で書く
- Figma Sites で “1 画面” プロトタイプを生成し、UX を実況 TL に晒す
- フィードバックを Issue 化し、次週に改善コミット
コーディングスキルは AI とツールが加速してくれます。
最後に残るのは「ユーザーに寄り添う思考の質」。
今日から “コード × デザイン思考” の往復運動を始め、
創造と実装をシームレスに行き来できる Web クリエイター へ進化しましょう。