【店主4年】マカロン店主がクロードデザインでブログのトップページを作った話｜使い方・料金も実例で解説【2026年版】
- コードが書けなくても、Claudeに頼めば「人に見せられるサイトの顔（LP）」が作れるようになる
- クロードデザインの使い方・料金・無料範囲が、実例つきで丸わかりになる
- 外注に数万円かけず、自分でサイトの導線を整える手順が手に入る
- AIに「伝わる相談」をするコツ（編集者・デザイナーに頼む感覚）が身につく
- 失敗・修正のリアルな工程まで包み隠さずわかる
結論！コードを1行も書けない私（マカロン店主）でも、クロードデザインでブログのトップページを作れました。
きっかけは「記事が増えてきて、読者が読みたい記事にたどり着けていないのでは？」という不安でした。お店でいう”案内看板”がないブログに、道しるべがほしかったんです。
外注も考えましたが、まずは話題のクロードデザインを試したら
——驚くほどスムーズでした。この記事では、その全工程を、つまずきも含めて正直にお見せします。
↓クロードデザインはこちらから作成できます
▼クロードデザイン（Claude design）とは？
クロードデザイン（https://claude.ai/design）は、AIの「Claude」をつくっているAnthropic社が2026年4月に公開した、対話でWebページやスライドを作れるデザインツールです（claude.ai/design）。
画面は左がチャット、右がプレビュー。「こんなページを作って」と日本語で話しかけると、その場でデザインが形になっていきます。コードを書く必要はありません。
クロードデザインって何ができるの？
「こういうページがほしい」って相談すると、その場で作ってくれるんよ。しかも対話しながら直せるのが便利なんだ。
※ここで要注意。似た名前の「Artifacts（アーティファクト）」とは別物です。Artifactsはチャットの中で生成物を作れる機能で、無料プランでも使えます。一方クロードデザインは有料プラン（Claude Pro・Max・Team・Enterprise）向けのリサーチプレビュー（実験段階の機能）。週ごとの利用枠があり、仕様や提供条件は変わることがあります（最新は公式ページでご確認を）。私はMaxプランで使いましたが、クロードデザイン目的ならPro（月20ドル）で十分です。
▼クロードデザインの料金・無料範囲
正直に言うと、クロードデザインは無料プランでは使えません。Claude Pro以上の有料プランが必要です。
Claude Proは月額20ドル（2026年5月時点で日本円にして約3,000円前後＋消費税）。私はその上位のMaxプランで使いました。なお、無料プランで使える「Artifacts」という別の機能もあります（クロードデザインとは別物ですが、AIに生成物を作ってもらう感覚は味わえます）。
けっこうお金かかるんだね…
そうなんよ。でも外注したら数万円。月3,000円で自分のペースで何度も作り直せると思えば、私には納得感あったよ！
▼なぜ自分でトップページを作ろうと思ったのか
いろはノートは記事数が増えてきて、ふと「読者が読みたい記事にたどり着けていないんじゃないか」と不安になりました。お店でいう”案内看板”がない状態です。
開業したばかりの人、お金の悩みがある人、ECを始めたい人——それぞれが「自分に近い入口」から読み始められる道しるべ（トップページ）がほしい。でも外注は費用も時間もかかる。そこで、自分でやってみることにしました。
▼【全工程】クロードデザインでトップページを作った手順
STEP1：まず”お願いメモ”を渡す（仕様書といっても箇条書きでOK）
いきなり「いい感じに作って」では、なかなか思いどおりになりません。そこでまず「お願いメモ」を用意しました。”仕様書”なんて呼ぶと難しそうですが、中身は「こんなふうにしたい」を箇条書きにしただけのメモです。
私が実際に書いたのは、こんな内容でした。
- 背景はクリームベージュ（お店のやわらかい雰囲気に合わせて）
- 茶髪のマスコットキャラを置きたい
- 載せたいのは「5つのカテゴリー」と「6ステップのロードマップ」
- トーンはやわらかく、煽らない感じで
- スマホでも見やすくしてほしい
これくらいで十分でした。専門用語はいりません。実際に私がいちばん最初にClaudeへ打った言葉も、こんなにシンプルです。
「個人事業主向けブログのトップページを作りたいです。背景はクリーム色で、やわらかい雰囲気にしたい。まずは全体の構成から相談させてください」
メモって、そんなにざっくりでいいの？
うん、箇条書きでOK。足りないところはClaudeが「これも決めますか？」って聞いてくれるから、話しながら一緒に決めていけるよ。
完璧なメモを用意する必要はありません。話しながら一緒に決めていけるのが、クロードデザインの安心なところでした。
STEP2：あとは”相談”しながら直していくだけ
仕様書を渡すと、クロードデザインがその場でページを作ってくれます。ここからは「編集者やデザイナーに相談する感覚」で、気になるところを話しかけて直すだけ。LINEで友だちに相談するような気軽さでした。
「対話」といっても、むずかしくありません。たとえば私は、こんなやりとりをしました。
・「この見出し、ちょっと硬くない？」→「シーンで選ぶ｜あなたの今に合う3つの入口」が、「いまのあなたに、うってつけの記事を。」にやさしく変わりました。
・「背景の色、単調なほうが上品？」→「デザイナー目線だと単色寄りが上品です」とアドバイスをくれて、無印やお菓子屋さんの自社サイトのような落ち着いた雰囲気に近づきました。
対話って、どんなふうに話すの？
「ここ直して」「色を変えて」って、普通に話しかけるだけだよ。むずかしい言葉はいらないんよ。
STEP3：できたページを”コピペ”でWordPressに載せる
完成したら、いよいよ自分のサイトに載せます。専門的に聞こえますが、やることは「コピーして貼る」だけ。私はこの手順でWordPressに設置しました。
- クロードデザインの画面から、できあがったページのHTMLを書き出す（コピー）
- WordPressの管理画面で、固定ページを新規作成（または既存のトップページを編集）
- 「カスタムHTML」というブロックを追加する
- さっきコピーしたHTMLを貼り付けて、公開（または更新）ボタンを押す
これだけです。細かい色のズレなどの微調整は、もっと突き詰めたくて「Claude Code」（コードを書くAIツール／Claude Pro・Maxで使えます）も使いましたが、これは”こだわりたい人向けのおまけ”。基本はコピペで完了しますし、コードが書けなくても問題ありません。
載せるのって、難しそう…
「カスタムHTML」っていうブロックに貼るだけだよ。コピペができれば大丈夫！
▼正直に伝えるデメリット・つまずいた点
ここは正直に良いことばかりではなかったです。
① 一発では完璧になりません。
→私の場合、文言やデザインを何度も直して、最終的に8つくらいバージョンを重ねました（対話で直せるので苦ではなかったですが）。
② できたデザインが「正しいのか」自分では判断しづらい。
→これは非デザイナーならではの悩みでした。第三者にレビューしてもらって初めて気づく点もありました。
③ サイトの画像が、外部リンク制限で埋め込めない場面があった。
→これは少し技術的なつまずきで、書き出し方を工夫して解決しました。
一発でできた？
ぜんぜん（笑）。8回くらい直したよ。でも対話でどんどん直せるから、外注より自分のペースで進められたのは良かったですね。
▼コードが書けない個人事業主でもできる？よくある疑問Q&A
Q. プログラミング知識ゼロでも大丈夫？
A. 大丈夫です。私自身、コードは1行も書けません。「相談する」感覚で言葉を交わせば形になります。
Q. 無料でどこまでできる？
A. クロードデザインは有料プラン（Pro以上）が必要です。クロードデザイン自体は有料プラン限定ですが、AIに作ってもらう感覚は、Claudeの無料チャットや別機能のArtifacts（無料プランで利用可）でも味わえます。
Q. 作ったページはどうやってサイトに載せる？
A. HTMLとして書き出して、WordPressなどのサイトに設置します。エクスポート機能が用意されています。
Q. 商用利用してOK？
A. 個人のブログやお店のサイトに使う分には問題ありません。Anthropicの利用規約では生成物はユーザーに帰属するとされています（公式の利用規約）。ただし利用ポリシーの遵守が前提なので、用途が決まっている方は公式規約もご確認ください。
🎯今日から始める3つのアクション
- Claudeに登録してみる（まずは無料チャットで雰囲気を／5分）
- 自分のサイトの「理想」を箇条書きにしてみる（10分）
- クロードデザイン（有料プラン）を使うか検討する（15分）
▼まとめ｜コードが書けなくても、サイトの顔は自分で作れる
クロードデザインを使ってみて一番感じたのは、「コードを書く」のではなく「相談する」ツールだということ。色や言葉を編集者・デザイナーに相談する感覚で、コードが書けない私でもサイトのトップページを作れました。
まだ公開したばかりで効果はこれから検証ですが、「記事が増えて読者が迷子になる」という悩みに、自分の手で道しるべを作れたのは大きな一歩でした。同じように「自分のサイトの顔を整えたい」個人事業主の方の参考になればうれしいです。
📚あわせて読みたい
ご質問・ご相談はお気軽にどうぞ
お問い合わせはこちら
