2026.5_sirome.net
Claude Codeでフルスクラッチした sirome.net をNotionに連携しました
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使って一番よかった部分です。
自分がデザイナーとして、もしエンジニアさんと一緒に作るとしても、
表示されないブロック：heading_4
と思って途中で諦めた仕様もたくさんあったと思います。
いろんな意味でね…革命的なツールです。
メロbot
ヘッダーの電光掲示板から、メロが1文字ずつ喋るメロbot。
これは、以前ChatGPTで作っていたプログラムを一部流用しています。
眠っていたメロbotをsirome.netに召喚できたのは嬉しかったな。
また、2019年ごろにつくねじろう氏とHor.氏と密かに作っていた
ドット絵のシロとメロの世界も爆誕しています。
うれしい、ありがとう。
ドット絵はつくねじろう氏制作 えへへ かわいい
今後は、ゲーム的な要素も試しながら少しずつ増やしていく予定です。
Notion連携の関係でロード時間が長くかかることがあるので、
ヒマつぶしにどうぞ。
1秒ごとに回転するfavicon
faviconとはパソコンのブラウザタブに表示されるちっちゃいアイコンのことです。
gifアニメは登録できなかったので、10枚のpng画像を1秒おきに表示しています。
かわいい
スマホではメニューボタンとして置いています。
タップすると振り返ります。
かわいい
トータル２週間で制作しました。
まずはWixから卒業できてよかった。高いしね。
夜中や早朝のちょっとした時間でちみちみ作って気づいたら公開していました。
AI…懐疑的な気持ちもまだまだあるけど、完全に世界変わっとるなと体感しました。
イラストAI生成は法整備の問題とかでまだあんまり使いたくないですが、
デザインやものづくりでAIとうまく付き合って面白いものを作れたらと思っています。
お仕事のご相談もぜひお気軽にどうぞ。
それから今後はちゃんとお仕事のクレジットやアーカイブ記事に力をいれて、
ひとつひとつ大切に公開していけたらなと思います。
sirome.netに公開中の記事も、随時遡って更新していきます。
どれも思いをこめて制作したお仕事ばかり。
みなさまのお陰でこれまでたくさん絵を描かせて頂き、
こういう形で生存できていることがありがたいです。
まだ発展途中ではありますが、
今後ともシロとメロとあけたらしろめを応援よろしくお願いします！
サイトみてね、リプやDMで感想もお待ちしてます✨
使用技術メモ
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
この記事もNotionで書きました。