あけたらしろめです。ポートフォリオサイト「sirome.net」をフルリニューアルしました！
かわいいサイトできた〜みんな褒めて〜🎈
Wixを卒業して、Claude Code で作って GitHub と Vercel で公開。しかも今回の目玉は、Notionとの連携です。
Notionで仕事ログを書いて「公開」を押すだけで、Notionのページがそのままサイトに反映される環境ができました！やったー🎉
ﾜｰｲ
なぜ作り直したか
昨年末、論文執筆作業でNotionが大活躍！Notion便利だなと思って作品アーカイブをつくり始めました。
これまではWixサイト上にお仕事の記録を投稿していましたが、WixのCMS（管理画面）で記事を編集するのが苦手でした。
さらに普段のお仕事のメモもNotionを活用し、気づいたらNotion上に作品データベースが出来上がりました。
ｼﾞｬｰﾝ🎉
「これ、そのままウェブサイトにできたらいいのに…！」
できます。
Notionはとても便利なので当然のように記事をWebサイトとして公開する機能がついています。
便利ですね。
でも、見た目がいじれない。
デザインテンプレートが限られているので、見た目は殆ど変えられません（2026年5月時点）。
だったら、自分で作るしかないか〜。
そこで助っ人として登場したのが、Claude Code でした。
Claude Codeはこんなやつ
かわいい
Claude Codeやばすぎ
今回、はじめて Claude Code にさわりました。
以前、ChatGPTでメロbotを作ったときは、
コードをコピペして、エラーを確認して、また貼り直して……
という作業が地味に大変でした。
Claude Codeは、ターミナルから直接、ファイルに保存されたコードを書き直してくれます。
- 「もう少しかわいく」
- 「ホバーしたときにふわっと広がってほしい」
とか適当にコメントすると、よしなにコードを書き換えて、そのまま実装して見せてくれるんですよ。「まじやべ〜」です。
ただし、Claude Codeを無駄に働かせすぎると「トークン上限」がかかって、半日とか１日待たないと使えなくなる（しろめはClaude Proプラン）ので、細かい質問や試作はClaudeやChatGPTにも投げながら進めました。
ふわっ
NotionをCMSにできちゃった
新 sirome.net の一番の核は、Notionとの完全連携です（💡）。
サイトの管理画面もいらなくなる。
毎日 Notion にログを書く。
↓
ステータスを「公開」に変える。
↓
サイトに自動反映される。
しかも公開後も、Notionで記事を編集すればサイト側も自動更新される。
やばない？
共感してほしい
まじで。
もちろん記事画面もサイトデザインに合わせて作りました。
にゅっとのびる
かわいい
技術的には、Notion API → Next.js → Vercelという構成で、ステータスフィールドの変更をトリガーに静的再生成（ISR）を走らせるようにしているらしいです。
まじでよくわからんけど。
🎀チャームポイント🎀
Worksページ
Worksページの Featured スライド表示やサムネイル仕様は、
実装しながら仕様を決めていきました。
こういうの（記事内の画像を自動で取得、カーソル横移動でスケール）
「こう見えたら気持ちいい」をその場で試しながら作れるのは、
Claude Code使って一番よかった部分です。
自分がデザイナーとして、もしエンジニアさんと一緒に作るとしても、
こんなにいっぱい修正お願いしたら絶対嫌われるだろ
と思って途中で諦める自分を想像しました。
AIはほんとにいろんな意味でクリエイティブ職にとって革命的なツールですな。
メロbot
ヘッダーの電光掲示板から、メロが1文字ずつ喋るメロbot。
これは、以前ChatGPTで作っていたプログラムを一部流用しています。
眠っていたメロbotをsirome.netに召喚できたのは嬉しかったな。
また、2019年ごろにつくねじろう氏とHor.氏と密かに作っていた
ドット絵のシロとメロの世界も復活しています。
うれしい、存在してくれてありがとう。
ドット絵はつくねじろう氏制作
えへへ
かわいい
今後は、ゲーム的な要素も試しながら少しずつ増やしていく予定です。
Notion連携の関係でロード時間が長くかかることがあるので、
ヒマつぶしにどうぞ。
1秒ごとに回転するfavicon
faviconとはパソコンのブラウザタブに表示されるちっちゃいアイコンのことです。
gifアニメは登録できなかったので、10枚のpng画像を1秒おきに表示しています。
かわいい
スマホではメニューボタンとして置いています。
タップすると振り返ります。
スマホでも遊んでみてね
sirome.net
トータル２週間で制作しました。
ということでWixから卒業できてよかった。高いしね。
夜中や早朝のちょっとした時間でちみちみ作って気づいたら公開していました。
AI…懐疑的な気持ちもまだまだあるけど、完全に世界変わっとるなと体感しました。
イラストAI生成は法整備の問題とかでまだあんまり使いたくないですが、
デザインやものづくりでAIとうまく付き合って面白いものを作れたらと思っています。
お仕事のご相談もぜひお気軽にどうぞ。
それから今後はちゃんとお仕事のクレジットやアーカイブ記事に力をいれて、
ひとつひとつ大切に公開していけたらなと思います。
sirome.netに公開中の記事も、随時遡って更新していきます。
どれも思いをこめて制作したお仕事ばかり。
みなさまのお陰でこれまでたくさん絵を描かせて頂き、
こういう形で生存できていることがありがたいです。
まだ発展途中ではありますが、
今後ともシロとメロとあけたらしろめを応援よろしくお願いします！
サイトみてね！ リプやDMで感想もお待ちしてます✨
使用技術メモ
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
ちなみにこの記事もNotionで書きました。
面白かったらシェアお願いします！
あけたらしろめ
