はじめに
qnote Advent Calendar 2025 15日目の記事です。
私は現在デザインチームのリーダーを務めていますが、実は入社するまではUIデザインの実務経験がありませんでした。そのため、UI検討やワイヤーフレーム作成の初期段階で、方向性の提示に時間がかかることが個人の課題でした。
本記事では、動画配信プラットフォームのUIリニューアルプロジェクトにおいて、Figma Make を活用して「叩き台となるUI案」を自動生成し、ワイヤーフレーム制作の効率を大幅に向上できたプロセスを紹介します。
AIツールをデザインプロセスに組み込むことで、UIデザイン未経験者でもリーダーとしてプロジェクトの初速を大きく高められた実例として参考になれば幸いです！
プロジェクト背景
今回紹介した事例は、弊社の動画配信プラットフォーム”volvol”のUIリニューアルです。動画配信サービスはコンポーネント数が多く、配信者用・視聴者用でも要件が変わるため画面数も多く仕様要件が多岐にわたります。
従来のアプローチでは、既存システム画面を元に構成を再考するだけでも時間を要し、さらに初期段階の方向性の認識合わせに多くのミーティングが必要でした。デザイン経験がない私にとって、特にこの「最初の一歩を形にする」作業は負荷が高く、チーム全体のスピードにも影響していました。
そこで今回、Figma Make を使って UI の叩き台を自動生成する方法を試してみました。
Figma Make で行ったこと
必須コンポーネントと仕様をプロンプト化
まず、動画配信プラットフォームに必要となる要素や仕様を整理し、プロンプトとしてまとめました。
例としては、以下のようなコンポーネントがあります。
- 動画一覧
- 検索バー
- チャンネル一覧
- 動画ステータス別セクション
これらをプロンプトとして Figma Make に提示し、「これらを含むホーム画面をUXを加味して作成して」と依頼しました。
Figma Make による叩き台UIの生成
プロンプトを投入すると、Figma Make は仕様を踏まえたうえで、ワイヤーフレームとしての体裁を備えたUI案を返してくれました。
この時点で、未経験者である自分が0からワイヤーを考えるよりも圧倒的にスピーディに形が出ます。
提案されたUIを調整し、ワイヤーとして整える
生成されたUIは、figma makeのアップデートがありfigma designに直接貼り付けができます(このアップデートは作業効率を上げてくれました。)。これを基に、プロジェクトに合わせて細かな調整を行い、方向性が確認できるレベルのワイヤーフレームに仕上げました。
この段階でも、ベースがあるため意思決定がしやすく、短時間で完成度の高い初期ワイヤーが作成できました。
デザイナーへ共有し、本デザイン作業へ
完成したワイヤーをデザイナーメンバーに共有し、本格的なUIデザインの作成へ進んでもらいました。
経験豊富なデザイナーが、よりクリエイティブな領域に集中できるようになったことも大きなメリットです。
効率化されたポイント
必須コンポーネントを入力するだけでUIの方向性が出る
仕様を整理してプロンプト化することで、Figma Make がそれらを咀嚼し、適切な画面構成を提示してくれました。
要件が複雑なプロダクトの場合でも、AIの補完力により初期案の抜け漏れが大幅に減りました。
初期案を基に議論が進むため、認識合わせが早い
白紙の状態から議論を始める必要がなくなり、叩き台を基に具体的な改善点や方向性を議論できるようになりました。
結果として、方向性の決定にかかる時間は大きく短縮されました。
デザイナーはクリエイティブな作業に集中できる
私が叩き台となるワイヤーを用意することで、デザイナーはレイアウト検討よりも「どう見せるか」に時間を使えるようになり、チームとしての生産性が向上しました。
使用したプロンプト例
動画配信プラットフォームのUIリニューアルを検討しています。
必須コンポーネントは以下です：
- ヒーローセクション（ピックアップ動画）
- 動画ステータス別一覧セクション
- 検索バー
- サイドバー（デフォルト表示）
これらを含み、UXを考慮したホーム画面を作成してください。
導入して良かった点
デザイン未経験でも、短時間で「形」にできるようになった
- 初期の認識合わせが大幅にスムーズになった
- 仕様整理がそのままプロンプトとして機能し、抜け漏れが減少した
- デザイナーとの分業が明確になり、チーム全体の生産性が向上した
- リーダーとして議論の主導がしやすくなった
おわりに
Figma Make を活用することで、デザイン未経験の私でも初期の方向性を素早く提示できるようになり、プロジェクトの推進力が大きく向上しました。
AIツールは「作業の代替」ではなく、アイデア出しや要件整理の相棒として非常に有用だと実感しています。今後は、画面遷移図やフロー全体の自動生成にも活用しながら、より効率的なデザインプロセスを構築していきたいと考えています。