こんな方に読んでほしい
- Claude Design が気になっているが、何が作れるかよくわからない方
- デザインの知識がなくてもサイトが作れるか知りたい方
- Chat・Design・Code をどう使い分ければいいか迷っている方
【注意点】
– この記事は Claude デスクトップアプリを対象としています。
– Claude Design は Claude Pro / Max / Team / Enterprise プランで利用できます。
作ったもの
開発者向けのWebツール集サイト「ToolsSite」を、Claude Chat・Claude Design・Claude Code の3つを組み合わせて作りました。
- URL: https://tools.middle-se-learn.com/
- 内容: 開発者がブラウザ上で使えるユーティリティツール集（HTMLフォーマッター、JSON変換、正規表現テスターなど）
今回の記事では、どうやって作ったかを順を追って紹介します。
全体の流れ
① Claude Chat → サイトのイメージを相談しながら「指示書」を作成
② Claude Design → 指示書を入力してデザインを生成（修正1回）
③ Claude Code → 各ツールページを追加・機能を実装
Figma なども使わず、デザインの専門知識もなく、この3ステップだけで完成しました。
① Claude Chat で「指示書」を作る
なぜ Chat を使うか
Claude Design は「テキストで指示するだけでデザインを生成してくれる」ツールです。
Webサイトからスライド、チラシなどデザイン作業を代替してくれます。
ただ、それらをするために何をどう伝えればいいか迷う方も多いと思います。
何となくでも指示すれば生成してくれるので、Claude Designだけでも作れます。
ただ、私は経験が全く無いので、どう指示すれば上手く作ってくれるのかわかりませんし、作法があるのかも不明です。
そこで最初に Claude Chat でサイトのイメージを相談しながら、Design に渡す指示書を一緒に作ってもらいました。
「開発者向けのツール集サイトを作りたい」というざっくりとした話から始めて、以下のような内容を詰めていきました。
- どんなツールを載せるか
- デザインの雰囲気（ダーク系？ミニマル？）
- 技術スタック（Astro + Tailwind CSS + TypeScript）
- ページのレイアウト・必要な機能
正直、デザインや技術スタックは事前に全く意識していませんでした。
仕事で使いそうなツールをまとめたサイトが欲しいなという軽い気持ちから始め、Claude Chatに詳細を詰めてもらいながらClaude Designに渡す指示書を作成してもらいました。
完成した指示書の内容
Chat との対話を経て出来上がった指示書は、かなり具体的な内容になりました。抜粋するとこんな感じです。
プロジェクト概要
開発者向けのWebツール詰め合わせサイトを Astro で構築します。
各ツールは独立したページで、トップページから一覧で辿れる構造です。
デザイン要件
- コンセプト: 開発者向け、機能的、ノイズが少ない
- 配色: ダークモード標準。ライトモードも切り替え可能
- フォント: 本文は system-ui、コード部分は等幅フォント
- レイアウト: 最大幅 1200px、中央寄せ、余白を十分に
トップページ
- ヘッダー: サイト名、ライト/ダーク切替ボタン
- ツール一覧: グリッドレイアウト（PC 3列、モバイル 1列）のカード
- 各カード: アイコン + ツール名 + 短い説明 + ホバーエフェクト
ここがポイントで、「なんとなくこんな感じ」ではなく、デザインの方向性・レイアウト・機能要件まで具体的に書かれた指示書を先に用意したことが、後の工程をスムーズにしてくれました。
② Claude Design で一気に生成する
指示書を貼り付けるだけ
claude.ai/design にアクセスして、Chat で作った指示書をそのまま入力欄に貼り付け、作成してもらいます。
生成の途中でClaude Designから下記の確認がありました。
- スコープ：トップページとHTMLフォーマッターページ、両方作る？
- デザインの雰囲気：ターミナル風（モノスペース、シャープなエッジ）でいい？
- アクセントカラー：マゼンタ（ピンク系）でいい？
- 言語：日本語？
- モード：ライトモードをデフォルト？
これに答えると、すぐに右パネルにデザインが表示されました。
生成に要した時間は５分程度です。
生成されたデザイン
初版から凄いものができました。デザイン経験がない自分には到底できない部分です。
指示書に書いた「開発者向け、機能的、ノイズが少ない」というコンセプトを見事に読み取って、ターミナル風のデザインを作成してくれています。
修正は1回だけ
ターミナル風のせいかURL部分にカーソルがあり、それがチカチカして目立ったので、チャットで伝えて修正してもらいました。
③ Claude Code でページを追加する
Claude Design で作ったのはサイトのデザインと土台です。実際に動くツールページは Claude Code で追加しました。
Claude Designから生成したファイル一式をダウンロードします。
画面右上の[Share]-[Export]-[Project archive]-[Download]と選択することでダウンロードできます。
ダウンロードしたzipを解凍してClaude Codeの作業フォルダに配置します。
あとはClaude Codeにお願いしてページを追加していってもらいました。
Chat・Design・Code の役割分担
| ツール | やったこと |
|---|---|
| Chat | 要件の整理・指示書の作成 |
| Design | サイト全体のデザイン生成 |
| Code | 各ツールページの実装・機能追加 |
それぞれ得意なことが違うので、組み合わせることで効率よく進められました。
やってみてわかったこと
① 指示書の質がそのまま結果に出る
「なんとなくいい感じのサイト」と入力するより、デザインの方向性・レイアウト・使用技術まで具体的に書いた指示書を渡した方が、期待通りの結果が返ってきます。
最初に Chat で時間をかけて指示書を作ったことが、Design での一発生成につながりました。
② Claude が質問してくれるので、任せすぎても大丈夫
「指示書が不完全だったらどうしよう」と心配していましたが、Claude Design は曖昧な部分を自分から確認してきます。指示書を完璧に仕上げようとプレッシャーを感じる必要はありません。
③ 「驚き」は細かいところに宿る
ターミナル風のデザインやキャッチコピーなど、指示書に書いていなかった部分で Claude が気を利かせてくれる場面がありました。「こんなこともやってくれるんだ」という発見が、作業を楽しくさせてくれます。
まとめ
Claude Chat・Design・Code を組み合わせることで、デザインの専門知識なしに開発者向けツールサイトを完成させることができました。
Chat → 要件整理・指示書作成
Design → デザイン生成（修正1回）
Code → 機能実装・ページ追加特に「Chat で丁寧に指示書を作ってから Design に渡す」という流れは、ぜひ試してみてほしいポイントです。いきなり Design に「いい感じのサイト作って」と入力するより、はるかに意図した結果が得られると思います。
完成したツールサイトはこちらで公開中です。
👉 https://tools.middle-se-learn.com/
コメント