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