はじめに
生成AIというと「コードを書かせる」使い方が主流だと思いますが、今回は逆に コードは別のAIツール/エディタ支援に任せて、Claudeには「デザイン担当」として入ってもらう という役割分担で、Chrome拡張機能「QiitaSkin」を作ってみました。
QiitaSkinは、閲覧中のどんなWebサイトでも配色・フォント・カードデザインをQiita風に着せ替えてくれる拡張機能です。この記事では、実装そのものではなく、Claudeにどこまで「見た目」を任せられるかという観点でまとめます。
役割分担
| 担当 | 誰が(何が) |
|---|---|
| 実装コード(manifest.json / content.js / popup.js) | 他のAIツール・エディタ支援 |
| 配色・CSS設計 | Claude |
| UI/レイアウトの構成案 | Claude |
| ロゴ・アイコン・バナー画像 | Claude |
| ワイヤーフレーム/モックアップ | Claude |
「動かす部分」と「見た目を決める部分」を分けたことで、それぞれのツールが得意な仕事に集中できた感覚があります。
1. 配色・スタイル(CSS)をClaudeに設計してもらう
QiitaSkinの核となるのは qiita-style.css です。ここで使う色のトーン(Qiitaらしい緑、カードの余白、影の付け方など)をClaudeに相談しながら決めていきました。
:root {
--qiita-green: #67cb1b;
--qiita-green-dark: #509e15;
--qiita-text: #7a7d7d;
--qiita-card-bg: #ffffff;
--qiita-border: #e3e6e8;
--qiita-code-bg: #2b2b2b;
}
html.qiita-style-injected article,
html.qiita-style-injected main,
html.qiita-style-injected .card,
html.qiita-style-injected [class*="card"] {
background-color: var(--qiita-card-bg) !important;
border: 1px solid var(--qiita-border) !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
padding: 1.2em !important;
}
「Qiitaらしさ」を言語化するのは意外と難しく、
- カード型UIの角丸の半径
- ボタンのホバー時の色の落とし方
- コードブロックの背景色とテキストの明度差
といった細かいトーン&マナーを、CSS変数として言語化してもらいながら固めていきました。実装(どのセレクタに当てるか)は別ツールに任せ、「値そのものの妥当性」をClaudeにレビューしてもらうという使い方が特に効きました。
2. UI/レイアウトの構成案(ポップアップ画面)
拡張機能のON/OFFを切り替えるポップアップ画面も、まず構成をClaudeと相談しました。
- タイトル + トグルスイッチという最小構成にする
- 状態(ON/OFF)をラベルで明示する
- 補足説明は1行の注釈にとどめる
という方針が固まり、それをもとに実装したのが以下のポップアップです。
<div class="row">
<span id="status-label">読み込み中...</span>
<label class="switch">
<input type="checkbox" id="toggle" />
<span class="slider"></span>
</label>
</div>
<p class="note">オンにすると、全てのサイトの配色・フォント・カードデザインをQiita風に書き換えます。</p>
トグルスイッチの見た目(色・サイズ・アニメーション速度)もCSSの数値レベルまで一緒に詰めています。
3. ロゴ・アイコン・バナー素材
アイコンとストア掲載用バナーは、PythonのPillowで描画するスクリプト(make_icon.py / make_banner.py)を用意し、そこに渡すデザイン仕様をClaudeと決めました。
- アイコンのモチーフ:「ブラウザウィンドウ」+「蝶ネクタイ(着せ替えのメタファー)」
- Before/Afterが一目でわかるバナー構成(左に地味なサイト、右にQiita風サイト、中央に矢印)
- 色は本体CSSと同じQiitaグリーンで統一
QIITA_GREEN = (103, 203, 27, 255)
QIITA_GREEN_DARK = (80, 158, 21, 255)
のように、CSSで使った配色をアイコン・バナーにもそのまま流用することで、拡張機能全体の世界観に一貫性を持たせています。ここでもコードそのもの(座標計算や描画処理)は別ツール任せで、Claudeには「何を・どう見せるか」というデザイン仕様の壁打ち相手になってもらいました。
やってみて感じたこと
- 言葉にしにくい「トーン」を言語化する相棒として優秀。「Qiitaっぽい」「ちょっと硬い」といった曖昧な感覚を、具体的な色コードや余白の数値に翻訳してくれる
- 実装とデザインを分業すると、後から見返しやすい。CSS変数やデザイン仕様として一箇所にまとまるので、後で色を変えたくなったときの影響範囲が把握しやすい
- 一方で、実際の見た目はブラウザで確認しながら微調整が必須。Claude側の提案だけで完結せず、都度スクリーンショットを見ながら往復するのがコツ
まとめ
「AIにコードを書かせる」だけでなく、「AIにデザインの言語化・仕様化を手伝ってもらう」という使い方も選択肢としてアリだと感じました。特に配色やトーン&マナーのような、感覚的だけど後から見返すと理由を説明しづらい部分を、Claudeとの対話を通じて仕様として残せたのは大きな収穫でした。