技術・日記・写真を一つにまとめる個人サイトを作った

技術のこと、日々のこと、撮った写真を一つの場所にまとめるための個人サイトを作りました。

作り始めたのは 2026/07/12 頃で、制作期間はだいたい2週間です。

目的はシンプルです。

ブログ、日記、写真、制作物をそれぞれ別の入口にしつつ、全体としては同じサイトの中に収める構成にしています。技術の学び、日々の記録、撮影した写真を少しずつ積み上げていくための「記録の棚」のような場所です。

使った技術スタック

実装には Astro を中心に、TypeScript、Markdown、Cloudflare を使っています。

内容は主に Markdown で管理し、静的サイトとして出力する構成です。記事や写真の一覧ページも、コンテンツの構造に合わせて拡張しやすいようにしています。

技術選定で重視したのは、「静的コンテンツとして扱いやすいか」です。今回の目的は個人の記録をまとめることなので、実装細部に時間をかけすぎるより、コンテンツを増やしながら育てていけることを優先しました。

Astro を選んだ理由は、今回の用途に対してシンプルで無駄が少ないからです。

React や Vue も候補には挙がりました。ただ、今回は「勉強しながら作る」ためのプロジェクトではなく、まずは自分の記録を残す場所を作ることが主目的でした。

React や Vue を選ぶと、コンポーネント設計や状態管理、ルーティングの考え方に意識が向きすぎそうでした。完成度を上げる前に、作る対象が広がりすぎるかもしれないと思ったのです。

Astro なら、Markdown ベースで内容を入れやすく、静的サイトとして扱いやすい。必要なところだけカスタマイズしていけばよいので、作ること自体に集中しやすかったです。

このサイトは、かなりの部分を生成AIの支援のもとで作っています。

大まかな役割はこんな感じです。

完全に手作業で一から作るより、かなり速く進みました。とはいえ、AI が出したものをそのまま採用するのではなく、出来上がったものを見て、必要に応じて修正依頼を出しながら形にしています。

自分の意図とズレていないか。使いやすいか。見た目が自然か。そこは都度確認しながら進めました。

特にこだわったのは、写真ページの見せ方です。

写真はただ並べるだけではなく、作品として見せたい気持ちがありました。

そのため、写真の縦横比を保ったまま並べられるレイアウトにしています。正方形に寄せたり、無理に整形したりせず、撮影した時の画角や構図をできるだけ自然に残すためです。

写真ページでは、次のようなこともできるようにしました。

HDD に保存するだけでは見返しにくく、SNS では細かい情報を残しにくい。だから、自分が見返したい形で写真と情報を整理できるようにしました。

写真の配置やメタデータの整理、Markdown 生成までをまとめて行えるスクリプトも用意しています。画像を置いたあと、一覧表示に必要な情報をまとめて加工・抽出できるようにして、今後の投稿作業を楽にするためです。

今のところ、このサイトは静的コンテンツとして運用する前提です。そのため、記事や写真を追加するたびに毎回リリース作業を行うのは少し面倒に感じています。

今後やりたいことは、まず自動デプロイです。

その先では、管理画面から投稿できるようにすることも検討しています。ただし、これは必須ではありません。

今後もこのサイトを、技術の学び・日々の記録・写真の記録をまとめていくための場所として育てていきたいです。