コードスクールナビ AIニュース3 掲示板 給付金ガイド 運営者情報 広告について 1分診断

Figma作業が70%減った理由は生成AIClaude Codeの意外な使い方

編集部コラム更新日: 2026-10-30執筆: 編集部（編集長 佐倉 透）
>_NEWS// NEWSニュース解説Figma作業が70%減った理由は生成AIClaude Code…</>コードスクールナビ

SaaSプロダクトのデザイナーがClaude Codeを使い動くUIモックを作成。Figmaの作業時間が大幅に減り、デザイン業務の進め方が変わった。編集部はコードベースのデザインが効率化の鍵と見る。

出典：note.com（2026年10月29日）

スレの流れ

  1. ニュースデスク「業務委託デザイナーがFigmaから生成AIClaude Codeへ移行し、動くUIモックをGitHubのIssue連携で管理している。既存のshadcnコンポーネントやStorybookを活用し、デザインブランチを「design/」接頭辞で命名。PMやエンジニアと協力しローカル環境を構築した。AIに渡す情報は三層に分け、プロダクト概要や制約は常時与え、画面仕様は必要時に読み込ませる。細かい指示を減らし、大枠を伝えて修正を繰り返す運用だ。2026年の研究で長文の文脈は性能低下、短いやりとりが効果的と示されており、これに合致する。Figmaはバナー制作やアイデア出しに限定し、動くモックで検証時間が減った。AI生成の素材を人間が審美眼で判断する役割は変わらないが、判断材料が絵から動く画面に変わった点を評価している。」
  2. 名無しさん「UIデザイナーは海外で7〜8割くらい失業してると聞いた。」
  3. 名無しさん「環境が揃わなくてすぐには真似できないけど、こういうの事業会社の内製でもできるようになっていかないといけない気がする…」
  4. 名無しさん「FigmaもAdobe XDも最初から無いわー。最終成果物の表現力が無い偽物を使うのは最終成果物を作るための知識やスキルが無いからでしょ？」
  5. 名無しさん「自分は逆にfigmaに回帰したな。figmaのコメントに書きまくって、llmにコメント対応して。が楽」
  6. 名無しさん「個人的には Claude Design の方がピンポイントの修正とかやりやすいかも。Codeにも連携できるし。」
  7. 名無しさん「文脈を三層に分ける設計思想が秀逸。デザインとコードの距離が完全に縮まってるな」

反応の出典：はてなブックマーク（195件）

編集部の井戸端会議

※編集部スタッフ（佐倉・ミナ・タケシ）による会話形式のまとめです。実在の受講者・卒業生の発言ではありません。

ミナ「これ、動くUIモックをAIで作るって何がすごいの？怖くない？」

タケシ「AIのClaude Codeで動くモックをGitHubで管理、Figmaはアイデア用に限定。環境はエンジニアとPMが整備済みだよ。」

ミナ「でもなんで今こんなやり方が注目されてるの？」

タケシ「記事によると2026年の研究で、短いやりとりがAIの性能を保つというのがわかっている。今のAIに合った方法だから。」

ミナ「なるほど。これってデザイナーやPMには何が良いの？」

タケシ「動的モックだから確認が楽で修正もスピーディ。GitHubのIssue連携で進捗や課題が見える化される。」

ミナ「それはPMやエンジニアも助かりそうだね。」

タケシ「そう。複数人で環境共有できて、営業なども動く画面で仕様確認可能になる。」

ミナ「一方で問題点はないの？実際のスレでも「環境が整わず真似できない」とか見かけたけど。」

タケシ「環境構築が必須で、非エンジニアは見る用のデプロイ環境が必要という指摘がある。整備コストは見落とせない。」

ミナ「あとAIが長文で性能落ちるっていうのも気になる。仕様が多い大規模プロジェクトだとどうなる？」

タケシ「仕様情報は三層に分けて必要分だけ渡す方法で対応。NotionやGoogle Docs外部仕様だけだと難しい点もある。」

ミナ「スレではUIデザイナーが失業危機とも言われてるけど、AIに仕事取られるの？」

タケシ「それも指摘されているが、AI生成物の審美眼は人間が担う必要があると記事にある。役割は変化中だね。」

佐倉「プログラミングやAIを学ぶ人は、環境整備やAI連携の実践を今月中に試し、体験できない人は様子見が現実的だね。」

出典

あわせて読みたい

// POLLこのニュース、あなたは歓迎派？慎重派？

みんなのコメント

登録なし・匿名で書き込めます（名前を空欄にすると「名無しさん」）。中傷・個人情報・宣伝・URLは書き込めません。書き込みのルール

    コメントを読み込み中…

    0 / 500

    執筆・検証：コードスクールナビ編集部　編集長 佐倉 透（さくら とおる）

    各スクールの公式サイト・料金表・教育訓練給付の指定講座情報をもとに「教育の質・サポート・実績」の3軸で比較しています。掲載後も公式サイトの料金表示を毎日自動照合し、変化を検出した場合は記事を見直します。広告の有無は評価・掲載順に影響しません。誤りのご指摘は運営者情報から（確認のうえ訂正します）。