2026.09.02

Claude Code の /design で改修デモを 3 案並べたら、一度まるごと突き返された

技術 Claude Code Web制作

はじめに

「トーンを落ち着かせて、情報の優先順位を整理します」。サイト改修の提案でこう書いても、たぶん何も伝わっていない。見出しの大きさも余白も、頭の中の絵が人によって違うから。

Claude Code に /design というコマンドがあって、複数のデザイン案を 1 枚のキャンバスに並べて出せる。あるクリニックのサイト改修で、これを使って改修後のデモを 3 案つくった。同じ法人が運営していて、本体とは別ブランドのサイトが 2 つある案件だった。

結論から書くと、1 回目は「全然ダメ」で突き返された。原因は技術的にはっきりしていて、しかも同じ失敗は誰でもやると思う。既存サイトの個性を CSS の色とフォントから抜こうとしたことと、そもそもバックアップに必要な画像が入っていなかったこと。この 2 つです。

基礎となる知識

Claude Code: ターミナルで動く AI のコーディング環境。ファイルを読み書きしたりコマンドを動かしたりできる
/design: Claude Code のコマンドの 1 つ。複数の「アートボード」(1 枚の画面デザインを置く台紙)を並べたキャンバスを作り、ブラウザで開ける形で公開する
Playwright: ブラウザを自動で動かすツール。ページの実際の高さを測ったり、スクリーンショットを撮ったりできる
コンタクトシート: 大量の画像を格子状に 1 枚へ並べたもの。フィルム時代のベタ焼きと同じ考え方

解説と使い方

/design が作るものの構造

/design の実体は難しくない。アートボード 1 枚につき HTML ファイルが 1 つあって、それをどう並べるかを canvas.json に書く。

{
  "artboards": [
    { "file": "Main.dc.html",   "title": "① 本体サイト", "x": 0,    "y": 0, "w": 1280, "h": 2560 },
    { "file": "B.dc.html",      "title": "② 別ブランド", "x": 1400, "y": 0, "w": 1280, "h": 2560 },
    { "file": "C.dc.html",      "title": "③ 別ブランド", "x": 2800, "y": 0, "w": 1280, "h": 2560 }
  ],
  "launch": { "view": "canvas" }
}

x と y がキャンバス上の座標で、これで 3 枚を横一列に置いている。ここに注記のテキストも置けるので、「流用したもの」「直したところ」をアートボードの上に添えた。最後にこれを 1 つの HTML にまとめて公開すると、相手はリンクを開くだけで 3 案を見比べられる。

ページを 3 つ作って URL を 3 本渡すのとは、体験がまるで違うなと感じた。横に並んでいるから比較になる。

いちばん効いたのは、素材を実物にしたこと

デモにダミーの写真とダミーの文章を入れると、見る側は判断できない。「うちのサイトがこうなる」という想像に、余計な変換が挟まるからだと思う。

なので写真は移行前のバックアップから実物を使い、診療時間・料金・スタッフの構成も実際のページから抜いた。抜くのは正規表現で script / style / nav / footer を落として本文だけ取り出す 20 行程度のスクリプトで足りる。

写真の選定では、画像を格子状に並べたコンタクトシートを作って一気に見た。数十枚を 1 枚の JPEG にまとめてしまえば、目で選べる。

そして 1 回目は突き返された

出したデモに返ってきたのは「全然ダメ。もともとのサイトをちゃんと確認して、そのデザイン性はある程度維持した状態で」だった。

自分の作り方を振り返ると、既存サイトの CSS から色とフォントだけを抜いて、そこに今どきの構成を載せていた。落ち着いた配色で、余白が広くて、見出しが明朝の、きれいなページにはなっている。ただ、元のサイトとは別物だった。

改めて既存サイトを Playwright で上から下までスクリーンショットに撮って、セクションごとに切って見ていった。そこで分かったのは、そのサイトの個性は色ではなく構成にあったということ。

セクションごとに背景色が変わり、その境目をイラストの帯がつないでいる。白から淡い緑へ、丘のイラストを挟んで黄緑のお知らせ、街並みのシルエットを挟んで白、木とバス、波、草・・・という具合に。2010 年代の作り方ではあるけれど、そこがそのサイトの顔だった。ほかにも 4 色に塗り分けられたナビゲーション、手描き風に角丸が不均等な border-radius: 26px 8px 30px 10px のようなカード、診療時間表の濃緑ヘッダー。全部落としていた。

根本原因はバックアップの取り方だった

なぜ気づかなかったのか、を掘ると技術的な原因に当たった。

その帯のイラストは、バックアップに 1 枚も入っていなかった。

画像を収集するときに HTML の src 属性だけを見ていたからで、これらは CSS の background-image: url(...) で読まれていた。src を辿るだけの素朴な収集では、CSS 経由の画像は丸ごと落ちる。

バックアップとしては欠陥だし、デザインを読み取る材料としても致命的だった。手元の素材に装飾が 1 枚も無ければ、そのサイトの個性は色とフォントにしか見えない。見えていないものは、無かったことになる。 これは自分の中でけっこう大きい気づきだった。

本番から取得してバックアップを補完した。サイトの静的なコピーを取るときは、HTML の src だけでなく CSS の url() も辿る、というのは覚えておきたいところです。

3 つを共通のデザインに揃えたのも間違いだった

もう 1 つ直したのが、統一のしかた。1 回目は 3 サイトで骨格と部品を完全に揃えて、色だけ変えていた。同じ設計から出ていることが分かりやすいから良い、と思っていた。

現物を確認したら、3 つはそれぞれ完全に別の世界観を持っていた。曲線で区切られた淡いピンクのサイトと、紙のテクスチャに雲や気球が浮かぶサイトを、同じ骨格に流し込むのは違う。共通のデザインシステムに揃えるのが正解ではなく、それぞれの世界観を保ったまま情報の順番だけ直すのが正解だった。

作り直したあとの変更点は、拍子抜けするほど少ない。本体は診療時間を上に持ってきたことと、バナーの整理。もう 1 つは当日利用の電話番号を上に。デザインそのものには手を入れていない。

アートボードの高さは自動で伸びない

技術的な落とし穴を 1 つ。canvas.json の h は宣言であって、中身に合わせて自動で伸びるわけではない。はみ出した分は切れる。

見た目では気づきにくいので、Playwright で実測した。

const r = await p.evaluate(() => {
  const root = document.querySelector('x-dc > div') || document.body;
  return { h: Math.ceil(root.getBoundingClientRect().height) };
});

結果は 2,462px / 2,458px / 2,518px。枠は 3 枚とも 2,500px にしていたので、3 枚目だけ下が 18px 切れていた。3 枚とも 2,560px に揃えて解消した。ついでに横方向のはみ出し、画像の読み込み失敗、12px 未満の文字も同じスクリプトで拾えるようにした。

デモは印象で判断される場だからこそ、機械で測れるところは測っておくといいと思う。

やってみた結果

現行サイトのトップは、スマホ幅で縦 7,615px あった(Playwright の実測)。デモの 3 枚は 2,462px / 2,458px / 2,518px なので、3 分の 1 前後まで縮んでいる。この数字は「情報の優先順位がない」ことの分かりやすい代理指標になった。長いこと自体が悪いわけではないけれど、患者が最初に知りたい診療時間が最下部にある状態は、縦の長さに表れる。

やってみて残った実感は 3 つ。

現物を見ないで CSS だけ読むと外す。 色コードとフォント名は機械的に抜けるので、抜けた気になってしまう。実際にブラウザで開いて、上から下までスクロールして見るのが先だった。

推測で埋めた箇所は、埋めた印を残す。 料金が分からないところは [ お問い合わせください ] のままにして、写真の人物の対応が推測であることも明記した。デモは細部まで作り込むほど「確定した情報」に見えるので、確定していない場所は見た目でも分かるようにしておかないと危ないと思う。

突き返されたほうが早い。 1 回目で「全然ダメ」と言われたおかげでバックアップの欠陥まで見つかった。デモを作る目的は、褒められることではなく方向を合わせることなので、早い段階でずれが出るのはむしろ良かった。

まとめ

/design は「アートボードの HTML + 配置を書いた JSON」という単純な構造。横に並ぶから比較になる
デモの素材はダミーにしない。実物の写真と実際の文章を使うと、相手が判断できる
既存サイトの個性は色とフォントではなく構成に宿っていることがある。CSS を読む前にブラウザで見る
サイトの静的コピーは HTML の src だけでなく CSS の url() も辿る。落とすと装飾が丸ごと消える
複数サイトを共通デザインに揃えるのが正解とは限らない
アートボードの高さは自動で伸びない。ブラウザで実測して枠に収まっているか確かめる

改修の提案は、言葉より 1 枚の絵のほうが早い。ただしその絵は、今のサイトの延長線上にないと判断してもらえない・・・というのが、今回いちばん身に染みたところです。