ウェブとUIデザイン向けGemini 3.1

ランディングページ

すべてのAI生成スタートアップページと同じように見えないものが欲しかったのです。それで、「洗練されたモダンなランディングページ」を求める代わりに、プロンプトでスタイルと感覚に重点を置きました。

出力は本当に良かったです。こちらでご覧ください：

レイアウトには本物の階層があり、ホバーステートが機能し、グラデーションアニメーションがスムーズでした。通常の白い背景に青いCTAボタンにデフォルト化されませんでした。フォントの組み合わせを調整しましたが、出発点として、セットアップに少なくとも1時間の節約をもたらしました。

こちらが書いたプロンプトです：

現代の建築スタジオ向けのランディングページ。ページ全体にオフホワイトの背景を使用。エディトリアルヘッドラインを使用、まず画像とコンテンツに重点を置きます。全体的な感覚は冷静さを感じさせ、自己説明を必要としないスタジオのように。

SaaSデザイン

このテストでは、データ、ナビゲーション、複数の状態を持つより複雑なインターフェースをどのように処理するかを見たかったのです。ここでGemini 3.1 Proが本来の力を発揮しました！

コンポーネント構造はクリーンで、カードは適切なスペースを持ち、ステータスバッジが状態に応じて異なる色を実際に使用しています。折れ線グラフが正しく描かれ、データは現実的に見えました。

このテストのために書いたプロンプトは以下のとおりです：

コンテンツマーケティングウェブアプリ向けのSaaS分析ダッシュボード。ライトテーマを使用し、ネオングリーンをアクセントとして使用。LinearやNotionのような感覚を持たせ、レイアウトは密ですが、コンテンツで過密にはしない。

サイドバーのナビゲーション、検索フィールドとアバターを持つトップバー、メインコンテンツエリアには3つのメトリックカードを配置（合計投稿数、平均エンゲージメント、月間リーチを表示）、その下に30日間のトラフィックを表示する積み上げ棒グラフを配置し、ステータスバッジを持つ最近の投稿の表を別のセクションに配置。

LinearやNotionの参照は非常に良く当てはまりました。Geminiは通常AIダッシュボードを年代物に見せる厚い境界線や重い影を避けてくれました。

モバイルデザイン

デスクトップデザインのテストとは別に、モバイルやアプリのデザインをGemini 3.1がどのようにデザインできるかを確認したかったのです。

それを実行するために、プロンプトでUberを参照にして詳細に踏み込まずに、少ない追加コンテキストでどこまで進められるかを見ました。

使用したプロンプト：

Uberにインスパイアされたモノブラックカラーパレットを用いたライトモードの乗車アプリのホームスクリーン。

ご覧の通り、レイアウトはクリーンで、とても明確で大胆なタッチゾーンが配置されています。すべてのインタラクティブ要素が寛大にサイズ設定され、操作がしやすいです。何も注意を奪わない、階層が機能しています。

デッキスライドデザイン

UIテストのほかに、プレゼンテーションスライドをGemini 3.1がどのように処理できるかを知りたかったのです。

出力はかなりクリーンです。大きなヘッドライン、適切なホワイトスペース、スタイルされた統計は大きな数字と下にミュートされたラベルを使用しました。実際にステークホルダーやチームメイトの前に置くための何かに見えました。

使用したプロンプト：

SaaS製品売り込みのためのシングルプレゼンテーションスライドを設計します。最小限のレイアウト、多くの余白。Pitch.comのように考えて、PowerPointではなく。

スライドのタイトルは「なぜ今か？」で、市場タイミングのケースとします。ダークな背景、左に太字の大型ヘッドライン、右に主要な統計データ、例えば「73％のチームがまだこれにスプレッドシートを使用しています。」のように。

How to use Gemini 3.1 Pro

Google AI Studioで使用するかAPI経由で使用できますが、UIデザインを最大限に活用する最良の方法は、モデルが統合された専用ツールを通じてです。

バナーニ

バナーニは、最近Gemini 3.1 Proを使用可能なモデルの1つとして統合したキャンバスベースのUI生成ツールです。簡単なテキストプロンプトからUIデザインの生成とそれらの整理が可能です。

この記事で見た多くの例がGeminiを直接使用してそこに作成されました。

Figmaに似たUIと、Gemini、GPT、ClaudeのようなAIモデルと対話する能力を求めるなら、これは素晴らしい選択です。

さらに、Figmaへのデザインのコピーペースト、コードとしてのエクスポート、またはMCPを介して他のコーディングエージェントに接続することで、通常のワークフローを維持します。

Gemini Canvas

Gemini 3.1 Proにアクセスする最も直接的な方法は、Geminiアプリ自体を通じてです。このアプリには、モデルが生成したものをプレビューするためのキャンバス機能があります。

デザインのためにモデルが何をできるかを探求するための良い出発点です。

この記事を書いている時点では、地域的に制限される場合がありますので、米国外の場合、このプレビュー/キャンバス機能をまだ使用できない可能性があります。

スティッチ

スティッチは、Google Labsの実験的なAIパワー設計ツールです。テキストプロンプトまたはアップロードされた画像を使用して、完全なUIデザインを生成し、コードとしてエクスポート可能です。そこから3.0および3.1 Thinkingを使用できます。

私はスティッチの詳細なレビューとUI生成に使用できる代替品についてのレビューを書きました。

ベストGemini 3.1 Proプロンプト

Gemini 3.1 ProからベストなUIデザイン結果を得るには、プロンプトの方法を切り替える必要があります。雰囲気、レイアウトの詳細、参照に重点を置きます。

多くの詳細を追加する

Geminiが生成するデザインの品質は、提供する詳細の多さに大きく依存します。

すでに画面上でデザインしたい要素がある場合は、非常に具体的に記載してください。モデルはあなたの考えを読み取ることはできません。

感覚を説明する

単に「青いヘッダー」を求めるだけではいけません。Geminiはコードや視覚的なものを理解できるマルチモーダルモデルです。

探求したいデザインの抽象的なテーマやムードを描写することができます。例えば：「個人ポートフォリオのランディングページを構築します。雰囲気はムーディーで、ビクトリアンだがモダン：セリフフォントを使用し、深いチャコールカラーパレットを使用。」

追加のコンテキストを提供

最初のポイントと同様に、提供する情報が多いほど、より良い結果が得られます。Mobbinから好きなUIの画像参照やスクリーンショット、現在のUI、またはナプキンスケッチを添付します。

Geminiに：「これらの画面をできるだけ忠実に再現してください。レイアウト、要素、スタイルを一致させてください。」と言うことができます。視覚的注釈は高優先度の指示として扱われます。

Thinkingを利用する

Gemini Appを使用している場合、複雑なレイアウトに対してThinkingレベルを高に設定できます。生成に時間がかかりますが、モデルは視覚やレイアウト構造を推論することに多くの時間を費やします。

これにより、デザインのレイアウトと視覚的な要素が格段に向上します。

Redditの声

最近のプレローンチ以降、Redditのバイブコーディングとデザインコミュニティはモデルを極限までテストしており、コンセンサスはさまざまです。

いい点

多くのユーザーが、Gemini 3.1 Proがすべての他のフロンティアモデルよりも高得点を得ると報告しており、特にフロントエンドとデザインにおいてその評価は際だっています。

• あるユーザーは10カテゴリーにわたって50の異なるサイトを生成し、「SVGロジックとパディングの一貫性が今やずっと改善されている」こと、また、「プロンプトの改訂を10回も必要とせずに『美学』の指示をついに理解してくれる」と指摘しました。

• 別のユーザーはウェブデザインにおいてClaude Opus 4.6と直接比較し、Geminiの出力が「AIデザイン的でないレベル」で、コントラストとバランスが優れていると指摘しました。

悪い点

しかし、完璧ではありません。

• 主な不満は「無限に考え込んでしまうこと」です。複雑なタスクでは、果てしなく計画を立て、実際のコードを生成する前に長く反復的な推論を行ったままであることです。

• あるユーザーは、単一ショットの推論には驚異的である一方で、複雑なアプリケーションのために自立コードエージェントとして使用すると、Claude Opus 4.6の方が信頼性があり「計画のふらふら」がないため、依然として優先されると指摘しています。

結論

私はデザイン関連のタスクのほとんどに日常的に使用し、AIを使ったUIを生成する際に通常はここから始めます。

Gemini 3.1 Proは、他のモデルからの一般的な紫のグラデーションUI生成に苛立ちを感じているなら、間違いなく時間を投資する価値があります。

それは「空間理解」が強く、プロトタイピングや迅速なレイアウトアイデアに適した強力なAIデザインモデルです。