アーカイブ & ログ
サイトの進化の軌跡、マイルストーンを記録しています。
ブログ詳細:没入型ギャラリーとビジュアル・レイアウトの最適化
新機能: ブログ画像の「ギャラリーモード」。記事のカバー画像および本文内の全画像を自動的に収集し、ライトボックス内でのループ閲覧に対応しました。
最適化: [レイアウト],本文画像の「バナークロップ」戦略を導入。本文画像の高さを最大 360px に制限し、object-fit: cover を適用することで、長い画像による読書フローの中断を防ぎ、よりコンパクトでプロフェッショナルなレイアウトを実現しました。
最適化: [インタラクション] ライトボックスシステムの強化。
「前へ/次へ」ナビゲーションボタンとリアルタイムのページ数カウント(例:1 / 5)を追加。
キーボードの左右矢印キーによる画像切り替えに対応。
ESC キーによるワンタッチ終了に対応。
ビジュアル [デザイン]:
ライトボックス内では常にクロップされていないオリジナルの高解像度画像を表示。
本文画像に立体的な深いシャドウと Catppuccin スタイルのマイクロボーダーを追加。
画像ホバー時のスムーズなリフトアップアニメーションを最適化。
ブログシステムの包括的なアップグレード
新機能: 記事の統計情報の導入。詳細ページおよび一覧ページに「総字数」と「予想読了時間」を表示する機能を追加。
新機能: おすすめ記事(Featured)専用ページの新規作成。Catppuccin Peach アクセントとスターアイコンを採用したプレミアムな一覧表示を実現。
最適化: サイドバーの Bento Grid 構造を全ページ(一覧、カテゴリ、アーカイブ、おすすめ)で完全同期。検索、カテゴリ、アーカイブ入口、最新のおすすめ(3件)の順序で統一。
最適化: 記事詳細のデザイン改良。アイキャッチ画像の上に引用スタイルの「記事要約(Summary)」セクションを追加。
最適化: アーカイブページの全面刷新。
他のページとデザインと言語を統一する 12 列グリッドレイアウトを採用。
ページ上部に概要文を追加し、各記事タイトルの下に要約を表示。
モバイル体験の完全最適化とSEO基盤の整備
- 修正: モバイルナビゲーションのクリティカルなバグを修正。欠落していた
#mobile-menu要素を補完し、トグル操作によるスムーズな開閉を実現。 - 新規: OGPおよびTwitter Cardsメタタグを統合。ソーシャルメディアでのシェア時に、タイトルや画像が正しく表示されるようSEOを強化。
- 最適化: モバイル版ホームのレイアウトを刷新。余白を
px-3に縮小し、カード間の間隔を調整することで、小画面でも情報の密度と視認性を両立。 - 新規: 統計情報のレスポンシブ表示を導入。Heroセクション内のデータをモバイルでは独立したカードとして抽出し、スクロールなしでの状況把握を可能に。
- 修正: モバイル版ギャラリー(Photos)の表示崩れを解消。最小高さを設定し、絶対配置によるコンテンツの消失を防ぎ、適切なアスペクト比を維持。
- 新規: スムーズな「トップへ戻る」ボタンを実装。ページスクロール量に応じて出現するフローティングボタンを追加し、操作性を向上。
- 最適化: iOS等のセーフエリア(Safe Area)へ完全対応。ノッチ付き端末でのヘッダーの重なりや、ページ底部におけるナビゲーションの描画不備を解消。
ナビゲーションの刷新とAIツールの統合
- 新規: ナビゲーションに「AIツール」を追加。Gemini Canvasを活用したクリエイティブなツール群へのアクセスを容易に。
- 新規: Lucideアイコンセットを統合。9つのナビゲーション項目に視覚的なインジケーターを追加し、直感的なUXを実現。
- 最適化: 1280px以上の画面向けに高密度レイアウトを適応。テキストの折り返しを防止し、情報の視認性を最大化。
- 新規: スクロール連動型Headerを採用。透明状態からグラスモーフィズム(背景ぼかし)への滑らかな遷移をサポート。
- 統合: フッターに「最終更新日時」を動的に表示。本更新履歴(Changelog)ページへのスマートな導線を設置。
プロジェクトの初期化と基本機能の実装
- 初期化: Astro 5.0 をベースとしたプロジェクト構成を構築し、デジタルガーデンの土台を完成。
- 基本機能: ブログ記事(Blog)、写真ギャラリー(Photos)、プロフィールページの基本ロジックとルーティングを実装。
- 多言語化: 日本語と英語のバイリンガル対応の基礎を確立。
- デザイン: Catppuccin配色とBento(弁当)レイアウトを採用したUIデザインの初期実装。
- SEO/解析: Google Analytics 4 (GA4) と JSON-LD 構造化データの統合を完了。