KOTSULY（コツリー）という自己研鑽SNSを個人で作っています。勉強や作業をするときに、タイマーの後ろに「作業場所」の絵が出ます。純喫茶、和室、海の見える窓辺、キャンプのタープの下。いまは18か所あります。
この絵は、画像生成AIで作ったものではありません。Claude Code に、SVG（図形を文字で書いた画像）として描いてもらったものです。描いたのは、Claude Code のセッションを部署に見立てた「デザイン部」です（部署のしくみは「Claude Code に『部署』を作って、ひとりで個人開発を回している話」に書きました）。
わたしがやったのは、おもに、言葉で頼んで、できた絵を見て、直してほしいところを言うことです。この記事では、Claude Code で絵を作るやり方と、SVG で描くよさを紹介します。
Claude Code は、言葉で頼めば絵を描いてくれる
Claude Code はプログラムを書く道具ですが、SVG もただの文字なので、そのまま書けます。たとえば、こう頼みます。
400×500 の SVG で、窓のある机の絵を描いて。昼の空、カーテン、机の上にマグカップとノート。やわらかい色で。
すると、たとえばこんな文字が返ってきます（説明のために、ごく短くした例です）。
<svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="500" fill="#efe7dc"/> <!-- 壁 -->
<rect x="90" y="46" width="220" height="194" fill="#a9cdef"/> <!-- 窓の空 -->
<rect x="0" y="330" width="400" height="170" fill="#c49a6c"/> <!-- 机 -->
<rect x="270" y="360" width="44" height="50" rx="6" fill="#3b82f6"/> <!-- マグカップ -->
</svg>これをブラウザで開けば、もう絵になっています。あとは見ながら、言葉で直していきます。
- 「マグカップから湯気を出して」
- 「ノートを、奥ほど狭い台形にして、少しだけ回して」
- 「カーテンをもう少しやわらかい青に」
画像生成AIだと、「マグカップだけ少し右に」のような細かい直しがむずかしいことがあります。SVG なら、直したいところだけを、言葉どおりに直せます。わたしが KOTSULY の絵でしていたのも、ほとんどこのくり返しです。
絵を、動かすこともできる
SVG のいちばん楽しいところは、絵を動かせることです。作業中の画面では、雨が落ちる、炎がゆれる、湯気がのぼる、カーテンがそよぐ、といった動きを少しだけつけています。
（この記事の絵は止まった画像ですが、アプリの中では雨の線が落ち、窓の水滴がつたい落ちます）
やり方はシンプルで、動かしたい部分に名札をつけておき、そこに動きを当てるだけです。ブラウザなら、CSS のアニメーションがそのまま使えます。
<g class="kd-steam">
<path d="M290 350 q-6 -10 0 -20 q6 -10 0 -20" stroke="#fff" fill="none" opacity=".7"/>
</g>
<style>
.kd-steam { animation: steam 3s ease-in-out infinite; }
@keyframes steam {
from { transform: translateY(0); opacity: .7; }
to { transform: translateY(-8px); opacity: 0; }
}
</style>「湯気を、ゆっくり上にのぼって消えるように動かして」と頼めば、Claude Code がこういう形で書いてくれます。KOTSULY では、雨・水滴・炎・湯気・波・雲・星・電球・カーテン・ライトの光・ヤシの葉の動きを、13種類の「名札」で分けています。
アプリ（React Native）の中では CSS が効かないので、名札のついた部分だけを切り出して、アプリ用のアニメーションのしくみで同じ動きをさせています。ここは少し手がかかりましたが、絵のほうは、ブラウザで動かしていたときのものをそのまま使えています。
動きをつけるときに気をつけたのは、ほんの少しだけ動かすことです。作業のじゃまにならないように、目のはしで「雨が降っているな」と分かるくらいにしています。端末の「視差効果を減らす」の設定がオンの人や、アプリが裏にあるときは、動きを止めています。
SVG で描くよさ
18か所を描いてみて、SVG ならではのよさがたくさんありました。
1. 言葉で、ねらったところだけ直せる
さきほど書いたとおりです。直したいところを言えば、そこだけが変わります。ほかの部分が勝手に描き変わることはありません。
2. 部品を使い回せるので、タッチがそろう
窓・カーテン・本棚・マグカップ・ノート・ランプなどを、部品（関数）にしています。新しい場所を足すときも、部品を選んで並べるので、ほかの場所と同じタッチになります。画像生成AIで18枚を作ると、どうしても1枚ずつ雰囲気が変わってしまいますが、部品で描くとそろいます。
3. 組み合わせで、何通りも描ける
場所 × 時間帯（朝・昼・夕方・夜）× 音 × 取り組み × 絵の形（カード・縦長・横長）。1枚ずつ描くと何百枚にもなりますが、SVG はその場で組み立てるので、1つのコードで全部描けます。
4. 軽くて、大きくしてもきれい
SVG は図形の情報だけなので、画像ファイルよりずっと軽く、どんな画面の大きさでもぼやけません。スマホでもタブレットでも、くっきり出ます。
5. 変えたところが、あとから分かる
絵が文字なので、git で「どこを変えたか」がそのまま見えます。「ノートを台形にしたのはいつか」も、コミットを見れば分かります。気に入らなければ、前の絵にすぐ戻せます。
6. 必要なら、ふつうの画像にもできる
アプリの外で使うとき（ブログのサムネイルや、この記事の絵など）は、PNG や JPG に書き出しています。Mac なら、最初から入っている Swift と sips だけで書き出せます。
KOTSULY の公式サイトのブログのサムネイルも、作業場所と同じ部品で、横長に描いたものです。
7. お金がかからない
最初の設計書には、作業場所の背景は「外注か、AIで生成して手直し」と書いていました。Claude Code で描いたので、外注の費用はかかっていません。
18か所を描くために使った工夫
最後に、描いていく中で取り入れた工夫やアイディアを紹介します。
時間帯は、暗さを「重ねる」
あとから足した場所は、部屋の色を1つに決めて、時間帯に合わせて上から暗い色を重ねています。夕方は少し、夜はしっかり。そのうえで、ライトの当たるところだけ暗さを弱めて、あたたかい色をうっすらのせています。場所を足すたびに4つの時間帯の色を決めなくて済みます。
音を選ぶと、景色が変わる
作業中は、雨音や焚き火などの環境音を流せます。そのうちのいくつかは、景色も変えるようにしました。雨なら空が曇って窓に雨がつき、波なら窓の外に海が出て、焚き火なら窓の外の地面に火がともります。
決まりにしたのは、変化の元（雨・海・火など）を絵の中に見せることです。部屋全体をオレンジにして「焚き火っぽさ」を出す、ということはしません。
「毎回同じ」と「毎回少しちがう」
本棚の本の幅や色は、1冊ずつ決めると大変なので、ばらつきをつけて散らしています。ただし、開くたびに本棚が変わったら落ち着かないので、決まった数から決まった値が出る、毎回同じになる乱数を使っています。
いっぽう、記録のカードでは、記録ごとにマグカップの位置などを少しだけ変えています。同じ記録はいつ見ても同じ絵で、記録が変われば少しちがう絵になります。
動く部分は、重なりの順を守る
動かす部分を絵のいちばん上に重ねると、窓の奥にあるはずの雲が、窓枠の手前を流れてしまいます。そこで、絵を元の重なりの順のまま「奥の止まった部分 → 動く部分 → 手前の止まった部分」と層に分けて重ねました。動く部分は小さな絵にして一度だけ描き、位置や濃さだけを変えて動かすので、雨の日でも軽く動きます。
文字は、書体にたよらない
ブログのサムネイルのキッチンタイマーに出ている「25:00」は、書体ではなく、7本の棒（電卓の数字のような形）で描いています。書体にたよると、書き出す環境で見た目が変わってしまうからです。
実際、この記事の和室の絵を書き出したときも、掛け軸の文字が書き出しのしくみで左に寄ってしまい、位置を直しました。文字を入れるときは、書き出した絵を一度見て確かめるのがおすすめです。
全部を並べて見られる見本のページ
デザイン部は、全部の場所を、時間帯・音を切り替えながら並べて見られる見本のページを持っています。アプリと同じコードを読み込んでいるので、見本で直した絵がそのままアプリにも入ります。1か所を直したら、ほかの場所が崩れていないかを一度に見られるのが便利です。
決めたことは、コードのコメントに残す
コードの中には、「10月13日、オーナーの判断」のようなコメントがたくさん残っています。「焚き火の光も炎も、部屋の中には出さない」「カフェの音のときの湯気は、なくていい」。決めたことを書いておくと、別のセッションがあとから触っても、同じ判断が守られます。
おわりに
画像生成AIを使えば、1枚のきれいな絵はすぐに作れます。でも、アプリの中の絵は1枚では終わりません。時間帯、音、形、場所。組み合わせが増えるほど、絵を「部品と決まり」として持っておける SVG が強いと感じました。
そして SVG なら、言葉で直せて、動かすこともできる。ペンを持たなくても、「どこを、どうしたいか」を言えれば絵ができていきます。ちょっとした挿し絵やアイコンから、試してみてはいかがでしょうか。
KOTSULY はいまベータテストの準備中です。開発のようすは X（@kaede3eng） でときどき書いています。