xuetong932-hub/Tech-website-skill

テクノロジーブランド展示ウェブサイト

ブランドのポジショニングを、Awwwards レベルの完成度を追求した、すぐに開けるテクノロジーウェブサイトに変換します。完全な index.html を提供し、すべてのスタイル、インタラクション、レスポンシブロジックを含め、擬似コードや重要な部分の省略は行いません。品質目標は、受賞やブランドの保証を意味するものではありません。

使用法と出力

• ユーザーから提供されたブランド名、製品、対象ユーザー、言語、素材、CTA 目標、および既存のコードを読み取ります。ユーザーの新しい要件は、このスキルのデフォルト値よりも優先されます。
• 情報が不足している場合は、明確なデモブランドと一貫性のあるコピーを使用してページを完成させます。実際の顧客、認証、パフォーマンススコア、受賞情報をでっち上げないでください。サンプルデータはデモ値であると識別できる必要があります。
• デフォルトの言語は中国語です。まずコアブランドのストーリーとビジュアルの主軸を決定し、以下のデザイン特徴を融合させます。複数のブランドのロゴやタイポグラフィを機械的に貼り付けないようにします。
• ウェブサイトを生成するときは、タスクの書き込み可能な出力ディレクトリに index.html を保存します。ユーザーがコードの直接出力を要求した場合は、完全な HTML コードブロックで応答します。ユーザーがファイルを要求した場合は、ファイルリンクを提供します。スキル自体の生成を、サンプルウェブサイトの生成リクエストと誤解しないでください。
• これはローカル HTML 作成ワークフローです。ユーザーがデプロイ、ホスティング、または公開を要求した場合にのみ、対応する外部操作を実行します。

ビジュアルシステム

8px の基本間隔グリッドを使用し、CSS 変数を使用して背景、テキスト、境界線、アクセントカラー、間隔、角丸、アニメーションパラメータを一元管理します。prefers-color-scheme を介してライトモードとダークモードを自動的に適応させ、両方のモードで完全な階層と可読性を確保します。

以下の4つのデザイン DNA を融合し、コンテンツに応じて優先順位を割り当てます。

• Apple： 豊富な余白と中央フォーカス；白 #FFFFFF、黒 #000000、本文 #1D1D1F、青 #0066CC。Inter またはシステムサンセリフフォント、優先的に 300–600 のウェイト、大見出しと細い本文で階層を形成。ガラスモーフィズムのナビゲーション、ライトシャドウ、押下時の scale(0.98)；徐々に表示するには cubic-bezier(0.25, 0.1, 0.25, 1)、400–600ms。
• Google： モジュラーな Bento グリッドと明確な情報グループ化。青 #4285F4 を補助的なアクセントとして；赤 #EA4335、黄 #FBBC05、緑 #34A853 はごく一部のチャートやステータスの詳細にのみ使用。自然なパララックスとビューポートトリガーアニメーション、十分な余白を確保。
• Microsoft： ダークなテクニカルセクション、低透明度の数字マトリックスまたはグリッド、青紫の光源。カードの角丸 6–12px、シャープな境界線、微妙なグラデーションエッジとホバー時のアウターグロー；階層と指向性のある光と影で奥行きを表現。
• 影视飓風： 全画面シネマティックストーリーテリングのヒーロー、大きな見出しのオーバーレイ、字幕のような行ごとのフェードインと長いスクロールセクションのトランジション。クールな色と青紫のグロー、パーティクル、スキャンライン、データグラフィックがストーリーをサポート；ビジュアルはシャープで透明感があり、過度な装飾は避ける。

明るいコンテンツエリアとダークなテクニカルエリアを交互に配置できますが、フォント、スペーシング、コンポーネントの一貫性は維持します。色のアクセントは控えめにし、すべてのカードが同時に異なる高彩度色を使用しないようにします。

デフォルトのページアーキテクチャ

1. ナビゲーション： 固定トップ、ガラスモーフィズム背景、スクロール後にわずかにコンパクトになり背景の不透明度が増加；ホバー時の下線トラッキングまたはスムーズな展開。モバイルではハンバーガーメニューが完全に機能。
2. ヒーロー： 少なくとも1ビューポート分のシネマティックビジュアル、ナビゲーションがタイトルや CTA を隠さない。デスクトップのタイトルは約 64px、モバイルは約 48px、clamp() を使用して狭い画面に適応；サブタイトルは約 1.5rem。プライマリとセカンダリの2つの CTA、低彩度のグラデーション、パーティクル、またはグリッド背景；コンテンツは順番に遅延して表示。適切な動画がない場合は、精巧に作成された CSS/SVG 製品ビジュアルを使用し、外部リンクの動画に強く依存しない。
3. ハイライト： デスクトップでは12カラムの Bento グリッド、7:5、6:6 などの組み合わせで非対称のリズムを形成し、すべてのカードを固定の均等分割にしない。カードのホバー時の浮き上がり、わずかな拡大、境界線のグロー、ライトなポインター傾斜をサポート。
4. コンテンツストーリーテリング： 画像とテキストが左、右、左と交互に配置され、セクション間で明確な進行関係がある。モバイルでは統一された自然な読み取り順序。ビューポートに入るときにソフトにフェードイン、内部要素は12px ほど浮き上がり、背景は軽量なレイヤーパララックス。
5. データとテクノロジー： グリッド、数値のインクリメント、プログレスバー、テクニカルグラフィック；データがビューポートに入ると開始され、終了時に最終値と単位を正確に表示。
6. フッター： デスクトップではシンプルな4カラム、モバイルでは自然にスタック、リンクホバー時にわずかに移動、下部に著作権とブランド情報を完全に表示。

アニメーションとインタラクションの実装

• 標準的なインタラクションのイージングは cubic-bezier(0.4, 0, 0.2, 1)、約 400ms。元のプロンプトにあるグローバルな all トランジションは、transform、opacity、box-shadow、border-color などのプロパティを明示的に列挙して実装し、幅や高さ、レイアウトの意図しないアニメーションを避ける。
• 標準的なスクロール出現は opacity: 0 → 1、translateY(24px) → 0、同じグループ内で150ms の stagger。IntersectionObserver を使用して必要に応じてトリガー；ユーザーが JS を実行できない、または CDN が失敗した場合でも、コンテンツは表示可能である必要がある。
• ボタンのホバー時は2px 上に移動、シャドウが濃くなり、アクティブ時は 0.98 に縮小；カードは 1.02 に拡大可能、隣接するコンテンツをクリップしたり覆ったりしないことを確認。リンクの下線は中心から展開。
• ヒーロー背景は軽いポインター追従；カードは近接カーソルハイライトと制限付き角度傾斜を提供；ボタンはクリックリップルを提供可能。個別のトランスフォームレイヤーまたは CSS 変数を使用して、エントランス、ホバー、傾斜、パララックスが互いに transform を上書きしないようにする。
• requestAnimationFrame を介してポインターとスクロールの更新を統合し、ポインターが離れたときにリセット。パーティクルは低密度の Canvas または CSS で実装；ページが非表示、またはキャンバスがオフスクリーンの場合は一時停止。レイアウトの継続的な読み取りや DOM のループ作成は避ける。
• hover: hover かつ pointer: fine の場合にのみ、ポインター傾斜、ライトフォロー、背景追従を有効化。モバイルではパーティクル、パララックス、ブラーのコストを削減し、コアコンテンツと CTA を保持。
• prefers-reduced-motion: reduce の場合、パーティクル、パララックス、トラッキング、傾斜、リップル、トランスレートアニメーションを無効にし、完全なコンテンツ、最終値、進捗を即座に表示。JS の初期化と環境設定の変更の両方を処理する。

技術的制約

• 単一ファイル HTML5、セマンティックな header、nav、main、section、footer を使用。Tailwind CSS v3 は、検証済みでバージョンが明確な CDN を介して導入し、v4 の設定を混在させない。
• スタイルとロジックはインライン、ドキュメント構造、テーマスタイル、コンポーネント、レスポンシブ、アクセシビリティ、インタラクションロジックのセクションでコメントを区切る；アニメーション状態、オブザーバー、フォールバックロジックについて目的を明確に記述し、コードの意味を行ごとに繰り返さない。
• ネイティブ JS を優先；本当に必要な場合にのみ軽量な Anime.js 依存関係を導入し、選択したバージョンの公式 API とロード方法を検証する。v3 の anime() 呼び出しを v4 の animate() API と混在させない。オプションのアニメーションのために GSAP、jQuery、またはその他のフレームワークを追加しない。
• モバイルファースト：デフォルトで 640px 未満をカバー、640px からコンテンツに応じて調整、768px でタブレット、1024px 以上でデスクトップ。320px の狭い画面、横長のコンテンツ、長いタイトルを検証し、水平スクロールを避ける。
• 100svh などのモバイルブラウザに対応したビューポート単位を使用；固定ナビゲーションにはコンテンツ上部のスペース、アンカーには scroll-margin-top、スキップナビゲーションリンクを併用。
• ファーストビューのリソースを優先し、ヒーローのメイン画像は遅延ロードしない；それ以下の画像は遅延ロードし、サイズまたはアスペクト比を明示する。画像には alt 属性、装飾グラフィックには aria-hidden を使用。CDN ソリューションはインターネット接続が必要であり、完全なオフライン可用性を主張しない；ベースとなるインライン CSS を保持し、外部リソース障害の影響を軽減する。
• インタラクションには実際のボタンとリンクを使用。メニューボタンには名前、aria-expanded、aria-controls が必要；Escape キー、開いた後の適切なフォーカス、閉じた後のフォーカス復帰をサポート。明確な :focus-visible を提供し、非表示メニューはキーボードでフォーカスできないようにする。
• 本文および重要な UI テキストのコントラスト比は少なくとも 4.5:1。薄いテクノロジーブルーを低コントラストの本文に使用しない。すべての CTA には有効な宛先または完全なローカルインタラクションがあり、空の href="#"、無効なダウンロード、または単なるプレースホルダーアラートのポップアップを使用しない。

納品チェック

使用可能なブラウザで実際に生成されたファイルを開き、狭い画面、タブレット、デスクトップ、およびライト/ダークモード、モーション削減、メニューのキーボード操作、アンカー、CTA、数値の最終状態、コンソールエラーを確認する。ブラウザを実行できない場合は、静的にチェックし、検証範囲を正直に説明し、実際のマシン検証が完了したと主張しない。

ファーストビューのコンテンツがアニメーションや CDN を待たずに読めること、カードがはみ出さないこと、タイトルが隠れていないこと、画像リソースが利用可能であること、アニメーションがトランスフォームプロパティを競合しないこと、モーション削除時に非表示コンテンツがないことを確認する。問題を修正した後、完全なファイルを納品し、「残りは同様」や TODO コメントで実装を省略しない。