苔庭アルシェのデザインを全面改修しました
苔庭アルシェのデザインを全面的に作り直しました。作業したのは2026年11月9日で、公開は10日です。この記事ではどんな順番で進めたのか、途中で何を選んだのかを記録しておきます。
きっかけ
前のデザインは7月に WordPress から移したときの Astro Modular のテーマに、自分の配色を当てたものでした。17種類のテーマから見た目を選べる切り替えも付いていました。
きっかけは友人にデザイン用のスキル「impeccable」を勧められたことです。別の友人のサイトでも impeccable を使って改修したと聞いて、自分もやりたくなりました。impeccable は、AI が作りがちな「よくある見た目」を避けるための、AIコーディングツールで使えるスキルです。
まず稼働状況のページで試す
いきなりサイト全体を変えるのではなく、先に稼働状況のページ（server.tsumuntema.com）で小さく試してから、メインのサイトにも impeccable を使う段取りにしました。
impeccable に方向性の候補を出してもらうと、おすすめ順に5つ並びました。1位は「苔庭線の運行情報」、2位は「苔庭の天気予報」、3位が「苔庭の名札」です。名札は植物園や爬虫類館の解説板のように、名前を大きく、属性を小さな行で並べる様式です。
私は3位の名札を選びました。この名札形式の見た目を気に入ったからです。色と書体は苔庭アルシェのものを引き継ぐことにしました。11月9日の0時ごろ、名札の見た目にした稼働状況のページを本番に出しています。
第1幕：園内案内と名札
続いて、メインのサイトも同じ名札形式で改修しようと試しました。選んだのは、名札の様式をサイト全体に広げる「園内案内と名札」という案です。
一番に考える相手は「音源を探して取りに来る人」にしました。UTAU と MYCOEIROINK の音源を、名札の一覧から迷わず選べるようにする狙いです。あわせて、17種類のテーマの切り替えをやめ、ライトとダークは端末の設定に合わせる形にしました。試聴の埋め込みは押したときに読み込むようにしています。
その日の朝10時ごろまでに、音源・キャラクター・作品・トップを名札にして、仕上げの検査で「出してよい」という判定まで進みました。
「出してよい」から全部やり直す
それでも、私はここで公開を止めました。
園内案内と名札はあくまで Astro Modular のデザインのベースを大きく変えない内容でした。もしベースを大きく変えることができるなら、もっと派手で、私の伝えたいことが伝わるデザインに丸ごと変えたいと思いました。
そこで、見た目を全面的に選び直すことにしました。音源の配布所ではなく、創作全体のポートフォリオを主役にする方針です。
第2幕：回紋と組紐の衣装布
新しい世界を選ぶ前に、「最初の画面で、まず目に入ってほしいもの」を聞かれ、「苔色かげと枯色ヤモ」と答えました。「これは違う」と感じそうなものには、子どもっぽい見た目と、古いリンク集のような見た目を挙げました。
impeccable の抽選で割り当てられたのは「夜の温室の回廊」でしたが、私は「回紋と組紐の衣装布」を選びました。苔色かげと枯色ヤモの衣装の布・金の回紋の縁・黒い帯・赤い結び目を、サイト全体の素材にする案です。
かげとヤモの立ち絵は ChatGPT でブラッシュアップしています。そのときのメインの変更が「服を考えて着せること」だったので、衣装に関することが含まれるデザインにしたかったのです。
色と書体は3組の見本から選びました。書体は見出しのフォントのデザイン性が高くて気に入った組にしました。色はライトとダークでかげとヤモの色が切り替わる感じにしたくて、別の組から選びました。布の色は2人の衣装の絵から測った値です。ライトでは枯色ヤモの砂色の衣、ダークでは苔色かげの深い苔の衣が、読み物の地になります。
仕上げの検査のあと、前のテーマの名残（白い表、角の丸み、使われていない色の設定など）が4種類見つかり、公開の前に4つ全部を片付けることにしました。その日の22時半ごろ、新しいデザインを公開用のブランチに合流しました。
公開とその後
11月10日に公開し、本番でトップと記事を開いて確かめました。概ね問題ありませんでした。
リンクバナー6枚と、SNS で共有されたときに出る画像（OGP）も、新しいデザインで作り直しました。立ち絵の輪郭に白いギザギザが残っていたので、それも10日に直しました。同じ日に、サイトの CSS で使っている Tailwind CSS を、見た目を変えずにバージョン3から4へ上げています。
稼働状況のページもメインのサイトで行った改修の雰囲気を残しつつ、サブドメインで機能が違うことが分かりやすいデザインを改めて考えて、やり直しました。11日にラズパイから Cloudflare Workers の配信に移り、見た目は「苔庭の機械銘板」になっています。
AIとの分担
作業の大部分は Claude Code に頼みました。Claude Code の5時間の利用制限にかかっているあいだは、代わりに ChatGPT の Codex を使いました。第1幕の後半は Codex での作業です。
トップとキャラクターのページの立ち絵は、私が手描きした原案を ChatGPT で清書し、回紋などを私が手直ししたものです。
どの案にするか、どこで止めるか、公開してよいかは、自分で決めました。
改修を終えて
私の創作のなかで一番評価されているかげとヤモが、トップページの大きい場所に並んで、私の押し出したいモノが分かりやすくなりました。デザインもテーマのデフォルトから大きく変わって、私の色を出すことができています。それなのに、Astro Modular の強みである Obsidian での執筆は変わらず続けられます。
デザインの制作に、友達から勧められた AI のスキルを活用できて、とても嬉しい気持ちです。AI を活用するために、人間の知り合いからアイデアをもらえることは大事だと感じました。
構成案・事実確認、私の回答をもとにした執筆を Claude で行い、一部を自分で手直ししました。