デザインの4原則 02 Web UI への適用(Tailwind での実装)

// ✗ NG: 全部同じ間隔・同じ強さ
<div className="space-y-4 p-4 border">
  <img src={img} alt={name} />
  <p>{name}</p>
  <p>{catchCopy}</p>
  <p>{price}</p>
  <button>カートに入れる</button>
</div>
 
// ○ OK: 関連するものは近く(gap-1)、グループ間は離す(gap-4)、価格とボタンを強く
<div className="flex flex-col gap-4 rounded-lg border p-4">
  <img src={img} alt={name} className="aspect-square rounded-md object-cover" />
  <div className="flex flex-col gap-1">                           {/* 近接: 名前とコピーは一体 */}
    <h3 className="text-base font-semibold">{name}</h3>
    <p className="text-sm text-muted-foreground">{catchCopy}</p>  {/* 対比: 補足は控えめ */}
  </div>
  <div className="flex items-center justify-between">
    <p className="text-xl font-bold">{price}</p>                  {/* 対比: 価格は大きく太く */}
    <Button>カートに入れる</Button>                                {/* 主要アクション */}
  </div>
</div>

<form className="flex max-w-md flex-col gap-6">          {/* 項目と項目の間: 広め */}
  <div className="flex flex-col gap-2">                  {/* ラベルと入力: 近く */}
    <Label htmlFor="email">メールアドレス</Label>
    <Input id="email" type="email" />
    <p className="text-sm text-muted-foreground">ログインに使います</p>
  </div>
  <div className="flex flex-col gap-2">
    <Label htmlFor="password">パスワード</Label>
    <Input id="password" type="password" />
  </div>
  <div className="flex justify-end gap-2">               {/* 整列: ボタンは右端に揃える */}
    <Button variant="outline">キャンセル</Button>
    <Button type="submit">登録</Button>                   {/* 対比: 主要は1つだけ塗り */}
  </div>
</form>

<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">   {/* グリッドで整列 */}
  {items.map((item) => <ProductCard key={item.id} {...item} />)}        {/* 同じ部品を反復 */}
</ul>

<main className="mx-auto max-w-5xl px-4 py-16">                  {/* ページの上下は大きく */}
  <section className="flex flex-col gap-4">
    <h1 className="text-4xl font-bold tracking-tight">見出し</h1>   {/* 対比: 最大・最太 */}
    <p className="text-lg text-muted-foreground">リード文</p>
  </section>
  <section className="mt-16 flex flex-col gap-6">...</section>    {/* セクション間は広く */}
</main>