8
続・個人サイトつくりばなし

続・個人サイトつくりばなし

2026.06.09
tech

個人サイトWebオンリー『めぐる市』に参加しておりました。いろんな方のこだわりが詰まったものを眺めるのが好きなので,めちゃめちゃ楽しかったです。会場の左上から右下まで1スペースずつ移動しながら堪能しておりました。このサイトについてもたくさんのリアクションやコメントを頂き,浮かれ踊るシーンもあったそうです。ARIGATE...

Document image

弊ブースと顔が死んでる店番ちゃん

中でも,ご自身の個人サイトについて,こだわったところ,技術的なこと,運営してみての所感などを書いていらっしゃる方が多く,たいへん楽しく読ませて頂きました。それゆえ自分も1年ぶりに書いてみようという構えです。1年前,開設当初の記事はこちら。ていうか絶対めぐる市の前に書いておくのが良かったね。

そもそもなんで作ったか

1年前の記事では「作ったものを集約させたい」と「フロントエンド覚えたい」と書いていましたが,前者の方についてもう少し詳しく書くと,自分の作ったものをいちばんよく見せられる場所を作りたい になります。

ものをインターネットに放流するのは,もちろん他のひとに見てもらいたいからで,であればXやPixivなどに投稿することは,まぁ当然のことですね。実際それは自分自身いまもやっていますし,反応も頂けるので嬉しいことです。

ただ,なんというか,そういった各サービスは,それぞれの思想のもとにデザインされていて,そこに載せることは,なにかが均質化されてしまうような気がしてモニャつくようになりました。ものが何かの構造の中のいち要素になってしまう,というか。で,作ったものの「正式な置き場所」が欲しくなったという形ですね。

イラスト一枚一枚にアクセントカラーと背景グラデーションを持たせて選択に応じてサイト全体が切り替わる,という仕組みを設けていますが,これも上記の...思想?モチベ?によるものです。作ったものに名前を付けるのが好きなので,タイトルと合わせてすこしでも世界観みたいなものが出ればいいな~とか思っています。

逆に小説とか書き物についてはカラーは設定せず,最後に選んだイラストの色が引き継がれるようにしています。余白が多いというか,どうとも取れる話を書いているという意識があり,色に応じて受け取り方が少しでも変わったら面白いな,ということを思っています。緑系だったらハッピーエンドっぽく映るけど,赤系だったらバッドエンドっぽく読める,みたいな。

あとはまぁ,ダイヤルアップ回線の頃から憧れていたけど眺めるだけだった個人サイト文化を味わいたい,というのも当然あります。

この1年でやったこと

開設時点でサイトでやりたいことの大部分は出来ていたので,ここ1年では細け~~部分の調整やバグ取り,裏側部分をいい感じにすることに注力していました。...と書きましたが,いまコミット履歴みるとそうでもないですね。機能追加もめちゃしてた。でかいもの順に書きます。

UIの刷新と最適化

まとまった時間でガッとやるものが多い中,これについては1年間ずーーっとやっていて記憶にこびりついています。開設当初はグリッチ・CRT・ネオン的な装飾を施していて,その意識のままで改修を進めていました。が,意識というのは変わっていくもので,知らず知らずのうちにミニマルな感じに。当時はグリッチノイズを表示させる仕組みなどもありましたが,コンポーネントごと削除しました。数十時間かけて作ったものを消し去るのはドミノを倒すみたいで気持ちよかったです。

あとは

  • とにかく初期表示を軽く・速くするようにした
  • 一瞬だけチラッと違う表示が見えてしまう現象(フラッシュ)を潰してまわった

あたりですね。見た目的なデザインをいい感じにしていくと,そのぶんだけ変な表示やモーションが気になるようになっていきました。徹底的にやったつもりですが,まだなんかあるかもしれません。たすけて。

ストレージの移行(Vercel Blob -> Cloudflare R2)

画像や文書ファイルを置いている倉庫を Vercel Blob から Cloudflare R2 に引っ越ししました。Vercel Blob というのは,このサイトをホスティングしているプラットフォーム(Vercel)の中にくっついてるストレージサービスです。当時はなにも考えずにストレージとして選び特に問題も無かったのですが,コンテンツ量と(ありがたいことに)訪問頂く機会とが増えたことで,無料プランの転送量上限(10GB/月)ギリギリになってしまいました。

Document image

あっぷあっぷの状態(めぐる市直前)

ひとつ上のプランにアップグレードするか...?いや転送量だけに財布の紐解くのもな...と迷いながら代替が無いものかと検索した結果,

Document image

エ グ レ ス 料 金 は 無 料

救世主がいました。Botを弾くための認証とかで目にするCloudflareくんのストレージサービスです。なんと転送量が無料。データ量や読み書きの頻度でコストがかかるわけですが,どれだけ多く見積もっても個人サイト程度では無料の範囲に収まってしまいます。これは渡りに船とお引越しすることに。

無事に済んだものの,最悪コンテンツが飛んでしまうのでわりとしっかり計画を立ててやりました。めちゃ緊張した。あと,コンテンツの投稿失敗などで生じた,DBに紐づいていない迷子のファイル(オーファンというらしい)が大量にあったので,それが生じないような仕組みもつくったりしました。本当にめぐる市までに完了してよかったですね。

リアクション・コメント機能の新設

これまではWaveboxさんを窓口的なかたちで使わせて頂いていたところを,なんとか独自サービスに出来ないかと考え,新しく作りました。ここまできたら全部内部で閉じれないか,という考えが頭をよぎった記憶があります。

で,やってみると,目的の機能自体はささっと作れはしました。ただ,多重投稿を抑止したり,匿名性を持たせたりなんかのセキュリティまわりをめちゃめちゃに配慮しないといけないので,大変さ加減では実績機能なんかよりもずっと高かったです。

絵文字送信の部分はWaveboxさんをパ...リスペクトさせて頂きました。

Document image

フッターのロゴがボタンになっているよの図

モニャモニャな自意識があり,さり気ない感じにしています。あけすけには置きたくないけど,っぱ感想とか嬉しいからね。

コンテンツ管理画面のエディタの刷新

このサイトには管理者だけが入れるダッシュボードがあり,そこからコンテンツを追加・編集するつくりになっています。とはいえ,小説なんかの文字コンテンツは,手元のエディタで執筆 -> マークダウンファイルをアップロード というワークフローになっており,なんかアガらんな,という感じがありました(直接執筆することもできるが,素のテキストエリアだった)。

というわけで専用の執筆UIをつくりました。

Document image

はかどるぞ

基本的にマークダウンで執筆しているので,よく使う記法をショートカットに登録してすぐ呼び出せるようにした他,実際に投稿した時の画面を描画して確認できるようにもしました。あと,いちばん作ってよかったのがドラッグ&ドロップで画像を追加できる機能。これまでは ストレージに手作業でアップロード -> URLを取得 -> マークダウンに貼り付け というめんどくさ手順を踏んでいたので,劇的に書きやすくなりました。管理画面もアクセントカラーやグラデーションが反映されるのもアガりますね。

とはいえこれまでに何度も下書きをロストさせているので(デバウンス間違えるなどした),痛みを味わった部分でもあります。もー大丈夫なはず。

Collectionセクションの新設

めぐる市に向けたなにかしらのコンテンツとして,連作短編を掲載することを考えていました。小説自体は以前から書いていて手元にあったのですが,それらをいい感じに連続したものとしてまとめる棚のようなものが欲しくなった,という感じです。

現在はうつしのこし(連作掌編)のみ置いています。どこまで読んだか,の進捗状況が見えるやつは,ささやかながら気に入りです。

一回限りの特設ではなく今後も増やせる枠組みとして作っているので,なにか思いついたらイラスト・書き物問わず追加していきたいですね。

おわりに

個人サイト,ぶっちゃけ1年くらいで飽きるだろうと思っていましたがそんな事はなく,元気に更新を続けられています。なにか新しい機能を思いついたり,バグを取ったりなんかの作業がめっちゃ楽しいのはもちろん,こんなインターネットの辺境まで足を運んでくださる誰かがいることが嬉しいというあれこれです。

Enjoy the internet!!

About this document

個人サイトWebオンリー『めぐる市』に参加しておりました。いろんな方のこだわりが詰まったものを眺めるのが好きなので,めちゃめちゃ楽しかったです。

Published: 2026.06.09

SHARE_OPTIONS

system:view:document:592026.06.09