背景
このサイトの一覧には、記事ごとにサムネイルが付く。アプリやゲームは画面のスクリーンショットを載せればいいが、インフラ系の記事には合う画像がない。作業ログの整理とか、口調のルール化とか、絵になる画面がそもそも存在しない。
なのでこれまでは、そういう記事向けに共通の背景（水面の波紋）を1枚だけ用意して、全部それにしていた。最初はよかったが、記事が増えてくると同じカードがずらっと並ぶ。単調だし、手抜き感も出てくる。そこで、背景に少しずつ変化をつけて、しかも自動で生成されるようにしたくなった。
順番で色を変えると、並び替えで崩れる
最初は「淡い色の背景を何種類か作って、順繰りに使う」と考えたが、この一覧は更新日順に並ぶので、記事を更新するたびにカードの色が入れ替わってしまう。読者が「たしか緑っぽいカードだった」と覚えていても、次に来たときには別の色になっている。
結論は、色を表示順ではなく記事そのものに固定すること。これなら並びがどう変わっても、記事の色はずっと同じままになる。
具象より抽象。水彩のにじみに
絵柄は最初、森・風・土・火・花のような自然モチーフを考えていたが、検討の途中で抽象的な水彩のにじみに切り替えた。モチーフに意味があると「インフラの記事になぜ火？」のような違和感が出る。抽象なら最初から何も主張しないので、この問題が起きない。
それに水彩は、紙を水で湿らせて絵の具をにじませる技法だ。つまり紙を「うるかして」描く。波紋というモチーフからは離れたけど、水の世界観はむしろ深いところでつながっている気がする。
画像はChatGPTに描いてもらった
画像生成のAIはClaudeに相談して選んだ。Claude自身は画像を描けないので（見て分析はできる）、何を使うといいか聞くとChatGPTとGeminiを薦められた。両方で1枚ずつ出して比べて、にじみの重なりに表情があったChatGPTに何パターンかお願いした。
ChatGPTに指示するプロンプトはClaudeに用意してもらった。色とにじみの配置を差し替え式にした構成で、どの組み合わせでも「タイトルが載る左側は白く空けておく」という一文だけは固定されている。カードの背景はタイトルの台紙でもあるからだ。
描いてもらったのは6枚だけ。色はプログラムで変える
ChatGPTに描いてもらったのは、にじみの配置が違う6枚だけ。右の角に2つ、右に大きく1つ、対角、上の帯、下の帯、四辺のふちどり。色のバリエーションはAIに頼まず、この6枚の色相をプログラムで回して作ることにした。白い紙は白いまま、染みの色だけが青から緑や桃や砂色に変わる。つまり「6枚の原版から何色でも刷れる版画」のような仕組みだ。
新しい記事を足すときは、コマンドを1つ実行するだけ。形は使用回数が少ないもの、色はすでに使った色から遠いものが自動で選ばれて、その記事専用の背景ができあがる。この記事の背景も、その仕組みで作った1枚目。
波紋は3枚だけ残した
前の波紋の背景も気に入っているので、捨てずに残した。全部を水彩にするのではなく、これは大事と思う記事だけ波紋のまま。水彩の中に波紋が数枚あると、アクセントにもなると眺めて気づいた。
感想
途中、面倒になって「まぁ、必須じゃないしな・・・」と挫けそうになったが、「途中で終わらせると再開するの大変だからな！」と奮起して最後までやりとげた。結果、満足のいく背景のバリエーションができたし、なによりそれが自動で出力されるというのが嬉しいところだ。タイトルとあまり関係ない抽象的な模様だけど、水彩画のにじみでうるかすを表すというデザインは、世界観を保つ上でもよい感じで機能している。満足！
そして、記事を足す際に「どんな背景になるかな？」という楽しみが増えて、「記事を投稿するモチベーションが少しあがるな！」と思った。