“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー

2026年6月1日（月）から5日（金）まで開催された「CGWORLD Web Design Week」。
Day 4「“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー」での登壇資料です。

＜セッション概要＞
Webデザインは、ただ画面をつくるだけではありません。クライアントやエンジニアと情報を整理し、認識を揃えながら進めることで、目的にあった「良いサイト」へ育てていくことが重要です。
本セッションでは、FigJamを活用した要件整理から、Figmaでの制作フロー、チームでのコミュニケーション方法までを実践的に解説。Adobeツールとの違いや、Figmaならではの共同作業の考え方も紹介します。
Figmaをなんとなく使っている方や、「フォトショ・イラレとの違いがわからない」「なんとなく使ってるけど合ってるか不安」などの悩みを抱える方、これから実務で活用していきたいWeb制作初心者〜中級者におすすめの内容です。

Transcript

1. “なんとなくFigma”から一歩先へ AI時代も活きるWeb制作フロー スズキアユミ デザイナー CGWORLD Web Design Week - Day 4 Designer
2. Profile スズキアユミ デザイナー お仕事： デザイナー歴10年以上 会社員・役員6年 フリーランス7年目 Web・UI・UX 事業会社 制作会社 ひとりデザイナー スタートアップ チームビルディング デザイナー支援： コミュニティ運営 ブログ記事執筆 非常勤講師 Figma本 アドバイザリー
3. Theme Figma 制作フロー
4. 本題に入る前に… ※私の真似をしましょうという 話ではありません
5. みなさん 様々なプロ Client Designer Director Engineer デザイナーのプロ（or 目指している）
6. 様々なプロ Client Designer Director Engineer 私 デザインと繋ぐのが好きな人 稼ぎにくい・評価もされにくい場所にいる変な人です
7. ただ、 そんな私だからこそ見える視点があると思うので カッコいいプロ目線の話 デザイナーがまわりのプロと なんだか上手くいかない時のヒント Director Engineer Designer Client デザイナーじゃない方は、 デザイナーと関わる時のヒントになるかも
8. Point 操作方法や技術・スキルではなく Figma(ツール)を介した コラボレーションの話
9. 01 これまで コラボレーションとなぜ関係が？ した理由 知っておきたい Figmaが急拡大
10. インターフェイス(UI)デザインでのシェア率 UX Toolsより https://www.uxtools.co/tools/design 1位 Figma 82.3% 2位 Sketch 1.8% 3位 Adobe XD 1.4% 2 位との差がすごいですね
11. UX Toolsより なぜ、 ここまでシェアが伸びたのでしょう？
12. 戦略 従来 デザイン途中は見せない 完成してからレビュー・納品 設計 制作 Designer 制作フェーズのみ （完全分業） が多かった 運用
13. 良いものを作るだけでは売れなくなった 価値観の変化 「モノ」 → 「コト」 ユーザーの体験、デザイナー的な思考方法、プロセス UX デザイン思考 スタートアップの急増、競争激化 アジャイル開発 スピード重視
14. 変化 デザイン途中も共有する 協力して共通の目標を達成する Client 制作Director 戦略 設計 運用 Engineer Designer Designer Designer Designer デザインに関わる人も増え、 デザイナー自身も関わる領域が拡がった
15. デザインも含めて一緒に作り みんなで素早く・より良くしていく コラボレーションしやすい場所 が必要になった
16. Figma爆誕・急拡大 Figmaが需要を叶えた
17. じつは登場した当初から、 Figmaは自らを 「コラボレーションツール」 と表現していました Figmaの公式サイト 作業だけするツールして作られているわけじゃない
18. 02 いま コラボレーションを円滑にする 実務でのリアルな Figma活用例
19. 工程 一般的なWeb制作フロー 戦略 設計 制作 ヒアリング 要件定義 デザイン 調査・分析 情報設計 コーディング サイト企画 サイト公開 運用 運用・更新 プロモーション 改善
20. 実際の制作フローの中での困りごと 情報設計 ヒアリング（要件整理） 曖昧な依頼内容 認識ズレ・修正過多 デザイン・運用 実装 デザインとの乖離 データが混沌 少しでもラクに・楽しくデザインをしていくためのアプローチをご紹介
21. 実際の制作フローの中での困りごと 情報設計 ヒアリング（要件整理） 曖昧な依頼内容 認識ズレ・修正過多 デザイン・運用 実装 デザインとの乖離 データが混沌 少しでもラクに・楽しくデザインをしていくためのアプローチをご紹介
22. ヒアリング（要件整理） 曖昧な依頼内容 デザイナーへの依頼（一例） 一見、 具体的に 思えるが… 入力フォームを最適化したい モバイルファーストにして ステップ式にして Client Director
23. Q この依頼で、 最初に確認すべきものは？ 配色ルール ① 施策の目的・課題 ② アニメーション仕様 ③
24. A 施策の目的・課題 ② 何のために やるのか？ デザイナーへの依頼（一例） 入力フォームを最適化したい モバイルファーストにして ステップ式にして
25. 「施策の目的・課題」 が見えていないと・ ・ ・ デザインのレビュー時に指標がない 権限の強い人の“好み”で決まってしまう デザイナー自身もなぜそうしたのか説明できない 結果が出た時に何が要因がわからない
26. 「曖昧な依頼内容」に対し て、 私がやっていること 施策の目的 ・ 課題を捉えるために 01. 課題を紐解く 02. 伝わる形にし てから共有する
27. 「曖昧な依頼内容」に対して、私がやっていること 01.課題を紐解く 使用ツール：FigJam 情報の 洗い出し・整理 自分の頭の中を整理する用 ヒューリスティック 評価 現状の課題を改めて洗い出す
28. 実際の案件のものは掲載できないため 雰囲気だけ感じ取ってください　 情報の 洗い出し・整理 得られた情報 リサーチした情報 ターゲットの整理 課題点の洗い出し など、 とにかく全部FigJamに書いて 自分の頭の中を整理する用 FigJamを元にChatGPTで生成
29. 実際の案件のものは掲載できないため 雰囲気だけ感じ取ってください　 ヒューリスティック 評価 現状の課題を改めて洗い出す ↓ 依頼内容が 本当にこの課題に アプローチできるのか？ FigJamを元にChatGPTで生成
30. FigJamを元にChatGPTで生成 FigJamを元にChatGPTで生成 これをそのまま共有しません…！
31. 「曖昧な依頼内容」に対して、私がやっていること 02. 伝わる形にしてから共有する 使用ツール：FigJam Point 認知特性 を意識して共有内容をまとめる デザイナーの整理内容を そのまま見せても 伝わらない…！
32. 「りんご」と聞いて思い浮かべるものは？ 「ん」 「り」 りんご リンゴ 林檎 「ご」 視覚優位 言語優位 聴覚優位 あなたの認知特性は？「本田40式認知特性テスト」を受けてみよう！ - グレーゾーンなわたしたち https://gray-zone-family.hatenablog.com/entry/2021/10/04/180000
33. 参考元：「認知特性」と「認知処理様式」宮城県総合教育センターＨ３０年度研究成果物（特別支援教育研究グループ） デザイナーさんに 多い傾向 ビジネスサイドやエンジニアさんに 多い傾向 視覚優位 言語優位 Director 視覚的に全体像を 同時に把握する Designer FigJamと相性いいのも納得…！ 順序立てて 言語で理解する 情報処理 Client Engineer 視覚優位の人からの説明で 結論や前提がわかりづらいと感じやすい ※もちろん個人差ありますが、 実務ではこう感じることが多いです
34. FigJamでも説明の順序を作る 1 もらった 依頼内容 2 依頼内容を 整理したもの 3 抽出した 課題点 4 今回の 対応案 視覚優位でも全体像が掴めるし、 言語優位の人に伝わりやすくなる！
35. 実際の案件のものは掲載できないため 雰囲気だけ感じ取ってください　 依頼内容を 整理したもの 依頼内容 今回の対応案 2つ FigJamを元にChatGPTで生成 抽出した 課題点 その他 考慮して おきたいこと
36. Figmaで 要件整理するいいところ Collaboration 視覚的な全体像の把握がしやすい ＋ デザイナー同士ならFigJamですぐに思考の共有をし合える 別途シートなど用意せずに、 同じ場所で共有できる ＋ 情報の置き場所を統一できるので、 探すのも迷わない
37. 実際の制作フローの中での困りごと 情報設計 ヒアリング（要件整理） 曖昧な依頼内容 認識ズレ・修正過多 デザイン・運用 実装 デザインとの乖離 データが混沌 少しでもラクに・楽しくデザインをしていくためのアプローチをご紹介
38. 情報設計 認識ズレ・修正過多 そうならないための ワイヤフレーム （WF） でもありますが… ちゃんと確認してもらえなかったり、 擦り合わせ不十分になったり、 WFの扱い意外と難しい
39. Q ワイヤフレーム(WF)、 どうしたらいい？ WFは見せずに自分用 ① そもそもWFを作らない ② 使えるWFにする ③
40. ③ A 使えるWFにする AもBも見に覚えあるんですが （笑） 今は私はこのアプローチでやっています！
41. 「認識ズレ・修正過多」に対し て、 私がやっていること 使えるWFにするために 01. WFの判断に必要な情報も掲載する 02. 直接コメントし てもらう 03. リアルタイムで編集・検討する
42. 「認識ズレ・修正過多」に対して、私がやっていること 01.WFの判断に必要な情報も掲載する 使用ツール：FigJam FigJamでWFのまわりに情報追加 デザイナー自身もクライアントも いつでも1シートで確認できる
43. 実際の案件のものは掲載できないため 雰囲気だけ感じ取ってください　 ページの役割 （流入経路） 目的・課題・ 主なターゲット 意図やメモ FigJamを元にChatGPTで生成 こんな感じで簡潔に、 WFの判断に必要な情報もまとめてあげるイメージです
44. 「認識ズレ・修正過多」に対して、私がやっていること 02.直接コメントしてもらう 使用ツール：FigJam、 Figma Design コメント機能を活用 変更の経緯も残り 言った・言わないも防げる
45. 「解決済み」 の ルール決めもオススメ 例：最初にコメントした人のみ✔を入れるようにする ✔を入れると非表示になるので、 解決したと認識してないのに、非表示になってしまうと 混乱が起きやすくなってしまう Tips 著書「つくって学べる はじめてのFigmaデザイン」より
46. Slackと連携できる Tips Slackに通知が届く FigmaとFigJamのコメントに、 Slackで直接返信できる デザイナーは普段Figmaで作業しているので あまり使わないかもですが、 クライアントさんに紹介してもよさそう　 Figma公式ヘルプ：SlackでのFigmaからの通知の受け取り
47. 「認識ズレ・修正過多」に対して、私がやっていること 03.リアルタイムで編集・検討する 使用ツール：FigJam、 Figma Design クライアントやメンバーとMTG中に リアルタイムで、 WFやデザインを編集 ボールのやりとりを少なくできる◎
48. クライアントとのMTGしながら デザイナー同士で相談しながら 直接レイアウト 組み替えたり 案を組み込んで 検証したり Designer 隣で別案を 作ってみたり Client Designer Designer Director
49. Figmaで 情報設計するいいところ Collaboration 1シートに情報を集約できる → 共通認識とりやすい 補足やメモも載せやすい → 経緯が残る リアルタイムで編集・共有できる → スピードUP
50. 実際の制作フローの中での困りごと 情報設計 ヒアリング（要件整理） 曖昧な依頼内容 認識ズレ・修正過多 デザイン・運用 実装 デザインとの乖離 データが混沌 少しでもラクに・楽しくデザインをしていくためのアプローチをご紹介
51. デザイン・運用 デザインデータが混沌 スピードが上がった・いろんな人が見るようになった すぐにデータを見つけられない 他のデザイナーが把握しづらい 困りごと Figmaってサクサク使えるからこそ、じつはぐしゃりやすい…
52. 「デザインデータが混沌」に対し て、 私がやっていること 誰がみてもわかるデータづくり 01. サムネイルを設定する 02. ページ一覧を見やすくする 03. 見出し付けやセクション活用
53. 「デザインデータが混沌」に対して、私がやっていること 01.サムネイルを設定する 著書「つくって学べる はじめてのFigmaデザイン」より ぱっとみた時に何のデザインデータなのかわかりやすい
54. プロジェクト名や 制作物名 データ内のページ一覧 データ内の主なデザイン
55. 「デザインデータが混沌」に対して、私がやっていること 02.ページ一覧を見やすくする 左サイドバーにあるページ一覧 絵文字や境界線など使用して 工夫しています
56. 最近は「はじめに」ページを作って 各ページの説明も記載するように
57. 「デザインデータが混沌」に対して、私がやっていること 03.見出し付けやセクション活用 デザインデータに見出しを付けるようにしています
58. おすすめキット Annotation Kit 3.0 https://www.figma.com/community/file/806626024182535168
59. セクションを上手く使えば セクションごとの共有リンクを発行できる → 共有しやすい 「Ready for Dev」 で開発準備済みをお知らせできる
60. Figmaで デザインするいいところ Collaboration 会社やチームごとに、 把握しやすい整理ができる → 従来は、 共有サーバーにアップしてフォルダ・ファイル名 （どれが最終がわからなくなるやつ笑） で管理したり、 別のサービス （Zeplin、 InVision） を使ったりしていたので、 細いルールづくりやデータ運用は難しかった。 データ運用しながら、 データ改善の相談がしやすい → デザイナーみんなで 「データ整理Day」 を作って、 時間を決めて一緒に整理したりしたことも。
61. 実際の制作フローの中での困りごと 情報設計 ヒアリング（要件整理） 曖昧な依頼内容 認識ズレ・修正過多 デザイン・運用 実装 デザインとの乖離 データが混沌 少しでもラクに・楽しくデザインをしていくためのアプローチをご紹介
62. 実装 デザインとの乖離 制作／開発スピードを求められるようになった 毎回しっかりな実装指示書つくれない 実装後のレビューに時間をかけられない 困りごと 品質の低下につながって悩ましい…
63. 「デザインとの乖離」に対し て、 私がやっていること 意図が汲み取りやすいデータづくり 01. デザインデータに直接メモ（実装指示） 02. 動きはプロトタイプで擦り合わせ 03. オートレイアウトやスタイル等の活用
64. 「デザインとの乖離」に対して、私がやっていること 01.デザインデータに直接メモ （実装指示） できるだけ デザインしながら 書いておく
65. おすすめプラグイン・ウィジェット Comment Note https://www.figma.com/community/ widget/1168789542647357646 Autoflow https://www.figma.com/community/ plugin/733902567457592893 コメント機能に似た、実装指示用のアノテーション機能というものもあります
66. 「デザインとの乖離」に対して、私がやっていること 02.動きはプロトタイプで擦り合わせ 具体的な使い方は 割愛しますが やっぱり認識合わせ のために便利！
67. 従来 自分で試しにコードを 書いて共有したり Keynoteの アニメーション活用したり ほかのプロトタイプツールで 作成したり 一つのツール内で出来るなんて、 世の中便利になった…！
68. 「デザインとの乖離」に対して、私がやっていること 03.オートレイアウトやスタイル等の活用 なし あり デザインの運用・管理が しやすくなる チームで共通言語ができる どう影響するのか、 次のセクションでもう少しお話しします！
69. Figmaで 実装に連携するいいところ Collaboration Figma自体がデジタルプロダクトライク → Devモードだけでなく、 デザイン時の塗りパネルが 「カラーコード」 表記なように、
 　 WebやUI制作に特化しているのがFigmaの特性でもあります 逆にデジタルプロダクト以外で この表記だと不便ですよね(笑)
70. Point Figmaは単なる 「作業ツール」 ではない 共有しやすい形に 整理するツール デザインカンプを作って終わりは勿体ない…！
71. 03 これから 共有できる形に整理するツール AI時代に 初学者がまず 意識できること
72. Figmaでつまずきやすい・見逃しやすい オートレイアウト コンポーネント／スタイル レイヤー名 正直、自分だけが使うデータであれば、この3つ気にしなくてもいいんです(笑) でも、チームで使うデザインデータなら？
73. オートレイアウト 活用時のコラボレーションのメリット 一例：レイアウトパネルで一目で余白が把握できる なし あり デザイナー自身もピクセルずれを防げますね
74. 崩れている AIもレイアウト構造の認識が変わる なし あり ↑Claudeから実際に提示された違い
75. コンポーネント／スタイル 活用時のコラボレーションのメリット デザインの運用・管理がしやすくなる デザイナー間で微妙に色が違う等 ルールずれも防げる Designer Designer エンジニアさんとも 命名の統一ができて共通言語ができる Engineer バリアブル（変数）、バリアント（コンポーネントのバリエーション管理）
76. AIもFigmaでのデータ設計を見ている CSSもFigmaの データを参考に生成する スタイルやバリアブルなど設計する 際は、どんな命名ルールにするか チームで相談すると◎
77. 命名なし レイヤー名 活用時のコラボレーションのメリット 命名規則を統一しておくと共通言語として機能 命名あり 統一していないと エンジニアさんがレイヤー構造を 独自に解釈する必要が出てくる 実装時のコストの高さは 一目瞭然ですね Engineer
78. 命名なし 命名あり AIもレイヤー構造の解釈に差が出る レイヤー構造をより忠実にHTMLに変換
79. Point 整理されたデータは 人にもAIにもやさしい 意図が伝わりやすい 共通言語ができて運用しやすい データがチームの資産に
80. 明日から みんなでデザインを 育てるためのツール として、 Figmaを意識してみよう！ まわりをデザインに巻き込む＝デザインが育つ環境では、 デザイナー自身も育ちやすい
81. ありがとうございました！ 著書 運営コミュニティ つくって学べる はじめてのFigmaデザイン （ソーテック社） みんなのデザインメモ https://minna.designmemo.jp/ その他活動は X @ayumidesign