デザイナーもAIでWebアプリを開発制作！ 制作スピードを高めるAI活用のヒントとは？【後編】

AIで業務を効率化したいけれど、どこから手を付けるべきかわからない。少人数で調査もデザインも実装も回したい。そんな現場の悩みに、企画から開発までを幅広くカバーする「横断型」デザイナー・林貴洋さんの実践から、日々の仕事に効く実践的なAI活用を学びます。（『Web Designing 2025年12月号』より抜粋）

プロフィール

AIでデザインワークフローを効率化

UIデザインは、ラフな体験設計からビジュアル制作、そしてルールチェックによる最終確認まで、いくつもの工程を経て進みます。林さんは各フェーズに最適なAIツールを組み込み、スピードと精度の両立を実現しています。

❶プロトタイプ作成：Figma Makeで初期案を生成しユーザー体験を素早く形に

現状では、アプリケーションのUIデザインを生成AIにすべて任せるのはまだ難しいと感じています。私がAIを活用しているのは、主にデザインの前段階、つまりワイヤーフレーム検討やUI設計の初期フェーズです。

そこで役立つのが、「Figma」に組み込まれた生成AI機能「Figma Make」です。例えば、手続きの流れを時系列で表現するコンテンツを制作する際に、「タイムライン形式のコンテンツを作成してください。盛り込む要素は以下のとおり……」と依頼すると、瞬時に初期レイアウトを生成してくれます。

そのレイアウトを確認しながら「ここにグラフを入れたい」「フォントをこうしたい」とリクエストを重ねることで、構成をブラッシュアップできます。社内で別のデザイナーに依頼して検証すると時間もコストもかかりますが、Figma Makeを使えば1人でブレスト感覚の壁打ちが可能になります。

❷ビジュアル作成：Visual Electricで写実素材を生成し、クリエイティブの共同作業を加速

デザインのモックアップやコンテンツを作成するうえで、ビジュアルは欠かせません。そこで役立っているのが、画像生成に特化したAIサービス「Visual Electric」です。

例えば「街中にある高層ビル」といった、金融系サービスでよく使うビジュアルを生成し、Figmaで作成しているモック画面に持っていって貼り込むことができます。従来はフリー素材を探して加工するか、必要であれば撮影を依頼するしかありませんでした。しかし、Visual Electricを使えば、「写実的な写真風」や「イラスト調」といったテイストを指定するだけで、高品質な画像を短時間で得られます。

特に、日本人を表現するクオリティが高い点は魅力です。ほかの画像生成AIでは不自然さが残ることがありますが、このサービスなら実際のモデルを使って撮影したかのような自然な仕上がりになります。

また、このツールは、ほかの人とプロジェクトを共有する機能があるのも強みです。自分自身で画像を生成するだけでなく、ビジュアルの方向性をチームで探るためのコミュニケーションツールとしても活用できます。

なお、同サービスは、AI企業Perplexityに買収され、2025年末までにサービスを終了するとアナウンスしています。今から新たに課金するかどうかは悩みどころですが、無料でも画像生成を試せるので、一度触れてみる価値はあるでしょう。

❸イラストの作成：Visual Electricで多彩な表現を実現。ChatGPTでプロンプト設計もスムーズに

Visual Electricは、プロンプトを1回入力して生成するだけでなく、AIとの対話を重ねながらブラッシュアップできるのが特長です。エンジニアでなくても自然な会話で求めるビジュアルをつくり出せる点は大きな魅力だと感じています。

また、このツールは写真のようなリアルなビジュアルだけでなく、イラスト生成にも活用できます。プロンプトでタッチを指定することも可能ですが、あらかじめ複数のタッチが用意されており、そこから選んで指定することもできます。たとえば「油彩風」や「フラットなタッチのイラスト」など、幅広い表現が用意されています。

具体的なイメージがあるときは、ChatGPTに「Visual Electricにどう依頼すればいいか」プロンプトを考えてもらうこともあります。求めるタッチのサンプルをChatGPTにアップロードし、「このトーンのイラストを生成するにはどんなプロンプトが適切か」と尋ねるのです。ツールを組み合わせることで、実現したい表現をより素早く形にできます。この手法は、Visual Electric以外の画像生成ツールにも応用できるでしょう。

加えて、Visual Electricは人物素材の背景除去や切り抜きが簡単にできる点も強みです。ボタン1つで背景を自動的に取り除き、髪の毛など細部まで自然に処理してくれます。従来はPhotoshopで時間をかけて行っていた作業を、デザイナー以外のメンバーでも即座に実行できるようになり、業務効率化に直結しています。

❹デザインレビュー：デザインルールを自動でチェックMCPとCursorで品質を担保

デザインの仕上げで重要なのは、ブランドデザインで定義したルールがきちんと守られているかを確認することです。色や余白、コンポーネントの統一を人間が1ページずつチェックするのは膨大な時間がかかるため、私はAIを活用したレビュー環境の自作にチャレンジしています。

その中核にあるのが「MCP（Model Context Protocol）」という仕組みです。これはAIに外部データを読み込ませ、参照できるようにする接続ルールのようなもので、私は自作のMCPサーバを立ち上げ、Figmaのデザインデータやプロダクトのコードにある色定義や記述ルールをまとめて扱えるようにしました。

クライアントには、AI対応のコードエディタ「Cursor」を使っています。Cursor上でFigmaのデザインファイルのURLを渡して「UIをレビューして」と依頼すると、MCPサーバを通じてルールを参照し、「この余白は規定と違います」「この色はパレット外です」といった具体的な指摘を返してくれます。従来ならデザインシステムを整備した大規模チームでしか実現できなかった精緻なチェックを、少人数チームでも再現できるのが大きなメリットです。

もちろんAIの指摘がそのまま正解になるわけではなく、最終的な判断や修正は人間が行います。それでも、「短時間で80点のレビューを返してくれるメンバー」として使うと、非常に頼もしく、作業効率が格段に向上します。

実際に動く成果物を短期間で実装！ デザイナーもAIでWebアプリを開発

プロジェクトではデザインだけでなく、実際に動く仕組みを実装する場面も少なくありません。林さんはAI 対応エディタを活用することで、従来ならエンジニアに依頼していた開発も短時間で形にしています。AI の活用によりデザイナーの業務の幅が広がり、チームの生産性を高めています。

❶イベント用のWebアプリ制作：展示会用のWebアプリを開発Cursor の活用により短期間で形に

展示会に出展する際、来場者にオルタナを知ってもらうためのクイズ形式のWebアプリを制作しました。通常ならエンジニアに依頼する内容ですが、私はAI対応エディタのCursorを使い、要件をそのまま指示してコードを生成しました。最初は不完全でも、エラーを伝えるとAIが修正してくれるため、2時間ほどで実際に動くアプリに仕上がりました。

このアプリでは、メールアドレスをクラウドサービスに保存する仕組みを採用しました。データベースやサーバサイド処理に頼らず、フロントエンドの技術だけで完結しています。

たとえばデザイナーがメインで、少しだけマークアップを理解している程度でも、AIを活用すればWebアプリを作成できます。その際、利用する言語やプラットフォームまで明確に伝えられるようになると、よりスムーズに構築できるでしょう。

❷Figmaプラグインの制作：欲しい機能を指示するだけでCursorがFigmaプラグインを生成

デザインシステムを管理するうえで大変なのは、定義したスタイルを全体にきちんと反映させることです。例えば「すべて黒文字に統一したい」とルールを変更しようとしても、人間の手ですべて置き換えるのは手間がかかります。こうした繰り返し作業を効率化するため、私はFigmaのプラグインを自作しています。

開発にはCursorを活用しています。「指定した色をまとめて置き換えるFigmaプラグインをつくりたい」とCursorに指示すれば、必要なコードやファイル一式を自動で生成してくれます。Figmaプラグインは複数のファイルで構成されますが、Cursorならフォルダごと組み立ててくれるため、専門知識が乏しくても比較的簡単に扱えます。最初に生成されるものは不完全でも、エラーを伝えればすぐに修正案が返ってきて、数時間のやりとりで動作するプラグインが完成します。

従来は、プラグイン開発にはエンジニアの知識が不可欠でした。しかしAIを活用することで、デザイナー自身が必要だと感じた機能を自分でつくり出せるようになったのです。欲しいものを誰もが気軽に形にできることは、AIの大きな恩恵の1つだと思います。

完成したプラグインはローカル環境に読み込めば自分だけで利用できますし、審査を通して公開すればチーム全体でも活用可能です。社内利用に限るなら、フォルダやGitHubで共有するだけですぐに使い始めることができます。

林さんの考える「デザイナーの学習」
言語やツールの前に基盤技術の仕組みを理解しよう！

AIを活用してアプリケーションを手軽に作れるようになった今、デザイナーは何を学ぶべきか……。林さんは、言語やツールの習得に進む前に、まずその基盤となる仕組みを理解することが重要だと話します。

デザイナーは何から学べばいい…？

すでに触れたように、デザイナーもエンジニアリングの知識を身につけることで、できることの幅が大きく広がります。では何から手をつければいいのか。デザインする対象によって答えは変わりますが、サイト制作に関わるのであれば、私はまずJavaScriptから始めることをオススメします。今のWebアプリケーションの基盤はほとんどがJavaScriptで成り立っているからです。

とはいえ、必ずしもデザイナーがゼロから高度なコードを書けるようになる必要はありません。基本的な文法や流儀を押さえておくだけでも大きく違います。AIが生成したコードを少し修正したいとき、基礎知識があれば自分で対応できるようになります。

ただし、本質的に重要なのは言語そのものよりも、エンジニアリングの構造的な概念を理解しておくことだと思います。たとえばFigmaで設計した画面が、裏側のAPIやデータベースとどのようにつながっているのか。UIのデザインとシステムの仕組みを関連づけて理解することが、結果的にデザインの質を高めてくれると思います。

大事なのは、AIやツールの使い方だけではなく、自分が日常的に接しているものがどのような技術で成り立っているのかを理解すること。そうした概念を押さえることが、デザイナーの学びにおいて本当に意味のあることだと感じています。

Interview & Text：小平淳一
※本記事は本誌掲載時の内容をそのまま掲載しています。現在は仕様変更やサービス終了等により、情報が異なる可能性がありますのでご了承ください。