KOMOREBI NO KO NO HEYA — A RECORD

こもれびの子の部屋
年表

別府市立図書館の開館記念モニュメント「こもれびの子」を紹介する特設ページが、 ClaudeとのチャットでのぶっつけHTML制作から始まり、 WordPressで完結する仕組みに育っていくまでの記録。

2026年6月17日 2026年8月29日 (74日間)

誕生ぶっつけ本番の一日

claude.aiでの通常チャット、1回のセッションでゼロから形になる

6月17日 起点

「きょうもこもれびパークの大規模工事します」

これが最初の一言だった。キャビンカンパニー制作のモニュメント「こもれびの子」を紹介するページを作りたいという相談から着手。写真8枚とインスタのキャプション文をもとに、その日のうちにカラー・フォント・レイアウトのデザインプランを決定。

カラー:オフホワイト/深緑/黄橙 タイポ:Shippori Mincho + Noto Sans JP

claude.ai チャット共有

6月17日

写真選定と「和菓子屋さんのHP」というコンセプト

送られてきた写真を1枚ずつ選別してギャラリーへ反映を繰り返した末、「銀座にできた和菓子屋さんのHPみたいな、写真は控えめ・全部アイボリー・すべてディゾルブ表示」という方向性で固まる。ページ名は「こもれびの子の部屋」に決定。

同日、9往復以上のやり取りで細部の改行・アニメーションのテンポまで詰めた

6月17日

付箋機能つきレビュー用HTMLを実装

滝上さんに見せてフィードバックをもらうため、ページ上に自由配置できる付箋(コメント)機能をその場で追加。「ここにこれ入れてほしい」がそのままファイルに残る仕組みに。

6月19日

付箋に書き込まれたフィードバックを反映

滝上さんからの付箋6件(設置場所案内、グッズページ構想、作品タイトル表示、フォント再検討、公式サイトへのリンク要否、式典写真の追加)を確認し、館内フロアマップ・作家紹介写真・「WHERE TO FIND」セクションを追加。ページ名は「こもれびの子の部屋」→「こもれびの部屋」→「こもれびの子」と2転3転。

claude.ai チャット共有

作り込みClaude Codeでの本格実装

約1ヶ月弱の空白期間を経て、7月中旬から作り込みが加速

7月14日 再始動

Claude Codeへ移行、コンセプト変更

事務局で決まった新コンセプト「図書館で本を読む・お茶をする・のんびりする風景の隣にこもれびの子がいる」を受けて、素材30枚から10枚を選定。ZINE風・ポエティックな新セクション「ALWAYS BESIDE YOU」を新設し、旧ギャラリーを置き換え。

7月15日

CHARACTER写真・サインアニメーション追加

タイトルフォントをYomogiに統一、その後タイトル表記を全ひらがな化するなど、世界観の細部を試行錯誤。

7月17日 大転換

「ギミック過多」の指摘を受け、大規模レイアウト刷新

お部屋セクションの試行錯誤の末に方針転換、ヒーローに思い出ログを導入。タイトルフォントは「エビハラのくせ字」に最終決定。同じ日、別チャットでは「こもれびの子」のシンボルマーク案(蝶の羽根×2の丸い顔、開いた本に太陽のモチーフ、クレヨン風タッチ)についても相談していた。

claude.ai チャット共有

7月18日 総仕上げ

1日で一気に完成度を引き上げた日

この日だけで十数件の改修が入っている。主なもの:

  • WHEREABOUTS(今いる場所)を7ピン座標→実写フロアマップ+曜日ローテーションへ全面差し替え
  • ZINE「ALWAYS BESIDE YOU」のキャプション8枚を全て完成
  • ヒーロー導入演出を全面刷新(タイトル先行描画→残り全部ディゾルブ)
  • 背景の光を蝶々シルエット化、木漏れ日ライトを蝶の動きに連動

公開世に出て、磨き込む

本番デプロイ後も、細部の手入れは止まらなかった

7月24日 本番公開

Cloudflare Pagesへ本番デプロイ

約1ヶ月の制作を経て、「こもれびの子の部屋」が初めて実際のURLで公開された。

7月27日〜28日

公開後の初調整

文言・体裁の微修正、開館記念式典の写真掲載、蝶アイコンの色統一。キャビンカンパニーへの確認事項をとりまとめ、依頼を開始。

8月8日

ARTISTセクションを拡充

制作経緯とラフ画をARTISTセクションに追加し、キャビンカンパニーの紹介に厚みを持たせた。

8月21日

スマホ表示バグの修正

なまえプレートとCREATION STORYが、スマホ幅で横にはみ出す不具合を修正。

持続誰でも引き継げる形へ

個人の環境に依存しない、運用しやすい仕組みへの移行

8月28日

WordPress組み込み版の調整、トップページに案内バナー

背景色調整とイントロアニメーションの不具合修正。トップページに「こもれびの子の部屋」への案内バナーを新設。

8月29日 完全移行

WordPress完全移行Cloudflareへの依存を解消

2027年3月での退職を見据え、個人のCloudflareアカウントに頼らず後任でも更新できるよう、ページの中身(HTML・CSS・JSと写真15枚のbase64データ、約5.26MB)をまるごとWordPressのテーマファイルへ直書き。パスワードゲートは維持したまま、持続可能な運用体制に移行した。

74日間
4つの転機
3回の名称変更

チャットの雑談から始まったページが、
ふたつきあまりをかけて、
こもれびの象徴を示す1ページになった。