WordPressのデザインをClaudeに変えてもらった｜ハイブランド風の上品なモノトーンにするまでのやり取り

未分類

前回の記事では、エックスサーバーで WordPress を始めて、AI の「Claude」から記事を下書き投稿できるようにするまでをまとめました。

今回は、「WordPress のデザインを変えたいけどできる？」とClaudeに聞いてから、新しいデザインを公開するまでのやり取りを紹介します。最終的に、このブログは下の画像のような上品なモノトーンのデザインになりました。

デザイン変更後のトップページ（パソコン表示）。白を基調に、中央に明朝体のサイト名を配置したモノトーンのデザイン
デザイン変更後のトップページ（パソコン表示）

1.「WordPressのデザインを変えたいけどできる？」

最初に、Claudeにこう聞いてみました。返ってきた答えは「できる。ただし、Claudeが直接変えられる部分と、管理画面で操作する部分がある」というものでした。

Claudeが直接変更できるもの

記事の投稿に使っている REST API で変更できるのは、次のようなものだそうです。

  • サイトのタイトルとキャッチフレーズ
  • メニュー
  • ウィジェット（サイドバーの中身）
  • 固定ページ（プロフィールやお問い合わせなど）

管理画面で操作が必要なもの

色や雰囲気のようなデザインの設定は、REST API からは変更できないそうです。そのため、次のような方法を提案されました。

  • Cocoon の「スキン」を選ぶ（一番手軽な方法）
  • 「外観」→「カスタマイズ」で色やロゴを設定する
  • Claude が作った CSS を「追加CSS」に貼り付ける

2.「管理画面を自動操作してやれない？」

CSS を自分で貼り付けるのは面倒なので、次にこう聞いてみました。答えは「できる」でした。

Claude のデスクトップアプリには専用のブラウザが付いていて、Claude がその中でクリックや入力をして、管理画面を操作できるそうです。ただし、次の条件がありました。

  • ログインだけは自分で行う（安全のため、Claude はパスワードを入力しない）
  • 保存（公開）する前に、必ず確認を取る（デザインは訪問者全員に見えるため）

3.「パスワードを保存しておけば、ログインも自動化できる？」

さらに欲張って聞いてみましたが、答えは「できない」でした。パスワードを保存しておいても、Claude がそれを入力してログインすることは、安全上のルールでできないそうです。

そのかわり、手間を減らす方法を教えてもらいました。

  • ログイン画面で「ログイン状態を保存する」にチェックを入れると、約2週間はログインしたままになる
  • 記事の作成と下書き投稿は、アプリケーションパスワードを使っているので、ログインしなくても自動でできる

また、「ログイン用のパスワードをテキストファイルなどにそのまま保存するのは危険なので、ブラウザのパスワード保存機能やパスワード管理ソフトを使うように」というアドバイスもありました。

4. 参考にしたいサイトを伝える

自分でログインしてから、「こんなイメージにしたい」と、ハイブランドのコスメ公式サイトの商品ページの URL を伝えました。

Claude はそのページを開いて、デザインの特徴を次のように分析してくれました。

  • オフホワイトの背景と、チャコールグレーの文字
  • 角を丸めない、シャープな形
  • 細めの文字と、たっぷりの余白
  • 中央に置いたロゴ

なお、ロゴや画像はまねせず、雰囲気だけを取り入れるという方針で進めてもらいました。

5. Claudeが作ったデザインの内容

Claude が作った CSS の主な内容です。

  • サイト名：中央に配置し、上品なセリフ体で字間を広げる
  • フォント：本文は細めのゴシック体（Noto Sans JP）、記事のタイトルや見出しは明朝体（Noto Serif JP）
  • 見出し：h2 は下線だけのシンプルな形、h3 は左にくすみローズの細い線（差し色はこの1色だけ）
  • カテゴリのラベルとボタン：黒地に白文字の四角い形。マウスを乗せると白黒が反転する
  • フッター：黒の背景
  • スマホ表示：余白と文字の大きさを調整

色は、最初に CSS の「変数」としてまとめて定義されています。あとから色を変えたくなっても、ここを書き換えるだけで済みます。

:root {
  --pg-bg: #f8f8f8;      /* 背景（オフホワイト） */
  --pg-surface: #ffffff; /* 記事エリア */
  --pg-text: #33383c;    /* 文字（チャコールグレー） */
  --pg-black: #111111;   /* 見出し・ボタン */
  --pg-accent: #b8868b;  /* 差し色（くすみローズ） */
}

6. プレビューで確認してから公開

Claude は、作った CSS を「外観」→「カスタマイズ」→「追加CSS」に入れて、公開する前のプレビュー画面を見せてくれました。この時点では、実際のサイトはまだ変わっていません。

あわせて、「差し色をゴールドやボルドーに変える」「黒い帯のお知らせバーを付ける」といった調整の案も出してくれました。

今回はそのままで気に入ったので「公開して」と伝えると、Claude が「公開」ボタンを押してくれました。そのうえで、実際のサイトに新しいデザインが反映されているかも確認してくれました。

7. デザイン変更後のイメージ

記事ページ（パソコン表示）

記事のタイトルと見出しが明朝体になり、h2 は黒い下線だけのシンプルな形になりました。

デザイン変更後の記事ページ（パソコン表示）。明朝体のタイトルと、下線だけのシンプルな見出し
デザイン変更後の記事ページ（パソコン表示）

トップページ（スマホ表示）

スマホでも、中央のサイト名と、黒のフッターで引き締まった印象になりました。

デザイン変更後のトップページ（スマホ表示）
デザイン変更後のトップページ（スマホ表示）

やってみた感想

  • 「こんなイメージ」と URL を伝えるだけで、デザインの特徴を言葉にして CSS まで作ってくれるのが便利でした
  • 公開する前にプレビューを見せて確認を取ってくれるので、勝手にサイトが変わってしまう心配がない
  • ログインなどの安全に関わる部分は、きちんと人に任せる線引きがされている
  • 元の CSS はファイルとして保存されているので、気に入らなければすぐに元に戻せる

CSS が書けなくても、AI に手伝ってもらえば、イメージに近いデザインに変えられます。ブログのデザインに悩んでいる方は、ぜひ試してみてください。

コメント

タイトルとURLをコピーしました