Google Gemini 3.1 ProのUI生成能力を検証した動画。スキューモーフィックデザイン、WebGLアニメーション、3Dドラッグ可能カード、パララックス効果など、実用的な4つのプロンプト例を通じて、AIによるUI設計の可能性と、UIデザイナーの専門用語を使ったプロンプト技術の重要性を示している。
Gemini 3.1 ProはLLM最強のUIデザイナー
Google Gemini 3.1 Proは、私がこれまで見てきた大規模言語モデルの中でも、おそらく最高のUIデザイナーだと思います。この動画では4つの異なる例と、あなたのUI制作レベルを引き上げるためのプロンプトをご紹介します。ここでお伝えする内容はすべて、ある特定のツイートからヒントを得ていますので、YouTubeの概要欄にリンクを貼っておきます。
例1：スキューモーフィックデザイン × WebGLスター背景
まず最初は、非常にシンプルなプロンプトです。画像を一枚アップロードしました。そして、こう指示しました。「アップロードした画像のコンポーネントを使ってスキューモーフィックUIデザインを作成してください。各カードをCRTモニター風のレトロスタイルにして、ライトのアニメーション、グロー、スキャンラインを加え、WebGLを使って背景の星をアニメートしてください。」
これがGemini 3.1 Proが生成してくれた結果です。背景の星もあり、レトロなデザインもあり、スキューモーフィックなデザインが表現されています。昔のiPhoneのスキューモーフィックデザインを覚えている方も多いと思いますが、私はずっとスキューモーフィックデザインの大ファンで、フラットデザインに飽き飽きした人たちが今またスキューモーフィックに戻ってきているように感じています。
Gemini 3.1 Proを使ってこういったデザインを作らせるのは非常に良い方法です。さらに、追加のプロンプトで最終的な仕上がりをブラッシュアップすることもできます。ここでは「美しいシャドウをより高いコントラストで改善し、上品でハイエンドな長めのシャドウにしてください」と伝えたところ、デザインがさらに洗練されました。
例2：プライシングページ × 3Dドラッグ可能カード
2番目の例でも、最初に画像を用意しました。初期画像から始めるのは常に良い方法です。テキストだけでデザインを作ることも可能ですが、テキストと画像を組み合わせる方がずっと効果的です。モデルが、使いたいカラーパレットやテーマの方向性を理解しやすくなるからです。
インターネットからランダムに画像を一枚拾ってきました。シンプルな料金ページです。そしてこう伝えました。「ダークテーマのピストルカラーパレットを使ったスキューモーフィックUIデザインを作成してください。各カードを3Dドラッグ可能なレトロスタイルにして、ライトアニメーション、グロー、スキャンラインを加え、WebGLで背景の星をアニメートしてください。3Dカード上の文字はMath.jsを使った物理演算を適用してください。」
これが最初のバージョンです。ただ、欲しかったアニメーションや演出が出ていませんでした。そこで追加で「すべてのタイトルにカーソルが末尾に残るタイプライター効果を追加してください」と伝えました。すると、ページが更新されるとタイプライターアニメーションが確認できるようになりました。背景エフェクトも良い感じで、ボタンもきれいで、カードはドラッグ＆ドロップできます。これもすべて、たった一つのプロンプトから生まれたものです。
例3：モバイルUIデザイン × キューモーフィックスタイル
3番目の例では、非常にシンプルなデザインをアップロードしました。モバイルのiOSまたはAndroid向けのデザインです。アップロードした後、こう指示しました。「チャートをアニメートして、ドラッグ可能なカードを追加してください。WebGLノイズを使用し、詳細をアニメートして、興味深いハイライトを加え、UIにキューモーフィックスタイルを使い、極限まで細部にこだわってください。」
こういったコンポーネントをデザインしてネット上で販売する人も多いですが、まさにそれが可能なクオリティです。サンプル画像をアップロードし、プロンプトを入力しただけで、ワンショットでこの結果が得られました。チャートはちゃんとアニメートされていて、細部も見事で、ドラッグ＆ドロップもでき、必要な情報がすべて揃っています。非常に良いデザインが出ました。
例4：レトロフューチャリスト × パララックスと最終仕上げ
最後の例はシンプルなウェブサイトです。ここでも画像をアップロードして、こう伝えました。「モダンでスタイリッシュなアニメーション付きウェブデザインを作成してください。SVGを描画し、小さなアイコンにはアイコンのみを使用してください。詳細をアニメートし、リアルで正確、グラデーションなしで、WebGLノイズを使ったレトロフューチャリストなフラットデザインにしてください。ノイズはWebGLでアニメートすること。ハイパーリアルなスキューモーフィックデザインにしてください。」
これが最初のバージョンです。レトロなテーマが出ていましたが、少し過剰な印象でした。そこで次のように伝えました。「レトロを、力強いスキューモーフィックUIデザイン、キネティックタイポグラフィ、レイヤードヒーローパララックス効果とアニメーションに置き換えてください。」
ここで大切なのは、UIデザイナーが使う言葉そのもので話しかけることです。そのコンテキストに入ることで、モデルの潜在空間においてもUIデザイナーが思考する領域に近づけるからです。UIデザイナーが使う正確な言語でコミュニケーションすれば、より良い結果が得られます。
これが次のバージョンです。かなり良い出来になっています。レイヤードヒーローパララックス効果も確認できます。マウスを動かすと、タイトルと背景アニメーションが連動して動き、キネティックタイポグラフィでタイトルが次々と切り替わっていきます。最後の仕上げとして、「アンビエントモーション、ループするマイクロアニメーション、さりげない放射状グローの背景を追加してください」と伝えました。
プロンプトの質がAIデザインの質を決める
この動画全体を通じて伝えたいことがあります。AIが生成するデザインはどれも似たり寄ったりのスラップで、ネット上のどこにでもある同じ紫のグラデーションにしかならない、という思い込みがあります。でも、そうである必要はありません。モデルが理解できる言語でしっかりとプロンプトを組めば、より良いデザインが得られます。私が感じているのは、Gemini 3.1 Proは全体的に優秀なUIパートナーだということです。
今回は4つの異なる例をご紹介しました。すべての会話ログはYouTubeの概要欄に貼っておきます。また、これらのヒントを共有してくれたMing 2にも感謝します。Gemini 3.1 Proをニッチな用途に使った経験や、フロントエンドデザインに別のLLMを使っている方は、ぜひコメントで教えてください。また次の動画でお会いしましょう。Happy prompting!
コメント