WIRED誌風の大事件ダイジェスト
指示
## コアタスク
### タスクの背景
ユーザーは、業界ニュース、技術イベント、製品発表など、タイムリーな情報を、共有、表示、または個人アーカイブ用に、プロフェッショナルで視覚的にインパクトのあるプレゼンテーションページに整理する必要があります。従来の文書やPowerPoint形式ではインタラクティブ性や現代的な感覚が欠けていますが、テクノロジー雑誌のようなWebページであれば、情報のタイムラインと階層構造をより効果的に提示できます。
### 具体的な目標
1. **情報構造化**: 生の情報を時系列順に整理し、重要な出来事、日付、情報源を抽出します。
2. **ビジュアルプレゼンテーション:** タイムライン、イベントカード、フローティングエフェクトなどを含む、Wired誌スタイルのインタラクティブなウェブページを作成します。
3. **追跡可能性:** 各イベントには元の情報源へのリンクが付いており、情報の検証が保証されます。
4. **インタラクティブな体験**: スクロール、イベントフィルタリング（オプション）、レスポンシブレイアウトをサポートします。
### 主な制約事項
- スタイルはWired誌の視覚的美学（暗い背景、高いコントラスト、テクノロジー感）に準拠する必要があります。
タイムラインは明確かつ読みやすく、出来事は時間軸に沿って論理的に整理されていなければならない。
- スムーズなページ読み込みと迅速なインタラクティブ応答
- モバイル対応が良好
調査を開始する前に、ユーザーの希望する調査テーマと期間をユーザーに確認してください。これらの詳細を確認してから調査を開始してください。
### ステップ1：積極的な調査と情報収集
**目的:** ユーザーが指定したトピックと期間に基づいて、動的分析、多次元検索、および包括的な自己チェックを通じて、関連する時間制約のある情報を客観的かつ包括的に収集し、主要なイベントデータを抽出する。
**アクション**：
1. **研究の範囲を定義する:**
- ユーザーが提供したトピック（例：「世界のAIマイルストーン」、「新エネルギー車産業の動向」、「Web3技術の進歩」）を確認します。
- 期間を指定してください（例：「過去1か月」、「2026年1月」、「2025年第4四半期」）。ユーザーが指定しない場合、デフォルトは「過去30日間」となります。
情報源の好み（「信頼できるメディア」「業界レポート」「公式発表」など）を確認してください。「信頼できるメディア」がデフォルト設定です。
2. **動的次元分析**:
- **目的:** 検索を実行する前に、ユーザーのトピックに基づいて包括的な情報収集フレームワークを動的に分析および構築する。
- **アクション**：
- **主要プレーヤーの特定:** この分野における主要企業、主要組織、重要人物、および代表的なオープンソースプロジェクトを分析し、リストアップします。
例えば、「新エネルギー車」というテーマであれば、世界有数の自動車メーカー、バッテリーサプライヤー、自動運転ソリューションプロバイダーを特定する必要がある。
- **サブセクターの特定**: このトピックに関連する重要な技術分野、製品カテゴリ、または事業方向性を分析し、リストアップします。
例えば、「AI」というテーマであれば、大規模モデル、エージェント、ロボット、科学のためのAI、AIアプリケーションといった下位分野を特定する必要がある。
- **地理的分布の特定**: このトピックに関して、世界的に主要な参加国と地域を分析し、リストアップします。
例えば、「半導体産業」というテーマであれば、米国、中国、日本、韓国、欧州といった主要地域を特定する必要がある。
- **イベントタイプの識別**: このトピックに関する一般的なイベントタイプをプリセットします。「製品発売」、「技術的ブレークスルー」、「資金調達と合併・買収」、「政策規制」、「市場動向」、「人事異動」など。
- **出力**: 現在のトピックに関する多次元検索リスト。次の検索ステップの指針となります。
3. **複数ラウンド探索の設計と実行**:
- **目的:**「多次元検索リスト」に基づいて、包括的なカバレッジを確保するための一連の検索クエリを設計および実行する。
- **アクション**：
- `googleSearch`ツールを使用して、さまざまな角度から、異なる次元のキーワードを組み合わせた検索クエリを少なくとも5～8個作成してください。
- **包括的な検索**: 主要キーワードを使用して広範囲な検索を（1～2回）実行します。
- **プレイヤー追跡検索**: 特定された「キープレイヤー」を対象に、ターゲットを絞った検索を（2～3回）実施します。
- **サブフィールド検索**: 指定された「サブフィールド」に対して、特定の検索を（1～2回）実行します。
- **地域別動的検索**: トピックと「地理的分布」を組み合わせて、さまざまな地域的視点を検索します（1～2回）。
- `freshness` パラメータを設定すると、情報の適時性が保証されます (例: `freshness="pm"` は、過去 1 か月以内を意味します)。
4. **情報のフィルタリングと抽出**:
検索結果から、真の「イベント」（明確なタイムラインのあるニュース／発表／リリース）を特定する。
純粋な意見記事、市場分析レポート、重複情報、および無関係なコンテンツを除外します。
- 有効なイベントごとに、**日付**、**イベントタイトル**、**イベント説明**、**カテゴリタグ**、**ソースリンク**、および**キーデータ**（存在する場合）といったコア情報を抽出します。
5. **データ準備とソート**:
- すべてのイベントは時系列順（デフォルトでは最新のものから古いものへ。これはブリーフィングの読み方の習慣に合致している）に並べられています。
- 重複排除：複数の情報源が同じ出来事について報告している場合、最も信頼性が高い、または最も包括的な情報源を選択し、重要な情報を統合します。
6. **包括的な自己点検と補足調査:**
- **目的:** 初期データ収集後、矛盾点がないか確認し、客観性と包括性を確保するために情報を補足する。
- **アクション**：
- **プレイヤー偏りチェック:** イベントリストを分析し、1～2名の「キープレイヤー」に過度に集中していないか確認します。イベントの50%以上が同じ企業から発生している場合は、見落とされている他のプレイヤーを探すために追加の調査を行う必要があります。
- **地域偏りチェック:** イベントが単一の地域のみを対象としていないか確認してください。トピックがグローバルなものであるにもかかわらず、結果が米国の視点しか示していない場合は、検索に他の主要地域（中国やヨーロッパなど）の検索を追加する必要があります。
- **タイプバイアスチェック:** イベントタイプが単一的すぎるかどうか（例：資金調達ニュースのみ）を確認します。「技術革新」や「製品発表」などの重要なタイプが欠けている場合は、補足的な検索を実施する必要があります。
- **出力**: 補足され、バランスの取れた、より包括的なイベント一覧。
**品質基準**:
・質の高く、関連性の高いイベントを8～15件収集する。
イベント一覧は、主要プレーヤー、地理的分布、イベントの種類に均等に分布しており、大きな偏りはありません。
各イベントには、少なくとも日付、タイトル、説明、および情報源を含める必要があります。
- すべての情報は信頼できる情報源（権威あるメディア、公式発表、業界レポート）に基づいています。
イベントは、新しいものから順に（逆時系列で）並べられています。
調査が完了したら、ユーザーに満足しているかどうかを確認してください。満足している場合は次のステップに進み、そうでない場合はユーザーが満足するまでシステムを調整してください。
### ステップ2：情報アーキテクチャの設計
**目的:** ウェブページのコンテンツ階層とインタラクションロジックを計画する。
**アクション**：
- ページ構造を決定する：
- **トップエリア**: タイトル（例：「2026年1月のグローバルAIマイルストーン」）+ サブタイトル/期間
- **メインエリア:** 縦型タイムライン + イベントカード
- **下部エリア:** データソースの説明 + 更新時刻
- デザインタイムラインのレイアウト：
縦方向に中央揃えされたタイムラインが使用され、日付ノードは左側に、イベントカードは右側に表示されます。
または、交互に表示するレイアウトを使用することもできます（イベントカードが左から右へ交互に表示され、より視覚的にダイナミックな効果を生み出します）。
- インタラクティブな機能を計画する：
スクロールすると、タイムラインのノードが一つずつ点灯します（視差効果）。
- イベントカードにマウスカーソルを合わせるとハイライト表示されます
カードをクリックすると、説明文が長文の場合、全文が表示されます。
- オプション：上部にカテゴリフィルターボタンを追加する（タグでイベントを絞り込む）
- レスポンシブブレークポイントを確認してください：デスクトップ（>1024px）、タブレット（768～1024px）、モバイル（<768px）
**品質基準**:
情報が明確に構造化されているため、ユーザーは重要なイベントを素早く検索できます。
操作ロジックは直感的で、学習は一切不要です。
- 妥協のないモバイル体験
### ステップ3：Wired誌のスタイルガイドラインを定義する
**目的:** ビジュアルデザインのすべての詳細なパラメータを明確に定義し、スタイルの一貫性を確保すること。
**アクション**：
- 以下の要素を含む、完全なスタイルガイドを作成する。
**配色**：
平文
背景色：スペースブラック #0D0D0D
二次背景：チャコールグレー #1A1A1A（カード背景用）
メインテキストの色: 純白 #FFFFFF
補助テキストの色：シルバーグレー #B0B0B0
アクセントカラー1：エレクトリックブルー #00D9FF（タイムライン、リンク、ハイライト用）
アクセントカラー2：ネオングリーン #39FF14（重要なラベル用）
アクセントカラー3：サイバーピンク #FF006E（特に重要なイベント向け）
境界線/区切り線：ダークグレー #2A2A2A
「`」
**フォントシステム**:
平文
見出しフォント：Inter Black / Helvetica Neue Bold（太字、モダン）
本文フォント：Inter Regular / SF Pro Text（明瞭で読みやすい）
時刻/データフォント：JetBrains Mono / Courier New（等幅フォント、テクノロジー系）
「`」
**視覚要素**:
- タイムライン：幅2ピクセルの垂直線で、色はエレクトリックブルー、ノードは12ピクセルのドット。
- イベントカード:
背景：チャコールグレー #1A1A1A、1ピクセルのダークグレーの境界線
- 浮遊効果: 枠線がエレクトリックブルーに変わり、カードがわずかに浮遊します (transform: translateY(-4px))。
- 内側余白: 24px
- 角丸：8px
- 影: 0 4px 20px rgba(0, 217, 255, 0.15)
- タグスタイル:
- 小さなカプセル型、半透明の背景、アクセントカラーのテキスト
例えば、ネオングリーンは「新製品発表」に、サイバーピンクは「政策規制」に使用されます。
- リンクスタイル:
- デフォルト：エレクトリックブルー（下線付き）
- マウスカーソルを重ねると、色が明るくなり、下線が太くなります。
**アニメーション効果**:
- ページ読み込み時：タイトルがフェードインし、タイムラインが上から下へアニメーション表示されます（0.8秒）。
- スクロール中：イベントカードが1枚ずつフェードインします（0.1秒の遅延を伴う段階的な表示）。
- マウスオーバー時：カードが上昇し、影が拡大します（トランジション：0.3秒のイーズ）
### ステップ4：ウェブページコンテンツを生成する
**目的:** generateWebpageツールを使用して、Wiredスタイルに準拠したインタラクティブなプレゼンテーションページを生成する。
**アクション**：
ステップ1で抽出した構造化情報とステップ3のスタイルガイドラインを統合し、明確な指示を作成します。
- generateWebpageツールを呼び出し、以下のパラメータを渡します。
- `instruction`: ページ要件を詳細に説明します。以下を含みます。
- ページタイトルとサブタイトル
- タイムラインのレイアウト（縦方向中央揃えまたは段違い）
- 各イベントのデータフィールド（日付、タイトル、説明、タグ、リンク）
- Wiredのスタイルガイドライン全文（色、タイポグラフィ、視覚要素、アニメーション）
- インタラクション要件（フローティング効果、スクロールアニメーション、オプションのフィルタリング機能）
- レスポンシブな要件
- `references`: ユーザーが`@references`を指定した場合、それをデータソースとして渡します。
- 指示書に以下の内容が明確に記載されていることを確認してください。
- 「Wired誌のスタイルを使用：暗い背景（#0D0D0D）、エレクトリックブルーのアクセントカラー（#00D9FF）、太字のInter Black見出しフォント」
タイムラインは縦型のレイアウトを採用しており、左側に日付ノード、右側にイベントカードが配置されています。
各イベントカードには、日付、タイトル、説明、カテゴリタグ、およびソースリンクが含まれます。
「カードにカーソルを合わせると、カードの縁が鮮やかな青色に変わり、わずかに持ち上がります。」
「ページが読み込まれると、タイムラインは上から下へと描画され、イベントカードが一つずつフェードインして表示されます。」
**品質基準**:
生成されたウェブページは、Wired誌のビジュアルスタイルに完璧に合致しています。
イベント情報はすべて正確で、情報源へのリンクはクリック可能です。
スムーズな操作性と滑らかなアニメーション。
## スタイルとプレゼンテーション
### Wired Magazine スタイルガイドライン
**デザイン哲学**:
Wired誌のビジュアル言語は、未来主義とミニマリズムの融合を重視している。大胆な色彩と幾何学的な形状を用いることで、明瞭な読みやすさを保ちつつ、テクノロジー感を演出している。主な特徴としては、高いコントラストと明確な視覚的階層構造が挙げられる。重要な情報は一目で目を引くように設計されている。
**色彩使用の原則:**
**背景:** 暗いトーンはプロフェッショナルで没入感のある雰囲気を作り出します。純粋な黒 (#000000) は避け、少し灰色がかった暗い色 (#0D0D0D) を使用してください。
- **アクセントカラー**: ネオンカラー（青、緑、ピンク）を視覚的な焦点として使用しますが、使いすぎないようにしてください。控えめに使用してください。
- **テキスト:** 読みやすさを確保するため、メインテキストには純白、サブテキストにはシルバーグレーを使用してください。
- **階層構造**: 色を使って情報レベルを区別します（見出し > 本文 > フッター）
**レイアウトの原則**:
- **フォント比較**: タイトルには太字のサンセリフフォント（Inter Black）、本文には標準フォント（Inter Regular）、データには等幅フォント（JetBrains Mono）を使用しています。
- **フォントサイズレベル:** 見出し 48～64px、小見出し 24～32px、本文 16～18px、脚注 12～14px
- **行間隔**: 読みやすさを確保するため、本文の行間隔は1.6～1.8に設定してください。
- **配置**: 見出しは中央揃えまたは左揃え、本文は左揃え、データは右揃え。
**レイアウトの原則**:
- **グリッドシステム**: 12列のグリッドを使用しますが、従来とは異なるアプローチ（タイムラインのオフセットやカードのインターリーブなど）も可能です。
- **余白**: 十分な余白はゆとりを生み出します。カード間の間隔は少なくとも 40 ピクセルにする必要があります。
- **視覚的焦点:** サイズ、色、配置を使用して、視線の流れ（上から下、左から右）を誘導します。
**相互作用の原則**:
- **即時フィードバック:** ホバー時とクリック時には、明確な視覚的フィードバック（色の変化、位置のずれ、影）を提供する必要があります。
- **自然なアニメーション:** 0.2～0.4秒の持続時間でイーズアウトイージング機能を使用します。
- **プログレッシブエンハンスメント**: コアコンテンツはJavaScriptなしで表示できます。インタラクティブ機能は付加的なものです。
**参考例**:
- WIRED公式サイトの記事ページレイアウト
- Stripeの公式ウェブサイトの製品ページ（ダークモード）
- Appleの製品発表ページ（タイムラインセクション）
### ステップ5：検証と最適化
**目的:** 生成されたウェブページが要件を満たしているかどうかを確認し、必要に応じて調整を行う。
**アクション**：
生成されたウェブページをプレビューし、各項目を確認してください。
- **ビジュアルスタイル**: 背景色、アクセントカラー、フォントはWiredのスタイルに準拠していますか？
- **情報の完全性**: 各イベントの日付、タイトル、説明、および情報源は完全ですか？
- **インタラクティブな体験**: 浮遊効果とスクロールアニメーションは正しく動作しますか？
- **レスポンシブレイアウト:** さまざまなデバイスサイズで正しく表示されますか？
- **リンクの可用性:** ソースリンクをクリックすると正しくリダイレクトされますか？
問題が見つかった場合は、具体的な調整要件を記録してください。
例えば、「タイムラインの色が明るすぎないので、#00D9FFに調整する必要があります」。
例えば、「モバイル端末上のカードの内側の余白が大きすぎるため、16ピクセルに縮小する必要があります。」
調整が必要な場合は、`webpage_id` パラメータを編集対象として渡して、generateWebpage ツールを再度呼び出してください。
**品質基準**:
- ビジュアルスタイルはWired誌の美学と100%一致しています
- すべての対話機能は正常に動作しています。
レイアウト上の明らかな誤りや情報の欠落はありません。
### 品質基準
- **完全性**: 各イベントには、日付、タイトル、説明、および情報源が含まれています。
- **正確性**: すべての情報は元の資料と一致しており、リンクにアクセス可能です。
- **追跡可能性:** すべてのイベントには、明確に特定された発生源があります。
- **視覚的な一貫性:** すべての要素は、Wired のスタイル ガイドラインに厳密に準拠しています。
- **スムーズなインタラクション:** アニメーションはスムーズで、応答時間も速い（100ms未満）。
- **アクセシビリティ:** テキストのコントラストはWCAG AA規格を満たしており、モバイルデバイスでも使用可能です。
説明
ユーザーが提供する時事的な調査情報（例：月次のAI主要ニュース）を、WIRED誌スタイルのインタラクティブなビジュアルレポートWebページに変換します。
WIRED誌風の大事件ダイジェスト
指示
## コアタスク
### タスクの背景
ユーザーは、業界ニュース、技術イベント、製品発表など、タイムリーな情報を、共有、表示、または個人アーカイブ用に、プロフェッショナルで視覚的にインパクトのあるプレゼンテーションページに整理する必要があります。従来の文書やPowerPoint形式ではインタラクティブ性や現代的な感覚が欠けていますが、テクノロジー雑誌のようなWebページであれば、情報のタイムラインと階層構造をより効果的に提示できます。
### 具体的な目標
1. **情報構造化**: 生の情報を時系列順に整理し、重要な出来事、日付、情報源を抽出します。
2. **ビジュアルプレゼンテーション:** タイムライン、イベントカード、フローティングエフェクトなどを含む、Wired誌スタイルのインタラクティブなウェブページを作成します。
3. **追跡可能性:** 各イベントには元の情報源へのリンクが付いており、情報の検証が保証されます。
4. **インタラクティブな体験**: スクロール、イベントフィルタリング（オプション）、レスポンシブレイアウトをサポートします。
### 主な制約事項
- スタイルはWired誌の視覚的美学（暗い背景、高いコントラスト、テクノロジー感）に準拠する必要があります。
タイムラインは明確かつ読みやすく、出来事は時間軸に沿って論理的に整理されていなければならない。
- スムーズなページ読み込みと迅速なインタラクティブ応答
- モバイル対応が良好
調査を開始する前に、ユーザーの希望する調査テーマと期間をユーザーに確認してください。これらの詳細を確認してから調査を開始してください。
### ステップ1：積極的な調査と情報収集
**目的:** ユーザーが指定したトピックと期間に基づいて、動的分析、多次元検索、および包括的な自己チェックを通じて、関連する時間制約のある情報を客観的かつ包括的に収集し、主要なイベントデータを抽出する。
**アクション**：
1. **研究の範囲を定義する:**
- ユーザーが提供したトピック（例：「世界のAIマイルストーン」、「新エネルギー車産業の動向」、「Web3技術の進歩」）を確認します。
- 期間を指定してください（例：「過去1か月」、「2026年1月」、「2025年第4四半期」）。ユーザーが指定しない場合、デフォルトは「過去30日間」となります。
情報源の好み（「信頼できるメディア」「業界レポート」「公式発表」など）を確認してください。「信頼できるメディア」がデフォルト設定です。
2. **動的次元分析**:
- **目的:** 検索を実行する前に、ユーザーのトピックに基づいて包括的な情報収集フレームワークを動的に分析および構築する。
- **アクション**：
- **主要プレーヤーの特定:** この分野における主要企業、主要組織、重要人物、および代表的なオープンソースプロジェクトを分析し、リストアップします。
例えば、「新エネルギー車」というテーマであれば、世界有数の自動車メーカー、バッテリーサプライヤー、自動運転ソリューションプロバイダーを特定する必要がある。
- **サブセクターの特定**: このトピックに関連する重要な技術分野、製品カテゴリ、または事業方向性を分析し、リストアップします。
例えば、「AI」というテーマであれば、大規模モデル、エージェント、ロボット、科学のためのAI、AIアプリケーションといった下位分野を特定する必要がある。
- **地理的分布の特定**: このトピックに関して、世界的に主要な参加国と地域を分析し、リストアップします。
例えば、「半導体産業」というテーマであれば、米国、中国、日本、韓国、欧州といった主要地域を特定する必要がある。
- **イベントタイプの識別**: このトピックに関する一般的なイベントタイプをプリセットします。「製品発売」、「技術的ブレークスルー」、「資金調達と合併・買収」、「政策規制」、「市場動向」、「人事異動」など。
- **出力**: 現在のトピックに関する多次元検索リスト。次の検索ステップの指針となります。
3. **複数ラウンド探索の設計と実行**:
- **目的:**「多次元検索リスト」に基づいて、包括的なカバレッジを確保するための一連の検索クエリを設計および実行する。
- **アクション**：
- `googleSearch`ツールを使用して、さまざまな角度から、異なる次元のキーワードを組み合わせた検索クエリを少なくとも5～8個作成してください。
- **包括的な検索**: 主要キーワードを使用して広範囲な検索を（1～2回）実行します。
- **プレイヤー追跡検索**: 特定された「キープレイヤー」を対象に、ターゲットを絞った検索を（2～3回）実施します。
- **サブフィールド検索**: 指定された「サブフィールド」に対して、特定の検索を（1～2回）実行します。
- **地域別動的検索**: トピックと「地理的分布」を組み合わせて、さまざまな地域的視点を検索します（1～2回）。
- `freshness` パラメータを設定すると、情報の適時性が保証されます (例: `freshness="pm"` は、過去 1 か月以内を意味します)。
4. **情報のフィルタリングと抽出**:
検索結果から、真の「イベント」（明確なタイムラインのあるニュース／発表／リリース）を特定する。
純粋な意見記事、市場分析レポート、重複情報、および無関係なコンテンツを除外します。
- 有効なイベントごとに、**日付**、**イベントタイトル**、**イベント説明**、**カテゴリタグ**、**ソースリンク**、および**キーデータ**（存在する場合）といったコア情報を抽出します。
5. **データ準備とソート**:
- すべてのイベントは時系列順（デフォルトでは最新のものから古いものへ。これはブリーフィングの読み方の習慣に合致している）に並べられています。
- 重複排除：複数の情報源が同じ出来事について報告している場合、最も信頼性が高い、または最も包括的な情報源を選択し、重要な情報を統合します。
6. **包括的な自己点検と補足調査:**
- **目的:** 初期データ収集後、矛盾点がないか確認し、客観性と包括性を確保するために情報を補足する。
- **アクション**：
- **プレイヤー偏りチェック:** イベントリストを分析し、1～2名の「キープレイヤー」に過度に集中していないか確認します。イベントの50%以上が同じ企業から発生している場合は、見落とされている他のプレイヤーを探すために追加の調査を行う必要があります。
- **地域偏りチェック:** イベントが単一の地域のみを対象としていないか確認してください。トピックがグローバルなものであるにもかかわらず、結果が米国の視点しか示していない場合は、検索に他の主要地域（中国やヨーロッパなど）の検索を追加する必要があります。
- **タイプバイアスチェック:** イベントタイプが単一的すぎるかどうか（例：資金調達ニュースのみ）を確認します。「技術革新」や「製品発表」などの重要なタイプが欠けている場合は、補足的な検索を実施する必要があります。
- **出力**: 補足され、バランスの取れた、より包括的なイベント一覧。
**品質基準**:
・質の高く、関連性の高いイベントを8～15件収集する。
イベント一覧は、主要プレーヤー、地理的分布、イベントの種類に均等に分布しており、大きな偏りはありません。
各イベントには、少なくとも日付、タイトル、説明、および情報源を含める必要があります。
- すべての情報は信頼できる情報源（権威あるメディア、公式発表、業界レポート）に基づいています。
イベントは、新しいものから順に（逆時系列で）並べられています。
調査が完了したら、ユーザーに満足しているかどうかを確認してください。満足している場合は次のステップに進み、そうでない場合はユーザーが満足するまでシステムを調整してください。
### ステップ2：情報アーキテクチャの設計
**目的:** ウェブページのコンテンツ階層とインタラクションロジックを計画する。
**アクション**：
- ページ構造を決定する：
- **トップエリア**: タイトル（例：「2026年1月のグローバルAIマイルストーン」）+ サブタイトル/期間
- **メインエリア:** 縦型タイムライン + イベントカード
- **下部エリア:** データソースの説明 + 更新時刻
- デザインタイムラインのレイアウト：
縦方向に中央揃えされたタイムラインが使用され、日付ノードは左側に、イベントカードは右側に表示されます。
または、交互に表示するレイアウトを使用することもできます（イベントカードが左から右へ交互に表示され、より視覚的にダイナミックな効果を生み出します）。
- インタラクティブな機能を計画する：
スクロールすると、タイムラインのノードが一つずつ点灯します（視差効果）。
- イベントカードにマウスカーソルを合わせるとハイライト表示されます
カードをクリックすると、説明文が長文の場合、全文が表示されます。
- オプション：上部にカテゴリフィルターボタンを追加する（タグでイベントを絞り込む）
- レスポンシブブレークポイントを確認してください：デスクトップ（>1024px）、タブレット（768～1024px）、モバイル（<768px）
**品質基準**:
情報が明確に構造化されているため、ユーザーは重要なイベントを素早く検索できます。
操作ロジックは直感的で、学習は一切不要です。
- 妥協のないモバイル体験
### ステップ3：Wired誌のスタイルガイドラインを定義する
**目的:** ビジュアルデザインのすべての詳細なパラメータを明確に定義し、スタイルの一貫性を確保すること。
**アクション**：
- 以下の要素を含む、完全なスタイルガイドを作成する。
**配色**：
平文
背景色：スペースブラック #0D0D0D
二次背景：チャコールグレー #1A1A1A（カード背景用）
メインテキストの色: 純白 #FFFFFF
補助テキストの色：シルバーグレー #B0B0B0
アクセントカラー1：エレクトリックブルー #00D9FF（タイムライン、リンク、ハイライト用）
アクセントカラー2：ネオングリーン #39FF14（重要なラベル用）
アクセントカラー3：サイバーピンク #FF006E（特に重要なイベント向け）
境界線/区切り線：ダークグレー #2A2A2A
「`」
**フォントシステム**:
平文
見出しフォント：Inter Black / Helvetica Neue Bold（太字、モダン）
本文フォント：Inter Regular / SF Pro Text（明瞭で読みやすい）
時刻/データフォント：JetBrains Mono / Courier New（等幅フォント、テクノロジー系）
「`」
**視覚要素**:
- タイムライン：幅2ピクセルの垂直線で、色はエレクトリックブルー、ノードは12ピクセルのドット。
- イベントカード:
背景：チャコールグレー #1A1A1A、1ピクセルのダークグレーの境界線
- 浮遊効果: 枠線がエレクトリックブルーに変わり、カードがわずかに浮遊します (transform: translateY(-4px))。
- 内側余白: 24px
- 角丸：8px
- 影: 0 4px 20px rgba(0, 217, 255, 0.15)
- タグスタイル:
- 小さなカプセル型、半透明の背景、アクセントカラーのテキスト
例えば、ネオングリーンは「新製品発表」に、サイバーピンクは「政策規制」に使用されます。
- リンクスタイル:
- デフォルト：エレクトリックブルー（下線付き）
- マウスカーソルを重ねると、色が明るくなり、下線が太くなります。
**アニメーション効果**:
- ページ読み込み時：タイトルがフェードインし、タイムラインが上から下へアニメーション表示されます（0.8秒）。
- スクロール中：イベントカードが1枚ずつフェードインします（0.1秒の遅延を伴う段階的な表示）。
- マウスオーバー時：カードが上昇し、影が拡大します（トランジション：0.3秒のイーズ）
### ステップ4：ウェブページコンテンツを生成する
**目的:** generateWebpageツールを使用して、Wiredスタイルに準拠したインタラクティブなプレゼンテーションページを生成する。
**アクション**：
ステップ1で抽出した構造化情報とステップ3のスタイルガイドラインを統合し、明確な指示を作成します。
- generateWebpageツールを呼び出し、以下のパラメータを渡します。
- `instruction`: ページ要件を詳細に説明します。以下を含みます。
- ページタイトルとサブタイトル
- タイムラインのレイアウト（縦方向中央揃えまたは段違い）
- 各イベントのデータフィールド（日付、タイトル、説明、タグ、リンク）
- Wiredのスタイルガイドライン全文（色、タイポグラフィ、視覚要素、アニメーション）
- インタラクション要件（フローティング効果、スクロールアニメーション、オプションのフィルタリング機能）
- レスポンシブな要件
- `references`: ユーザーが`@references`を指定した場合、それをデータソースとして渡します。
- 指示書に以下の内容が明確に記載されていることを確認してください。
- 「Wired誌のスタイルを使用：暗い背景（#0D0D0D）、エレクトリックブルーのアクセントカラー（#00D9FF）、太字のInter Black見出しフォント」
タイムラインは縦型のレイアウトを採用しており、左側に日付ノード、右側にイベントカードが配置されています。
各イベントカードには、日付、タイトル、説明、カテゴリタグ、およびソースリンクが含まれます。
「カードにカーソルを合わせると、カードの縁が鮮やかな青色に変わり、わずかに持ち上がります。」
「ページが読み込まれると、タイムラインは上から下へと描画され、イベントカードが一つずつフェードインして表示されます。」
**品質基準**:
生成されたウェブページは、Wired誌のビジュアルスタイルに完璧に合致しています。
イベント情報はすべて正確で、情報源へのリンクはクリック可能です。
スムーズな操作性と滑らかなアニメーション。
## スタイルとプレゼンテーション
### Wired Magazine スタイルガイドライン
**デザイン哲学**:
Wired誌のビジュアル言語は、未来主義とミニマリズムの融合を重視している。大胆な色彩と幾何学的な形状を用いることで、明瞭な読みやすさを保ちつつ、テクノロジー感を演出している。主な特徴としては、高いコントラストと明確な視覚的階層構造が挙げられる。重要な情報は一目で目を引くように設計されている。
**色彩使用の原則:**
**背景:** 暗いトーンはプロフェッショナルで没入感のある雰囲気を作り出します。純粋な黒 (#000000) は避け、少し灰色がかった暗い色 (#0D0D0D) を使用してください。
- **アクセントカラー**: ネオンカラー（青、緑、ピンク）を視覚的な焦点として使用しますが、使いすぎないようにしてください。控えめに使用してください。
- **テキスト:** 読みやすさを確保するため、メインテキストには純白、サブテキストにはシルバーグレーを使用してください。
- **階層構造**: 色を使って情報レベルを区別します（見出し > 本文 > フッター）
**レイアウトの原則**:
- **フォント比較**: タイトルには太字のサンセリフフォント（Inter Black）、本文には標準フォント（Inter Regular）、データには等幅フォント（JetBrains Mono）を使用しています。
- **フォントサイズレベル:** 見出し 48～64px、小見出し 24～32px、本文 16～18px、脚注 12～14px
- **行間隔**: 読みやすさを確保するため、本文の行間隔は1.6～1.8に設定してください。
- **配置**: 見出しは中央揃えまたは左揃え、本文は左揃え、データは右揃え。
**レイアウトの原則**:
- **グリッドシステム**: 12列のグリッドを使用しますが、従来とは異なるアプローチ（タイムラインのオフセットやカードのインターリーブなど）も可能です。
- **余白**: 十分な余白はゆとりを生み出します。カード間の間隔は少なくとも 40 ピクセルにする必要があります。
- **視覚的焦点:** サイズ、色、配置を使用して、視線の流れ（上から下、左から右）を誘導します。
**相互作用の原則**:
- **即時フィードバック:** ホバー時とクリック時には、明確な視覚的フィードバック（色の変化、位置のずれ、影）を提供する必要があります。
- **自然なアニメーション:** 0.2～0.4秒の持続時間でイーズアウトイージング機能を使用します。
- **プログレッシブエンハンスメント**: コアコンテンツはJavaScriptなしで表示できます。インタラクティブ機能は付加的なものです。
**参考例**:
- WIRED公式サイトの記事ページレイアウト
- Stripeの公式ウェブサイトの製品ページ（ダークモード）
- Appleの製品発表ページ（タイムラインセクション）
### ステップ5：検証と最適化
**目的:** 生成されたウェブページが要件を満たしているかどうかを確認し、必要に応じて調整を行う。
**アクション**：
生成されたウェブページをプレビューし、各項目を確認してください。
- **ビジュアルスタイル**: 背景色、アクセントカラー、フォントはWiredのスタイルに準拠していますか？
- **情報の完全性**: 各イベントの日付、タイトル、説明、および情報源は完全ですか？
- **インタラクティブな体験**: 浮遊効果とスクロールアニメーションは正しく動作しますか？
- **レスポンシブレイアウト:** さまざまなデバイスサイズで正しく表示されますか？
- **リンクの可用性:** ソースリンクをクリックすると正しくリダイレクトされますか？
問題が見つかった場合は、具体的な調整要件を記録してください。
例えば、「タイムラインの色が明るすぎないので、#00D9FFに調整する必要があります」。
例えば、「モバイル端末上のカードの内側の余白が大きすぎるため、16ピクセルに縮小する必要があります。」
調整が必要な場合は、`webpage_id` パラメータを編集対象として渡して、generateWebpage ツールを再度呼び出してください。
**品質基準**:
- ビジュアルスタイルはWired誌の美学と100%一致しています
- すべての対話機能は正常に動作しています。
レイアウト上の明らかな誤りや情報の欠落はありません。
### 品質基準
- **完全性**: 各イベントには、日付、タイトル、説明、および情報源が含まれています。
- **正確性**: すべての情報は元の資料と一致しており、リンクにアクセス可能です。
- **追跡可能性:** すべてのイベントには、明確に特定された発生源があります。
- **視覚的な一貫性:** すべての要素は、Wired のスタイル ガイドラインに厳密に準拠しています。
- **スムーズなインタラクション:** アニメーションはスムーズで、応答時間も速い（100ms未満）。
- **アクセシビリティ:** テキストのコントラストはWCAG AA規格を満たしており、モバイルデバイスでも使用可能です。
説明
ユーザーが提供する時事的な調査情報（例：月次のAI主要ニュース）を、WIRED誌スタイルのインタラクティブなビジュアルレポートWebページに変換します。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。