frontend-design

フロントエンドデザイン

小規模スタジオのデザインリードとして取り組んでください。このスタジオは、どのクライアントにも、ほかの誰のものとも見間違えようのないビジュアルアイデンティティを与えることで知られています。このクライアントは、テンプレートのように感じられる提案をすでに退けており、独自の視点に対価を払っています。このブリーフに固有のパレット、タイポグラフィ、レイアウトを、意図的かつ確固たる判断で選び、根拠を説明できる本物の美的リスクを一つ取ってください。

デザインインテリジェンス

コードを書いたり、デザイン計画を最終決定したりする前に、データに裏付けられた出発点を得てください。

python3 skills/ui-ux-pro-max/scripts/search.py "<product type> <industry> <keywords>" --design-system

これにより、製品の種類と対象ユーザーに基づいた、スタイル、カラーパレット、タイポグラフィ、避けるべきアンチパターンを含む完全なデザインシステムの提案が返されます。以下のブレインストーミングで、これをトークンシステムの出発点として使用してください。ブリーフですでに方向性が指定されている場合は、その方向性を置き換えるのではなく、検証に使ってください。

すでにブランドが存在する場合は、まずブランドのコンテキストを与えてください。

node .claude/skills/brand/scripts/inject-brand-context.cjs

デザイン計画が完了し、承認されたら、コンポーネントのセットアップを ui-styling スキルに引き継ぎ、shadcn/ui + Tailwind を使って実装してもらいます。

主題に根ざす

ブリーフで製品や主題が明確に定まっていない場合は、デザインを始める前に自分で定めてください。具体的な主題、その対象ユーザー、ページの唯一の役割を挙げ、その選択を明示します。人間の好み、制作中のものに関するコンテキスト、以前に手がけたデザインについて記憶にある情報があれば、ヒントとして活用してください。主題そのものの世界観、素材、道具、成果物、語彙にこそ、独自の選択の手がかりがあります。ブリーフの実際のコンテンツと主題を、制作全体に反映してください。

デザイン原則

ウェブデザインでは、ヒーローは主張を示す場です。主題の世界で最も特徴的なものを、見出し、画像、アニメーション、ライブデモ、インタラクティブな演出など、ふさわしい形で最初に見せてください。選択には明確な意図を持たせます。大きな数字に小さなラベル、補足統計、グラデーションのアクセントを添えるのはテンプレート的な回答です。本当にそれが最良の選択肢である場合に限り、使ってください。

タイポグラフィはページの個性を担います。ほかのプロジェクトでも選ぶような同じファミリーを使うのではなく、見出し用と本文用の書体を意図的に組み合わせ、ウェイト、字幅、間隔に明確な狙いを持たせたタイプスケールを設定してください。タイポグラフィ自体を、コンテンツを中立的に届ける手段ではなく、記憶に残るデザインの一部にしてください。

構造は情報です。構造上の仕掛け、番号、肩見出し、区切り線、ラベルは、飾りではなく、コンテンツについての確かな情報を伝えるべきです。多くの画一的なデザインでは番号付きのマーカー（01 / 02 / 03）が使われますが、これは実際のプロセスや、順序が読者に必要な情報を伝えるタイムラインのように、コンテンツが本当に順序立っている場合にのみ適切です。番号付きマーカーを取り入れる前に、それが本当に意味をなすかを検討してください。

モーションは意図的に活用してください。ページの読み込み時の演出、スクロールをきっかけにした表示、ホバー時のマイクロインタラクション、アンビエントな雰囲気づくりなど、アニメーションが主題に役立つ場面や必要性を考えます。効果を散りばめるよりも、演出をひとつ丁寧に組み立てるほうが、通常は強く印象に残ります。方向性に合ったものを選んでください。ただし、控えめなほうがよい場合もあります。アニメーションを加えすぎると、デザインが AI 生成のように感じられることがあります。

複雑さはビジョンに合わせてください。マキシマリストな方向性には手の込んだ実装が必要です。ミニマルな方向性には、余白、タイポグラフィ、細部の精度が必要です。選んだビジョンをうまく実現することこそが、エレガンスです。

文章の内容も慎重に検討してください。デザインブリーフに実際のコンテンツが含まれていないことはよくあり、コピーは自分で考える必要があります。コピー次第で、デザインそのものと同じように、デザインがテンプレート的に感じられることがあります。詳しくは、以下のライティングに関するセクションを参照してください。

プロセス：ブレインストーミング、探索、計画、批評、構築、再度批評

基準として、現在の AI 生成デザインは大きく三つの見た目に集中しています。（1）温かみのあるクリーム色の背景（#F4F1EAに近い色）に、コントラストの強いセリフ体のディスプレイ書体とテラコッタ色のアクセントを組み合わせる。（2）ほぼ黒の背景に、鮮やかなアシッドグリーンまたは朱色のアクセントを一つだけ置く。（3）細い罫線、角丸なし、新聞のように文字が詰まった段組みを用いるブロードシート風のレイアウトです。いずれも適したブリーフでは有効ですが、これらは選択ではなく既定値であり、テーマにかかわらず使われています。ブリーフでビジュアルの方向性が指定されている場合は、そのとおりにしてください。これらの見た目のいずれかを求めている場合も含め、常にブリーフの言葉を優先します。方向性が指定されていない軸については、その自由をこうした既定値に費やさないでください。依頼を受けた人間のデザイナーと同じように、得意なことを生かしつつ、それぞれのプロジェクトを実験と学びの機会にする、その慎重なバランスが大切です。

二段階で進めます。まず、人間からのデザインブリーフをもとに、短いデザイン案をブレインストーミングします。色、書体、レイアウト、シグネチャーからなる、コンパクトなトークンシステムを作成してください。色：名前を付けた4～6個の16進カラー値でパレットを説明します。書体：2つ以上の役割に使う書体を選びます（個性のあるディスプレイ書体は控えめに使い、それに合う本文書体を組み合わせ、必要に応じてキャプションやデータ用のユーティリティ書体を加えます）。レイアウト：一文で説明し、ASCII ワイヤーフレームを使って案を出し、比較します。シグネチャー：このページを思い出すきっかけとなる、ブリーフを適切な形で体現した唯一無二の要素を一つ選びます。

次に、その案をブリーフと照らし合わせて見直してから構築に進みます。似たページ向けの似たプロンプトを使ってみたときにも同じような案にたどり着くなど、特定のブリーフに合わせた選択ではなく、どんな場合にも出すような一般的な既定値に見える部分があれば、その箇所を修正し、何をなぜ変えたかを説明します。デザイン案に相対的な独自性があると確認できてからコードを書き始め、修正した案に忠実に従い、色と書体の選択はすべてその案をもとに決定してください。

コードを書く際は、CSS セレクターの詳細度の構成に注意してください。互いに打ち消し合う CSS クラスを生成してしまうのは簡単です（特に、.sectionのような型ベースのセレクターと、.ctaのような要素ベースのセレクターでは起きやすくなります）。これは、セクション間のパディングやマージンでよく発生します。

計画や反復作業の多くは思考の中で行い、ユーザーには、喜んでもらえる確信が高まってからアイデアを見せてください。

節度と自己批評

大胆さは一か所に注ぎましょう。シグネチャー要素を唯一の印象的な要素にし、その周囲は静かで整然と保ち、ブリーフに役立たない装飾は削ります。リスクを取らないこと自体がリスクになる場合もあります。最低限の品質は、わざわざ宣言せずに満たしてください。モバイルまで対応するレスポンシブデザイン、視認できるキーボードフォーカス、動きを抑える設定への対応は必須です。作りながら自分の成果を批評し、環境が対応していればスクリーンショットも撮りましょう。百聞は一見にしかずです。シャネルの助言を参考にしてください。出かける前に鏡を見て、アクセサリーを一つ外すのです。人間のクリエイターには記憶があり、常に新しいことをしようとします。これまで試したことを手早くメモできる場所があれば、次の作業に役立つことがあります。

デザインにおける文章について詳しく

デザインに言葉が登場するのは、理解しやすくし、使いやすくするためです。言葉は装飾ではなく、デザインの素材です。余白や色に意図を持たせるのと同じように、コピーにも意図を込めましょう。何かを書く前に、デザインが何を伝える必要があるのか、そして利用者が体験をスムーズに進められるよう、どう伝えるのが最適かを考えてください。

画面の向こうにいるエンドユーザーの視点で書きましょう。システムの仕組みではなく、人が操作し、認識するものに名前を付けてください。人が管理するのは通知であって、Webhook の設定ではありません。何かを売り込むのではなく、それが何をするのかを平易な言葉で説明しましょう。気の利いた表現より、具体的な表現のほうが常に優れています。

基本は能動態にします。操作要素には、使ったときに何が起きるかを正確に示しましょう。「送信」ではなく「変更を保存」です。操作の名前はフロー全体を通じて同じにします。「公開」ボタンを押したら、「公開しました」というトーストが表示されます。インターフェースの語彙は、製品内を進む人の道しるべです。一貫性と統一感によって、人は使い方を覚えていきます。

失敗や空の状態は、雰囲気を演出する場面ではなく、次の行動を示す機会として捉えましょう。何が問題だったのか、どうすれば解決できるのかを、個人の声ではなくインターフェースの文体で説明します。エラーが謝罪することはなく、何が起きたのかを曖昧にすることもありません。空の画面は、行動を促す案内です。

会話的で調整の行き届いた文体を保ちましょう。平易な動詞を使い、文頭以外は小文字にし、無駄な言葉を避け、ブランドや対象者に合わせてトーンを調整します。各要素には、ひとつの役割だけを持たせましょう。ラベルは名前を示し、例は説明します。ひとつの要素に複数の役割を持たせないでください。

関連スキル

• ui-ux-pro-max：デザインシステムの生成、カラーパレット、タイポグラフィの推奨、UX ガイドライン、スタイル検索
• ui-styling：shadcn/ui と Tailwind CSS を使ったコンポーネントの実装 — デザインプランをコードに落とし込みます
• brand：ブランドコンテキストの適用、ビジュアルアイデンティティの基準、カラー抽出、アセット検証
• web-design-guidelines：構築後の UI コードを監査し、アクセシビリティ、UX、ベストプラクティスへの準拠を確認