📖 読了時間の目安：約5分
この記事で伝えたいこと
この記事では、ブログ「ロゴラボ」のヘッダーロゴ作成を題材に、デザインシステムの設定を最短距離で完了させる手順を解説します。「Claude Designって結局、何をどう設定すればいいの？」という方は、ぜひご一読ください。
Cocoonのブランドカラー確認・ブランド情報テキストの作り方・Published設定まで、3ステップで完結します。
この記事は全3回のシリーズです。 【前編】Claude Designってどんなツール？、【中編】デザインシステムの設定（本記事）、【後編】ロゴの生成からWordPress反映まで。
※本記事の情報は 2026年5月12日時点 に確認したものです。
デザインシステムとは？
Claude Designには「デザインシステム(Design System)」という機能があります。ブランドの色・フォント・雰囲気などを事前に登録しておくと、以降のすべてのプロジェクトに自動で適用される仕組みです。
毎回「青系でシンプルに」などと指示しなくても、登録しておけばClaude側がブランドのトーンを把握した状態でデザインを生成してくれます。
中編の本稿では、ブログ用デザイン素材「ヘッダーロゴ」の作成をテーマに、WordPressサイト（テーマ: Cocoon）への適用例を順次示していきます。必要に応じ、ご利用中のテーマの設定内容に置き換えてください。
【補足】
- 公式ドキュメント「Get started with Claude Design」を適宜参照すると、理解が深まります。
- 私ロゴ博士は、現在Proプランに加入しています。そのため記事内で提示する画面は、このプランにもとづくものです。
- Claude Designの動作確認は、Macbook Air（macOS Tahoe 26.3.1）のGoogle Chromeを使って実施しました。
- Claude Designは、ロゴ博士にとっては余りに多機能です。（本当に多機能すぎる！）そこで本稿では「最短距離で、最小限のコンテンツを作成する」という方針で、設定手順を紹介しています。ご了承ください。
設定前の準備：ブランド情報を整理する
設定画面を開く前に、まず手元でブランド情報（作成する素材に適用するデザイン情報）を整理しておきましょう。テキストデータでアプリに補足情報を渡すと、素材が思い通りに仕上がりやすくなります。
用意できるとよい素材（優先度順）
| 優先度 | 素材 | 入手方法 |
|---|---|---|
| ★★★ | ブログのスクリーンショット（複数ページ） | ブラウザのキャプチャ |
| ★★★ | ロゴ・プロフィール画像など（PNG/SVG） | 手元にあるもの |
| ★★☆ | 既存のアイキャッチ画像 | 例えば、WordPressメディアライブラリから取得する |
| ★☆☆ | カラーコード・フォント名のメモ | テキストで記述したもの |
私は上表の中から、「プロフィール画像」と「カラーコード・フォント名のメモ」を選択し用意しました。
ブランドカラーを確認する（Cocoonの場合）
WordPressのテーマCocoonを使っている場合、サイトキーカラーは Cocoon設定 → [全体]タブ から確認・設定できます。[全体]タブはCocoon設定を開いたときにデフォルトで表示されるタブです。
💡 つまづきポイント①：Cocoon設定を開いても[サイトキーカラー]という項目がどこにあるかわからない場合もあるでしょう。答えは[全体]タブの中です。タブの左端にあるので、開いたらすぐ見つかります。[全体]タブ内でスクロールするとカラーピッカーが出てきます。
未設定の場合は、この機会にまとめてカラーを決めてしまうのがおすすめです。
ロゴ博士の設定内容：
Primary（メインカラー）: #1E50A2（インディゴブルー）
Accent（アクセント）: #D4870A（アンバー）
Background（背景）: #FFFFFF（ホワイト）
Text（テキスト）: #333333（チャコール）インディゴブルーなどのカラーは、「学術的・知的・信頼感」というロゴラボのトーンをClaude AIに渡し、その回答内容から私の判断で選定しました。
参考までに、Webデザインやブランドカラーの基礎を学びたい方にはこちらが参考になります。
-
ノンデザイナーズ・デザインブック［第4版］（単行本） 🛒 Amazonで確認
※本リンクはアフィリエイトリンクです
-
ノンデザイナーズ・デザインブック［第4版］（Kindle版） 🛒 Amazonで確認
※本リンクはアフィリエイトリンクです
ブランド情報テキストを作る
ブランドカラーを含む諸情報を、以下の要領でテキストデータにまとめましょう。そうすればデザインシステムの設定時に、そのままチャット欄にデータを貼り付けるだけで済みます。 私は事前にClaude AI（Claude Designではありません）に相談しながら、「Design Systemの設定時に登録すべき情報」を作成しておきました。
## ロゴラボ ブランドガイドライン
### サイト概要
- ブログ名: ロゴ博士のライフハック・ラボ（ロゴラボ）
- ターゲット: 40〜60代・男性・知的好奇心旺盛
- トーン: 知的・落ち着き・信頼感・少しユーモア
### カラー
- Primary: #1E50A2（インディゴブルー）
- Accent: #D4870A（アンバー）
- Background: #FFFFFF（ホワイト）
- Text: #333333（チャコール）
### タイポグラフィ
- フォント: Noto Sans JP
- 本文サイズ: 16px / 行間: 1.8
### 素材
- プロフィール画像: モノクロ調イラスト（ハット＋ひげの中年男性）
- スタイル: セミフラット・イラスト系・清潔感
### NGトーン
- 過度に派手・ポップすぎ・若者向けデザイン※ターゲットとする読者の年齢層は、「リスキリングを目指す世代」を想定し、本稿執筆のため暫定的に設定したものです。
実際の設定手順
ステップ①：claude.ai/design を開く
ブラウザで claude.ai/design にアクセスしてログインします。Claudeにログイン済みであれば、そのまま初期画面が表示されます。 最初に、左下にある[Set up design system]のボタンから、デザインシステムを新規作成します。
ステップ②：デザインシステムを新規作成する
画面が下のとおり遷移したら、当面デザインシステムの名称（下図では「ロゴラボ」）だけ入力します。あとはすべてオプションですので、[Continue to Generation]を押下し次のステップへ進めます。
ボタンの押下後、下の画面に示すとおり「しばらく時間がかかりますよ」と伝えてきます。[Generate]を押下してデザインシステムの生成を開始します。
次の画面は、デザインシステムを生成している真っ最中のものです。動きが止まり生成が一段落したら、デザインシステムの最終設定を、左下の「Describe what you want to create…」というテキストボックスから行います。
新規作成直後の画面では、「ロゴラボ」という名称の入力に留めました。そのため、この段階でClaude Designが追加の情報を求めてきます。 待ってましたとばかりに、準備しておいたブランド情報のテキストを貼り付けてください。同時に、作成物（今回はヘッダーロゴ）に反映したい画像等があれば左下の📎（クリップアイコン）から添付します。（図からは読み取れませんが、私はここで、ロゴ博士のプロフィール画像を使いました。）
準備できたら、[Send]ボタン（ピンク色）を押下します。右ペインに「What is ロゴラボ?」等の文字列が多数並んでいますが、このペインは今回の記事では無視して、最短距離でヘッダーロゴの設定を進めます。
💡 つまづきポイント②：送信後、右ペインに「No assets registered yet. They’ll appear here as the design system is generated.」と表示されたまま変化しない場合があります。しばらく待っても動きがない場合は、トップ画面 claude.ai/design に戻ってみてください。「ステップ③」で述べるとおり、右ペインにDesign Systemが表示されていればOKです。
ステップ③：生成結果を確認してPublishedをONにする
画面が落ち着いたら、一度トップページ（claude.ai/design）に戻ってみましょう。右ペインの[Design Systems]タブにエントリが追加されているはずです。 ここで[Published]トグルが「オン」になっていることを必ず確認してください。これがONになっていないと、以降のプロジェクトにデザインシステムが自動適用されません。 このデザインシステムを常用する場合には、トグル左にある[Make default]ボタンを押下しておくとよいでしょう。
まとめ
Claude Designの設定、お疲れさまでした。以下に、作業の要点をまとめておきます。
| 作業 | 結果 |
|---|---|
| Cocoonのサイトキーカラー確認・設定 | ✅ Claude AIとの対話から生成 |
| ブランド情報テキストの作成 | ✅ Claude AIとの対話から生成 |
| Claude Designへのアップロード・送信 | ✅ ブランド情報とプロフィール画像を送信 |
| デザインシステムのPublished | ✅ トップページに戻りトグルを確認 |
デザインシステムの登録が完了したら、いよいよロゴ生成（プロトタイプの作成）です。後編では、ヘッダーロゴを生成してWordPressに反映するまでの手順と、途中で発生したトラブルの解決策を詳しく解説します。
おまけ（余談）
前編の投稿から、随分日数が経過してしまいました。これには理由があります。本稿では手順を示すためにスクリーンショットを多用していますが、画面を取り込むために「作成したデザインシステムを削除してから作成しなおす」という手順が必須でした。ところが、この作業にはかなりサーバー負荷がかかるらしく、アローワンス（前編参照）をアッという間に使い果たしてしまったのです。そのため、Claude Designから「週明けにリセットされるまで、デザインシステムの作成を待ってください」と言われてしまいました。 前編で、「こまめに使用量を確認しながら、計画的に使うことをおすすめします。」などと言っておきながら、何と情けないことでしょう。Proプランをご利用の方は、注意してくださいね。
後編へつづく →「ロゴを生成してWordPressに反映する」
この記事は、ロゴ博士がClaude AIと対話しながら実際に作業した内容をもとに執筆しています。情報は2026年5月12日時点のものです。Research Preview段階のツールのため、仕様は変更される場合があります。
