未来型ウェブデザイン

未来型ウェブデザイン は何をしますか？

演出されたかのような印象を与えるシングルページマーケティングサイトを構築するための実践的なメソッドです。明確なブリーフ、統一されたデザインシステム、個別に検証されたセクション、一貫したビジュアル、そして厳選された映画的な動きを実現します。

なぜサイトが「ありきたり」に見えるのか

リクエストで曖昧にされた細部は、統計的に最も可能性の高い選択肢で埋められます。そのため、一行だけのリクエストからは、中央揃えの見出し、ソフトなグラデーション、同一の角丸カードが並ぶ、平均的なウェブサイトが生まれます。本当の作業の大部分は、コードを書く前に行われます。未確定の質問（ターゲットユーザー、求めるただ一つのアクション、与えたい印象、フォント、カラーパレット）を明確にし、その後、目視で確認できるほど小さな単位で構築を進めます。

役割を明確に保ちます。ユーザーは「何を構築するか」を所有します。あなたは「どのように構築するか」を所有します。そして、誰かがスマートフォン幅のブラウザで実際に確認するまでは、どの作業も完了したとはみなされません。

開始場所

状況	参照先
新しいサイト、空またはほぼ空のフォルダ	フェーズ1から順に進む
既存サイト、追加または再構築する1つのセクション	プロジェクトルールを読み、次にフェーズ5のセクションルーチン
「映画的/3D/スクロール駆動にして」	フェーズ7および references/cinematic-moves.md
画像、ヒーロービデオ、またはそのプロンプト	references/assets.md
サイトが「ありきたり」または「AI生成っぽい」	references/design-system.md の「ありきたりなサイトの兆候」を確認し、その後フェーズ3
スマートフォン修正、磨き込み、フォーム、デプロイ、ドメイン、SEO	references/ship.md

参考ファイルは、そのフェーズに到達した時点で開いてください。それより前に開く必要はありません。各ファイルは独立しています。

フェーズ

1. ブリーフ

コードを書く前に、以下の3点をカバーした単一の段落を作成します。ターゲットユーザー、訪問者が行うべき唯一のアクション、そして意図する印象（「静かで、正確で、寛大、まるで平日の朝のよく運営されたスタジオのように」のような3つの形容詞と1つの比較）。

ユーザーがこれを提供していない場合は、単一のメッセージで要求します。ユーザーが「とにかく進めて」と言った場合は、自分でブリーフを作成し、それを仮定として一文で示した上で進めます。後続の選択（主要なボタン、存在するセクション、採用する動き）はすべて、この段落を再読することで解決されます。これが、このステップを省略できない理由です。

2. 計画

セクションリストを上から下に記述します。各エントリは、そのセクションの目的を一文で示し、依存するアセットを指定します。構築は保留します。何かが存在する前に方向転換するのは無料です。そのため、複数のファイルにまたがる作業の場合は、計画を提示し、同意を待ちます。エージェントがその機能を持っている場合は、計画モードを使用します。

典型的な順序：ナビゲーション、ヒーロー、信頼ストリップ、提供内容、ストーリーまたはプロセス、顧客の声、該当する場合は価格、よくある質問、クロージングコールトゥアクション、フッター。目的を述べられないセクションは削除します。実在の企業の場合、顧客、レビュー、統計を決して捏造してはいけません。該当するセクションを省略するか、本物の素材を要求します。

3. デザインシステム

サイト全体のルックを一度だけ決定し、記録します。基本的なプレビューページに3つの候補の方向性を提示し、ユーザーが目で見て選択できるようにします。各候補は、見出し用フォントと本文用フォントのペア、5つの16進数カラー（ページ、インク、プライマリ、アクセント、ミュート）の役割割り当て、そしてムードを一文で要約したものを組み合わせます。選択されたものをプロジェクトのテーマトークンにエンコードし、プレビューページは削除します。検討用のページは足場です。それらをプロジェクトに残しておくと、サイトと一緒に出荷されてしまいます。

詳細、用語、テンプレートは references/design-system.md にあります。

4. プロジェクトルール

恒久的なルールを、現在のエージェントが起動時に読み込むルールファイル（CLAUDE.md、AGENTS.md、GEMINI.md）に配置します。既存のファイルを再利用します。そうでない場合は、このエージェントに適した新しいファイルを作成します。これは毎セッションで読み込まれるため、簡潔に保ちます。サイトの説明、スタック、デザインシステム、いくつかの常設ルールで構成します。

プロジェクトに特に意見がない場合の妥当なデフォルト：

• スタック：Next.js と Tailwind CSS。インタラクティブウィジェット（アコーディオン、ダイアログ、メニュー、入力）には、shadcn/ui のようなアクセシブルなコンポーネントライブラリをインストールします。手動で実装してはいけません。
• 各コンポーネントは components/ 配下の独自ファイルに配置します。
• ファーストビューはスマートフォン向け。390px幅で何も壊れてはいけません。
• 本物のコピーのみ。Lorem ipsum や「機能1」のようなプレースホルダーは禁止です。
• パッケージを追加する前に承認を得て、その目的を説明します。
• prefers-reduced-motion は、派手なエフェクトだけでなく、スムーススクロール、ホバー、アイコンのトランジションも含む、すべての動きに適用します。

恒久的なルールはこのファイルに属します。現在のタスクはこれには含まれません。

5. セクションごとに構築する

ページ全体を一度に依頼すると、凡庸なセクションが並び、修正の開始点が不明確なページが返されます。セクションを構築し、確認し、続行します。パターンが確立されたら、よりプレーンなクロージングセクション（引用、質問、クロージングコールトゥアクション、フッター）はまとめて処理しても構いません。視覚的に重要なものは、単独で構築します。

セクションルーチン（追加または再構築する各セクションに対して）：

1. まずデザインルールとトークンを読む。
2. 内容を確認する。事実が重要な場合（価格、主張、引用）は、ユーザーに尋ねる。それ以外の場合は本物のコピーを作成し、自分で作成した行にフラグを立てる。
3. セクションに独自のコンポーネントファイルを与える。
4. 3つの幅でレンダリングする：スマートフォン（390px）、タブレット（768px）、ノートパソコン（1440px）。はみ出し、醜い折り返し、不適切なトリミングを修正する。
5. 上下のギャップを隣接するセクションのものと比較する。
6. 簡単なレポートで締めくくる：セクション名、ファイルパス、およびユーザーの確認が必要なもの。

ヒーローに最も力を注ぎます。なぜなら、訪問者がスクロールするかどうかを決定するからです。すべての重要な詳細を指定します。

• 提供内容を述べた約8語以内の見出し、それを補足する1文、そしてブランドマーク、いくつかのリンク、1つのボタンを保持するナビ。
• 明確なリードボタン：塗りつぶし、アクセントカラー、ブリーフのアクションに結びついたもの。セカンダリアクションは控えめなテキストリンクにする。等しい重みのツインボタンは、決定が下されていないことを示す。
• コピーはビジュアルの焦点から外れた場所に配置し、デスクトップとスマートフォンで独立して決定する。
• ビデオや写真の上のコピーについては、テキストの下にグラデーションのスリムを使用してローカルで可読性を解決する。ビジュアル全体を暗くしてはいけない。
• 最初の画面はスマートフォンとデスクトップの幅でのスクリーンショットから判断する。大きな空の帯、クリップアートのように見える孤立した要素、判別できないほど暗いビジュアルは、ヒーローが未完成であることを意味する。実際のアセットがまだプレースホルダーであっても、代役はその時点まで構図を支えられなければならない。

すべてのボタンはどこかにリンクします。 各コールトゥアクションには、実際の宛先（ストアやチェックアウトリンク、予約ページ、フォーム、メールアドレス）が必要です。宛先が不明な場合は、最も近い誠実なターゲット（製品セクション、mailtoリンク）を使用し、配線されていない各ボタンをレポートにリストします。同じページに静かにスクロールするだけのボタンは、完成したように見えて実際はそうではありません。

ページが組み立てられたら、最初から最後までスクロールし、最も弱いセクション（必ず1つはある）を特定し、それに対する2つの代替案をプレビュールートで提案します。1つが選択されたら、他のバリアントとそのルートを削除します。

6. ビジュアル

強力なレイアウトも、弱いイメージを救うことはできません。約7つのアセットからなる短いショットリストから始め、一貫したスタイルライン（光、レンズ、パレット）をそれら全体に適用します。プロンプトの公式、ヒーロービデオのガイダンス、Web用の準備は references/assets.md にあります。

画像やビデオ生成ツールに接続されていない場合は、ユーザーにプロンプトを提供し、明確にマークされたプレースホルダーで続行します。承認なしに生成クレジットを使用してはいけません。

7. 映画的な動き

5つのテクニックを用意しています：ヒーロー内のスローバックグラウンドビデオ、スクロール位置に連動したモーション、コンテンツが変化する間に固定されるセクション、パララックス深度、そしてライブレンダリングされた3Dオブジェクト。控えめに使用します。ヒーロービデオと、残りの中から最大2つまで。それぞれを、何かを明確にしたり、特定の感覚を生み出したりする場所に配置します。すべてのテクニックを一度に使用すると、デモリールのように見え、訪問者を疲れさせ、各エフェクトを薄めてしまいます。

各テクニックには、優雅なフォールバックが必要です。動きを抑制する設定下での通常のレイアウト、小型スマートフォン用の静止画像、そしてエフェクトが失敗してもページが機能すること。その後、コストを測定します。レシピとガードレールは references/cinematic-moves.md にあります。スクロールや3Dコードを書く前にこれを読んでください。

8. スマートフォン、磨き込み、フォーム、ローンチ

スマートフォンが大部分の訪問を占めます。390pxでの専用パス、一貫性パス、速度チェックを実行します。その後、フォームを接続し、デプロイし、ローンチチェックリストを作成します。references/ship.md を参照してください。

作業習慣

これらは全体を通じて適用されます。

• 1ラウンドで1つの変更。 修正を求められたら、それだけを変更します。リクエストより広い差分は、どの編集が役立ったかを隠し、「整理」はユーザーが満足していたものを後退させます。
• 報告する前に確認する。 ページをロードし、完了と呼ぶ前にいくつかの幅で検査します。レイアウトはすべてのルールを満たしていても、見た目が悪いことがあります。
• 曖昧なフィードバックを名前のある問題に変換する。 「重く感じる」は対処可能です。間隔、太さ、コントラストのどれが原因かを特定し、そう伝え、それだけを調整します。ユーザーが好みを明確にできない場合は、2つまたは3つのバリアントをプレビュールートに、それぞれ一行の説明を付けて配置します。人々は指定するよりも選択する方が簡単です。
• 想定外の事態を、指定されていなかったことに遡る。 出力がユーザーの期待と異なる場合は、その背後にある未解決の質問を見つけ、ルールファイルで解決し、手動で再パッチされないようにします。
• エラーは根本で修正し、原因を一行で述べる。
• 作業状態を保存する。 ユーザーがコミットを求めるgitプロジェクトでは、数週間後にも意味が通じるメッセージで、各作業ステップの後にコミットします。
• キーとデータを保護する。 シークレットは .env.local に属し、ソースファイルやgit履歴からは除外します。フォームの保存が拒否された場合は、アクセスルールを修復します。動作させるためにセキュリティを無効にしてはいけません。
• 正直に報告する。 何が確認され、何が確認できなかったか（実機のiPhone、本番ドメイン）、そしてどのコピーが創作かを明記します。画面上の確認は何の証明にもなりません。保存された行がその証拠です。
• バージョンを確認する。 GSAP、Three.js、React Three Fiber、Motion、Lenisについては、記憶に頼らず、互換性のあるバージョンについて現在のドキュメントを参照し、不確かな場合はフラグを立てます。

参考ファイル

ファイル	読み取るタイミング
references/design-system.md	フォント、色、間隔を選択するとき。曖昧なスタイルの言葉を具体的なものに変換するとき。ありきたりなページを監査するとき。
references/assets.md	画像やビデオのプロンプトを作成するとき。ビジュアルの一貫性を保つとき。メディアをWeb用に圧縮するとき。
references/cinematic-moves.md	ビデオヒーロー、ピン留めスクロールストーリー、パララックス、3Dアクセント、スクロール駆動ビデオ、またはフルライブ3Dスクロールストーリーを追加するとき。
references/ship.md	メディアの配置、スマートフォンパス、磨き込み、速度、問い合わせフォーム、デプロイ、ドメイン、SEO、およびローンチチェックリストを作成するとき。