SWELLの初期カスタマイズ手順｜色・メニュー・プロフィールをAIと整えた話

🤖 この記事はClaudeと一緒に書いています。体験はすべて本物です。文章の構成や言い回しの整え方をClaudeに手伝ってもらいながら、書いている本人(にっちょめ)の言葉でお届けしています。

この記事を読むとわかること

WordPressにSWELLを入れただけだと、まだサイトの土台ができていない状態です。色も決まっていないし、メニューもない。記事を書き始める前に、最低限の見た目を整える必要があります。

ただ、Claudeに手順を教えてもらいながら進めていけるので、ほとんど迷わず設定できました。「次は何をすればいい?」と聞けば優先順位を整理してくれるし、わからないことはその場で聞ける。一人で調べながら進めるより、ずっとスムーズでした。

1. SWELL導入後にまずやる4つのこと

この順番でやると、サイトの土台ができます。

これは、やるべき順番が大事だなと感じました。

色を決める前にメニューを作っても、後から色を変えると全体のバランスが崩れる。カテゴリーを作る前にメニューを設置しても、入れる項目がない。

Claudeがおしえてくれた順番通りに進めることで、やり直しが減ることに気づきました。

2. メインカラーを決める

サイトの第一印象を決めるのがメインカラーです。私は「コーラルオレンジ」を選びました。

なぜコーラルオレンジを選んだか

理由はシンプルで、Claudeのアイコンのオレンジに合わせたからです。

このブログのコンセプトは「Claudeと一緒に進める実録」。だったら、サイトの色もClaudeをイメージしたオレンジにしようと思いました。テーマカラーがブログのコンセプトと一致していると、サイト全体に統一感が出ます。

具体的なカラーコードはClaudeに相談しました。

このカラーコードをそのまま採用しました。自分でカラーピッカーをぐるぐるさせるより、一発で決まってよかったです。

SWELLでメインカラーを設定する手順

1. WordPress管理画面 →「外観」→「カスタマイズ」
2. 「サイト全体設定」→「基本カラー」を開く
3. 「メインカラー」をクリックしてカラーピッカーを開く
4. カラーコードを入力(コーラルオレンジは #E89B5C)
5. プレビューで確認 →「公開」をクリック

3. カテゴリーを作る

カテゴリーは、ブログのテーマを示す「目次」のようなものです。最初にしっかり設計しておくと、後から記事が増えても整理しやすくなります。

3本柱で考える

私は3つのカテゴリーで構成することにしました。

• ブログ運営:ブログの立ち上げや運営の話
• 仕事効率化:AIを使った仕事の効率化
• 暮らし:AIで生活をちょっとよくする話

この3本柱はClaudeに提案してもらいました。

提案された通りで、しっくりきたのでそのまま採用しました。自分でゼロから考えると「ガジェット」とか「レビュー」とか入れてしまいがちなんですが、このブログのテーマに絞って考えてもらえたのが良かったです。

カテゴリーを作成する手順

1. WordPress管理画面 →「投稿」→「カテゴリー」
2. 「名前」にカテゴリー名を入力(例:ブログ運営)
3. 「スラッグ」に英語の識別子を入力(例:blog)
4. 「新規カテゴリーを追加」をクリック
5. 同じ手順で他のカテゴリーも追加

📸 (スクショ:カテゴリー一覧画面・ブログ運営/仕事効率化/暮らしの3つが作成済みの状態 → Image 5)

4. ヘッダーメニューを作る

ヘッダーメニューは、サイトの上部に表示されるナビゲーションです。読者が「このブログには何があるか」を一目で分かる導線になります。

メニューの作成もAIに聞けば手順をおしえてくれます。

メニューの作成手順

1. WordPress管理画面 →「外観」→「メニュー」
2. 「新しいメニューを作成」をクリック
3. メニュー名を入力(例:ヘッダーメニュー)
4. 左側からカテゴリーを選んで「メニューに追加」
5. 「メニュー設定」で表示位置を「ヘッダー」に設定
6. 「メニューを保存」をクリック

この作成手順で、トップページ右側にカテゴリーが表示されます。

失敗談:Claudeにサイトを確認してもらったら誤字を指摘された話

メニューを作り終えた後、Claudeにサイトのリンクを投げて確認してもらいました。

URLを投げるだけで、サイトを見てメニューの誤字まで指摘してくれました。自分では全然気づいていなかったので、そこまでわかるのかと正直驚きました。

修正は2箇所必要でした。

• 「投稿」→「カテゴリー」でカテゴリー名を修正
• 「外観」→「メニュー」でナビゲーションラベルを修正

メニューのラベルだけ直してもカテゴリー名が残っていたり、その逆もあるので、両方確認するのが大事です。作ったらURLをClaudeに投げて確認してもらう、という流れは今後も使えそうだと感じました。

5. サイドバーを整理する

サイドバーには「誰が書いているか」を伝えるプロフィールを置こうと思います。

ただその前に、デフォルトで入っている不要なウィジェットを全部削除してからプロフィールを設置する、という順番で進めました。

不要なウィジェットを全部削除する

SWELLをインストールした直後のサイドバーには、デフォルトでこんなウィジェットが入っています。

記事数が少ない時期はほとんど機能しないものばかりです。

Claudeに「今必要?」と一つひとつ確認しながら削除を判断しました。「必要になったら後から追加できる」と言われたので、迷わず全部削除。シンプルにした方が読者の目線が記事に集中する、というのも理由の一つです。

削除手順は「外観」→「ウィジェット」を開いて、各ウィジェットの「削除」をクリックするだけ。

プロフィールウィジェットを設置する

全部削除したら、SWELLのプロフィールウィジェットを追加します。

私が入力した内容はこうです。

• プロフィール画像:Chatgptにつくってもらったアイコン
• 名前:にっちょめ
• 肩書き:ブロガー × AI初心者
• 自己紹介文:「はじめまして、にっちょめです。AI初心者ですが、Claudeと一緒にブログ・仕事・暮らしをちょっとよくしようと模索中。詰まりながらも、ゆるく続けています。ガジェットや暮らし改善のブログ『NEXT BLOG』も運営しています。」
• サイトURL:NEXT BLOGのURL(ボタンで表示されます)

サイドバーに無事表示されました。

自己紹介文にNEXT BLOGへの言及を入れたのは、2つのブログを運営していることが伝わると「ブログ初心者ではない」という信頼感につながるからです。

Claudeに相談して「さらっと触れる型」を勧めてもらいました。

AIと進めてみて気づいたこと

今回の作業を振り返ると、「AIに何を任せるか」がはっきりしてきた気がします。

順番・優先順位の整理、カラーコードやカテゴリーの提案、作ったものへのフィードバック。これだけでも、一人で進めるより格段にスムーズでした。

特に「作ったらURLを投げて確認してもらう」という流れは、誤字の発見につながったので今後も続けていこうと思います。

一方で、AIを使っていても詰まる場面はあります。

カテゴリー名の誤字は自分のミスですし、最終的に確認するのは自分です。

「AIに任せきり」ではなく、「AIと分担する」という感覚が、作業をうまく進めるコツなんだと思います。

色・カテゴリー・メニュー・プロフィールが揃って、ようやく「ちゃんとしたブログ」の雰囲気が出てきました。

次はメインビジュアルやヘッダーロゴなど、サイトの「顔」になる部分のカスタマイズに進みます。

(関連記事:SWELLのカスタマイズ応用編 ※後日公開)