作成日:

サイト全体を神社テーマへ大改装!「境内全図」と額装UIで世界観を統一しました

サイト全体に神社テーマ(shrine-theme)を適用し、和風マガジン調カードや注連縄、額装UIを取り入れた大改装を行いました。サイトマップも「境内全図」へと生まれ変わり、世界観をより深く感じられる空間に整えています。

個人サイトとして長く運営を続けてきた中で、あちこち増築を重ねていたデザインやURL体系、裏側のコード構成を一気に整理し、サイト全体でひとつの「静かな神社・境内」を散策するような体験ができるようにリニューアルしてみました。

サイト全体を神社テーマへ大改装!「境内全図」と額装UIで世界観を統一しました (Gemini 画像生成)
サイト全体を神社テーマへ大改装!「境内全図」と額装UIで世界観を統一しました (Gemini 画像生成)

1. サイト全体を包む「神社テーマ(shrine-theme)」と和風マガジンUI

今回の改装で一番の目玉となるのが、サイト全体に適用した「神社テーマ(shrine-theme)」です。

トップページの「Journal Update」は、従来のシンプルな一覧から和風マガジン風のカードデザインへと刷新しました。サイト全体にも注連縄(しめなわ)や木製の額装UI、和紙風のテクスチャを取り入れ、アクセントカラーには朱色・珊瑚色(#ff6f6e)を効かせています。

パソコンでもスマートフォンでも、ページをめくるごとにフッと肩の力が抜けるような、落ち着いた神社の佇まいとモダンなWebデザインの調和を目指しました。

2. サイトマップから「境内全図」へ:世界観を込めた道案内

これまで機能優先で並んでいた[ サイトマップ ]も、神社の案内板を模した「境内全図(けいだいぜんず)」としてフルリデザインしました。

  • 本堂や社務所にあたるメインページ
  • 絵画が並ぶ「展示室」やドット絵の「豆絵」
  • 日々の思索を綴る「日誌(ジャーナル)」や書庫

単なる無機質なリンクの羅列ではなく、境内の小道を歩きながら各お堂を巡るようなビジュアルに仕立て直したことで、初めて訪れた方でもサイト全体の広がりをワクワクしながら散策していただけるようになっています。

3. 個別イラストページの単一コントローラー集約とURL統一

見た目の華やかさと並行して、裏側のシステムにもかなり踏み込んだ大手術を行いました。一番大きな成果が、イラスト・展示室周りのアーキテクチャ刷新です。

これまではイラスト1枚ごとに media/pages/hanne-1 のように個別のPHPファイルが作られており、気づけば60本以上ものファイルが散らばっていました。これを今回、単一のコントローラー(media/pages/index)へ完全に集約・統合しました。

これによって、約5,400行にも及んでいた重複コードを一気に削減することに成功。URL体系も /illustration/view/{id} へと美しく統一され、豆絵(ドット絵)の展示ページも神社テーマに合わせた額装・奉納風のデザインへと生まれ変わっています。

4. 内部基盤のクリーンアップとPHPDocの全面整備

さらに、今後の継続的な開発や日々の自動化パイプラインを安心して回せるよう、内部コードの土台も徹底的に磨き上げました。

管理画面や共通基盤の処理を専用モジュールへ綺麗に切り分け、module、journal-template、webhooks、analytics など、サイトを支える全域にわたって包括的な PHPDoc アノテーションを追加しました。

エディタの補完や型安全性が飛躍的に向上したことで、コードの見通しが驚くほどクリアになり、保守や機能追加がとても身軽に行えるようになっています。

5. 新しくなった境内で、これからもボチボチと

長年付き合ってきたコードの負債を綺麗に払拭しつつ、ずっと形にしたかった「神社」の世界観をサイトの隅々まで行き渡らせることができた、とても清々しい大改装になりました。

見た目の心地よさと裏側の軽やかさがどちらも手に入ったので、これからもこの新しい境内で、日々の記録や創作を自分のペースで大切に続けていきたいと思います。