【図解たっぷり】Claude Design入門～Webページのデザインにどう使う？ 作り方と書き出しまで～

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、8月9日まで）

今すぐ受け取る（無料）

「AIでWebページを作る」と聞くと、AIにコードを書いてもらう話を思い浮かべる方が多いかもしれません。
今回ご紹介する Claude Design（クロードデザイン） は、少し毛色が違います。コードを1行も書かず、ブラウザの中だけでWebページのデザインを組み立てられる機能です。

ところが、Claude Designで「作れるもの」の一覧を開いてみると、スライド・ワイヤーフレーム・UIモックアップ……と並んでいて、アプリの画面設計のような、少しシステム寄りのものを作るツールに見えます。実のところ、一覧の中に「Webページ」という項目はありません。
ですが、Webページのデザインもきちんと作れます。

この記事では、その「どう使うのか」を最初から順を追って解説します。
実際の案件に近い形で、以下のような架空の工務店「株式会社あおば工務店」のトップページを作っていきますので、使いどころがイマイチ…という方も実務に取り入れやすい構成になっています。

ただ、「AIにお願いしたら、こんなにきれいなページができました」で終わらせるつもりはありません。
Web制作の仕事は、きれいなページを作ることではなく、そのページに何かをさせることだからです。今回でいえば、問い合わせを増やすこと。

そこでこの記事では、次の3つまでやります。

• 「このセクションは、見た人のどんな気持ちに応えるのか」を決めたうえで、AIに依頼する
• できあがったデザインを「問い合わせは増えそうか」という目で見て直す（AIに相談もします）
• 最後は自分で編集できる、普通のHTMLファイルとして書き出し、手元に持ち帰る

• Claude Designについて知ろう
• Claude Designをはじめる前に
• Claude Designを使ってみよう
• まとめ

Claude Designについて知ろう

Claude Designとは？

Claude Designは、チャットで対話しながら、デザインをその場で組み立てられるClaude.aiの機能です。

以下は公式の紹介動画です。

ちょっとわかりにくいので、解説しますね。
いつものClaudeチャットは「原稿を渡す → ファイルが出てくる」という流れです。
対して、Claude Designはまずデザイン専用の画面でデザインを作成してくれます。そして画面に表示されたデザインを見ながら、直接直していくという進め方になります。文字をクリックして打ち替える、気になる場所を指してコメントする、といった操作ができるのが大きな違いです。

何が作れる？ ── Templateの中身を見てみる

Claude Designでは、チャット欄の下にある Template ボタンから「何を作るか」を選べます。
中を開くと Project types という見出しで、13個の選択肢が並んでいます。

https://claude.ai/design/

履歴書からチラシ、3Dオブジェクトまで。かなり幅広いですよね。
なお、公式動画でも登場している「スライド作成」でのClaude Designの使い方は、Claudeで編集できるスライドを作る記事で詳しく紹介しています。あわせてどうぞ。

💡 最初の関門：「Webページ」という項目がない

さて、ここでお気づきでしょうか。
13個を上から見ても、「Webサイト」「ランディングページ」にあたる項目がありません。

近そうなのは UI mockups ですが、これはアプリの画面のモックアップを作るためのもの。今回作りたい「縦に長い1枚のWebページ」とは想定が違います。

では、Webページは作れないのか？ ── 作れます。答えは「選ばなくていい」です。

• Template の初期値は、最初は None（＝選ばれていない状態）です
• 何も選ばずに、依頼書とプロンプトを渡す。これがWebページを作るときのやり方になります
• Templateは「作るものが決まっているときの近道」です

Claudeの公式サイトでも、Claude Designで作れるものとして「ランディングページ」が挙げられています。選択肢に無いから作れない、というわけではないのでご安心ください。

Claude Design 3つの強み

① ブラウザだけで完結する

アプリのインストールも、エディタの用意も、コードを書く作業も要りません。Claude.aiにログインして、パレットのアイコンをクリックするだけで作業を始められます。

② 直せるだけでなく、「相談」できる

ここがClaude Designらしいところです。
AIが作成したデザインは、クリックして文字を書き換える／場所を指してコメントする／チャットで頼む、と何通りかの方法で直せます。それに加えて、「このページ、問い合わせを増やすにはどこを直すべき？」と聞けるのです。

しかも、Claudeは自分が作ったそのページを見た上で答えてくれます。従来のデザインツールには無かった使い方で、この記事でもいちばんの見どころとして扱います（→ ステップ5で詳しく紹介します）。

③ 作って終わりにならない

できたデザインは、リンクで共有したり、HTMLファイルとして書き出したりできます。書き出したファイルに手を入れれば、そのまま自社サイトのページとして使うことも可能です（→ ステップ7で詳しく紹介します）。

他のAIツールと何が違う？

「AIでWebページを作る」ツールはいくつもありますが、作っているものがそれぞれ違います。
ここを整理しておくと、使い分けで迷わなくなります。

たとえば以前ご紹介した Google Antigravity は「コードを書くAI」でした。デザインも同時に出来ましたが、その作成や編集は私たちが普段見慣れているHTMLやCSSファイルが生まれて、ブラウザで表示を確認する ── という流れです。

対してClaude Designは「デザインするAI」。ブラウザの中で見た目そのものを組み立てていき、コードは基本的に見ません。
同じ「Webページを作る」でも、入り口がまったく違うわけですね。

注意点：デザインカンプと公開サイトは別物

ここは先に、はっきりさせておきます。
おそらく多くの方が気になっている「これで作ったページ、本物のサイトとして公開できるの？」という疑問への答えです。

Claude Designが作るのは、基本的に デザインカンプ（＝見た目の完成形） です。
今回のような1枚もののページならHTMLとして書き出せるので、答えは「できる。ただし問い合わせが届くサイトにするには、あと3つ足りない」になります。

「なんとなく足りない」ではなく、この3つが足りないと名指しできること自体に価値があります。次に何を学べばいいかが、はっきりするからです。

このうち③は、この記事の中で解決します。読者のみなさんが最後に手にするのは、「自分で文字を打ち替えられる、普通のHTMLファイル」です。
①と②については、最後に「何が必要になるか」だけ整理してお伝えします。

Claude Designをはじめる前に

Claude Designを始める前に、用意しておきたいもの・今回のデモで使う素材についてご紹介します。

Claude Designは有料プラン限定です。
無料でAIによるデザインを試してみたい方は Antigravity からはじめても良いと思います。

【図解たっぷり】Google製AIツールAntigravity（IDE）入門～無料で試せる導入方法・基本操作を紹介～

💡 はじめる前に知っておきたいこと

• Beta版です（2026年7月執筆時点）。画面の表示や機能は今後変わる可能性があります
• 使用量は、通常のClaudeチャットやClaude Codeと共通です。Webページを1本作ると、それなりに消費します
• 指示は日本語でOKです。画面表記は英語ですが、日本語で普通に話しかけて通じます

今回作るもの ── 架空の工務店のコーポレートサイト

今回の題材は、株式会社あおば工務店（地域密着のリフォーム・注文住宅）という架空の会社です。

コーポレートサイトのトップページには、ヒーロー・事業紹介・実績・施工事例・スタッフ紹介・お問い合わせ……と、必要なセクションが自然に揃います。Claude Designのレイアウト力を見るのにちょうど良い題材です。

そしてこのページには、はっきりしたゴールがあります。

ページを見た人に、最下部のお問い合わせフォームから「無料相談」を申し込んでもらうこと。

この「何のためのページか」が、これから先のすべての判断基準になります。

依頼書には、見た目より先に決めたことが書いてある

デモで使用した依頼書（aoba-koumuten.md）を配布します。
実際に手を動かして試したい方はご活用ください。

素材ダウンロード

Claude Designでの制作は、ファイルを添付して送るだけ。手順自体はとても簡単です。だからこそ、最初の出来上がりを決めるのは「操作」ではなく、渡した依頼書やプロンプトの中身ということになります。

配布している依頼書を開くと、「ヒーロー」「施工事例」といったセクション名の横に、そのセクションの役割が書いてあります。

セクションの順番は、かっこいいからでも、よくある構成だからでもありません。
この順番でないと、問い合わせまで辿り着かないからこの並びになっています。

そして依頼書の冒頭には、こう書いてあります。

きれいなページを作ることが目的ではありません。「相談してみようかな」と思ってもらうことが目的です。
迷ったときは、「これは申し込みにつながるか？」を基準に判断してください。

こうした内容・優先順位については、Claude Designで作成する前にあらかじめ決めておいた方がスムーズです。 もちろん、情報整理などはAIも手伝ってくれます。

AIと行う情報整理はClaude Code サブエージェントについてのブログでご紹介しています。
より詳しく学びたい方は10倍速 AIワークフロー マスタープランをご確認ください。

Claude Designを使ってみよう

ここからは実際に、架空の工務店「株式会社あおば工務店」のコーポレートサイトのトップページを作っていきます。

やることは大きく分けて8ステップです。

ステップ2〜4は画面の操作、ステップ6〜7は確認と書き出しです。
そして太字にした2つが、この記事でいちばんお伝えしたいところになります。

ステップ0：Claude Designを開く

Claude.aiにログインしたら、左のサイドバーにあるパレット風のアイコンをクリックします。

Claude Designのスタート画面が開きます。
開くと、チャット欄の周りにいくつかボタンが並んだスタート画面が表示されます。

ボタンがいろいろあって身構えてしまうかもしれませんが、今回使うのは ＋（ファイルを添付するボタン）だけです。

スライド作成の記事ではTemplateから Slides を選びましたが、今回は前述のとおり None（何も選ばない）のままで進めます。プロンプトと依頼書で指示すれば、選択肢にないものも作れます。

ステップ1：依頼書を渡す

では、さっそく依頼書を渡して制作をお願いしていきましょう。
＋ ボタンから依頼書のファイル（aoba-koumuten.md）を添付します。

添付できたら、次のようにお願いしてみましょう。

株式会社あおば工務店のコーポレートサイト、トップページのデザインを作ってください。
添付した依頼書の内容に沿ってお願いします。

・別ページは作らず、1ページで完結する縦長のページにしてください
・ページの最後にお問い合わせフォームを置き、ヘッダーとページ内の「無料相談する」ボタンから、
　そのフォームまでページ内スクロールで移動できるようにしてください
・スマートフォンでの見やすさを優先しつつ、PCでも崩れないレスポンシブにしてください

ファイルを添付したら、ClaudeDesignに送信します。

送信すると、Claude Designがデザインを組み立て始めます。
画面の右側で、セクションが上から順にできていく様子が見えます。

しばらくすると、ページのデザインが完成します。

💡 デザイン作成の前に質問が表示されることも

上のデモでは、依頼書とプロンプトを送信後Claude Designはそのまま作成を始めました。
ただ、最初に渡す情報によっては追加の質問をしてくる場合もあります。

以下はスライド作成時の画面ですが、他のデザインでも同じような形で質問が表示されます。

AIツールを使っていると、「配色はどうしますか？」「ターゲットは誰ですか？」などと聞き返されることがありますよね。Claude Designの質問画面も同様で、「情報が足りていないから、どうしたいかを教えてください」という場合に上図のアンケート画面のような質問が表示されます。

依頼内容が明確であれば、質問をする必要が無いのですぐデザイン作成が始まるわけです。
あらかじめ依頼書を作り込む手間は、後の手戻りを消すための投資とも言えますね。

ステップ2：出来上がりの確認・デザイン画面の見方

右側に表示されているページデザインが完成したら、出来上がったものを確認しましょう。

最初からすべてを見ようとすると大変ですので、まずは最低限守って欲しい項目を見ていきます。

• 1枚の縦長のページになっている（画面が分かれていない）
• 依頼書に書いたセクションの順番が、そのまま守られている
• ヘッダーのメニューや「無料相談する」ボタンを押すと、ページ内をスクロールして移動する

このあたりは依頼したとおりの形になりました。

デザイン画面の見方

ここが作業場になるので、先に画面構成を押さえておきましょう。

できあがったページの上に並んでいるボタンは、それぞれ以下のような役割です。

左側は、いつものチャット欄です。AIが何をしたかの作業ログが、上から順に積まれていきます。「ヒーローを修正しました。920px以下は1カラムに切り替わり……」のように、やったことを日本語で報告してくれるので、目で見て分からない変更もここで追えます。

💡 Tweaks について

Claude Designのボタン類で、ぱっと見て「何が出来るかイマイチわからない」となりがちなのがTweaks。 これは調整つまみのような意味で、一度用意すれば、毎回Claudeに頼まなくてもここで表示の切り替えが出来る…という機能です。

デモでは「スマートフォン」という項目に、showMobileCta というトグルスイッチが用意されていました。
ただし、これはデフォルトで用意されるものではありません。AIがオン／オフの切り替えスイッチがあったほうが良いと判断して、作って渡してきたという状態です。

Tweaksが空の場合も、何を調整したいかを書けば作ってもらえます。
やり方はステップ4で紹介します。

写真欄は「どんな写真を入れるか」の指示が入ります

今回は画像などの素材を一切渡さず、テキストでの指示・要望のみを送りました。

Claude Designは、写真やイラストは生成できません。
このため、写真が入るはずの場所には枠（プレースホルダー）が置かれています。
枠の中には日本語で「家族と木の家の写真」や「木の梁が見えるリビング」など、どんな画像を置く前提で作っていかが書かれています。

一見すると物足りなく感じるかもしれませんが、これはこれで理にかなっています。

• 仮の写真が入っていると、それが完成形だと勘違いされてしまう
• 枠とテキストで画像の説明があると何を用意すればいいかが明確

もちろんクライアントから事前に画像を指定されている場合は、それをAIに伝えれば対応してくれます。
今回のように画像が無い、デザインの大枠が固まってから画像を探そう、という場合はAIが「写真の発注書」を書いてくれていると考えると、実務ではむしろありがたい形です。

なお、この枠はクリックすればその場で写真をアップロードできる状態になっていることもありますが、今回は枠だけで、差し替えはできませんでした。
できないときは、できるようにしてもらえばいいだけです。ステップ4で紹介します。

ステップ3：気になるところを直す

デザインができたら、次は調整です。やり方は大きく分けると3通りあります。

① クリックして、直接書き換える

Edit をオンにして文字をクリックすると、その場で打ち替えられます。
英数字の半角全角を直す、句読点を入れる・無くす、など、プロンプトを書くより直したほうが早いものはダイレクトに編集するのがオススメです。

選択すると小さなツールバー（B / I / U / リンク）が出てくるので簡単な変更も可能。さらに、左のEditパネルを使用すると、色や大きさ・揃え位置などより様々な設定ができます。

パネルには Simple / Pro / Code などのタブがあり、Pro を開くとページの構造も確認できます。このあたりはFigmaなどのデザインツールを触ったことがある方は、なんとなく馴染みのある表示かと思います。

直したものを確定するときは Save、やめる場合は Discard を押してください。

なお、細かい調整は「できる」ということだけ覚えておけば十分です。
Claude Designの本領は、次の②③のほうにあります。

② Comment で、場所を指して指示する

Commentのボタンを押して、プレビュー画面上で場所を指定するとClaude簡単に直して欲しいところを伝えられます。文章だけで「最上部のセクションの、左側の見出しの……」と説明する必要がないので楽ですね。

デモではファーストビューのテキストが上手くはまっていなかったので、調整をお願いしてみます。クリックで要素を選択でも、下アニメーションのようにドラッグして見てほしい範囲を囲ってもOK。

左側がコメントのパネルに変わり、プレビュー画面上にもコメントの入力欄が現れます。
どちら側からでもClaudeに修正の依頼を送信できます。

なお、左パネルの方は一般的なコメント（共有ユーザー間等のやり取り）も兼ねているので、一度送信してもClaudeに届きません。コメントを選択して、Send to Claudeを選択する必要があります。

送信すると上アニメーションのように、考えて、修正してくれます。

③ チャットで直接指示をする

Commentは「ここを直して」という時に便利。
対して、全体的な変更をしてほしいときは左パネルの通常チャットで頼みます。

CTAの「無料相談する」ボタン、影のぼかしが大きすぎます。
小さめにして、自然にしてください。

　↓

ステップ4：機能を追加する

Claude Designではここまでにご紹介した上部のボタンなど決まったツール以外に、そのデザインプロジェクトのみの「機能」を追加できます。

同じ依頼書を渡しても、制作してくれるデザイン、Claude Designが用意してくれる機能は異なります。出てくるものは毎回同じではありません。指示していないところは、AIが必要だと判断したものを作るので違うわけです。

初めて触ったときに困るのが、まさにここ。 自分が欲しい機能はあるけれど、それが無いのは「元々できないもの」なのか「今回たまたま作られていない」のか、わからないですよね。Claude Designはまだβ版ですし、公式ドキュメントもあまり情報が無いので困るポイントです。

結論から言うと、欲しいものが無ければ、とりあえずチャット欄で頼んでみる、これに尽きます。頼んで暴走するのが不安なら、できる？と聞いてみても良いです。 以下では参考までに、Webデザイナー的にあると便利な機能追加を２つご紹介します。

例1：Tweaksを作ってもらう

Tweaksで操作できるようにしてほしいものがあります。
・CTAボタンの色
・カードの角の丸み
この２つをTweaksパネルに追加してください。

※ デモで自動的に作られた 固定CTAのON/OFF が欲しい場合は「・スマホで下部固定CTAを出すかどうかのスイッチ」などの指示も足すと、付けてくれるはずです。

送信すると、要望を叶えてくれます。
ツールの説明でTweaksがピンとこなかった方も、なんとなく機能のイメージが付くのではないでしょうか。

今回加えた以外に、フォントサイズやカラム横並び数なども追加できます。
自然言語（普通の話し言葉）で「これ欲しいなぁ」と言うだけで、自分専用のカスタマイザーを作ってくれる。すごく便利ですね。

例2：写真を差し替えられるようにしてもらう

現在のデザインは画像を入れる枠はありますが、画像を直接挿入できません。
「この画像入れたらどんな感じかな？」と試すのに、毎回チャットで頼むのも少し手間なので、デザイン画面上で操作出来たら良いと思いませんか？

普通のデザインツールなら、「その機能は搭載されていません」で終わりです。
ですが、Claude Designは道具のほうも作ってくれるので、Tweaks以外でも頼んでみるとあっけなくできてしまう…ということが結構あります。使い方や機能は調べるより、チャットでご本人（Claude AI）に聞く・お願いするのが一番早いです。

写真のプレースホルダーを、クリックして手元の画像をアップロードできる形にしてください。
枠に書いてある説明文（「家族と木の家の写真」など）はそのまま残してください。

　↓

なんということでしょう…！
2回クリックするだけで手持ちの画像を入れられるようになりました。

もちろん差し替えや、画像の位置を変えることもできます。

ステップ5：AIに「相談」する

ステップ2〜4は、操作の話でした。ここからは中身の話です。

デザインを直すとき、その理由を言葉にできるかどうかで仕上がりが変わります。

右側の言い方ができれば、AIへの指示は自然と的確になります。
とはいえ、この「なぜ」が自分で見つけられないことも多いですよね。そこをAIと一緒に考えてしまおう、というのがこのステップです。

「直して」ではなく「どう思う？」と聞いてみる

このページの目的は、お問い合わせフォームからの無料相談の申し込みでした。
デザインを見ながら、こう投げかけてみます。

このページの目的は、お問い合わせフォームからの無料相談の申し込みです。
今のデザインは以下の問題があるように感じます。
- 統一感があり上品だが、無料相談のボタンが馴染み過ぎている
- 無料相談をしてみようかな、と思わせる「押し」がない

申し込みを増やすための改善案を3つ、理由と一緒に出してください。

上図が実際に返ってきた提案です。
画像だと読みにくいので、要約すると以下のような内容になります。

「CTAボタンは目立たせましょう」といった、どこにでも書いてあるアドバイスではありません。回答を見ると、このデザインを分析して提案をしていることがよくわかります。

現状のCTAは背景のベージュ・木の茶系と同系色で、ページの一部として溶けています。テラコッタ寄りの赤橙など、背景に無い彩度の色に振るだけで発見率が上がります。（案1）

とくにお客様の声が1件も無いのが今の最大の弱点です。（案2）

実際に使われている色を見て「溶けている」と言い、フォームの項目数を数え、さらには依頼書にも書いていない「お客様の声が無い」という欠落まで指摘してきました。
AIが、自分の作ったこのページを見た上で答えているわけですね。

📄 AIからの返信全文はこちら▾

改善案を3つ、優先度順に。
1. CTAボタンを「馴染ませない」色に振る
現状のCTAは背景のベージュ・木の茶系と同系色で、ページの一部として溶けています。テラコッタ寄りの赤橙など、背景に無い彩度の色に振るだけで発見率が上がります。上品さは、色を使う場所をCTAだけに限定することで保てます（見出し・タグの茶色は緑に統一）。合わせて、ボタンにマイクロインタラクション（ホバーで少し浮く／ページ内に入ったら一度だけ軽く反応）を付けると視線が止まります。
2. ボタンの「手前」に、踏み出す不安を消す要素を置く
今のページは会社の良さは伝わりますが、申し込む直前の不安（何を聞かれる？売り込まれる？何を準備する？）に答えていません。CTAのすぐ上に、

実際の相談の様子（写真＋「1時間、雑談から始めます」）
「相談された方のうち、その年に契約されたのは3割です」のような、契約を急かさない事実
お客様の声（「他社では話が図面から始まりましたが…」）
を置くと、ボタンが「押してよい行為」に変わります。とくにお客様の声が1件も無いのが今の最大の弱点です。

3. フォームの入力ハードルを下げる（最初の1問だけにする）
今は名前・メール・電話・種類・連絡方法・要望の6項目が一度に見えます。「新築／リフォーム／点検」の3つのボタンから選ばせるところから始め、選択後に名前とメールだけを出す2ステップにすると、着手率が上がります。「30秒で送信できます」という約束と見た目も一致します。
どれから着手しますか。1と3はすぐ実装できます。2はお客様の声の実文（または仮テキストでよいか）をご指示いただければ組み込みます。

同じ質問をしても、返ってくる答えは変わります

実は記事を書く前のテストでも、まったく同じプロンプトを投げていました。そのときの3案がこちらです。

📄 AIからの返信全文はこちら▾

申し込み増加のための改善案3つ:
1. CTAボタンに「差し色コントラスト」を作る
現状はオレンジ(oklch 66% 0.1 55)がボタン・タグ・数字と全箇所で使われており、ボタンが「装飾の一部」に埋没しています。CTAだけに使う専用色（例: 補色系の赤〜朱色）を用意し、他の装飾には使わないルールにすると、ページ内で「ここだけ押せる」という視覚的な特異点ができ、目が自然に吸い寄せられます。
2. ヒーロー直下に「安心材料付きの申込みブロック」を独立設置
今はテキスト→ボタンの一direction的な流れで、ボタンが単なる導線の一部に見えます。ヒーロー下に、相談件数・対応エリア・所要時間（例:「今月の相談枠 残りわずか」「入力1分」など）を添えた独立カード型のCTAセクションを作ると、「押す理由」が視覚的にワンセットで提示され、後押しになります。
3. スクロールに応じて追従するCTA（PC含む）と、緊急性・限定性の一言を添える
現状スマホのみ下部固定バーがありPCにはない上、文言も「無料相談する」の同一反復で目新しさがありません。PCにも軽い追従バー/サイドCTAを設け、スクロール位置ごとに文言を変える（例: 施工事例を見た後は「同じような家、うちでも建てられますか？」）と、閲覧文脈に合わせた「今すぐ聞いてみたい」という心理的フックが生まれます。

「ボタンの色が埋もれている」という指摘は共通していますが、あとの2つは別物です。
AIの提案は、毎回同じではありません。もしも「なんか違うな…」と思ったら、他の提案を聞いてみたり、別の聞き方をしてみるのもアリです。

❗ 反映させる前に、内容を確認しましょう

テスト時の案2に「今月の相談枠 残りわずか」という文言がありました。
申し込みを増やすという観点では、限定性などを加えることは確かに有効です。

ですが本当に枠が残りわずかでないなら、それは嘘になります。
AIは「申し込みを増やす」という目的にとても忠実です。だからときどき、事実かどうかの確認が要る提案も混ざってきます。

• 数字（実績・件数・割合）
• お客様の声などの引用
• 「残りわずか」「今だけ」といった限定表現

このあたりが出てきたら、Goを出す前に「これは事実として書けるか？」を立ち止まって考えましょう。そして、仮のデザインとして採用する際は、あとで忘れず確認できるようにメモなどを残すのがおすすめです。

採用時に「注文」を入れると制作がスムーズに

デモでは、まず案1を採用することにしました。
ただし、ステップ4でCTAボタンの色はTweaksで切り替え可能にしていたので、以下のように注文を付けました。

まずは案１のマイクロインタラクションを追加してみてください。
ボタン色については、提案してくれた色と、印象を崩さずに発見率を挙げられそうな色をTweaksで変更できる色に反映してください。

　↓

Tweaksを開くと、選べる色が候補色に変わっています。Claude Designイチオシの色、それ以外の提案色を切り替えて確認できます。

小まとめ：このステップで起きていること

やったことを整理すると、この4つです。

1. 相談する（どこを直せばいいか聞く）
2. 採る／採らないを決める
3. 採用するものを伝える（注文があれば合わせて伝える）
4. 反映される

デザインを見ながら壁打ちができて、その場で反映される。これはAIが組み込まれたツールならではです。
ただし2番目と3番目 ── 決めるところは、AIに任せられません。

ステップ6：PC/スマホの表示確認をしながら、調整を繰り替えす

Web制作である以上、スマートフォンでの見え方は確認しておきたいところです。
調べてみたところ、現時点でClaude Designの画面の中に、スマホ表示に切り替えるボタンは見当たりませんでした。ですので、以下のような方法を使って確認します。

• Design画面のまま、ブラウザのウィンドウ幅、チャットパネルの幅を変えて確認する
• 右上の Present > New Tab で別タブに開いて、検証ツールのスマホモードで見る
• 右上の Share からURLをコピーして、スマホ（実機）で見る

実機は最終確認で、簡易確認は上２つのいずれかで良いと思います。
特に手軽なのはウィンドウ幅を変える方法です。

重点的に見るポイントは、やはり目的から逆算して決めます。

• CTAボタンは、指で押せる大きさになっているか
• フォームの入力欄が、狭くなりすぎていないか
• CTAなどの固定要素が、コンテンツの可読性を下げていないかか

例えば、デモで作ったデザインは、電話番号や固定CTAが電話発信用のリンクになっていました。
スワイプ時や誤タップや押してしまうと、ユーザーとしては嫌ですよね。

意図的に「電話しよう」とボタンを押さない限り無害になるよう、修正を依頼します。
言葉だけで上手く表現できないときは、いつものClaudeチャットと同じく、図を使って指示もできます。

↓

こんな感じに、気になるところを調整していきます。
もちろん、デザイン（ビジュアル）的な改善を加えたり、複数の修正をまとめて送信してもOK。
「背景画像を入れて」など頼んでみても良いですね。

ステップ7：共有する・自分のファイルにする

デザインが固まったら、右上の Share を開きます。
メニューは大きく上下2つに分かれています。

「デザインを確認してほしい」だけなら、上半分だけで完結します。
まずはそちらから見ていきましょう。

確認してもらうだけなら、リンクを渡すのがいちばん早い

初期状態は「Only you（作った本人だけ）」になっています。
以下のように切り替えることで、他人に共有することもできます。

範囲を決めたら、Copy link でURLをコピーして相手に送るだけです。
相手はブラウザを開けばそのまま見られます。ファイルを送る必要も、相手にアカウントを用意してもらう必要もありません。

自社サイトに組み込みたいときは、書き出す

すでに運用しているサイトに追加したい、WordPressのテーマの元にしたい、という場合はファイルを手元に落とします。
Project HTML の Download を選びましょう。

書き出しの形式を聞かれます。この２つは用途が違います。

Standaloneは「開けばそのまま見える」代わりに、手を入れられません。
今回は Project archive（zip）を選んでください。

zipの中身と、人に渡すときの注意

zipを解凍すると、こんなファイルが入っています。

注意したいのは、最後の uploads/ です。
このzipをそのままクライアントに渡すと、社内向けに書いた依頼書まで一緒に届いてしまいます。AIが作ったものを人に渡す前に中身を確認する、というのは身につけておきたい習慣です。

.dc.html をエディタで開いたものが下図です。
インラインCSSが多いので一瞬ギョッとしますが、ほとんどが見慣れたHTMLです。
日本語の文章もそのまま入っています。

ただし、Claude Design独自のタグがいくつか混ざっています。

表示に使うプログラムが必要で、単体での表示・更新はまだやりにくい状態です。
普通のHTMLファイル形式にしたい場合は、Claude Code（VS Codeの拡張機能として使えるAIアシスタント）にお願いするのが楽です。解凍したフォルダをVS Codeで開いて、こうお願いするだけです。

このフォルダの「あおば工務店 トップページ.dc.html」は、Claude Designが書き出した独自形式のファイルです。
これを、素のHTMLとCSS,JSで動く普通の1枚のWebページに作り直してください。

- index.html と style.css, script.js に分けてください
- <x-dc> <helmet> <sc-for> <sc-if> <image-slot> や {{ }} は使わず、通常のHTMLタグにしてください
- <sc-for> の繰り返しは、実際のHTMLとして展開して書いてください
- 画像は images フォルダを参照する <img> にして、alt には枠に書かれた説明文を入れてください
- ページ内スクロールは href="#id" で動くようにしてください
- 文章・数字・固有名詞は、元のファイルの内容をそのまま使ってください

変換には結構時間がかかるので、待ちましょう。
途中でコマンド等の使用許可を求められたら、承認してください。

完成報告が来たら、作成されたファイルを確認してみましょう。


これで文章を書き換えて保存すれば、ブラウザにそのまま反映される、ごく普通のWebページになりました。

これで何ができるようになったか

ここまで来ると、使い道が一気に広がります。

• 文章や写真を自分で差し替えられる
• WordPressサイトに使いたい方は、その「元」として使える
• FTPでサーバーに上げれば、自社サイト内の１ページとして公開可能
• 公開後、他の人も簡単にこのページを変更・修正が出来る

まとめ

Claude Designの要点

• コードを書かずに、Webページの見た目を最短で形にできる。必要なのはブラウザだけ
• 直し方は「クリックで直接編集」「Commentで場所を指す」「チャットで頼む」の3通り。欲しい機能が無ければ、その場で作ってもらえます
• 指示するだけでなく、相談できる。「問い合わせを増やすにはどこを直せばいい？」と聞けるデザインツールは、これまでありませんでした
• 書き出したままでは編集できませんが、Claude Codeに一度通せば、自分で直せる普通のHTMLになります（デモでは20MB超のファイルが、合計40KB程度の index.html ＋ style.css ＋ script.js になりました）

素のHTMLとCSSになっていれば、WordPressサイトの「元」にも、制作会社へ渡すたたき台にも、既存サイトの1ページにも使えます。「デザインカンプを作って終わり」ではなく、制作フローの上流として実用になる ── ここがこの記事の到達点です。

使う前に知っておきたいこと

• そのまま公開はできません。写真は入っておらず、文章もAIが考えた仮のテキストです
• AIの提案には、事実確認が必要なものが混ざります。数字や「残りわずか」といった限定表現が出てきたら、必ず立ち止まって確認を
• Claude Codeでの変換は、一度で完璧にはなりません。ひととおり自分で触って、おかしければ追加で伝えて直してもらいましょう
• 使用量は、通常のClaudeチャットと共通の枠から引かれます。依頼書を作り込んで一発目の精度を上げるのが、結局いちばんの節約です
• Beta版です（2026年7月時点）。画面が記事と違っていたら、Claude本人にチャットで聞くのがいちばん早いです

そして、まだ足りないもの

記事の前半でお伝えした「足りない3つ」のうち、③ 手で直せる形はステップ7で解決しました。残るは2つです。

• ① 置き場所……公開するには、サーバーとドメインが必要です
• ② フォームの中身……「無料相談を申し込む」ボタンを押しても、問い合わせは誰にも届きません

見た目は完成していて、ページ内のリンクもきちんと動きます。それでも、ここを本当に動かして世に出すのは、デザインとはまた別の仕事。その先の話は、また別の記事でご紹介できればと思います。

このAI時代にWeb制作の学習は必要？

「AIがここまでやってくれるなら、もう学習はしなくていいのでは？」と思われたかもしれません。
ですが今回の制作を振り返ると、AIに任せていない場面がいくつもありました。セクションの順番を「読む人の気持ちの動線」として決めたこと。CTAが押すべき場所として認識できるかを見たこと。そして、AIが出してきた案を採るか却下するか判断したこと。

どれも「きれいかどうか」ではなく、「目的を果たすかどうか」で判断しています。とくにステップ5は象徴的でした。AIは目的にどこまでも忠実なので、依頼主のトーンを壊す案も、事実でない煽り文句も、平気で提案してきます。「AIが言うなら正しいのだろう」で通してしまえば、ページの性格そのものが変わってしまう。止められるのは、人間だけです。

AIは「きれいなページ」までは作ってくれます。「効果のあるページ」にするのは、まだ人間の仕事。
AIに任せられないのは、作ることではなく決めることなのだと思います。

まずは今回の依頼書を使って、1ページ作ってみてください。
「すごい！」と「あれ、ここは違うな」の両方を味わえるはずです。その違うなに気づいて直せる力こそが、AI時代のWeb制作であなたの武器になります。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。