📖 読了時間の目安：約13分
この記事で伝えたいこと
デザインの知識がゼロでも、Claude Designのチャット欄に指示を入力するだけでロゴが生成できます。
本記事では、ヘッダーロゴ・ファビコンの生成から、Cocoon（WordPress）への反映手順まで、実際の作業ログをもとに解説します。
途中で発生したトラブル2件の原因・解決策もまとめていますので、「うまくいかない」場面での参考にしてください。
この記事は全3回のシリーズです。 【前編】Claude Designってどんなツール？、【中編】デザインシステムの設定、【後編】ロゴの生成からWordPress反映まで（本記事）。
※本記事の情報は 2026年5月17日 時点で確認したものです。
中編では、デザインシステムの設定について解説しました。後編の本稿では、いよいよ実際にロゴを作成します。 その前に···大変よいことなのですが、仕様変更・改善速度が早すぎる（笑）。そのため記事の公開時には、スクリーンショット等が様変わりしているかもしれません。何卒ご容赦を。
ヘッダーロゴを生成する
デザインシステムの登録が終わったら、新規プロジェクトを作成します。 復習をかねて、少しだけ前回の最終設定画面（下図）を確認しておきましょう。ここでは右ペインの[Design systems]タブが選択されている点に注目してください。
私はここで、右ペイン[Published]トグルの左にある、[Make default]ボタンを押下しておきました。この設定は必須ではありませんが、中編で触れたように「作成したデザインシステムを常用する」なら、クリックして損はありません。デフォルトに設定すると、下の拡大図に示すように「DEFAULT」バッジが現れます。
さて、この辺りで「頭をリセット」する意味も込めて、一度 claude.ai/design に戻ってみましょう。このページが出発点でしたからね。 この画面（下図）では、右ペインで[Designs]タブを選択しています。この状態でタブの下を見ると、「ロゴラボ Design System」という名称で、デザインシステムが作成できていますね。 さきほどの図で選択したタブは[Design systems]でしたので、当然ながら右ペインの表示内容が異なっています。
作成したデザインシステムをデフォルトに設定すると、左ペインのリストボックスの中で、そのデザインシステムが選択された状態になります。
その上のボックス（初期状態では”Project name”と表示）に、新しく作成するデザイン（今回はヘッダーロゴ）のプロジェクト名を、わかりやすい名称で入力します。上の画面では、「ロゴラボ ヘッダーロゴ」と入力していることがわかりますね。あとは[+ Create]ボタンを押下すれば、ヘッダーロゴ作成の第一段階が終了します。
トップページ claude.ai/design に戻ったあとの操作内容を、以下にまとめます。
- 左ペインで[Prototype]タブを選択
- 「New prototype」のテキストボックスで、Project nameとして任意の名前を入力（例：
ロゴラボ ヘッダーロゴ） - 「Design System」のプルダウンメニューで、中編で作成したロゴラボ Design Systemが選択済みであることを確認
- [+ Create]をクリック
4.まで進めると、左側にチャット欄・右側にキャンバスという2ペイン構成の画面が開きます。
チャット欄に指示を入力する
開いた画面左下の「Describe what you want to create…」と記述されたテキストボックスに、一例として次のプロンプトを入力して送信（[Send]ボタンを押下）します。
ロゴ博士のライフハック・ラボ（ロゴラボ）のWordPressブログ用
ヘッダーロゴを作成してください。
【要件】
- サイズ: 横長（推奨 360×80px 程度）
- テキスト: 「ロゴ博士のライフハック・ラボ」
- サブテキスト: 「by 呂語 文則」（小さめに添える）
- スタイル: シンプル・知的・清潔感
- 背景: 透過（PNG出力想定）
8つのバリエーションが一気に生成された
送信から10分程度で、右側のキャンバスに8種類のロゴ案が並びました。下図の左ペインには、8つのバリエーション名を含む「案の方向性」が、以下のとおり表示されています。
- 01 Classic — UI Kit 既存のヘッダーに最も馴染む安全策
- 02 Indigo + amber rule — タイトルをブランド色で、アンバー罫でアクセント
- 03 Two-line — 「ライフハック・ラボ」を主役に二段
- 04 Latin eyebrow — 雑誌風、英文サブタイトル付き
- 05 Serif on 博士 — 「ロゴ博士」だけ Noto Serif JP、知的な遊び
- 06 Stamp monogram — マスコットなし、ファビコン/OGP 展開向け
- 07 Outlined avatar + amber rule — 紙の本らしい上品さ
- 08 Right-aligned masthead — テキスト右寄せの異色案
また右ペインには、作成したロゴのうち、01と02のプレビューが表示されています。
Claude Designでは、生成後もチャットで追加指示を出すことによって画像を修正できます。実際に何度か指示を出し直したのですが、「プロフィール画像を金色の枠で囲って」くらいであれば、キャンバスのプレビューにすぐ反映されることがわかりました。なおアプリが提示する案の個数（今回は8）は、プロンプトで明示しないと毎回変わるようです。
ファイルをダウンロードする
気に入ったデザインができたら、PNGでダウンロードします。私はチャット欄に次の「質素なプロンプト」を入力しました。
案02を、1x / 2x / 3x のサイズで書き出してください。先のプロンプトで360 x 80pxを指定したので、2x / 3x はそれぞれ「720 x 160px」・「1080 x 240px」になります。
すると左ペインに[Download ロゴラボヘッダーロゴV02 (1x / 2x / 3x)]ボタンが表示され、ここからzip形式ファイル（ファイル名：__.zip）をダウンロードできました。下図は、ダウンロード用ボタンを含む「左ペインの拡大図」です。
zipを展開したところ、exportsフォルダの中に「サイズの異なる3つのファイル」が生成されていました。
ファイル名の変更
ダウンロードしたファイルは、WordPressとSEOのベストプラクティスに沿ったファイル名に変更することを推奨します。半角英数・ハイフン区切りで統一するなど、ルールを決めておくとよいでしょう。（日本語・スペースはURL上でエンコードされるため不向きです。） 私は、Claude AIに相談しながら名称を決定し、logolabo-logo-light.pngにリネームして使用しました。
WordPressにヘッダーロゴを設定する（Cocoonの場合）
参考までに、WordPress（テーマはCocoon）におけるロゴ設定手順を以下に示します。
- WordPress管理画面 → [Cocoon設定]
- [ヘッダー]タブをクリック
- [ヘッダーロゴ]の画像アップロード欄にファイルをアップロード
- [変更をまとめて保存]をクリック
画像アップロード時の各フィールド
メディアライブラリに画像をアップロードする際、Webアクセシビリティに配慮するため、「各種フィールドへの入力」が必要になる場合があります。これは画像の種別によって変わります。ヘッダーロゴの場合は、以下の指針を参考にしてください。
| フィールド | 入力例 | 理由 |
|---|---|---|
| 代替テキスト | ロゴ博士のライフハック・ラボ ロゴ | SEOとアクセシビリティのために入力 |
| キャプション | 空白 | ヘッダーロゴに説明文は不要 |
| 説明 | 空白 | WordPress内部の管理用メモ欄で公開側には表示されない |
💡 つまづきポイント：WordPressの標準カスタマイザー（外観 → カスタマイズ → サイト基本情報）を開くと[サイトアイコン]の直下に[画像を変更]というボタンしかなく、ヘッダーロゴの設定場所が見当たりません。これはCocoonテーマのヘッダーロゴ設定が標準カスタマイザーではなく専用タブにあるからです。他のテーマをお使いの場合も、専用タブに該当する場所がないか、確認してみるとよいでしょう。
ファビコンを生成する（おまけ）
ファビコンとは、ブラウザのタブや検索結果に表示される小さな正方形のアイコンです。WordPressでは512×512px以上の正方形画像が推奨されています。
ファビコンの生成指示
ヘッダーロゴを作ったのと同じプロジェクトのチャット欄に追加で指示を出します：
ファビコン用に、円形フレーム＋プロフィール画像の
部分だけを512×512pxの正方形で書き出せる形で
生成してください。背景は白（#FFFFFF）でお願いします。以降の操作は、ヘッダーロゴと同じですので省略します。ちなみに生成したファビコンは次のとおりです。名称は、後からfavicon-512x512.pngに変えました。
WordPressでの設定
外観 → カスタマイズ → サイト基本情報 → [サイトアイコンを選択]からアップロードします。
ファビコンは装飾的なUI要素なので、代替テキスト・キャプション・説明はすべて空白でOKです（スクリーンリーダーもファビコンを読み上げません）。
トラブルシューティング
作業中に発生した2つのトラブルを記録しておきます。同じ状況に陥った方の参考になれば幸いです。①・②はそれぞれ、Claude Design・WordPressに関するトラブル事例です。
トラブル①：ダウンロードしたPNGに変更が反映されない
状況 画像の細部を修正した後、プレビューでは修正箇所が正しく反映されていた。しかしダウンロードしたPNGファイルは修正前の画像のままだった。ブラウザをリロードしても改善しない。
原因 Research Preview特有のバグの可能性あり。プレビューと書き出しエンジンの同期がとれていない状態と推測。
解決策 漠然と「再生成して」とチャット欄で伝えるより、状況を明示した上で「再レンダリング」というキーワードを使うと効果的でした。これで無事、正しい透過PNGがダウンロードできました。
プレビューでは正しく反映されていますが、
ダウンロードしたPNGには反映されていません。
ダウンロード用に再生成・再レンダリングしてください。
透過PNGでの出力が必要です。【補足】 上記トラブルに遭遇したのは、4月27日のことでした。
トラブル②：ロゴを差し替えてもサイトに旧ロゴが残る
状況 サブタイトルの文言を変更してロゴを再生成。WordPressのメディアライブラリから旧ロゴを削除し、新ロゴをアップロードして[Cocoon設定]で再設定したにもかかわらず、サイトのプレビューには旧ロゴが表示されたまま。Cmd + R（通常リロード）では改善しなかった。
原因 ブラウザが旧ロゴ画像をキャッシュとして保持していたため。
解決策 Cmd + Shift + R（スーパーリロード） で一発解決しました。
通常のリロードとは異なり、スーパーリロードはキャッシュを無視してすべてのリソースをサーバーから再取得します。以下にOSと代表的なブラウザ3つを例に、キー操作をまとめておきます。
【OS別・ブラウザ別のスーパーリロード方法】
| ブラウザ | Mac（macOS） | Windows |
|---|---|---|
| Google Chrome Microsoft Edge | Command (⌘) ＋ Shift ＋ R(または Command ＋ 更新ボタン) | Ctrl ＋ F5(または Ctrl ＋ R / Shift ＋ 更新ボタン) |
| Firefox | Command (⌘) ＋ Shift ＋ R(または Shift ＋ 更新ボタン) | Ctrl ＋ F5(または Ctrl ＋ Shift ＋ R) |
| Safari | Command (⌘) ＋ Option (⌥) ＋ R（ハードリフレッシュ） | (Mac専用のためWindows版なし) |
それでも解消しない場合の追加対処：
- [Cocoon設定] → [ヘッダー]タブでロゴを一度削除してから再設定
- キャッシュプラグイン（W3 Total Cache・LiteSpeed Cache等）をインストールしていれば、キャッシュを手動パージ
- アップロードするファイル名を変える（例：
logolabo-logo-light-v2.png）
完成したロゴをWordPressで確認
すべての作業が完了した後のサイトがこちらです。
今日の作業まとめ
| 作業 | 結果 |
|---|---|
| ヘッダーロゴ生成（8案） | ✅ 第2案をベースに最終版を生成 |
| ロゴのダウンロード | ✅ プロンプトで指示して解決 |
| WordPressに反映 | ✅ ヘッダー・フッターに表示確認 |
| ファビコン生成（512×512px） | ✅ 円形フレーム流用で視認性確保 |
| サイトアイコン設定 | ✅ 生成したファビコンを適用 |
使ってみた感想
正直、ここまでスムーズにいくとは思っていませんでした。
デザインの知識ゼロでも、テキストで指示するだけで複数のロゴ案が数十秒で出てくるというのは、体験してみないとわからない便利さです。
トラブルも2件ありましたが、どちらもチャットでの追加指示やスーパーリロードというシンプルな方法で解決できました。「うまくいかない」と思ったときに、まずClaude Design自身のチャットに状況を説明してみる、というアプローチが意外と効果的です。
Research Previewですが、バグやUIは驚くほどの速度で改善されています。現時点でも十分実用的ですので、早期に利用して損はないと思います。
前編で触れたアローワンス（週間利用枠）を確認したところ、(1) デザインシステム生成後の段階で22%、(2) ヘッダーロゴ生成後で27%、(3) 画像のダウンロード後で29%でした。(1)から(3)の作業を3回繰り返すと、週間制限の100%近くに達する計算です。 (1)から明らかなように、デザインシステムの作成は、かなりサーバー負荷のかかる操作なんですね。
今後の記事に向けて
次のステップとして、記事ごとのアイキャッチ画像テンプレートもClaude Designで作る予定です。上手くできたら、また記事にします。（現在は、Google Geminiでアイキャッチ画像生成用のGemを作成し、NanoBananaを使って画像を取得しています。）
WordPressをより深く学びたい方には、以下の書籍が参考になります。Cocoon専用の解説書は現時点では存在しませんが、WordPress全般の基礎を学ぶ入門書として定評があります。 なお本書が使用するテーマは「X-T9」（ブロックテーマ）のため、Cocoonとは画面構成が異なります。Cocoon固有の設定は公式マニュアル（wp-cocoon.com）で補完するのが効率的です。
-
※本リンクはアフィリエイトリンクです
この記事は、ロゴ博士がClaude AIと対話しながら実際に作業した内容をもとに執筆しています。情報は2026年5月17日時点のものです。Research Preview段階のツールのため、仕様は変更される場合があります。
