frontend-design

フロントエンドデザイン

このスキルは、フロントエンドのインターフェースデザインと実装を対象としています。ユーザーが動作する UI（コンポーネント、ページ、ランディングページ、ダッシュボード、ポスター風のウェブ制作物、HTML/CSS レイアウト、UI の再デザイン、「見栄えよくして」など）の作成を求めたときに、いつでも使用してください。目指すのは、明確な個性と高い完成度、そして本物の魅力を備えたインターフェースを作ることです。テンプレートのような、ありきたりな「AI スロップ」風の見た目は避けてください。

作業の進め方

コードを書く前に、デザインを決めてください。大胆で明確な美的方向性を選び、一貫して実現します。

1 デザインの検討

まず、次の問いに答えてください（回答として書き出すか、内部チェックリストとして使います）。

• 目的：どのような課題を解決し、誰を対象とするか
• トーン：明確な方向性を選び、それを貫く
• 制約：スタック、パフォーマンス、アクセシビリティ、ブランド上の制限
• 差別化：忘れられない「シグネチャーモーメント」をひとつ

方向性の例（ひとつ選ぶか、明確な主軸を定めて組み合わせます）。

• 徹底したミニマリズム、マキシマリストな混沌、レトロフューチャー、自然で有機的、洗練されたラグジュアリー、おもちゃのような遊び心、エディトリアルマガジン、むき出しのブルータリズム、幾何学的なアールデコ、柔らかなパステル、インダストリアルな実用性

重要なのは強さではなく、意図と一貫性です。

2 成果物の基準

出力は次の要件を満たす必要があります。

• 動作する：実行可能なコード（HTML/CSS/JS、React、Vue など）
• 本番品質：整理された構造、保守性、基本的なアクセシビリティ（キーボード操作、コントラスト、セマンティクス）
• 一貫性がある：レイアウト、書体、色、動きがすべて同じ方向性を支えている
• 細部まで洗練されている：余白、配置、階層、シャドウ、境界線、マイクロインタラクション

美的ガイドライン

タイポグラフィ

• 個性のある書体の組み合わせを選びます。見出し用書体と本文用書体を組み合わせてください。
• Arial、Inter などの、無難でありきたりな選択は避けてください。
• サイズ、行の高さ、字間は、デフォルトのままにせずデザイン上の判断として扱います。

色とテーマ

• 色、余白、角丸、シャドウには CSS 変数を使います。
• 控えめに均等配色するより、「支配的なベースカラー＋鮮烈なアクセント」を優先します。
• ありきたりな配色、特に白地に汎用的な紫のグラデーションは避けてください。

モーション

• 「ヒーローモーメント」を作ります。ランダムなマイクロアニメーションより、タイミングを調整した段階的な登場演出を優先します。
• HTML では CSS モーションを優先し、React では適切な場合にアニメーションライブラリを使います。
• ホバー、フォーカス、スクロールのインタラクションは、ムードと階層を引き立てるものにします。

構図と余白

• 非対称、重なり、グリッドの崩し、斜めのリズムを取り入れ、シグネチャーを作ります。
• 余白をたっぷり取るか、密度を緻密に調整するか、どちらかに統一してください。

背景と質感

単色のフラットな背景を安易に使わないでください。雰囲気と奥行きを作りましょう。

• グラデーションメッシュ、ノイズ粒子、幾何学模様、半透明のレイヤー、ドラマチックなシャドウ、装飾的な境界線、グロー、さりげない素材感

避けること

ありきたりなテンプレート UI は避けてください。

• 使い古されたレイアウトパターンやコンポーネントの積み重ね
• どのテンプレートサイトにも当てはまりそうな、ありきたりな書体や配色
• 明確な主張や記憶に残るシグネチャーのない「無難なデザイン」

最後に

ビジョンに合わせて複雑さを調整してください。

• マキシマリズムには、レイヤー、質感、動き、作り込まれた細部が必要です。
• ミニマリズムには、より厳密なグリッド、余白、タイポグラフィ、抑制が必要です。

美しさは、一貫性と細部から生まれます。エフェクトを重ねることではありません。