デザインテンプレート

使い方

末尾の「ボイラープレート」をコピーして <tool-name>/index.html を作成
--color に未使用カラーを設定（CLAUDE.md の一覧参照）
下の各コンポーネントのコードをコピーして組み立て
必要なローカルスタイルは「コンポーネント CSS」からまとめて取得
tools/index.html にカードを追加

レイアウト・基本部品は ../_common.css 済み。.btn-primary やアラート等は _common.css 外なので「コンポーネント CSS」を併せてコピー。

ボタン

.btn-primary / .btn-secondary / .btn-icon / .btn-copy

全幅ボタン

.btn-primary.full

テキスト入力

.field / .field-label / .field-hint

ラベル補足テキスト

ヘッダー付きフィールド

.field-header

出力

セレクト

select

チェックボックス / ラジオ

.check-row

有効にする A B

トグルスイッチ

.switch

スライダー

input[type=range]

タブ

.tabs / .tab.active

バッジ

.badge / .active / .match / .mismatch

通常アクティブ一致不一致

アラート / 通知

.alert-info / -success / -warning / -error

ℹ️ 情報メッセージ

✅ 成功しました

⚠️ 注意してください

⛔ エラーが発生しました

タグ / チップ

.chip

タグ A タグ B タグ C

プログレスバー

.progress / .progress-bar

スピナー（処理中）

.spinner

処理中…

コピー用フィールド

.copy-field

出力エリア

.output / .output-row / .output-highlight

項目名値

ハイライトあマッチい

最終行下線なし

空状態

.empty

まだデータがありません

ツールチップ / キー表記

.tip / kbd

用語にカーソル ⌘ + C でコピー

セクション見出し

.section-title

設定

カラースウォッチ

.swatch

:root { --color: #8a94a6; }

使用済みカラーは CLAUDE.md 参照。重複しない色を選ぶこと。

ボイラープレート

新規ツールの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ツール名</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛠️</text></svg>">
  <link rel="stylesheet" href="../_common.css">
  <style>
    :root { --color: #8a94a6; } /* 未使用カラーに変更 */
    body { padding: 48px 20px 80px; }
    .wrap { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
    .card { padding: 26px; }
    /* ここに「コンポーネント CSS」と固有スタイルを貼る */
  </style>
</head>
<body>
<a class="back" href="../">← ツール一覧</a>
<header>
  <h1>🛠️ ツール名</h1>
  <p>一行説明</p>
</header>
<div class="wrap">
  <div class="card">
    <div class="field">
      <span class="field-label">入力</span>
      <input type="text" id="src" oninput="update()" placeholder="...">
    </div>
  </div>
  <div class="card">
    <div class="section-title">結果</div>
    <div class="output" id="out"></div>
  </div>
</div>
<script>
  function update() {
    document.getElementById('out').textContent = document.getElementById('src').value;
  }
  update();
</script>
<script src="../_feedback.js"></script>
</body>
</html>

末尾の <script src="../_feedback.js"> は必須。

index.html カードエントリ

一覧に追加

<a class="tool-card" href="<tool-name>/" style="border-top: 3px solid #8a94a6;" data-category="general">
  <span class="icon">🛠️</span>
  <span class="name">ツール名</span>
  <span class="desc">説明文</span>
</a>

data-category: general / dev / entertainment

コンポーネント CSS

_common.css 外の部品スタイル一式

下のボタンでこのページの <style> 全体をコピーし、ツールの <style> に貼り付ける。