更新履歴

今日、ブログのデザインを新しくしました。目指したのは、雑誌や個人の記録帳をめくるように、文章と写真をゆっくり楽しめる場所です。

新しいデザインについて

紙を思わせる明るい背景に、墨色の文字と朱色のアクセント。大きな「ITSUKI.」の文字、01 から 05 までの章番号、細い罫線でページの流れをつくりました。余白と文字の大小を生かした、雑誌のようなエディトリアルデザインです。

記事と「つくる」をホームページの上段に置き、動画と写真はその下へ。見出しと項目の間にも余裕を持たせ、読みたいものを自然に見つけられる配置にしました。

今回の変更

• 主な入口を「01 記事 / 02 つくる / 03 動画 / 04 写真 / 05 俳句」に整理。「05 俳句」からは、樹の句帖へ直接移動できます。
• 「つくる」に、ニャ識、道のり、樹の句帖、JLPT Master Deck、このブログを掲載しました。
• サイトアイコンを朱色の「木」の印に変更。プロフィールのアバターには、ニャ識の猫を迎えました。自己紹介も、4月に来日し、日本語学校で学んでいる現在の暮らしに合わせて更新しました。
• X の投稿を日付ごとの日記にまとめました。写真は本文にそのまま表示し、複数枚は並べて、クリックすると大きく見られます。
• YouTube チャンネルの公開動画を同期し、ホームページには最新の2本を表示するようにしました。

日々書くこと、つくること、撮ること。その一つひとつが、少しずつこの庭に残っていくように育てていきます。

今回のアップデートは、写真モジュール（/photos）の徹底的なリファクタリングであり、「単一画像の共有」から完全な「アルバム体験」への移行を目指しています。

✨ 新機能 (Features)

アルバムモード (Album Mode): 単一の Markdown ファイルで複数の画像（images 配列）を定義できるようになり、詳細ページでは高性能なウォーターフォールレイアウトで自動的にレンダリングされます。

ウォーターフォールコンポーネント (Masonry Gallery):

React アイランドアーキテクチャを導入し、画像レンダリングを担当させました。

aspect-ratio 技術を利用して、CLS（レイアウトシフト）ゼロの読み込み体験を実現しました。

画像を強制的にトリミングすることなく、元の比率で表示することをサポートします。

没入型ライトボックス (Lightbox):

画像をクリックすると全画面表示モードに入ります。

キーボード（←/→/Esc）およびタッチジェスチャーによるナビゲーションをサポートします。

画像のタイトルとインデックス番号を表示します。

新しいリストページ:

/photos をカードスタイルのグリッドレイアウトにリファクタリングしました。

アルバムの表紙（Cover）または最初の画像を自動的にサムネイルとして抽出します。

撮影日時、場所、およびアルバム内の画像数の統計を表示します。

🐛 修正と改善 (Fixes & Improvements)

ホームページギャラリーの修正:

新しいアルバムデータ構造に合わせて、ホームページのカルーセルコンポーネントを同期しました。

ギャラリー画像をクリックしても詳細ページにジャンプしない問題を修正しました。

多言語タイトルによる React レンダリングクラッシュを防ぐための防御的なプログラミングを追加しました。

ナビゲーションの最適化:

アルバム詳細ページのトップ（ヒーローエリア）に目立つ「リストに戻る」ボタンを追加し、閲覧の連続性を向上させました。

データの互換性:

後方互換ロジックを実装しました。古いバージョンの Markdown（cover フィールドのみ）も、単一画像のアルバムとして正常に表示されます。

🛠️ 技術的な詳細

React 統合: Astro ページ内で MasonryGallery コンポーネントを部分的にハイドレーション（client:load）しました。

防御的コーディング: 特定のエッジケースにおける date.toISOString の型エラーを修正しました。

UI システム: Catppuccin Mocha 配色スキームに完全に準拠し、すりガラス（Backdrop Blur）効果を最適化しました。

新機能: ブログ画像の「ギャラリーモード」。記事のカバー画像および本文内の全画像を自動的に収集し、ライトボックス内でのループ閲覧に対応しました。

最適化: [レイアウト],本文画像の「バナークロップ」戦略を導入。本文画像の高さを最大 360px に制限し、object-fit: cover を適用することで、長い画像による読書フローの中断を防ぎ、よりコンパクトでプロフェッショナルなレイアウトを実現しました。

最適化: [インタラクション] ライトボックスシステムの強化。

「前へ/次へ」ナビゲーションボタンとリアルタイムのページ数カウント（例：1 / 5）を追加。

キーボードの左右矢印キーによる画像切り替えに対応。

ESC キーによるワンタッチ終了に対応。

ビジュアル [デザイン]:

ライトボックス内では常にクロップされていないオリジナルの高解像度画像を表示。

本文画像に立体的な深いシャドウと Catppuccin スタイルのマイクロボーダーを追加。

画像ホバー時のスムーズなリフトアップアニメーションを最適化。

新機能: 記事の統計情報の導入。詳細ページおよび一覧ページに「総字数」と「予想読了時間」を表示する機能を追加。

新機能: おすすめ記事（Featured）専用ページの新規作成。Catppuccin Peach アクセントとスターアイコンを採用したプレミアムな一覧表示を実現。

最適化: サイドバーの Bento Grid 構造を全ページ（一覧、カテゴリ、アーカイブ、おすすめ）で完全同期。検索、カテゴリ、アーカイブ入口、最新のおすすめ（3件）の順序で統一。

最適化: 記事詳細のデザイン改良。アイキャッチ画像の上に引用スタイルの「記事要約（Summary）」セクションを追加。

最適化: アーカイブページの全面刷新。

他のページとデザインと言語を統一する 12 列グリッドレイアウトを採用。

ページ上部に概要文を追加し、各記事タイトルの下に要約を表示。

• 修正: モバイルナビゲーションのクリティカルなバグを修正。欠落していた#mobile-menu要素を補完し、トグル操作によるスムーズな開閉を実現。
• 新規: OGPおよびTwitter Cardsメタタグを統合。ソーシャルメディアでのシェア時に、タイトルや画像が正しく表示されるようSEOを強化。
• 最適化: モバイル版ホームのレイアウトを刷新。余白をpx-3に縮小し、カード間の間隔を調整することで、小画面でも情報の密度と視認性を両立。
• 新規: 統計情報のレスポンシブ表示を導入。Heroセクション内のデータをモバイルでは独立したカードとして抽出し、スクロールなしでの状況把握を可能に。
• 修正: モバイル版ギャラリー（Photos）の表示崩れを解消。最小高さを設定し、絶対配置によるコンテンツの消失を防ぎ、適切なアスペクト比を維持。
• 新規: スムーズな「トップへ戻る」ボタンを実装。ページスクロール量に応じて出現するフローティングボタンを追加し、操作性を向上。
• 最適化: iOS等のセーフエリア（Safe Area）へ完全対応。ノッチ付き端末でのヘッダーの重なりや、ページ底部におけるナビゲーションの描画不備を解消。

• 新規: ナビゲーションに「AIツール」を追加。Gemini Canvasを活用したクリエイティブなツール群へのアクセスを容易に。
• 新規: Lucideアイコンセットを統合。9つのナビゲーション項目に視覚的なインジケーターを追加し、直感的なUXを実現。
• 最適化: 1280px以上の画面向けに高密度レイアウトを適応。テキストの折り返しを防止し、情報の視認性を最大化。
• 新規: スクロール連動型Headerを採用。透明状態からグラスモーフィズム（背景ぼかし）への滑らかな遷移をサポート。
• 統合: フッターに「最終更新日時」を動的に表示。本更新履歴（Changelog）ページへのスマートな導線を設置。

• 初期化: Astro 5.0 をベースとしたプロジェクト構成を構築し、デジタルガーデンの土台を完成。
• 基本機能: ブログ記事（Blog）、写真ギャラリー（Photos）、プロフィールページの基本ロジックとルーティングを実装。
• 多言語化: 日本語と英語のバイリンガル対応の基礎を確立。
• デザイン: Catppuccin配色とBento（弁当）レイアウトを採用したUIデザインの初期実装。
• SEO/解析: Google Analytics 4 (GA4) と JSON-LD 構造化データの統合を完了。