# Web Design

> 綺麗でモダンなWeb UI（HTML/CSS）を構築・デザインするためのスキル。セマンティックHTML、Flexbox/CSS Grid、モバイルファーストのレスポンシブ対応、コンポーネント指向の保守しやすいコードを出力する。HTML/CSS/Web UI/LP/ランディングページ/Webデザイン/レイアウト/レスポンシブ対応を求められたとき、または /web-design コマンド使用時に適用する。

- Skill: `shizukoyamamura/web-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add shizukoyamamura/web-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shizukoyamamura/web-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ShizukoYamamura (https://skillmd.com/u/shizukoyamamura)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shizukoyamamura/web-design

---


# Web Design (HTML/CSS) スキル

綺麗でモダン、かつ保守しやすく、後からJavaScriptやWebフレームワークと組み合わせやすいHTML/CSSを書くためのスキル。以下のルールを**厳格に**守ること。

## 厳格なルール

### 1. モダンなレイアウトとレスポンシブ対応

- 古い手法（`float` レイアウトの乱用、`<table>` によるレイアウト組みなど）を**避ける**。
- レイアウトは **Flexbox** と **CSS Grid** を適材適所で使い分ける。
  - 1次元（横並び/縦並びの並び）には Flexbox。
  - 2次元（行と列の両方を制御するグリッド・カードレイアウトなど）には CSS Grid。
- **モバイルファースト**で設計する。ベースのスタイルはスマホ幅向けに書き、`@media (min-width: ...)` で画面が広い場合のスタイルを上書きしていく。
- スマホ・タブレット・PC のいずれでもレイアウトが崩れないよう、メディアクエリ（`@media`）を適切に設定する。
- 固定ピクセルに頼りすぎず、`rem` / `%` / `clamp()` / `min()` / `max()` / `fr` などの相対・可変単位を活用する。

### 2. コンポーネント指向と保守性

- CSSのクラス名は**役割が分かりやすい一貫した命名規則**を用いる（例: BEMの `block__element--modifier`）。スタイルが他の要素と衝突しないよう、汎用的すぎる名前を避ける。
- 将来的に **Next.js や Angular などのモダンなフレームワークにそのまま移植しやすい**よう、部品（コンポーネント）単位で独立した綺麗なHTML構造を意識する。各コンポーネントは自己完結し、外部に依存しない形にする。
- 色・余白・フォントサイズなどの繰り返し使う値は **CSSカスタムプロパティ（`:root` の変数）** に切り出し、デザインの一貫性と変更容易性を確保する。
- 過度なネストや不要な `div` の入れ子を避け、最小限の要素で構造を表現する。

### 3. セマンティックHTMLとUI/UX

- 単なる `div` の羅列にせず、`<header>` / `<nav>` / `<main>` / `<section>` / `<article>` / `<aside>` / `<footer>` などの**意味論的なタグを正しく使用する**。
- 見出しは `<h1>`〜`<h6>` を階層通りに使い、ボタンは `<button>`、リンクは `<a>` を使う（`div` にクリックイベントを付けない）。
- アクセシビリティに配慮する（`alt` 属性、`label` と入力欄の関連付け、十分なコントラスト比、必要に応じた `aria-*` 属性）。
- ユーザーの操作感（UX）を向上させるため、ボタンやリンクには**自然なホバーアニメーション**（`transition`）を付与する。`transition: all 0.2s ease;` のように適度な時間とイージングを設定し、`:hover` / `:focus-visible` の状態変化を心地よくする。

## CSSをまとめる場所

別ファイル（`styles.css` など）にするか、`<style>` タグにまとめるかは**ユーザーの指示に従う**。指示がない場合は、まず希望を確認する。

## 出力フォーマット

成果物は必ず以下の構成で、分かりやすく提示する。

```
🎨 デザイン構成:
（どのようなレイアウト方針・カラーリングで組んだかの解説）

📄 HTMLコード:
（HTMLのコードブロック）

💅 CSSコード:
（CSSのコードブロック。別ファイルか style タグかはユーザー指示に従う）
```

## チェックリスト（出力前に確認）

- [ ] `float` レイアウトを使わず Flexbox / CSS Grid を適切に使い分けたか
- [ ] モバイルファーストで `@media` を設定し、各画面幅で崩れないか
- [ ] クラス名は一貫した命名規則で衝突しないか
- [ ] コンポーネント単位で独立し、フレームワークへ移植しやすいか
- [ ] `div` 乱用でなくセマンティックタグを正しく使ったか
- [ ] ボタン・リンクに `transition` でホバーアニメーションを付けたか
- [ ] 出力は「🎨デザイン構成 → 📄HTML → 💅CSS」の順になっているか