この記事は、個人ブログ kinolab に掲載した記事の転載です。
初出: Claude Code の /design を試した ― 「適当にサービス作って」で LP が3案出てきた
こんにちは！
……先に、正直にお伝えしておくことがあります。
今回、ちいかわが出てきません。
このコラム、これまでは島編を借りて Google Cloud の VPC を説明したり、うさぎでイベント駆動アーキテクチャを語ったりしてきたので、「今日はどの話から入るんだろう」と思って開いてくださった方には申し訳ないです。今日はまっすぐ Claude Codeの話をします。
いや、ひねり出そうとはしたんです。デザインツールの話なので「〇〇のあの回の構図が……」とか。でも今回いちばん書きたかったのがAIが人間の無茶振りに答えてヒアリングしながらデザインを作り上げることでして、これに合う名場面がどうしても思いつきませんでした。無理に乗せると、たぶん作品にも Claude にも失礼になる。
というわけで、今日は素のまま行きます。Claude Codeに少し前に追加された /design というコマンドの検証記録です。
私は普段 Python でアプリケーション（WebのAPIなど）を書いているエンジニアです。つまりデザインは完全に専門外でして、「なんとなくおしゃれな感じで」と言われると石になります。
そんな私でも使えるのか。というのが今日のテーマです。
1. /design と打つ
まず Claude Code で /design と打ちます。
/design のほかにも -sync だの -consent だの、なにやら物々しい仲間が並んでいますが、今日は素直に /design を選びます。
すると、こう聞かれます。
「新サービスのランディングページ」「イベント告知のA4チラシ」。なるほど、まっとうな例です。
ここで私が入力したのが、こちらになります。
「検証ようなので、適当にサービス作って」
「検証よう」です。誤字もそのままお届けしています。人間が丁寧に指示を出す気ゼロの状態で、AI に丸投げしたらどうなるのか。これはこれで立派な検証だと私は思っています。
2. 雑な指示ほど、丁寧に聞き返される
丸投げされた /design は、怒りませんでした。代わりに選択肢を出してきました。
「静的モックアップ（見た目の完成形を作る。ボタン等は動かない）」か「クリック可能プロトタイプ（料金トグルやFAQ開閉などが実際に動く）」か。
ボタンが動くものが作れるらしい、というのがこの時点で判明します。デザインツールの出力といえば画像だと思っていたので、ここで少し前のめりになりました。推奨は静的モックアップの方でしたが、動くところが見たかったのでクリック可能プロトタイプを選んでいます。
続けて、進め方も聞かれます。
「方向性ラフを3案先に見る」か「いきなり本番LPを1案」か。推奨の3案を選びました。
そして、ここが個人的にいちばん感心したところです。
サービスの中身がまだ分からないので、ここだけ教えてください。
何のサービスか、誰向けか、一番の強み。
これ、まっとうなデザイナーさんが最初にするヒアリングそのものですよね。「適当に作って」と言った人間に対して、「では、どういう適当がよろしいでしょうか」と冷静に聞き返してきている。しかも「名前や料金など未確定のものは ［サービス名］ のようなプレースホルダーで置いておきます」と、先回りまでしてくれます。
私はここでも「検証なので任せる」と答えました。学習しない人間です。
3. 架空の会社が生えてきた
しばらく待つと、こうなりました。
丸投げの結果、**架空の B2B SaaS「クミキ」**が誕生していました。
電気・空調・内装の専門工事会社（10〜50名）の現場監督向けで、「撮影時にAR電子黒板を合成 → 写真を自動仕分け → 提出様式で出力」という工事写真台帳アプリです。
工事写真台帳アプリ。 ニッチ。あまりにもニッチです。「適当に」と言われて出てくる題材としては解像度が高すぎて、逆に「本当にこういう会社あるのでは？」と検索しかけました（ありません）。
しかも3案には、それぞれ狙いとトレードオフが付いています。
- A｜現場のリアル（本命）— ダーク＋ハイビズイエロー、太いゴシック、写真ゼロで図形とグリッドのみ。硬派に振れる分、経営層向けにはやや粗く見えるのがトレードオフ
- B｜静かな信頼 — 明朝＋生成りの紙、和名「組木」。元請け・経営層への信頼感優先、速さは伝わりにくい
- C｜速さと軽さ — 王道のプロダクト主導。外さないが記憶に残りにくい
ハイビズイエロー（工事現場の安全ベストのあの色）を持ってきたうえで、B案では社名を和名の「組木」に読み替えている。名前の由来まで設計されていて、丸投げした側としては少し気まずくなってきます。
そして、締めの一文が効きます。
見ていただいている間に、こちらでもう一度中身を確認して気になる点は直します。
待ち時間まで仕事に使ってくる。 私はその間コーヒーを淹れていました。
……なお、そのさらに下に不穏な報告が続いているのですが、それは後の章で回収します。
リンクを開くと、キャンバスに3案が横並びになっています。
ここからはブラウザの Claude Design とほぼ同じです。パンとズームができて、要素をクリックすれば選択でき、プロパティパネルから色や文字を直接いじれる。テキストはその場で書き換えられるし、undo / redo も効きます。
つまり、叩き台をターミナルで作って、細かい調整はブラウザで手を動かすという分担になります。「指示は言葉で出せるが、最後の詰めは目で見ないと分からない」タイプの人間には、この分かれ方がかなり合っていました。
4. 手元に何が残るのか
ここからが本題です。作業ディレクトリを覗いてみます。
canvas.json # 3案をどう並べるかの配置図
Main.dc.html # A案
DirectionB.dc.html # B案
DirectionC.dc.html # C案
kumiki-lp.html # エクスポートした単一 HTML（2.2MB）
.dc.html という見慣れない拡張子がアートボード（1枚のデザイン。デザインツールで言うキャンバス上の1ページ分）です。そして canvas.json が、それをどこに置くかを持っています。
{
"artboards": [
{ "file": "Main.dc.html", "x": 0, "y": 0, "w": 1440, "h": 4700, "title": "A｜現場のリアル（本命・動く）" },
{ "file": "DirectionB.dc.html", "x": 1600, "y": 0, "w": 1440, "h": 2700, "title": "B｜静かな信頼" },
{ "file": "DirectionC.dc.html", "x": 3200, "y": 0, "w": 1440, "h": 2500, "title": "C｜速さと軽さ" }
],
"annotations": [ ... ],
"launch": { "view": "canvas" }
}
拍子抜けするほど素直です。x を 1600 ずつずらして横に並べ、幅は 1440 で揃え、高さだけ中身に応じて変えている。キャンバスは方眼紙で、アートボードはそこに置いた紙、それ以上のことは何もしていません。
面白いのが annotations の方で、これはアートボードの外側、キャンバス上に直接置ける注記です。さっきの「狙いとトレードオフ」は、ここに入っていました。
{
"id": "dir-a", "x": 0, "y": -330, "w": 460,
"text": "A｜現場のリアル\n狙い: 現場の道具に見せる。ダーク＋ハイビズイエロー、太いゴシック、写真ゼロで図形とグリッドだけ。（略）\nトレードオフ: 硬派に振れるので、経営層向けの稟議資料としては少し粗く見える。\n※この案だけ料金トグルとFAQ開閉が実際に動きます。"
}
デザイン案を人に見せるとき、いつも困るのが説明を別のチャットに書くことになる点なんですよね。見ている画面と説明が離れる。それがキャンバス上に貼り付いているので、リンクを1本渡すだけで話が終わります。地味ですが、これが一番ありがたい機能でした。
トップレベルにある launch は、リンクを開いたときの初期表示です。このほか、アートボード1件ごとには print: "flow"（印刷時にページをまたいで流し込む）のような指定も置けます。置ける場所が違うので、launch の中に書いても効かないはずです（今回は触らずに済んだので、実際に試したわけではありません）。
5. アートボードの中身は、ほぼ素の HTML
.dc.html を開くと、こうなっています。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap">
<style>
body { margin: 0; font-family: "Zen Kaku Gothic New", system-ui, "Hiragino Sans", sans-serif; }
</style>
</helmet>
全体を <x-dc> でくくり、<helmet>（HTML の <head> に当たる場所だと思ってください）にフォントと CSS を置く。あとは <div> や <h2> に inline style を当てているだけです。独自のレイアウト言語のようなものは出てきません。
これは正直ありがたかったです。生成されたものを読んで意味が分かるし、直したければ HTML として直せる。デザインツールの中に閉じ込められないのは、コードを書く人間にとっては大きいところです。
繰り返す部分は sc-for で畳まれる
料金プランや FAQ のように同じ形が並ぶところだけは、専用のループ記法にまとめられていました。
<sc-for list="{{ plans }}" as="plan" hint-placeholder-count="2">
<div style="{{ plan.cardStyle }}">
<h3>{{ plan.name }}</h3>
<span style="{{ plan.tagStyle }}">{{ plan.tag }}</span>
<span>{{ plan.price }}</span>
<sc-for list="{{ plan.features }}" as="feature" hint-placeholder-count="4">
<span>{{ feature.label }}</span>
</sc-for>
</div>
</sc-for>
{{ }} で値を差し込む、よくあるテンプレートの書き方ですね。入れ子にもできます。
hint-placeholder-count の方は用途が少し変わっていて、生成がまだ流れている最中に、仮の枠を N 件ぶん描いておくための指定でした。HTML が先にできてロジックが後から来るので、その間の「まだ何も無い」時間を骨組みだけ見せて埋めるわけです。生成が終わったあとは効かず、値が用意できていなければ普通に空になります。
6. 触れるプロトタイプになっている
さて、「クリック可能プロトタイプ」の話です。A案の料金表は、月額／年額のタブを押すと本当に金額が切り替わります。FAQ もちゃんと開閉します。
仕掛けは .dc.html の末尾にありました。
class Component extends DCLogic {
constructor(props) {
super(props);
this.state = { yearly: false, openFaq: 0 };
}
renderVals() {
const accent = this.props.accent ?? '#DFFF3E';
const yearly = this.state.yearly;
// ...
return {
billing: {
selectMonthly: () => this.setState({ yearly: false }),
selectYearly: () => this.setState({ yearly: true }),
},
plans: /* 表示する値 */,
faqs: /* 表示する値 */,
};
}
}
this.state があって setState がある。React を書いたことがある人なら初見で読めます（実際、私は何も調べずに読めました）。renderVals() が返したオブジェクトが、さっきの {{ plan.name }} に入っていく、という流れです。正確には、この戻り値と後述の props がマージされて1つのオブジェクトになり、それが {{ }} から見えるようになっています。
ちなみに架空の料金は、スタンダードが1人あたり月額3,800円／年額38,000円、上位のビジネスが5,400円／54,000円（いずれも税抜のサンプル値）。年額はきっちり月額10か月ぶん、つまり「2か月ぶん無料」という SaaS 業界の様式美まで再現されています。芸が細かい。
そして個人的に一番良かったのが data-props です。<script> タグの属性に、こんな JSON が書かれていました。
{
"accent": {
"editor": "color",
"default": "#DFFF3E",
"options": ["#DFFF3E", "#FF6B35", "#7CC5FF", "#F4F5EA"],
"section": "テーマ"
},
"$preview": { "width": 1440, "height": 4700 }
}
この宣言があると、ブラウザのプロパティパネルに「テーマ」という欄が生えて、そこでアクセントカラーを選べるようになります。section がその欄の見出しになり、editor: "color" がカラーピッカーになる。しかも options で候補を4色に絞ってある。
（$preview の方はパネルには出ません。$ で始まるものは予約キーで、これはプレビューの表示サイズの指定です。）
デザインの相談って、選択肢が多いほど決まらなくなるんですよね。「何色でもいいですよ」と言われた瞬間に相手は黙ります。4色から選ばせる形にしてあるのは、生成物としてよくできていると思いました。
なお、3案すべてがこうなっているわけではありません。動くのは本命の A 案だけでした。B・C にも DCLogic のクラス自体は置かれているのですが、中身は空で、テンプレート側に {{ }} が1つも出てきません。器だけ用意して、実質は静的な HTML です。全部に同じ手間はかけない、という判断のようです。私だったら3案とも中途半端に作り込んで力尽きるので、ここは素直に見習いたい。
7. 詰まったところ
.dc.html はローカルで開いても何も出ない
ファイルはあるのに、ブラウザにドラッグすると真っ白です。
原因は <head> にありました。support.js を読み込んでいるのに、この support.js が作業ディレクトリに入っていないのです。<x-dc> や <sc-for> を解釈しているのがこのファイルなので、無ければ当然、何も描かれません。
ではローカルでは絶対に見られないのかというと、そうでもありませんでした。アートボードごとに HTML (.zip) で書き出すメニューがあって、そちらには support.js と React 本体が同梱されます。書き出された zip の README には、こう書かれていました。
support.js,vendor/react*.js— the runtime that renders the component in a browser; not part of the design.…
Serve the folder (e.g.
python3 -m http.server) and open<file>; some browsers block the scripts overfile://.（
support.jsとvendor/react*.jsは、ブラウザ上でコンポーネントを描画するためのランタイムです。デザインの一部ではありません。フォルダをサーバーで配信して（例:python3 -m http.server）開いてください。ブラウザによってはfile://ではスクリプトがブロックされます。／和訳は筆者）
つまり、ダブルクリックで開く方法ではランタイムを揃えても動かないことがある。私が最初にやったのはまさにそれです。見た目をさっと確認したいだけなら、素直に Artifact のリンクを開くのが一番早いです。
1回目の生成物が、日本語で全滅していた
これは笑ってしまった話です。実は今回、作業ディレクトリが2つあります。
kumiki-lp/ ← 最初に作った方
kumiki/ ← 作り直した方
最初の kumiki-lp/ は、生成の途中で日本語が文字化けして使い物にならなくなりました。file で見ると一目瞭然です。
kumiki/Main.dc.html HTML document text, Unicode text, UTF-8 text
kumiki-lp/Main.dc.html HTML document text, ISO-8859 text ← これ
しかも現場には、こんなファイルが転がっていました。
.!88649!Main.dc.html
.!88650!DirectionB.dc.html
Claude 自身の説明によれば、sed が残していった一時ファイルとのこと。文字列置換で日本語のファイルを書き換えようとして、エンコーディングごと吹き飛ばした跡ですね。
これ、実は他人事ではありません。私もこの記事を書いている最中に、まったく同じ壊し方をしました。 ヒアドキュメントで日本語のファイルを作ったら中身が M-^C だらけになり、直そうとして別のファイルにも同じことをしました。AI も人間も、同じ石で転ぶ。
同じ轍を踏みたくない方への教訓としては、日本語を含むファイルは、シェル経由の文字列処理で触らない。これに尽きます。
エクスポートした HTML が 2.2MB あった
キャンバスからは単一の HTML としても書き出せます。外部スクリプトを一切読まないのでネットに繋がなくても開けるのですが（Web フォントだけは取りに行くので、オフラインだと書体が代替に落ちます）、LP 3案でファイルサイズが 2.2MB。少し大きい。
中を覗いたら、冒頭にちゃんと説明が書いてありました。
This page is a design canvas published from Claude Code — an early preview of the Claude Design canvas editor, packaged to run as a published artifact page. The editor code AND the design content live in this one file: …
（このページは Claude Code から公開されたデザインキャンバスで、Claude Design キャンバスエディタの早期プレビューを、公開 Artifact のページとして動くように梱包したものです。エディタのコードとデザインの中身の両方が、この1ファイルに入っています。／和訳・強調は筆者）
デザインだけでなく編集する機能ごと同梱されているから重いわけですね。納得はしましたが、2.2MB のファイルをメールに添付する勇気はありません。
裏を返せば、あの HTML を渡せば相手の画面でも同じように触れるということでもあります。ただし README には続きがありました。
Edits stay local until a viewer with write access hits Save …
（書き込み権限を持つ閲覧者が Save を押すまで、編集はローカルに留まります）
つまり、権限がなければ手元でいじった内容を公開側に反映できない。「そちらで直して送り返してください」という使い方はできません。
8. 何に効いて、何には効かないか
効く場面
- 方向性を複数出して並べる。今回の本命です。言葉で「落ち着いた感じ」と言い合うより、3案並べて「これ」と指してもらう方が早い
- 相手が非エンジニア。リンクを1本渡すだけで、パン・ズームして見てもらえる
- 説明を絵と一緒に置きたい。注記がキャンバスに載るので、案の意図が迷子にならない
- 雑な状態から始めたい。今回のように、題材すら決まっていなくても会話が進みます
効かない場面
-
そのまま実装コードにはならない。
.dc.htmlは独自形式で、<sc-for>もDCLogicも専用のランタイムがあって初めて動きます。実装に持っていくときは、CSS の値やレイアウトの考え方を参考にしつつ書き直しです - レスポンシブは別作業。今回作られたのは 1440px 幅のアートボードだけ。スマホ版が要るなら、その分を別に作ることになります
要するに、「作るもの」ではなく「決めるためのもの」。そう割り切ると噛み合います。
まとめ
| 出てくるもの | 正体 |
|---|---|
canvas.json |
アートボードをキャンバス上のどこに置くかの配置図。注記もここ |
*.dc.html |
アートボード1枚。中身はほぼ素の HTML + inline style |
<sc-for> / {{ }}
|
繰り返し部分のテンプレート記法。入れ子も可 |
DCLogic + data-props
|
state を持たせて触れるようにする仕組み。data-props はエディタのプロパティ欄に露出する |
| エクスポートした HTML | デザイン + エディタが1ファイルに同梱されたもの。2.2MB |
普段アプリを書いていると、デザインの工程は「誰かにお願いするもの」か「自分でやって微妙な結果になるもの」の二択になりがちでした。/design は、そのどちらでもない第三の選択肢として置ける気がしています。
そして今回いちばんの発見は、雑に投げても、雑なりに会話が成立することでした。「適当にサービス作って」から工事写真台帳アプリまで、途中で一度も怒られていません。丁寧に要件をまとめてから使う道具ではなく、まとまっていない状態を持ち込める道具なんだと思います。
……なお、出てきた3案のうちどれが好きかと聞かれたら、私は A 案です。ハイビズイエローが目に痛いところが、いかにも現場という感じがして良い。架空のサービスの、架空の LP に、好みができてしまいました。 クミキ、いいサービスだと思うんですけどね。誰か作りませんか。
(※ /design は早期プレビュー段階の機能であり、本記事は2026年8月時点の挙動に基づいています。canvas.json のキーや data-props の書式など、仕様は今後変更される可能性があります。「クミキ」は検証のために生成された架空のサービスで、実在の企業・製品とは関係ありません。本記事は個人の利用体験をまとめたもので、Anthropic 社とは関係ありません。Claude、Claude Code、Claude Design は Anthropic PBC の商標です。その他記載の製品名・サービス名は各社の商標または登録商標です。)
この記事は個人ブログ kinolab からの転載です。ブログでは、AI・クラウド関連の
検証記録と、身近な題材から IT を解説するコラムを書いています。