『こ～こはど～この箱庭じゃ？』というホラーFlashをご存知でしょうか。

とある個人サイトにて10,000アクセスのキリ番をプレイヤーが踏むところから物語が始まり，掲示板や日記などサイトを探索しつつ管理人と常連ユーザたちのやりとりを眺めていくと...といったものです。
『赤い部屋』と並んで大好きなFlash作品のひとつで，なにより「個人サイト」という文化を知るきっかけにもなりました。

で，現在。
Xをはじめ各種SNSは普通に使っている身で，特に撤退する気も今のところないのですが，流し聴きしていたポッドキャストにて『こ～こはど～この箱庭じゃ？』の話が上がったことでスイッチがばちんと入り，個人サイト作るか～～となりました。

作ったもの：https://www.loot.gd/

以下，いろいろと書きます。  
 

モチベーション

作ったものを集約させたい

一昨年あたりからイラストや書き物をインターネットに放流し始めました。
そういったものの投稿先としてはXやPixiv，Noteなど無数のプラットフォームがあるわけですが，使っていくうちに自分の場所にまとめたい欲が出てきました。
初めて同人誌(イラストをまとめたやつ)を制作した際，「作ったなんかをまとめる容れ物」を作るのもめちゃ楽しいと思ったことも大きいです。

フロントエンド覚えたい

普段はデータ分析的なことをやっていて，構築したものを利用してもらうためにデモアプリを作成したりもするのですが，最近になってそこに求められるもの(スピード感や機能，デザイン)が多くなってきました。
StreamlitやGradioなどのライブラリは非常に便利で，たいていの場合(自分の場合に限る)はこれらで十分なことが多いです。
が，今後必要になってくる場面が来るかもということで以前から頭の片隅にあったReactを触るタイミングとしてはいいな，と思いました (WordPressなんかのCMSも使ってみたかったのですが，これが理由で今回は見送っています)。
機熟，というやつです。

技術スタック

フロントエンド

• Next.js
• TailwindCSS(スタイリング)
• Framer Motion(アニメーション)

そもそもフレームワークやライブラリの事を一切知らないため，言葉だけ聞く連中をひとまず触ってみて，何が出来るのか・便利なのかを知ろうと思い採用しました。サイトに無駄なアニメーションやデザイン変化が多いのもそのためです。

ホスティング/バックエンド

• Vercel(ホスティング)
• Supabase(データベース)
• Vercel Blob(静的ファイルのストレージ)
• NextAuth.js(認証関係)

「Next.jsを採用するならVercelが相性良い」というインターネットでよく見る記述を信頼しホスティング先に選びました。同じダッシュボードから管理できて便利そうなので，SupabaseとVercel Blobをバックエンドに使っています。
もともとはコンテンツファイルもpublic/以下に配置してJSONでメタデータ管理する形だったのですが，運用していくうちに「これ違うな」となったので後付けで追加した形です。

コンテンツ管理

• React Markdown(マークダウンのレンダリング)
• Gray Matter(マークダウンのメタデータ管理)

テキストコンテンツについては慣れたマークダウンで作成したいと思い，Reactで実現できる方法はないかと調べている中でヒットしたものをそのまま採用しました。

こだわったところ

基本機能

なによりもまずコンテンツを並べることが必要です。後述するサイトデザインによってゴテゴテしがちになることが予想されたため，すっきりとしたレイアウトにすることを意識しました。
最初の方はモーダル表示する形を取っていましたが，各コンテンツに直接アクセスする手段&リアクティブなものが欲しい気持ちになったので，リアクション機能とともに現在の構成にしています。
他と比べてどうこうが分からない身ですが，このあたりはApp Routerくんの便利さをひしひしと感じたところです。

サイトデザイン

グリッチやサイバーパンク的なデザインが好きなので，スキャンラインやノイズなどの演出は制作当初から盛り込もうと考えていました。実際に不具合があった場合でも演出のように見えるのでお得です。

また，イラストそれぞれにアクセントカラーと背景グラデーションを設定し，選択したものに応じてサイト全体のテーマが変わるようにしました。前述したようにフロントのいろんな機能を触ってみたいというのはもちろん，コンテンツ，特にイラストごとに場(サイト)を最適化したい，という思いがあったためです。パフォーマンスが致命的に悪くなっている原因の一つですが，コンテンツごとのテーマを考える楽しさも含めて気に入っています。

実績機能

好きゲーム『Cookie Clicker』に触発されています。ローカルストレージなる便利領域があることを知り追加しました。作ったやつを載せることが目的のサイトなので，見てもらうことを少しでも楽しくできたらという考えと，自身が隠しページ的な要素を追加する動機づけで出来ています。

つまづき

パフォーマンス最適化

最初はそこまで気にならなかったのですが，機能を増やすたびに劣悪なことになっていきました。なにかを追加するたびにパフォーマンスチェックするべきところをいい加減にして実装を急いだ結果が現在の姿です。普段作っているものでは凝ったデザインやアニメーションはほとんど求められないため，機敏に動かすこととリッチな演出にすることの両立がここまで難しいとは...と思い知りました。
ただ，Next.jsくんが「Imageコンポーネント使ってね」みたいに教えてくれる点も多く，そこは有り難かったですね。勉強しつつじっくり改善していこうと思います。

レスポンシブデザイン

制作当初はこの言葉自体知りませんでした。PCでもスマホでも良い感じに表示させる！というところはそこまで悩まなかったのですが，PCでウィンドウレイアウトを色々変えたときに崩れないようにするのが難しかったです。し，こちらについても今も未解決な部分があります。

レンダリングエンジンによる描写の違い

WebkitにてFramerMotion内のImageが謎の点滅(flickering)する事象に悩まされました。どうやらopacityの遷移がフックになっているらしいことは分かったくらいで解決策は結局思いつかず，その部分はオミットする形になりました。
それ以外にも描写が若干異なる部分がちらほらあります。パフォーマンス，レスポンシブデザインも含め世のWebサイトやエンジニア方々はすげーですよ。

感想

ま～～めちゃ楽しかったです。
今回はCMSを使わない形を取りましたが，機能・デザインともに好き放題出来るのはやはり良かったですね。当初の目標もかなり達成できてほくほくしています。

これを書いている2025/4/7現在，個人サイトの総合サーチであるコンパスリンクには2,258ものサイトが登録されているようです。自身も他の方のサイトデザインを拝見して回るのが好きなので(SNS隆盛の中ではありますが)，また盛り上がっていくと嬉しいですね，個人サイト文化。

広大なネットの海にパーソナルスペースがあるというのは，案外心地よいものです。
インターネットの混乱に備えて，あなたもおひとついかがでしょうか。

参考文献

りあクト！ TypeScriptで始めるつらくないReact開発 第4版

環境構築から状態管理までReactの基礎的な事項はこちらの書籍が大変参考になりました。歴史や設計思想の解説も豊富，先輩後輩の会話形式で読みやすい，「なぜそれが便利なのか？」の言及，などなど，助かりまくりでした。

オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現

画面上でのタイポグラフィを考える内容がメインですが，掲載されているWebサイトのデザイン事例がどれも素敵で，おもにレイアウトの参考にしていました。