はじめに
2026年4月17日、Anthropic から Claude Design がリリースされました。
Claude Design は、Claude と会話しながらデザイン、プロトタイプ、スライド、one-pager などのビジュアルを作れるプロダクトです。テキストで指示して最初の案を作るだけでなく、会話やコメント、直接編集を通じて見た目を詰めたり、完成したデザインを Claude Code に handoff したりできます。
この記事では、別途公開した RSA 教材ページのヒーロービジュアルを題材に、Claude design で見た目の方向性を探り、最後に Claude Code で既存の Web ページへ実装するまでの流れをまとめます。
題材
今回のテーマは、先日公開した教材の配布ページの作成です。
「量子コンピュータが RSA を破る」を、本気で一歩一歩理解するための日本語教材（理論＋ハンズオン）
PDF と Jupyter Notebook などの成果物への導線として利用するページです。
今回は上記のページを Claude Design を用いて作成しました。
実践
Round 0 — まずは教材の思想を言語化する
いきなり見た目を指示するのではなく、教材のコンセプト整理から始めました。
本来ここは我々人間が検討するべきところですが、今回はそこも含めて Claude に決めてもらうことにしました。
具体的には、教材を作成しているリポジトリ内で Claude Code を起動して、以下のようにお願いしました。
HPに掲載するためのキャッチーな表紙を作ろうと考えています。デザイナーにこの教材について話すと作ってくれるらしいので、説明文を書いてみてください。
すると、教材のテーマ、トーン、避けたい表現、レイアウト案までかなり整理された形で返ってきました。
いきなり画像生成して修正していくより効率的でしょう。どういう雰囲気にするかを言語化し、違和感がないことを確認しました。
このとき Claude が返してきたデザインブリーフ（抜粋）
- テーマ：古典暗号（RSA）と量子計算（Shor）の接続
- スタンス：煽らない・誤魔化さない・一歩一歩理解させる
- 価値：理論＋実装（ハンズオン）まで踏み込む硬派教材
- 方向性A：古典 × 量子の左右対比
- 方向性B：段階的な学習導線を見せる階段構成
- 方向性C：量子回路アートを前面に出す実装寄りの構図
- 避けたい表現：ハッカー風、終末感、商業的すぎるCG
- 主用途：Webヘッダー / OGP / PDF表紙
今回は Claude に頼りきりでしたが、自分で最初の指示を作るときも、最初から見た目を指示するより、「何を表したいか」「何を避けたいか」を先に言語化してみるのがよさそうです。
Round 1 — 3方向を並べて比較する
最初のラウンドでは、Claude Design からいくつか方向が返ってきました。
3方向を同時に提案:
A. 古典 × 量子の左右対比
B. RSA → Shor → 回路 → FTQC の階段構成
C. Shor 回路を主役にした実装寄りのヒーロー
デザインに詳しくなくても、「どれが今の教材の思想に近いか」はなんとなく判断できます。今回はその感覚で、まず A 案を選びました。
A 案がよいです。
いきなり正解を当てるというより、比較できる状態まで持っていけること自体がかなり助かりました。
Round 2 — サイズごとの破綻を早めに潰す
次に、A 案をベースにサイズ展開を調整しました。
3サイズとも同等に、navy 確定、著者は消す、URL だけ残す。
ここでは、デザインの方向というより運用上の条件を入れています。
OGP、Web、PDF でも使えると嬉しいと考え、「1枚きれい」では足りず、サイズが変わっても破綻しないこと大事でした。
このラウンドで良かったのは、見た目の好みだけでなく、
- どのサイズでも読めるか
- どの要素を残してどれを削るか
- タイトルをちゃんと主役にできているか
を早めに詰められたことです。
Round 3 — 「数式がダサい」と言って方向転換する
最初の案は真面目でよかったのですが、見ているうちに「数式として正しいかどうか」と「見た目として美しいかどうか」は別問題だと感じました。そこで、かなり雑味のある言い方ですが、そのまま伝えました。
数式がダサいな。ほかのアイディアが欲しい。
数式は完全に消してタイトルとシンボルで。
量子回路は Bloch 球に。イラスト風・波形や干渉のグラフィックで。
このラウンドで分かったのは、良い指示を最初から出すことよりも、違和感をちゃんと言葉にすることのほうが大事だということです。
「この案は違う」を人間が言えると、AI 側はそこから別方向へ振ってくれます。
今回でいうと、「数式を前面に出すのは違う」「でも軽すぎる雰囲気にもしたくない」という感覚を言葉にするだけで反映してくれました。
Round 4 — 抽象だけで終わらせず、「理論 × 実装」を戻す
Round 3 の案はかなり好みだったのですが、そのままだと少し抽象寄りでした。
この教材の良さは、雰囲気ではなく、理論と実装の両方をちゃんと扱っていることです。そこで、左側に量子回路を戻してもらいました。
とてもよい! 量子回路も入れてほしい。左のデザインを消して回路に。
この修正で、右側の Bloch 球が「理論」、左側の回路が「実装」という対比になり、かなり教材らしくなりました。
Round 5 — Claude Code に渡して Web ページへ取り込む
方向が固まったところで、最後は Claude Code に渡して実際のページへ取り込みました。
ここから先は、見た目の探索というより実装とマージのフェーズです。
既存のソースへ組み込んだり、余白やテキストを調整したり、ページとして成立させる部分は Claude Code のほうがやりやすかったです。
つまり今回の流れは、以下の通りでした。
- Claude Design で方向を出す
- Claude Design で比較と方向転換を行う
- Claude Code で既存のページへ落とし込む
■ 完成したページ
完成したページを見ると、最初の「教材の思想をどう見せるか」という曖昧な問いが、かなり具体的な形になったと思います。
使って感じたこと
Claude Design が良かった点
今回いちばん良かったのは、複数の方向を同時に比較できたことです。
特に、こちらが「数式が前に出すぎている」「もっと象徴的にしたい」といった曖昧な違和感を投げても、そこから別方向へ振ってくれるのはかなり助かりました。まだ形になっていないデザイン意図を会話の中で絞り込んでいく道具として強かったです。
Claude Code が良かった点
今回のように、すでに手元にソースコードがあって、そこへ自然にマージしたい場合は、やはり Claude Code のほうが安心感があります。
デザイン案を見ながら、「この余白をもう少し」「このセクションの見出しサイズを揃える」といった微調整まで含めて進めやすかったです。
では、Claude Code だけでよかったか
最終的に HTML / CSS / React へ落とすだけなら、Claude Code だけでもかなり良いですが、今回みたいに、まだ正解の見た目が分かっていない段階では、デフォルトで複数案を並べてから、これは教材の思想に合うや、少し違うなどと軌道修正できてすぐに反映され、操作も試せるのは非常に便利でした。
この「違和感を起点に方向を切り替える」部分は、Claude Design を使っていてかなり気持ちよかったところで、クライアントがいる場合でも、会議の中で効率的な合意形成が可能になりそうです。このUI作成を起点にクライアントのほしい機能のヒアリング、要件定義のための情報収集を並行して進めていくと効率がよさそうです。
今回まだ使い切れていない実務寄りの機能
今回の体験で Claude Design の良さはかなり感じられたのですが、正直まだ「方向出し」と「Claude Code への handoff」を中心に触っただけでした。実務っぽい便利さという意味では、まだ試せていない部分がかなりあります。
たとえば今回は途中で大きく方向転換しましたが、もっとちゃんと使うなら「いまの案を保存して、別方向を試す」という進め方ができたはずです。A案を残したまま D案を試し、必要なら戻る、という版管理っぽい運用までやると、デザイン探索そのものがもっと整理できそうです。
共有まわりも今回はほぼ未体験でした。本来は組織内リンクで共有して、閲覧のみ / コメント / 編集といった権限でレビューを回せます。今回は一人で詰めましたが、実務では PM やエンジニアにその場で見てもらって、コメントだけもらう、必要なら一緒に触る、という運用のほうが価値が大きいはずです。
書き出し先も、今回は最終的に Claude Code に渡す前提でしか使っていません。でも実際には、途中案を zip で残す、PDF にする、PPTX にする、Canva に送る、standalone HTML として書き出す、といった出口があるので、同じデザインをそのままレビュー資料、登壇資料、公開前確認に横展開できそうです。
また、今回は単発の教材ページだったので、design system 的な使い方もほとんどしていません。コードベースや既存ページ、スクリーンショット、スライド、PDF、ロゴなどからブランド資産を読み込ませておけば、その後のプロジェクトで色・タイポグラフィ・コンポーネントを自動的に揃えられるはずで、シリーズ物のLPや複数ページ運用ではむしろここが本命であるはずです。
細かい磨き込みもまだ浅いです。今回の修正は「数式は消す」「Bloch球に寄せる」「左は回路にする」といった大きな方向転換が中心でしたが、本来はボタンの余白、見出しの階層、配色のコントラスト、文言の強弱など、要素単位で詰めていく使い方ができまず。(このような微修正は claude code に負わせてもよいが)
おわりに
今回使ってみて、Claude Design はデザインの途中案を保存し、共有し、比較し、そのまま実装へ handoff するために非常に便利でした。途中案を残したまま別方向を試せるので、「今の案を壊さずに別案を見る」がやりやすく、見た目の正解がまだ分からない初期段階にうれしいものでした。アプリ開発の初期段階に、UI をベースに機能を固めていくのにも便利そうです。
今回は個人の範囲でしたが、出来た案をそのまま共有してレビューできるため、チームとしても威力を発揮するでしょう。単にスクショを投げるのではなく、デザイン自体を見せて、コメントをもらい、必要なら編集まで可能となります。
そして、その案を用意に実装へ渡せるのが便利でした。今回も、ヒーローの方向を Claude Design で詰めてから Claude Code に渡し、既存の Web ページへ取り込みました。これまでも、生成した画像や参考になる Web ページのスクリーンショットを Claude Code に渡して、そこから UI を再現してもらうこと自体はできました。実際、Claude Code は画像やモックアップを文脈として受け取り、対応する HTML 構造や CSS を提案できますが、Claude Design では、途中案を保存しながら別方向を試し、コメントで詰め、共有し、そのうえでデザイン意図を保ったまま Claude Code に handoff でき、強かったです。
今回は、Claude Design の表層しか触れていませんでしたが、これを機に、がっつりとアプリ開発の作成のフローに組み込んで、また、それ以外にも資料作成自動化などに使ってみたいと思います。