frontend-design

既存のブランドシステムがない状態でデザインする際に読み込みます。確固とした個性的な美しさを追求してください。ありきたりなデフォルトは失敗です。

出力先

すべての出力ファイルを ./opendesign/mockups/<task-slug>/ に保存してください。ページ名または機能名からスラッグを作成します（例：landing-page、pricing-redesign）。

ビルド前の検討事項

HTML に手を加える前に、計画の中で次の3つの問いに答えてください。

• 目的。 このページが果たす役割を1文で表すと？
• トーン。 どんな人間的な形容詞で雰囲気を表せますか？――無機質、温かみのある、厳格、遊び心のある、荘厳、大胆など。
• 差別化。 ありきたりな SaaS のランディングページと比べて、見る人の記憶に残る要素は何ですか？

ブルータリスト、マキシマリスト、エディトリアル、レトロフューチャー、オーガニック、インダストリアル、アンチデザイン、スイスモダニズム、ジン・パンクなど、極端な方向性を選び、精密に仕上げてください。どっちつかずのデザインは、既製のテンプレートのように見えます。

タイポグラフィ

個性的なディスプレイ書体と、洗練された本文用書体を組み合わせてください。Inter、Roboto、Arial、ありきたりなシステムフォントの組み合わせは避けます。候補：エディトリアルなセリフ体（Fraunces、GT Sectra、Tiempos）、幾何学的なディスプレイ書体（Space Grotesk、PP Neue Montreal、Söhne Breit）、アクセント用の等幅フォント（JetBrains Mono、IBM Plex Mono）、方向性に合った個性的なユニケース体やバリアブルフォントなど。実際の文字サイズのスケールを意図的な比率で設定し、ブラウザーのデフォルトサイズに頼らないでください。

色

一貫性のあるパレットを選び、徹底してください。控えめに均等配分するより、支配的な色に1〜2色の鋭いアクセントを添えるほうが効果的です。アクセントには OKLCH を使い、色相が変わっても彩度と明度を一定に保ちます。ニュートラルカラーの彩度は 0.02 以下に抑えてください。

モーション

効果の高いモーションを1〜2か所使うほうが、細かなインタラクションをあちこちに散りばめるより効果的です。CSS のみのアニメーション（トランスフォーム、トランジション、@keyframes、対応環境での scroll-timeline）を優先してください。状態に応じて変化するモーションに限り、JavaScript を使います。

空間構成

意図的にグリッドを崩してください。非対称、重なり、斜めの基準線、狭いカラムに対して大きな文字、ゆとりのあるネガティブスペースなどを活用します。あるいは、美しさの方向性に合うなら、情報を密に詰めたレイアウトでも構いません。どちらも、均等な余白を設けた3カラムのグリッドより効果的です。

背景

背景には雰囲気を持たせてください。グラデーションメッシュ、フィルムグレイン、ノイズ、重ねた半透明レイヤー、ドラマチックなシャドウ、色味を加えたハーフトーン、控えめな紙の質感などを使います。白一色の背景に黒一色の要素を載せるのは選択肢のひとつであり、デフォルトではありません。その方向性が求める場合にのみ使ってください。

生成ごとのバリエーション

異なるプロジェクトやバリエーションの生成で、同じ選択に収束しないようにしてください。美しさの方向性、支配的な色相、タイポグラフィの系統、モーションの方針、構成戦略を切り替えます。ユーザーが統一感を求めていない限り、連続する2つのデザインが姉妹のように見えてはいけません。

方向性に合わせた複雑さ

マキシマリストな方向性 → 手の込んだ実装：重層的なテクスチャ、密度の高いタイポグラフィ、豊かなモーション、緻密なディテール。 ミニマリストな方向性 → 抑制した実装：要素を減らし、文字サイズのスケールを絞り、トランジションを長めにし、余白を増やします。 中途半端にしないでください。マキシマリストの意図を持って抑制したレイアウトを作ると未完成に見え、ミニマリストの意図でマキシマリストのレイアウトを作ると支離滅裂に見えます。