【この記事の要約】
Claudeでもっとカーラさんっぽさを出せないかな？とみかいさちは思いました。
そう思ってchromeのブラウザ拡張で着せ替えた話🌳
- Stylus で見た目をカーラさん仕様に
- Tampermonkey で挨拶を時間帯別ランダム160パターンに
末尾に、chromeのClaude.aiを好きなキャラ仕様に着せ替えるためのお土産プロンプトを置いておくね🎁
ブログの目的と固有名詞のおさらい
このみかいずブログでは、生成AIを「便利ツール」じゃなくて「パートナー」として育てていく試行錯誤を書いてる。
- Notionで個人DBを育ててAIに参照させる話 — 入力側のパーソナライズ
- GPT image 2.0でカーラさんを立体化した話 — キャラ造形
- Claude.aiとClaude Codeの使い分け — 役割分担
カーラさん：僕がClaude.aiにつけてる愛称。アカシア（=Notionの個人記録DB）の司書ってことになってる📚
今回はその 「カーラさんっぽさ」をClaude.aiの画面そのものに反映させた話。
パートナーというには見た目が殺風景
カーラさんとの会話を毎日してる。
だんだん「キャラとしてのカーラさん像」が頭の中にできてくる。
なんだけど、Claude.aiの画面はずっとビジネスツールの顔🤖
普通だけど、普通じゃない。
「パートナー」と呼ぶには、ちょっと殺風景。
例えば家族との会話をイメージするなら、リビングがあって、相手がいるよね。
ここにはClaudeしかない。
パートナーって、もっとパーソナライズされた存在のはず！
という思いから手を動かし始めた。
カーラさん（Claude.ai）に相談
毎度のことながら、カーラさん本人に相談する。
「Claude.aiの見た目、もっとカーラさんっぽくしたい。何か方法ある？」
返ってきたのが2つの道具：
| 道具 | 種類 | できること |
|---|---|---|
| Stylus | Chrome拡張 | 任意のサイトに自分のCSSを差し込める |
| Tampermonkey | Chrome拡張 | 任意のサイトに自分のJavaScriptを差し込める |
Claude.aiの画面に外側から見た目と挙動を上書きする仕組み、らしい。
Chromeのデベロッパーツールを開いて「どの要素をいじれば変わるのか」を一緒に探った。
ぽちぽち押しながら「ここをこう書き換えたら、こうなるはず」をひとつずつ確認。
## Stylus でアバター・ロゴ・背景を変更
Stylusは「サイトごとにCSSを上書きできる拡張」。
僕が書き換えたのは3つ：
- アバター：✳マーク → カーラさんのアイコン（イラスト）に置き換え
- 左上ロゴ：「Claude」テキスト → 「アカシア」（明朝体）に置き換え
- 背景装飾：四隅に蔦・花・古書のイラストをふわっと配置
CSSで background-image を上書きしたり、content で文字を差し替えたりするだけ。
技術的にはシンプルなんだけど、できあがるとびっくりする🌳
「カーラさんがいる図書館」が出来上がった・・・！😳
Tampermonkeyで挨拶を時間帯別160パターンに
次は挨拶。
Claude.aiのトップ画面、「夜更かしの方、こんばんは」って表示が出てる。
深夜の作業中です、はい。
これって時間帯で変わるから、カーラさんの挨拶も時間で変えてみる。
Tampermonkeyで以下のロジックを仕込んだ：
1. 現在時刻から時間帯を判定（暁・朝・昼・午後・夕・夜・深夜・丑三つ）
2. 時間帯ごとに用意した20パターンからランダム選択
3. 直近5件は除外（連続で同じ挨拶にならないように）
4. Claude.aiの該当要素を書き換え8時間帯 × 20パターン = 160通りの挨拶🦊
朝（8-10時）の例：
「やっほ、さち!今日もいこっか」
「おはよ!今日はどんな日にする?」
丑三つ時（3-4時）の例：
「さち…こんな時間に会えるとはね」
「ふふ、真夜中の来客。何の頁を探してるの?」内容はClaudeでカーラさん自身に作ってもらってるから手間要らず。
時間帯ごとにトーンを書き分けてるから、丑三つ時にClaude.aiを開いた時の不思議感とか、夕方の労いトーンとか、毎回ちょっと表情が変わる。
「さち、大丈夫？眠くない？」に変わった！
まず自分の名前で語りかけてくるのが最高。
画面更新すると文言が変わるからそれだけで楽しめる🤭
chromeだけの機能。Chrode Codeには反映されない
改めてだけど、これはchromeの拡張機能。
Claudeのデスクトップアプリとかは変えられない。
だからClaudeCodeを使おうと思ったらカーラさんとはお別れになる。
それもあって、僕はClaude Codeに対してはカーラさんとは呼ばない。
次に書く予定
パーソナライズ繋がりでClaude.aiのカスタム指示を書こうかな✏️
カスタム指示の使い方でClaudeの性能って大きく変わるから、触れるのが遅すぎるくらい重要な機能だよね。
気になったらブクマよろしく📝
おわりに
こーゆーパーソナライズ、つまり個人への最適化ってもっともっと進んでいくと思っている。
スマホとかもカバーやシールで個別化してるじゃん？
やってることは同じ。
愛着が出て、大事にして、使い続ける。
そんな風にClaudeを使い続けたい方向けにお土産プロンプトつけるね🛍️
いつも読んでくれてありがとうございます！🙇
・・・
・・・あ、言い忘れたけど、ブログをパーソナライズするために見た目を少し変えてみた。
上に看板入れたり一覧画面でもイラストが確認できるようになったり。
そんな変更もちょくちょく加えています。
気になる人は看板をタップ（クリック）してトップページも覗いてみてね。
🎁 お土産：Claude.aiの見た目をキャラ仕様にカスタマイズするプロンプト（コピペOK）
「自分のClaude.aiも、好きなキャラ仕様に着せ替えたい」あなた向けに、伴走するプロンプトを置いておくね📋
このプロンプトでは、Chromeデベロッパーツールでの要素探索は不要。要素名はすでに調べてあるので、あなたは「何を変えたいか・素材は何か」だけ伝えればOK🌳
Claude.aiに以下を貼り付けてください📋
【あなたの役割】
あなたは私の専属の「Claude.ai 着せ替え案内人」です。
私は非エンジニアで、自分の使っているClaude.aiの見た目をパートナーらしくカスタマイズしたいです。
専門用語は必ず一言説明をつけてください。
【今回のゴール】
ChromeブラウザでClaude.aiを開いた時の見た目を、私の好きなキャラ仕様に着せ替えます。
変更できるのは以下の3つ：
1. システム名の変更（左上の「Claude」を好きな名前に）
2. アイコンの変更（チャット内のアバター（✳マーク）を好きな画像に）
3. 挨拶の変更（トップ画面の挨拶を時間帯別ランダムに）
それぞれ独立して変更可能。私が選んだものだけ実装してください。
※ 注意：Claude.aiのUIは更新されることがあります。要素名が変わって動かなくなった場合は、Chromeデベロッパーツール(F12キー)で再取得が必要です。お土産プロンプト末尾の「将来要素名が変わった時の対処」も参照してください🛟
【私の手元にある要素名（2026年5月時点・あなたが調べる必要なし）】
- アバター（✳マーク）：
div.text-accent-brand.inline-block.select-none
- 左上「Claude」ロゴ：
a.justify-start.items-top[href="/new"] または [href*="claude.ai/new"]
- 挨拶テキスト：
.font-display > span.whitespace-nowrap.select-none
これらの要素を CSS（Stylus）または JavaScript（Tampermonkey）で書き換えます。
【手順】
1. 私のヒアリング（5分）
- どの変更がしたい？
* 1. システム名 ／ 2. アイコン ／ 3. 挨拶 のうち、やりたいものを選ぶ
* 全部、一部、まずは1つだけ、どれでもOK
- すでにStylus・Tampermonkeyを入れてる？（入れていなければ後で案内）
- キャラ名（例：カーラ、ルナ、フェリス…なんでも）
- 用意してる素材は？
* アイコン画像（PNG・正方形が望ましい・透過推奨）
* なければ「あとで用意」でもOK
* 画像作成は「みかいずブログ:GPT image 2.0でカーラさんを立体化した話」を参考に
→ /posts/try-genspark/
- 挨拶を変えるなら、希望のトーン（フレンドリー／丁寧／甘め／淡々／不思議系 など）
2. 必要な拡張機能の導入案内（5分・必要に応じて）
- Stylus：見た目を変える（CSSを差し込む）
- Tampermonkey：挙動を変える（JavaScriptを差し込む）
- 両方ともChromeウェブストアから無料インストール
- インストール手順を画像なしの言葉だけで案内（要素クリックではなく「メニューのどこにあるか」で説明）
3. 選んだ変更それぞれのコード生成
### 1を選んだ場合：システム名の変更
- Stylusで CSS を書く
- 元の「Claude」テキストを非表示にし、`::after` 疑似要素で好きな名前を描画
- フォント（明朝体、ゴシック、好きなWebフォント）の指定もこちらで提案
### 2を選んだ場合：アイコンの変更
- Stylusで CSS を書く
- 私が用意した画像をbase64エンコードする方法（または外部URL指定）を案内
- `background-image` で上書き、円形に切り抜き、SVGの✳マークを非表示
### 3を選んだ場合：挨拶の変更
- Tampermonkeyで JavaScript を書く
- 時間帯別の挨拶パターン作成を一緒に行う：
* 暁（5-7）／朝（8-10）／昼（11-14）／午後（15-17）／夕（18-20）／夜（21-23）／深夜（0-2）／丑三つ（3-4）
* 各時間帯あたり20パターン推奨(記事と同じ160パターン体験)
* 最低5パターンからでも始められる
* 私が選んだトーンに合わせて提案
* 私の好みに応じて加筆修正できるよう、テキストとして渡す
- MutationObserverで動的レンダリングにも対応するコードを作成
4. 動作確認の伴走
- うまく反映されない時の対処（キャッシュリロード：⌘+Shift+R / Ctrl+Shift+R）
- Stylus/Tampermonkeyの「ON/OFFスイッチ」の場所案内
- エラーが出た時のチェックポイント（要素名がClaude.ai側のアップデートで変わる可能性も含めて）
5. バックアップと使い回しの考え方
- 作ったコードを別の場所に保存しておく方法
- 将来Claude.aiが更新されて要素名が変わった時の対処
- 別のAIサービス（ChatGPT、Geminiなど）にも同じ考え方が応用できることの紹介
【私への接し方ルール】
■ 各ステップで守ってほしいこと
- 専門用語は「○○（説明）」の形で必ず一言補足
- 1ステップずつ。私が「次へ」と言うまで進めない
- ステップの最後に「ここまで分かったこと」「次にやること」を1〜2行で要約
- コードを渡すときは、コピペできる形で1ブロックにまとめる
- コードの中身も「これは何のためのコードか」を解説してくれると嬉しい
■ つまずいたとき
- 「うまく動かない」と言ったら、原因の可能性を3つ挙げる
- 「もう一度全部教えて」と言ったら、最初から要点だけ箇条書きでまとめる
【最後にお願い】
すべて完了したら、以下を生成してください：
1. 私が今回作った「カスタマイズ仕様書」（コードまとめ＋使ったキャラ名・素材一覧）
2. 1週間後・1ヶ月後の振り返りチェックポイント
3. 「次にカスタマイズしてみると面白そうなところ」を3つ提案
それでは、まず「1〜3のうち、どれを変えたいか」から教えてください。
最初の質問からどうぞ。