frontend-design

フロントエンドデザインのスキル

8つのアンカー。それぞれが、特定のCSSトークンに固定された独自の美的領域です。ブリーフごとに1つ選び、そのトークンに合わせてください。

意外性を追求しましょう。アンカーへの忠実さ。コンテンツへの規律。デフォルトに任せるものは何もありません。

---

1. 進め方

コードを書く前に、次の手順を実行してください。

1. コンテキスト — 目的、対象読者、分野、コンテンツの密度を特定します。課題を1文で述べます。
2. アンカー — 1つ選びます。意外性を重視してください。スイス風パンクレコードレーベル、インダストリアルなフローリスト、ブルータリズムな高級時計メーカー、オーロラをテーマにした税務アプリ、混沌とした法律事務所、レトロフューチャーなウェディングフォトグラファー、オーガニックな取引端末、ローファイな高級ホテル――どれも無難な組み合わせより個性的です。無難な組み合わせでは、ありきたりな成果物になります。意外性が表れるのは表層、つまり初めて見る人が目にする部分です。「ユーザーは技術に詳しい」や「これはデータツールだから」という理由で、すべてのブリーフをインダストリアルに振り分けないでください。選択と理由を1行で述べます。
3. 差別化要素 — アンカーの特徴を活かした、記憶に残る工夫を1つ定義します。シグネチャーとなるインタラクション、タイポグラフィ上の仕掛け、レイアウトのモチーフ、素材の表現などです。1文で、説明可能かつレンダリング結果で目に見えるものにします。
4. システム — 選んだアンカーのトークンに厳密に合わせます。スイスを選ぶなら、白＋サンセリフ＋グリッドであり、「何となくすっきりした感じ」ではありません。
5. 実装 — 構成を組み立ててから実装します。画面上のコンテンツは、§2の規律に従って作成します。捏造や埋め草は禁止です。標準的なUI文言をテーマに合わせて置き換えることもできません。

1つのアンカーに徹底して取り組んでください。「スイス風にブルータリズムのエッジを加える」といった混合は、カテゴリーの取り違えです。各アンカーは、設計上ほかのアンカーの特徴を排除します。

---

2. コンテンツはデザインではありません

デザインとは、ビジュアルのことです。カラーパレット、タイポグラフィ、構造、質感などを指します。**コンテンツ――画面上の文字列、数値、ラベルすべて――は別途作成され、独自の規律に従います。**トークンに忠実であっても、コンテンツの粗雑さは正当化されません。

ルール：画面上の各文字列は、製品の実際の情報を示すか、それが何であるかを理解したうえで作成されたコンテンツでなければなりません。見出し、ボタンラベル、法的な本文、フォームフィールド名、サンプルだと分かるサンプルデータなどが該当します。禁止されるのは、実際の内容であるかのように装うコンテンツです。

禁止事項：

• 実データを装う捏造。 架空のセッション用ペルソナ（[email protected]）、偽のテレメトリ（GRID.FREQ 59.998 Hz、BUILD 8.2.0-rc3）などです。実際のコンテンツがない枠は空のままにし、画面を生き生きと見せるために捏造してはいけません。
• 埋め草のラベル。 誰も求めていない、すべて大文字のモノスペース字幕（ログイン画面のマストヘッド下にある SECURE OPERATOR AUTHENTICATION など）や、コードコメントを装った // 始まりの煽り文句（// INTELLIGENCE LAYER など）です。その文字列を削除しても情報が失われないなら、それは埋め草です。
• 標準的なUI文言をテーマに合わせて置き換えること。 Next の代わりに Authenticate Session、Remember me の代わりに Remember this operator とすることです。標準的な操作には標準的な文言を使います。テーマに合わせた文言は、実用性によって価値があると示せる場合にのみ使ってください。
• アイコンの代わりにUnicode記号を使うこと。 ▣ Dashboard、◊ Market Navigator などです。実際のアイコンセットを使うか、何も使わないでください。ASCIIアートはアイコン表現ではありません。
• AIスロップ調の文体。 モデルはこれを認識します。真剣な画面にある気取った補助文（Ask the grid.）、ありふれたB2BにあるSF風のステータス表示、構造を装う装飾的な「継ぎ目」や「建具」のあしらいなどです。自分の出力にこうした要素がないか見直し、レビュー担当者に指摘される前に削除してください。

---

3. 8つのアンカー

各アンカーは、特定のCSSトークンに固定されています。アンカーを選ぶことは、そのトークンを採用することです。レンダリング結果がトークンから外れているなら、そのアンカーは維持できていません。

1. スイス

表面： 純白の #FFFFFF またはニュートラルな #F7F7F8。タイポグラフィ： Akzidenz-Grotesk、Helvetica Neue、または Söhne — ディスプレイと本文に同じサンセリフ書体を使用します。アクセント： スイスレッド #E4002B、インターナショナルオレンジ #FF4F00、またはイヴ・クライン・ブルー #002FA7 — 1 色を選び、意図的に使います。構成： グリッド線を見せるか、1 px の細い罫線を使用します。タイポグラフィは左揃えにし、非対称なバランスを取ります。数字を構成要素として使います（日時、ノンブル、ページマーカーにはコンデンス体のサンセリフを使います）。

次の場合は崩れます： 温かみのある紙、セリフ体のディスプレイ書体、粒子状のテクスチャ、または中央揃えのタイポグラフィが現れた場合。

2. インダストリアル

表面： 漆黒の #000000 または温かみのある黒 #0B0C0A。タイポグラフィ： IBM Plex Mono、JetBrains Mono、または Berkeley Mono — ディスプレイと本文に等幅フォントを使います。シグナルカラー： 意味を持つ色を 1 色 — グリーン #00E676、レッド #FF3B30、アンバー #FFB800、またはアシッドライム #C6FF4A。構成： フラットにし、影の代わりに 1 px の境界線を使用します。font-variant-numeric: tabular-nums で数字を等幅にします。

次の場合は崩れます： セリフ体のタイポグラフィ、プロポーショナルフォント、温かみのある紙、あらゆる粒子状テクスチャ、装飾的な影、または角丸が現れた場合。

3. ブルータリスト

表面： 純粋な原色または非原色 — #FF0000、#0000FF、#FFFF00、#000000、#FFFFFF。2〜3 色を選び、同等に競合させます。タイポグラフィ： システムフォントのみ — Times New Roman、Helvetica、Courier、Arial、system-ui。書体を意図的に混在させます。影： ぼかしなしの硬いオフセット — box-shadow: 8px 8px 0 #000。コントロール： ブラウザー標準 — スタイル未設定の <button>、デフォルトの <select>、青のままの下線付き青リンク。マージンを極限まで詰め、文字を端から端まで配置します。

次の場合は崩れます： ウェブフォント、純粋な原色から調整した 16 進カラー、柔らかな影、角丸、または中央揃えのレイアウトが現れた場合。

4. オーロラ・マキシマリズム

表面： 暗く彩度の高いグラデーション — linear-gradient または conic-gradient で、バイオレット #5D34D0 → マゼンタ #FF006E → シアン #00F0FF、または #3B82F6 → #A855F7 → #EC4899 を使用します。タイポグラフィ： Inter Variable、PP Neue Machina、または Sharp Grotesk を、特大のディスプレイ書体（15〜25 vw）に使用します。テクスチャ： メッシュグラデーションを主な表面要素にし、アクセントにはネオンの text-shadow グロー（0 0 20px <accent>）を加えます。モーション： スプリング物理に基づく演出、スクロール連動の視差効果。

次の場合は崩れます： 単色の背景、温かみのある紙、抑制された表現、または主な構成要素としての細い罫線が現れた場合。

5. カオティック・マキシマリズム

表面： 互いにぶつかるパレット — ひとつの構成の中にパステルカラーとネオンカラーを混在させます。ホットピンク #FF71CE ＋ アシッドイエロー #DFFF00 ＋ シアン #00FFFF ＋ 任意の 3 色目。タイポグラフィ： 書体を意図的に衝突させます — 同じページ上で異なる系統の書体を 3 種類以上使います。テクスチャ： あらゆる表面にパターンを配置します（波線、ドット、ジグザグ、チェッカー — SVG または repeating-linear-gradient）。特大のディスプレイ書体を、密度の高い背景にぶつけます。

次の場合は崩れます： 統一感のあるパレット、単一の書体、構成要素としての余白、または 60/30/10 の比率が現れた場合。

6. レトロフューチャー

表面： 漆黒の #0A0014 または深いネイビーブラック。タイポグラフィ： 時代を反映した書体 — VT323（CRT）、Orbitron（シンセウェーブ）、Space Mono（サイバーパンク）、Monoton（マイアミネオン）、Press Start 2P（アーケード）、IBM Plex Mono（ターミナル）。アクセント： ネオンの組み合わせ — マゼンタ #FF006E ＋ シアン #00FFFF（シンセウェーブ）、または蛍光グリーン #00FF41 ＋ アンバー #FFB000（ターミナル）。テクスチャ： ::before の repeating-linear-gradient オーバーレイで CRT の走査線を加えるか、色収差（text-shadow: 2px 0 #FF0000, -2px 0 #00FFFF）を加えるか、または両方を使います。グローは徹底して使います。

次の場合は崩れます： フラットな表現、モダンなサンセリフ（Inter、Söhne）、紙の表面、またはテクスチャの欠如が現れた場合。

7. オーガニック

表面： アースカラー — セージ #8B9D83、クレイ #B08B6E、テラコッタ #C66B3D、オーカー #C08E3A、モス #606C38。明るい表面が必要な場合は、サンド #E8DCC7 またはオート #D4B895 を使用します。クリームの #F0-F8 ウォームペーパーの色域は決して使用しません。 タイポグラフィ： ヒューマニスト系セリフ体（Freight、Caslon、Fraunces — Fraunces はこのアンカーでのみ使用可能）または温かみのある幾何学的サンセリフ体（Greycliff、Epilogue、Recoleta）。構造： 角丸は 16〜32 px。テクスチャ： SVG feTurbulence で 1〜3 % の粒状感を加えます。動き： 300〜500 ms の穏やかなイージングと、ヒーロー要素に呼吸するようなアニメーションを使います。

次の場合は破綻します： クリーム色の背景（暖色がかった #F0+）、寒色系のグレー、純白、純黒、または角の立った長方形が現れる場合。

8. ローファイ

表面： ペーパーイエロー #E8E0C0 または #EDE4CF — クリームより彩度を高くします。タイポグラフィ： 同じページにシステムフォントを混在させます（Times、Helvetica、Courier を意図的にぶつけます）。構造： 要素を傾けます（transform: rotate でグリッドから 2〜8°ずらします）。テクスチャ： 画像にハーフトーンのドット状トランジション（SVG パターンまたは radial-gradient のタイル）を使います。リソグラフの版ずれ（text-shadow: 3px 0 #FF006E, -3px 0 #00FFCC で RGB チャンネルを 2〜4 px ずらします）。SVG のホチキス、テープ、破れた端の要素を使います。

次の場合は破綻します： 精密さ、単一の書体、滑らかな動き、グリッドに揃った長方形、またはクリーム（表面には、より彩度の高いペーパーイエローを使用します）が現れる場合。

---

4. 出力

すべての実装で、以下を提供します。

• 選択した方向性 — コードの前に、デザイナーらしい簡潔な文章で前置きを記します。選んだアンカー、安全策となる組み合わせではなくこの組み合わせを選んだ理由、差別化要素、アンカーから採用した主要なパレット／書体／テクスチャを明記します。チェックリストのようにではなく、確信を持って書きます。
• トークンの忠実性 — レンダリングされた CSS は、アンカーのトークンと完全に一致します。スイスを選んだ場合、CSS にウォームペーパー、Fraunces、粒状感は含まれません。インダストリアルを選んだ場合、宣言する書体はすべて等幅です。トークンがずれているなら、アンカーを守れていません。
• コンテンツの規律 — 画面上のすべての文字列、数値、ラベルは、実際の情報を表すか、何であるかを自覚したコンテンツとして作成します。捏造したデータ、埋め草のラベル、標準的な UI 文言をテーマに合わせて置き換えたもの、Unicode グリフのアイコンは使いません。トークンへの忠実性だけでは不十分です。コンテンツもきちんと仕上げます。
• 差別化要素が見えること — 記憶に残るひと工夫を、説明するだけでなく、レンダリング結果に実装します。

---

5. 出荷前の確認

• 意外性のある組み合わせ — クリエイティブな緊張感を生む選択をしましたか。それとも無難な組み合わせに流れましたか？
• トークンの忠実性 — レンダリングされるすべてのトークンが、アンカーで許可された範囲内にありますか。許可されていないトークンが含まれているなら、アンカーを守れていません。
• コンテンツの規律 — すべてのラベルが実際の情報を示していますか。標準的な操作には標準的な UI 文言を使っていますか。捏造、埋め草の全大文字モノスペース文字、// の前置き、Unicode グリフのアイコン、甘ったるい補足文、AI っぽい文体はありませんか。あれば削除します。
• 差別化要素が見えること — アンカーの内部にある、記憶に残る工夫が実際にレンダリングされていますか？
• ハイブリッド化への抵抗 — ひとつのアンカーを守れましたか。それとも「ブルータリスト風味のスイス」にずれてしまいましたか？