2026.5_sirome.net

Wixをやめて、Claude Codeで sirome.net をフルリニューアルした話

あけたらしろめです。ポートフォリオサイト「sirome.net」を完全リニューアルしました。

Wixを卒業して、Claude Code × GitHub × Vercel で再構築。しかも今回の目玉は、Notionとの連携です。仕事ログを書いて「公開」を押すだけで、そのままサイトに反映される環境ができました！やったー🎉

なぜ作り直したか

昨年末、論文執筆作業でNotionが大活躍！さっそく作品アーカイブを構築しました。

これまではWixサイト上にお仕事の記録を投稿していましたが、Wixの管理画面でアーカイブ記事を編集するのがとにかくストレスでした。

さらに普段のお仕事のメモもNotionを活用しはじめ、Notion上に作品データベースが出来上がりました。

ｼﾞｬｰﾝ

「これ、そのままウェブサイトにできたらいいのに…！」

できます。

Notionはとても便利なので当然のように記事をWebサイトとして公開する機能がついています。

便利ですね。

でも、見た目がいじれない。

デザインテンプレートが限られているので、見た目は殆ど変えられません（2025年時点）。

だったら、自分で作るしかない。

そこで助っ人として登場したのが、Claude Code でした。

Claude Codeはこんなやつ

Claude Codeやばすぎ

今回、はじめて Claude Code にさわりました。

以前、ChatGPTでメロbotを作ったときは、

コードをコピペして、エラーを確認して、また貼り直して……

という作業が地味に大変でした。

Claude Codeは、ターミナルから直接、ファイルに保存されたコードを書き直してくれます。

とか適当にコメントすると、よしなにコードを書き換えて、そのまま実装して見せてくれるのが「まじやべ〜」でした。

ふわっ

GitHubへの push も、 Vercel へのデプロイも、Claude Codeに「ここ直して」って言って1分くらい待てば勝手にサイトに反映されるんですよ。

わかってほしい。

やばすぎる

巷でも言われてる通り、無駄に働かせすぎると「トークン上限」がかかって、半日とか１日使えなくなる（しろめはClaude Proプラン）のはけっこうだるかったけど、でもすごい仕事ができる後輩が入社してきたな〜って印象。

NotionをCMSにできちゃった

新sirome.net の一番の核は、Notionとの完全連携です（！）。

要するにサイトの管理画面に記事書きに行かなくていい。

毎日 Notion にログを書く。

↓

ステータスを「公開」に変える。

↓

サイトに自動反映される。

しかも公開後も、Notionで記事を編集すればサイト側も自動更新される。

やばない？

共感してほしい

まじで

もちろん記事画面もサイトデザインに合わせて作っています。

にゅっとのびる　

かわいい

技術的には、Notion API → Next.js → Vercelという構成で、ステータスフィールドの変更をトリガーに静的再生成（ISR）を走らせるようにしているらしいです。

まじでよくわからんけど。

チャームポイント

Worksページ

Worksページの Featured スライド表示やサムネイル仕様は、

実装しながら仕様を決めていきました。

こういうの

「こう見えたら気持ちいい」をその場で試しながら作れるのは、

Claude Code使って一番よかった部分です。

自分がデザイナーとして、もしエンジニアさんと一緒に作るとしても、

と思って途中で諦めた仕様もたくさんあったと思います。

いろんな意味でね…革命的なツールです。

メロbot

ヘッダーの電光掲示板から、メロが1文字ずつ喋るメロbot。

これは、以前ChatGPTで作っていたプログラムを一部流用しています。

眠っていたメロbotをsirome.netに召喚できたのは嬉しかったな。

また、2019年ごろにつくねじろう氏とHor.氏と密かに作っていた

ドット絵のシロとメロの世界も爆誕しています。

うれしい、ありがとう。

ドット絵はつくねじろう氏制作 えへへ かわいい

今後は、ゲーム的な要素も試しながら少しずつ増やしていく予定です。

Notion連携の関係でロード時間が長くかかることがあるので、