新しいセクション
既存のルールを持つサイト上の1つのセクションのための短いルーチンです。これはfuturistic-web-designスキルのセクションステップを、単独で実行できるようにパッケージ化したものです。
../futuristic-web-design/ がこのスキルの隣にある場合、その参照ファイルが詳細を保持しています。タスクに必要なものを読んでください。レイアウト用語と汎用サイト監査については references/design-system.md、コンタクトフォームと電話パスについては references/ship.md を参照してください。
プロジェクトにルールファイルまたはデザインシステムがまだない場合は、停止してfuturistic-web-designを最初のフェーズから使用してください。デザインシステムなしで構築されたセクションは、一般的な外観の原因となります。
ルーチン
- ルールを読む。 プロジェクトのルールファイル（
AGENTS.md、CLAUDE.md、またはGEMINI.md）とテーマトークンを開きます。そこで定義されているタイプフェイスとパレット、およびプロジェクトが既に使用しているスタックのみを使用します。 - コンテンツを確認する。 事実が重要な場合（価格、主張、名前、引用）、質問します。実際のビジネスのために顧客、レビュー、統計を決して発明しないでください。それ以外の場合は実際のコピーを作成し、あなたがでっち上げた行にフラグを立ててください。プレースホルダーテキストは使用しないでください。
- 意図的にレイアウトを選ぶ。 分割、中央寄せ、フルブリード、グリッド、弁当箱、または非対称。どれを選んだか、そしてその理由を1行で述べてください。中央見出しの下に3枚の同一カードを並べるデフォルトは避けてください。1つを強調し、残りをオフセットします。
- 1つのコンポーネントを独自のファイルに作成する
components/以下、またはプロジェクトの同等の場所に作成します。 - ブラウザで390px、768px、1440pxで確認 し、気になる点を修正します。レイアウトはすべてのルールを満たしていても、見た目がおかしいことがあります。
- 上下のスペースを隣接するセクションと合わせる。
- 3行で報告する： 何が構築されたか、ファイルパス、およびユーザーの目を必要とするもの（でっち上げたコピー、配線されていないボタン、確認できなかったものすべて）。
依頼されたセクションのみを変更してください。リクエストよりも広い差分は、どの編集が役立ったかを隠してしまいます。
レイアウトオプション
ユーザーが選択肢を求めてきた場合、または自分が何を望んでいるかを説明できない場合、同じコンテンツから2つまたは3つのバリアントを構築します。それぞれを独自のプレビュールート（/preview-1、/preview-2、または再スタイルの場合は /before と /after）に配置し、1行の説明を添えます。人は指定するよりも容易に選択します。
ユーザーが選択するまで実際のページには触れないでください。その後、他のバリアントとそのルートを削除します。プレビュールートが残っていると、サイトと一緒に出荷されてしまうからです。
デザインされたセクションの特徴
- タイポグラフィ。 見出しタイプフェイスは大きく、タイトなトラッキングで、他のすべてには読み物用タイプフェイスを使用します。2つのタイプフェイスのみ。ラベルの
font-monoのようなフレームワークのデフォルトは3つ目としてカウントされます。ヒーロー見出しは最大で約8単語です。 - 1つのリードボタン。 塗りつぶし、パレットのボタン色で、概要のアクションに結びつけます。2つ目のアクションは、矢印付きのテキストリンクか、控えめなアウトラインボタンです。同じ重みのボタンが2つあることは、意思決定がなされていないことを示します。
- すべてのボタンは実際の場所にリンクする。 宛先が不明な場合は、最も近い正直なターゲットを使用し、レポートでボタンを未配線としてリストアップします。
- サーフェスとスペース。 十分な余白、フラットな塗りつぶし、ヘアラインの境界線、オプションのグレイン加工またはガラス効果。パレットの代わりとなるグラデーションは使用しないでください。ホバー時のみシャドウを使用します。
- 画像。 表示サイズで配信し、最初の画面より下では遅延読み込みし、画像を説明する代替テキスト（「琥珀色のセラムボトル、淡い石の上」、決して「画像1」ではない）を付けます。
- モーション。 500ミリ秒未満の短いフェードと数ピクセルの上方移動を1回だけ。
prefers-reduced-motionの下では、スムーズスクロールやホバートランジションを含め、何も動きません。
390pxチェック
スマートフォンがほとんどの訪問数を占めるため、この幅がセクションの完成を決定します。
- 本文が読みやすく、見出しが5行以上にわたって折り返されることはありません。
- 画面の端に何も押し付けられていません。
- タップターゲットは約44px以上です。
- 水平スクロールはありません。
- ナビゲーションはメニュートグル（開閉する）の背後に折りたたまれます。
- 行内のカードは、その上のテキストの長さに関係なく、価格とボタンを同じ行に保ちます。これを3つの幅すべてで確認します。
コンタクトセクション
宛先のないフォームは害を及ぼします。人々はメッセージが届いたと想定するからです。モデルは郵便受けです。誰でも投函可能で、読み取りは所有者のみにロックされています。
- フィールド
name、email、message。Supabaseのleadsテーブル、またはプロジェクトが既に使用しているバックエンドに保存します。 - 行レベルセキュリティをオンにする：匿名挿入は許可、公開読み取りはなし。挿入に
.select()をチェーンしないでください。読み取りアクセスがないと、呼び出しが失敗します。 - サイトコードは公開鍵のみを使用し、
.env.localから読み込みます。これはgitで無視されたままにします。 - 送信前に検証する（妥当なメール形式、空でないメッセージ）し、拒否を説明します。成功と失敗に対して異なるメッセージを与えます。
- スパム対策：空白のままにしておく必要がある隠しハニーポットフィールドと、人間が入力するよりも速く到着した送信を拒否します。
- 訪問者のようにテストする：空白のメッセージ、不正な形式のメール、有効な送信。テーブルに新しい行が追加されたことだけが機能を証明します。画面上の確認では証明になりません。
- 保存に失敗した場合、エラーを読み、ポリシーを修正します。このテーブルには人々の名前と住所が含まれているため、行レベルセキュリティを決してオフにしないでください。