Gemini 2.5 Pro は現在 WebDev Arena ランキングで第 1 位に位置しており、このランキングは人間がモデル構築において美しくかつ機能的な Web アプリケーションを作成する能力に対する好みを測定しています。WebDev Arena について簡単に説明すると、これは LMArena によって開発されたサブランキングで、ウェブフロントエンド開発タスク（例えば：HTML、CSS、JS）を評価するために設立されたものであり、最も有名な大規模モデルの盲検競技場の一つです。これはいくつかの伝統的なテストセットとは異なり、ユーザーは提示されたキーワードを通じて 2 つのモデルの結果をテストする前に、比較対象が誰であるかを全く知らず、客観的な結果データに基づいてスコアを付けます。したがって、データの真実性と権威性は目に見えるものです。
Google AI Studio を使用して、ドロップダウンボックスから Gemini 2.5 Pro Preview 05-06 を選択します。
構造化プロンプト:#
# 目標
Microsoft の最新の財務報告データに基づいて、専門的かつ動的な HTML ウェブページを生成します。
# ステップ要件
## 1. データ収集
- Microsoft の最新の完全な財務報告内容を収集します。
- 検索を通じて欠落しているデータを補完し、データに漏れがないことを確認します。
## 2. 財務報告分析
- 収集および補完した完全な財務報告情報に基づいて、詳細かつ専門的な財務データ分析を行います。
## 3. ウェブページ生成
- 財務報告内容と分析結果に基づいて、HTML 動的ウェブページを作成します。
# 視覚と開発規範
## デザインスタイル
- **Bento Grid** スタイルのレイアウトを使用します。
- 背景色とテーマ色は **アリババ公式ウェブサイト** を参考にし（Microsoft ブランドのトーンに適応するために適宜調整可能）、使用します。
## 文字排版
- 中英文混合で、中文は大きなフォントサイズと太字を使用し、英語は補助的な装飾として使用します。
## 視覚要素
- ページ内で超大きな視覚要素を使用して核心内容を強調し、小さな要素との強い対比を形成します。
- グラフや視覚化要素は規範的に線を引き、グラフィカルに表現します。
## 色彩運用
- ハイライト色は自身の透明度のグラデーションを使用してテクノロジー感を演出します。
- 異なるハイライト色の重なりを避けます。
## 動的効果デザイン
- **Apple公式ウェブサイト** を参考に、下にスクロールする際の動的効果を実現します。
- **Framer Motion**（CDNを通じて導入）を使用して動的効果を処理します。
## 技術スタック要件
- HTML5
- TailwindCSS 3.0+（CDNを通じて導入）
- 必要な JavaScript スクリプトのサポート。
## グラフとアイコン
- データはオンライングラフコンポーネントを参照できます（スタイルは全体のテーマと一致させる必要があります）。
- **Font Awesome** や **Material Icons** のような専門的なアイコンライブラリを使用します（CDNを通じて導入）。
- 主なアイコンとして絵文字の使用を避けます。
# その他の要件
- 内容は完全でなければならず、重要な情報を省略してはいけません。