compact-landing

コンパクトなランディングページ

汎用的なマーケティングテンプレートではなく、小さくても完成されたプロダクトの世界をつくります。コンパクトさと明快さを保ちつつ、各プロダクトに合わせて目に見えるデザイン言語を一新します。

ワークフロー

1. プロダクト、提供されたコンテンツ、現在のスタック、既存のデザイン言語を確認します。インストール済みのツールやコンポーネントを再利用します。
2. ユーザーがすでに回答している場合や、選択を任せている場合を除き、まずボタンのサイズを確認します。選択肢はコンパクト、中、大です。
3. 回答によって結果が大きく変わる場合に限り、状況に応じた質問を最大2つします。適切な質問のテーマは、ブランドの雰囲気、コンテンツの深さ、角の印象、アニメーションの度合いです。
4. コーディングの前にデザインの指紋を作成します。このスキルにスクリプトが含まれていて Node が利用できる場合は、node scripts/pick-direction.mjs を実行します。それ以外の場合は、すべてのリストで最初の選択肢を選ぶことなく、references/style-dna.md を参考に選択します。
5. デザインの指紋をプロダクトの意味合いに合わせます。ピッカーの出力は創造性を高める制約として扱い、一貫性のない選択を押しつける指示とは考えません。
6. プロダクトに根ざした特徴的な要素を1つ特定します。実際に使えるデモ、可視化された出力、インタラクティブなサンプル、比較、ミニチュアのワークフロー、データの実例、役立つコントロールなどが該当します。これは装飾以上に、ページの個性を生み出すものにします。
7. 最小限で完成されたページを実装します。HTML/CSS と既存の依存関係を優先します。JavaScript は、ページに必要な動作を実現する場合にのみ追加します。
8. モバイルレイアウト、キーボードフォーカス、モーション軽減設定、動的状態の安定性、実際の主要アクションを確認します。

ユーザーがすぐに実行することを望んでいる場合は、ボタンのサイズとデザインの指紋を自分で選びます。質問票への回答を待って作業を止めないでください。

デザインの指紋

実装前に、以下の軸を定義します。

• 構成： フィールドノート、オフセットレール、スプリットパンフレット、フレーム付きコンソール、コンパクトなカタログ、積み重ねた標本、またはプロダクト固有の別のシルエット。
• 幅： 収まりのよいコンパクトな幅を選びます。通常は 420-720px ですが、毎回 440px を既定値にしないでください。
• 配色： 温かみのある紙、冷たい霧、モノクロのインク、ダークチャコール、プロダクトを反映した色調、または遊び心のある明るい配色。
• タイポグラフィ： グロテスク体＋等幅、ヒューマニストサンセリフ＋等幅、エディトリアルセリフ＋サンセリフ、丸みのあるサンセリフ＋等幅、コンデンス体＋サンセリフ、または意図を持たせた全等幅。
• 形状： シャープ、機械的、バランス重視、親しみやすい、ソフト、または混合／同心円状の角丸。
• サーフェスの文法： 余白、フラットな区切り線、内側の細線、多層リング、色付きパネル、紙の罫線、またはテクニカルなフレーム。主役となる文法を1つ選びます。
• モチーフ： 絵文字の句読点、ASCII記号、番号、スタンプ、落書き、色付きのドット、小さなオブジェクトのアイコン、またはなし。
• モーション： 1つの表示時の動きと、1〜2つのインタラクション時の動きを選びます。

変化は、色やラベルだけでなく、ファーストスクリーンのシルエットにも反映させます。以前の標準的なレシピである、中央揃えの 440px カラム、ニュートラルな白／ジンク、Geist＋Geist Mono、6-10px の角丸、内側の細線カード、Instrument の順序、段階的な上昇表示とは、少なくとも4つの軸を変えてください。

コンポーネントを個別にランダム化しないでください。一貫性のあるアートディレクションを1つ選び、そこからトークンを導きます。意外性のある要素は1〜2個だけにします。ページ内の反復によって一貫性を生み出します。

相性のよい範囲、デザインの方向性、モーションのパターン、レビュー時の確認項目については、references/style-dna.md を読んでください。

不変条件

• キャンバスが広い場合や分割されている場合でも、ページの範囲と情報密度はコンパクトに保ちます。
• 主要アクションは最初のビューポート内に配置します。繰り返しによって操作の手間が減る場合に限り、再度表示します。
• 明確な文字の階層、具体的なコピー、十分なコントラストを使います。
• プロダクトの実際のコンテンツを使います。架空の数値、曖昧な主張、内容のない推薦コメント、装飾だけのダッシュボードは避けてください。
• 見た目が小さなコントロールも、過度に大きく見せずに、タップ領域を少なくとも 40px 確保します。
• 視認できる :focus-visible 状態を表示し、セマンティック HTML を維持します。
• 変化する数値には等幅数字を使います。
• prefers-reduced-motion を尊重し、モーションを軽減した状態でもすべての機能を問題なく使えるようにします。
• 小さな効果を CSS や現在のスタックで実現できる場合、依存関係を追加しないでください。

ゼロシフトモーション

• アニメーションには transform、opacity、filter のみを使用します。transition: all は使用しないでください。
• アニメーションの前に寸法を確保します。最小／固定高さ、メディア向けの aspect-ratio、固定サイズのアイコン領域、幅を固定した変化するラベル、等幅数字を使用します。
• 代替ラベル、アイコン、タブ、パネルは、同じグリッド領域または固定ボックス内に重ねます。遅れて表示されるコンテンツをドキュメントフローに追加しないでください。
• ホバー時や状態変化時も、パディング、ボーダー、フォントサイズ、フォントウェイト、行の高さ、グリッドトラック、フレックスのサイズ設定を安定させます。
• トグル、ドロワー、トレース、装飾的なモーションには、トランスフォームを優先します。装飾的なパーティクルは絶対配置し、フローに影響しないようにします。
• 実用的な場合はフォントをセルフホストします。それ以外の場合は、メトリクス互換のフォールバックを使用し、フォントの読み込み中にページを非表示にしないでください。
• ホバー専用のエフェクトは (hover: hover) and (pointer: fine) の条件下でのみ有効にします。

ボタン

次のスケールを一貫して適用します。

• コンパクト： 視覚上の高さは 24-28px、ラベルは 11-12px。
• ミディアム： 視覚上の高さは 32-36px、ラベルは 12.5-13px。
• ラージ： 視覚上の高さは 40-44px、ラベルは 13.5-14px。

押下時のフィードバックには scale(0.96) を使用します。幅広のコマンドコントロールには 0.98 を使用します。コピー中／読み込み中／成功時も、ラベルとアイコンの領域を安定させます。

llms.txt やアシスタントへのコピー操作には、製品で必要な場合に限り、小さなモノスペースボタンを使用します。プロジェクトのアイコンシステムまたは CSS のグリフを再利用し、スキルの出力に SVG の例を埋め込まないでください。

意図のある個性

絵文字は製品に合う場合に使用できます。構造やアイコン表現の代わりではなく、句読点、ラベル、小さなステッカー、状態表示として 1-3 個使用します。プラットフォームによるグリフの違いでレイアウトが動かないよう、表示領域を確保します。

色使いは遊び心のあるもの、ダークなもの、エディトリアルなもの、製品の色調に合わせたものなど、自由に選べます。すべてのアクセントカラーに役割を持たせ、繰り返し使用します。デフォルトの紫から青への AI グラデーション、無秩序な虹色、脈絡のない装飾色は避けてください。

モーションは状態を説明する、注目を集める、または製品のメタファーを表現するものであるべきです。サイズ固定のトレース、背景に浮かぶマーク、スロットの切り替え、クリップを使った表示、状態に応じた色の変化なら、リフローを起こさずに生き生きとした印象を与えられます。あらゆる場所で絶えず動かすことは避けてください。

避けること

• 関連性のない製品間で、セクションの順序、狭い幅、配色、角丸の種類、コンポーネント構成を使い回すこと。
• 汎用的な大型ヒーロー、同じサイズの機能カード3枚、バッジの雲、反射的な機能グリッド。
• 製品に本当に必要な場合を除き、Cuelume の波形、クリーム色の配色、3つ組の紙吹雪、正確なレイアウトをコピーすること。
• すべての面をカードにしたり、すべてのコントロールをピル形状にしたりすること。
• 主要なアクションと競合する装飾アニメーション。
• 不透明度、トランスフォーム、タブ、カウンター、単純な表示アニメーションに、重量級のアニメーションライブラリを使うこと。

最終確認

• コードを書く前にフィンガープリントを選び、主要な軸のうち少なくとも4つが標準的なレシピと異なっていること。
• 製品ならではの特徴的な要素が、見える形で有用に配置されていること。
• 最初のビューポートに独自のシルエットがあり、主要なアクションが明確であること。
• 角丸、配色、書体、面、モチーフ、モーションが一貫した方向性を形成していること。
• モバイルでは横方向にはみ出さず、すっきりとした単一カラムになること。
• 動的コンテンツ、メディア、アイコン、ラベル、パネルの表示領域が確保されていること。
• キーボード操作、フォーカス、コントラスト、タッチターゲット、動きの低減に対応していること。
• プロジェクト既存の検証手順でビルドと主要なインタラクションを確認できること。