部品を選ぶ

画面が移動するならリンク、その場で何かが起きるならボタン。見た目ではなく動作で決める。ボタンとリンク

<a href="/about">詳しく見る</a>
<button type="button">設定を保存</button>

主・副・控えめの3種で足りる。1画面に主ボタンは1つ。ボタンとリンク

.button--primary { background: var(--color-accent-text); color: var(--color-on-accent); }
.button--secondary { border-color: var(--color-accent-text); }   /* 枠は地に対して 3:1 */
.button--ghost { background: transparent; color: var(--color-text-muted); }

押すと何が起きるかを書く。「送信」より「見積もりを依頼する」。UXライティング

<button type="submit">見積もりを依頼する</button>

44×44を目安にする。WCAG 2.2 の下限は24×24。見た目が小さくても当たり判定を広げれば足りる。ボタンとリンク

.icon-button { position: relative; }   /* 見た目は小さいまま */
.icon-button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  translate: -50% -50%;
}
/* 基底の .button は 44px を持っている。広げるのは小さく見せる的だけ */

2〜5個で全部見せたいならラジオ、6個以上ならセレクト、複数選べるならチェックボックス。選択

<!-- 2〜5個 -->
<fieldset><legend>プラン</legend><label><input type="radio" name="plan"> 基本</label></fieldset>
<!-- 6個以上 -->
<label>都道府県 <select name="pref"></select></label>

その場で即座に反映されるならトグル、保存を押して確定するならチェックボックス。選択

<!-- 即反映 -->
<label><input type="checkbox" role="switch"> 通知を受け取る</label>
<!-- 保存で確定 -->
<label><input type="checkbox" name="opt"> メール配信に同意</label>

作業を止めてよいならモーダル、元の画面を見ながら操作させたいならドロワー。迷ったらページ遷移。重ねる

<dialog class="modal">...</dialog>
<aside class="drawer" hidden>...</aside>

閉じたときに、開く前にフォーカスがあった要素へ戻す。押した場所に戻れないと現在地を見失う。キーボードで使える

const trigger = document.activeElement;
dialog.showModal();
dialog.addEventListener('close', () => trigger.focus());

気づかなくてよいものは控えめに出し、操作を止めるべきものだけ読み上げにも割り込ませる。知らせる

<div role="status" aria-live="polite" class="toast">保存しました</div>
<div role="alert" aria-live="assertive" class="alert">入力内容を確認してください</div>

読む時間＋2秒。消えると困る情報はトーストに載せない。知らせる

const ms = text.length * 50 + 2000;
setTimeout(() => toast.remove(), ms);

読み込み中・空・エラー・正常の4つを必ず作る。空の画面には最初の操作への導線を置く。4つの状態

<section class="empty-state" aria-labelledby="empty-title">
  <h2 id="empty-title">まだデータがありません</h2>
  <a class="button button--primary" href="/new">最初の1件を追加</a>
</section>

回転する印より、これから出る形をかたどった枠のほうが待ち時間を短く感じる。4つの状態

<div class="skeleton" aria-busy="true" aria-label="読み込み中">
  <div class="skeleton__line"></div>
  <div class="skeleton__line"></div>
</div>

同時に1つだけ見せたいならタブ、複数を開いて見比べたいならアコーディオン。ナビゲーション

<!-- 1つだけ -->
<div role="tablist">...</div>
<!-- 複数開く -->
<details><summary>詳細</summary>...</details>

階層が3段以上あるなら置く。1〜2段なら戻る導線で足りる。ナビゲーション

<nav aria-label="パンくず">
  <ol><li><a href="/">ホーム</a></li><li aria-current="page">料金</li></ol>
</nav>

探して戻るならページ送り、眺めるだけなら無限スクロール。フッターに用があるなら無限にしない。ナビゲーション

<nav aria-label="ページ送り">
  <a href="?page=1">前</a> <span aria-current="page">2</span> <a href="?page=3">次</a>
</nav>

画像が主役ならカード、比べさせるならリスト。カードは1画面に入る数が減る。構図のパターン

.list { display: flex; flex-direction: column; gap: var(--space-3); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); }