honey-design

Honey Design（同じピクセル数、より少ないトークン）

ランディングページ、マーケティングサイト、UI コンポーネントなど、ユーザーに提供する成果物では、 仕上がりの良さが仕様です。 最低限の要件は満たしていても見栄えの悪いページは失敗であり、節約ではありません。

ここでトークンを節約する方法は、「デザインを簡素にする」ことではありません。「同じデザインを、より高密度に表現する」ことです。圧縮するのはコードであり、レンダリング結果ではありません。完成したページのピクセルが1つでも変わるような削減は、間違った削減です。

執筆スタイルとして、無意識に適用してください。どのルールを使うか熟考したり、このスキル自体に推論トークンを費やしたりしないでください。完成度の高いものを作り、そのマークアップと CSS は習慣として高密度に記述してください。

仕上がりの良さを守る（評価の対象）

これらをトークン節約のために犠牲にしないでください。これらこそが成果物です。

• 視覚的な奥行き — 練られたレイアウト、心地よい余白のリズム、明確な視覚的階層、ブランドに合った色と文字。スタイルのない骨組みではありません。
• 依頼されたすべてのセクションを十分に作り込む — ナビゲーション、ヒーロー、機能、料金、フッターなど。仮置きのセクションは最小限ではなく、未完成です。
• インタラクションとモーション — ホバー／フォーカス状態、トランジション、「完成している」と感じさせる細部。
• 豊かなレスポンシブ対応 — モバイルでもデスクトップでも本当に使いやすく、単にデスクトップ用ページが崩れないだけではありません。
• アクセシビリティ — ラベル付きコントロール、すべての画像の alt、セマンティックなランドマーク、見えるフォーカス、十分なコントラスト、キーボード操作への対応。
• ユーザーが明示的に依頼したことすべて。

トークンを節約する方法 — 同じ見た目を高密度に表現

デザインの豊かさを損なわず、コードの重複や冗長さを取り除いて、同じ完成ページをより少ないトークンで作成します。

CSS

• 複数回使うものにはカスタムプロパティを使う — 配色、余白のスケール、角丸、シャドウ、トランジションなど。一度 :root で定義し、どこでも参照します。最も効果の大きい節約方法です。繰り返される #1a1a2e／24px／box-shadow:… を var(--…) に置き換えます。
• 繰り返しのブロックより共通クラスを使う。 3つの機能カードには、ほぼ同じ宣言ブロックを3つ書くのではなく、.card ルールを1つ使います。スタイルはクラスで指定し、インラインで指定しないでください。
• ショートハンドプロパティを使う — margin、padding、inset、font、flex、background、border、grid のショートハンドを、個別のロングハンド指定より優先します。
• 可変サイズ指定でメディアクエリを減らす — 文字や余白には clamp()／min()／max() と %／fr／vw を使い、さらに grid-template-columns:repeat(auto-fit, minmax(…,1fr)) や flex-wrap を活用します。流動的なルール1つで、基本ルールと2つの @media 上書きを置き換えられることがよくあります。レイアウトを本当に変更する必要がある場合に限り、@media を残してください。
• 同じルールを共有するセレクターをまとめる（h1,h2,h3{…}）。冗長な normalize ではなく簡潔なリセットを使い、短縮形の16進数（#fff）を使い、0 に単位を付けず、末尾のゼロも省きます。
• 使われていない CSS、重複した CSS、コメントアウトされた CSS を残さない。

HTML

• セマンティックなランドマークを使い、不要なラッパー div は使わない — `
  ` で構造を表現します。役割のない div を入れ子にしないでください。
• style= の繰り返しを避ける — クラスにまとめてください。
• 簡潔で自然なコピーを使う — デザインを伝えるのに十分な内容にし、水増しの lorem は使いません。

成果物に添える説明文は、ほぼゼロに。 ページそのものが回答です。「ランディングページを作りました！」のような文言も、作成内容の解説も不要です。どうしても重要な前提（フォントへの依存関係など）がある場合に限り、1行までにしてください。

完成前のセルフチェック

各圧縮を適用しても適用しなくても、レンダリングされたページは完全に同じに見えますか？

同じなら、そのまま提出してください。デザインではなく、トークンのコストを削減できています。削減によってホバー状態、グラデーション、セクション、ブレークポイント、またはアクセシビリティ属性が失われるなら、このテストには不合格です。元に戻してください。レンダリング品質を損なう高密度化は成功ではありません。このスキルが防ごうとしている、安価で質の低い代替版にすぎません。