こんにちは、あおにゃです。
サイト全体を見直して、構成、デザイン、文章、アニメーションをまとめて整えました。以前のサイトは必要なページを置くことが中心でしたが、今回は「読みに来た人が迷わず歩けること」と「自分の活動が伝わること」を意識しています。
今回の目的は、ただ見た目を新しくすることではなく、ブログを続けたくなる場所に作り直すことでした。
技術面で変えたこと
まず、フレームワークとライブラリを新しい構成に寄せました。Next.js、React、Tailwind CSS、TypeScriptを更新し、設定ファイルも今の推奨に近い形へ整理しています。
大きく変えたのは、次のようなところです。
- Next.js 16 と React 19 に更新
- Tailwind CSS 4 のCSS-first構成に移行
- ESLintのflat configへ移行
- 使っていない依存関係を削除
- ブログ記事の読み込み処理を共通化
- Root Layoutをサーバーコンポーネントとして整理
見えない部分ですが、こういう土台を整えると、次に機能を足すときの迷いが減ります。
デザインで意識したこと
デザインは、白をベースにして、黒に近い文字色と少しだけ緑のアクセントを入れました。ブログなので、装飾が主役になりすぎるより、文章と写真が気持ちよく見えることを優先しています。
カード、見出し、フッター、メニューのトーンをそろえたことで、ページごとのばらつきも減りました。特にトップページは、ただ記事一覧を置くだけではなく、このサイトが何の場所なのかが伝わるように文言を入れ直しています。
デザインは雰囲気を作るだけではなく、読む順番をそっと案内するためのものです。
文章を増やした理由
これまでは、ページに最低限の説明しか置いていませんでした。でも個人サイトでは、少しの言葉があるだけで温度が伝わります。何のためのページなのか、どんな気持ちで作っているのか、どう使ってほしいのか。そういう説明があると、サイト全体が急に自分の場所らしくなります。
ブログ記事も、短い報告だけではなく、考えたことの背景まで書くようにしました。あとから読み返したときに、その時の自分が何を大事にしていたのかわかるようにするためです。
アニメーションの入れ方
今回、サイト全体に軽いアニメーションも追加しました。ページがふわっと表示されたり、カードが少し持ち上がったり、画像がゆっくり拡大したりします。
ただし、動きが強すぎると文章が読みにくくなります。なので、アニメーションはあくまで補助です。大事な文章には、下に罫線が引かれるような演出を入れました。
目立たせたい文章は、声を大きくするのではなく、少しだけ視線が止まるようにしました。
これからの更新
これでサイトの土台はかなり整いました。次は、記事数を増やしていくことが一番大事です。制作メモ、読書メモ、映画の感想、作りたいアプリのアイデア。小さくてもいいので、サイトに言葉を足していきます。
この場所が、未来の自分にとって使いやすいメモ帳になって、読みに来てくれた人にとっても少し楽しい寄り道になったらうれしいです。
整えたあとに見えた、本当の課題
公開できる状態まで作ると達成感があります。でも、サイトの使いやすさは完成直後のスクリーンショットだけでは分かりません。記事が増えたときに一覧が探しやすいか、長い文章をスマホで読んでも疲れないか、数か月後の自分が迷わず更新できるか。使い続けて初めて見える問題があります。
今回いちばん大きかった学びは、見た目・技術・内容を別々に考えないことでした。きれいでも更新しづらければ止まり、速くても何を読めばいいか分からなければ残りません。逆に、短い日記でも「なぜそう思ったか」が書かれていると、サイトの人物像が少しずつ濃くなります。
これからは変更内容だけでなく、変更前に困っていたこと、試した案、採用しなかった理由も残します。完成報告ではなく、次に同じ場所で迷った自分へ渡す制作ログにしていきます。