wild-frontend

ワイルドフロントエンド

独自のビジュアルコンセプトを軸に、動作するフロントエンドコードを構築します。このスキルでは、既存プロダクトのスタイルに合わせることより、オリジナリティと記憶に残る表現を優先します。

複数の手順にわたる作業では、コンセプト、または確認するインターフェースの最初の部分を明示して、短い進捗報告から始めます。

目標

タイポグラフィ、色、レイアウト、質感、動きを導くコンセプトを1つ選びます。メインタスクを理解し、完了しやすい状態に保ちながら、記憶に残る成果を目指します。

クリエイティブディレクション

指定された方向性や参考資料を制約として扱い、ブリーフに余地がある部分では、意図を持ってクリエイティブな選択をします。実装に入る前に、簡潔な方向性を固めます。

• 目的：インターフェースの役割
• コンセプト：中心となるアイデア
• トーン：荒々しい、豪華、遊び心のある、映画的、工業的、エディトリアル、オーガニック、シュール、レトロ、儀式的、またはその他の明確な雰囲気
• 参考資料：デザインの着想となるビジュアル、素材、場所
• シグネチャーとなるディテール：人々の記憶に残る要素
• インタラクションのスタイル：動き、反応、情報の現れ方

追加のコンセプト例やデザイン手法が必要な場合に限り、references/creative-moves.md を使用します。

制作基準

特定のビジュアル効果を生み出すために、変則的な構成、非対称、重なり、表現力豊かなタイポグラフィを活用します。一般的なレイアウトと同じように、配置、余白、読みやすさを注意深く確認します。

• エフェクトを加える前に、構成を組み立てます。焦点、読み順、視覚的なアンカー、バランス、緊張感、ページを見ていく視線の経路を定めます。
• ネガティブスペースは、要素を配置したあとに残る領域ではなく、形やリズムを生み出す手段として扱います。マージン、間隔、密度の変化、空白領域を調整し、リズムをつくってコンセプトを補強します。
• 視覚的階層、整列、近接、反復、コントラスト、スケール、バランス、リズム、図と地といった、長く通用するグラフィックデザインの原則を意識して活用します。慣習を破る場合は、視覚的または機能的な効果を明確に生み出すようにします。
• タイポグラフィは、言語であると同時に形でもあると考えます。行長、行送り、文字間隔、折り返し、ベースラインの関係、視覚的な整列を調整し、印象的な文字を雑な文字にしないようにします。

制約

• 主な操作を明確にします。
• 重要なテキストを読みやすくします。
• 一般的なビューポートサイズでレイアウトが適切に表示されるようにし、インタラクティブなコントロールをキーボードで操作できるようにします。
• 必要に応じて、実用的な読み込み中、空、エラーの各状態を用意します。
• 適切なフォーカス表示と、主要コンテンツに十分なコントラストを確保します。
• モーションを減らす設定を尊重します。コンテンツ、コントロール、理解しやすい状態変化を保ちつつ、必須でない動きを減らすか、別の表現に置き換えます。
• 装飾的なエフェクトで使いやすさを損なわないようにします。

コンセプトとのつながりがない場合は、中央配置のカード、予測どおりのヒーローセクション、控えめな配色、白地に紫や青のグラデーション、ありきたりなフォントといった、習慣的な選択を見直します。これは美的な禁止事項ではありません。指定された方向性で使い慣れた表現が求められている場合は、それに従います。ブリーフを置き換えるのではなく、クリエイティブな自由を活かして発展させ、コンセプトを弱める装飾や競合するアイデアは取り除きます。

実装スタイル

指定されたスタックを使用します。コンセプトに役立つ場合は、単発のコンポーネント、カスタム CSS、変則的なレイアウト、装飾レイヤー、独自のインタラクションを使用できます。コードは、変更しやすい程度にわかりやすく保ちます。

最終確認

実際の成果物を代表的なコンテンツでレンダリングします。一般的なビューポートサイズで、全体の構成と細部を確認します。視線の誘導順序、配置の基準点、余白、セクションのリズム、テキストの折り返し、視覚的なバランス、エッジの処理、インタラクションの状態を確認します。レスポンシブレイアウトは、単に縮小したり縦に積み重ねたりするのではなく、意図的に再構成する必要があります。

キーボードでインターフェースを操作し、フォーカスが常に見えることと、コントロールが機能することを確認します。実際に発生し得る読み込み状態、空の状態、エラー状態も試します。

アニメーションを含む場合は、意図した動きと、動きを抑えた代替表示の両方を確認します。重要なコンテンツやコントロールが引き続き利用でき、状態の変化にも一貫性があることを確認します。

ビルドや型チェックに合格しても、視覚的な品質が証明されたことにはなりません。各改善の前に、それによって解消する視覚上の不一致や要件の未達部分を特定し、改善後の該当箇所を確認します。コンセプトの実装、読みやすさ、操作性、レスポンシブ対応に重大な問題が残っている間は、確認と改善を続けます。成果物をレンダリングできない場合は、その制約と、次善の確認方法を報告します。

出力

まず完成した成果物を提示し、続けてコンセプト、特徴的なデザイン上の工夫、変更したファイル、実施した検証を報告します。

中止条件

作業中の成果物が要件を満たし、重大な視覚上の問題が解消され、関連するビューポート、操作、モーションの確認が完了するか、その制約が明示された時点で終了します。それらの条件を満たした成果物を、別のスタイルにできるという理由だけで再設計し続けてはいけません。