# Frontend Design

> 新しい UI を作るとき、既存の UI を作り直すときに、意図のある独自の視覚デザインを導くためのガイド。意匠の方向性、タイポグラフィ、そして「テンプレートの既定値」に見えない選択をするために使う。

- Skill: `sinnlosses/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add sinnlosses/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sinnlosses/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: 全文は LICENSE.txt を参照
- Author: sinnlosses (https://skillmd.com/u/sinnlosses)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/sinnlosses/frontend-design

---


# フロントエンドデザイン

**すべてのクライアントに、他の誰のものとも取り違えられない視覚的アイデンティティを与える**ことで知られたデザインスタジオの、デザインリードとして取り組むこと。このクライアントは既に「ありがち」「テンプレっぽい」と感じた提案を却下しており、独自の観点に対価を払っている。パレット・タイポグラフィ・レイアウトについて、この案件に固有の、意図的で主張のある選択をすること。正当化できるなら、意匠上のリスクを取ってよい。

## デザインを題材に根ざさせる

ブリーフ（依頼内容）がプロダクトや題材を特定していない場合は、デザインを始める前に自分で特定し、クライアントに確認する。具体的な題材・デザインの受け手・デザインの主な仕事を1つずつ、提案として出してよい。クライアントの好みや、何を作ろうとしているかの文脈が記憶にあるなら、それをヒントに使う。

**独自の視覚的選択は、題材の業界・主題・素材・語彙から生まれる。** 8〜11歳の女の子向けのおもちゃのデザインと、金融アナリスト向けのダッシュボードは、まったく違う見た目になる。ブリーフの実際の内容と題材を、最後まで使って作ること。

## デザイン原則

Web デザインでは、**ヒーロー（最上部）が閲覧者の見る最初のもの**である。その題材の世界で最も特徴的なものを、最も適した形で冒頭に置く。見出し、画像、アニメーション、ライブデモ、インタラクティブな瞬間、あるいは他の扱い方。選択は意図的に行うこと。「大きな数字に小さなラベル、補足の統計、グラデーションのアクセント」は既定の扱いなので、本当にそれが最善のときだけ使う。

**タイポグラフィがページの人格を担う。** ディスプレイ・見出し用と本文用で書体を分ける必要はない。1ファミリーか2ファミリーを使い、2つ使うなら明確に異なるものにする。

書体は意図的に選ぶこと。**他のどんなプロジェクトでも手が伸びる既定のファミリーではなく**、『The Elements of Typographic Style』の既定の指針に沿って明確なタイプスケールを設定し、ウェイト・幅・字送りも意図して決める。見出しや視覚要素として使われる型は、内容を運ぶ中立な乗り物ではなく、**タイポグラフィの扱いそのものをデザインの能動的な一部**として使う。

行長は既定で80文字未満にする。セリフ体はやや長い行長でもよい。セリフ体の本文にはサンセリフ体より少し広い行間を与える。

以下の既定的なタイポグラフィの扱いは避ける。これらは**生成されたページであることの最もありふれた手がかり**である。

- 見出しの中の単語やフレーズを1つだけ強調する（1語だけイタリック／ボールド／別の色にする）
- ラベルを全部大文字にする
- コンテンツの上に不要なタイポグラフィのラベルを足す

**視覚的な構造は情報である。** アウトライン・罫線・番号・アイブロウ（見出し上の小ラベル）・区切り線・ラベルといった構造上の道具は、装飾ではなく内容についての有用な情報を符号化するもの。多くの凡庸なデザインは番号付きマーカー（01 / 02 / 03）を使うが、それが適切なのは**内容が実際に順序を持つとき**だけである（段階のあるプロセス、時系列など）。番号付きマーカーを足す前に、内容が本当に順序なのかを確かめること。

**ユーザーの操作をきっかけとしないモーションは、控えめに、意図的に。** 注意を引くときだけに使う。散らばったエフェクトより、**一度だけ組み立てられた瞬間**（1回のページロードの流れ、1回のリビール）のほうが効く。セクションごとのフェード＆スライドアップ、カードすべてのホバートランジションは凡庸な既定であり、AI 生成に読める。人の操作（開く・展開する・確定する）に応えるモーションは、何が変わったかを示すので歓迎される。

**書かれた内容も慎重に考える。** デザインのブリーフには実際の内容が含まれないことが多く、コピーやプレースホルダを考えるのは自分の仕事になる。**コピーはデザイン本体と同じくらいテンプレっぽさを生む。** 下の「デザインにおける文章」節を参照。

## 進め方: 計画 → ブリーフと突き合わせ → 構築 → 自己批評

較正のために書いておくと、現在の AI 生成デザインはいくつかの特徴に群がっている。

1. 温かみのあるクリーム色の背景（#F4F1EA 近辺）＋高コントラストのセリフ体ディスプレイ＋テラコッタか暖かい土色のアクセント（しばしば #D97757 近辺。これは Anthropic 自身の Claude インタラクションのアクセント色なので、ユーザーのブリーフ上では手がかりとして読まれる）
2. ほぼ黒の背景＋明るいアシッドグリーンか朱色のアクセント1色
3. ヘアラインの罫線、border-radius ゼロ、新聞のような密なカラムの、大判紙風レイアウト
4. SaaS カードキット: 内容が同一の角丸カードに刻まれ、階層に関わらずすべてに同じ border-radius、それぞれの下に同じ柔らかいグレーの影（rgba(0,0,0,.1)）、装飾としてのグラデーション
5. 題材が何であれ現れるテンプレートの外装: すべての見出しの上に字間を空けた全部大文字のアイブロウラベル、中黒でつないだメタ文字列（'A · B · C'）、空白付きのダッシュで作る 'WORD — 断片' 形式のラベル、黒の代わりに使われる色味を帯びたほぼ黒（#0B0B0B, #111）、小さなデータラベルの等幅書体、リンクやボタンのテキスト末尾に付く '→'

**これらの特徴はどれも、あるブリーフにとっては正当である。** 問題は、それが選択ではなく既定であり、題材に関わらず現れることだ。ブリーフが視覚的な方向性を指定しているなら、それに正確に従う。**ブリーフ自身の言葉が常に勝つ**（上記の見た目のどれかを求めている場合も含む）。ブリーフがある軸を自由にしているなら、その自由をこれらの既定に使わない。雇われた人間のデザイナーと同じで、得意なことをやるのと、各案件を実験と学習の機会にするのとの間には、しばしば慎重な釣り合いがある。

**2パスで作業する。** まず、クライアントのデザインブリーフを基に短いデザイン計画をブレインストームする。色・型・レイアウト・原則からなる、コンパクトなトークンシステムを作る。

- **Color**: 中核となるベースパレットを、名前付きの16進値 4〜6個で記述する
- **Type**: 書体とその役割
- **Layout**: レイアウトの構想。1文の散文による記述と ASCII ワイヤーフレームで着想と比較を行う。**揃えの指針も含める**（内容は左揃えか、中央揃えか、両端揃えか）
- **Principles**: このページを固有のものにしているのは何か、という高レベルの指針

次に、**構築の前にその計画をブリーフと突き合わせてレビューする**。もしどこかが、この特定のブリーフのためになされた選択ではなく、似たようなページなら何にでも出力するであろう凡庸な既定に読めるなら（似たプロンプトを通してみて、同じ場所にたどり着くか確かめる）、その部分を直し、**何をなぜ変えたかを述べる**。デザイン計画の相対的な固有性を確認してから、改訂した計画に沿ってコードを書き始めること。

コードを書くときは、**CSS セレクタの詳細度の組み立てに注意する。** 互いを打ち消し合う CSS クラスは簡単に生成されてしまう（特に `.section` のような型ベースのセレクタと `.cta` のような要素ベースのセレクタの組み合わせ）。セクション間の padding / margin でよく起きる。

## 抑制と自己批評

**大胆さは1箇所に使う。** 1つの要素を記憶に残るものにし、その周りはすべて静かで規律あるものに保ち、ブリーフに資さない装飾はすべて削る。**品質の床は、宣言せずに満たす**: モバイルまでのレスポンシブ、見えるキーボードフォーカス、reduced motion の尊重、視覚的なアクセシビリティ、調和の取れたカラーパレット。

作りながら自分の仕事を批評すること。環境が許すならスクリーンショットを撮ってレビューする（**1枚の絵は1000トークンの価値がある**）。シャネルの助言を思い出すとよい。**家を出る前に鏡を見て、アクセサリーを1つ外す。** 人間のクリエイターは記憶を持ち、常に新しいことをやろうとする。試したことを素早く書き留める場所があるなら、次のパスで役に立つ。

## デザインにおける文章

**言葉がデザインに現れる理由は1つだけ**: 理解しやすく、使いやすくするため。言葉はデザインのコンテンツであって装飾ではない。余白や色に向けるのと同じ意図性と最小主義を、コピーライティングにも向けること。何かを書く前に、**このデザインは何を言う必要があるのか、体験をたどる人を助けるにはどう言うのが最善か**を問う。

**エンドユーザーの視点から書く。** システムがどう作られているかではなく、ユーザーが理解する平易な言葉で名付ける。ユーザーが管理するのは「通知」であって「webhook の設定」ではない。売り込むのではなく、それが何であるか・何をするかを平易に説明する。**新しいユーザーにとって具体的で読み取れることは、気が利いていることより常に優れている。**

**既定で能動態を使う。** CTA は使ったときに何が起きるかをそのまま言う。「Submit」ではなく「変更を保存」。1つの操作はフロー全体を通して同じ名前を保つ。「公開する」と書かれたボタンは「公開しました」というトーストを出す。**インターフェースの語彙は、プロダクトをたどる人にとっての道標である。** まとまりと一貫性こそが、人が道を覚える方法になる。

**失敗と空の状態は、雰囲気ではなく方向を示す瞬間として扱う。** 何が起きたか、どう直すかを、個人の声ではなくインターフェースの声で説明する。エラーは謝らないし、何が起きたかを決して曖昧にしない。空の画面は行動への招待である。

**トーンは会話的に保つ**: 平易な動詞、文頭だけ大文字（sentence case）、埋め草なし。トーンはブランドと受け手に合わせる。書かれた各要素には、ちょうど1つの仕事だけをさせること。