🌐 ブログの初期画面構成とログインについて

本ドキュメントは、ブログ（apps/blog）トップ画面のレイアウト構成と、基本的な会員登録およびログイン方式の概要を紹介します。

---

🎨 1. ブログの画面構成とレイアウト

ブログの画面は、訪問者が情報を迅速に見つけられるよう、直感的なレイアウト（ヘッダー、本文、サイドバー、フッター）で設計されています。

1. ナビゲーションヘッダー (Header):
   • サイトロゴ: クリックするといつでもトップ画面に戻ります。
   • ショートカットメニュー: カテゴリへのショートカットや外部リンクなど、主要なリンクが表示されます。
   • 多言語切り替え: 地球儀アイコンをクリックすると、メニュー言語や記事の翻訳版をリアルタイムで切り替えて表示できます。
2. サイドバー (Sidebar):
   • PC画面では、カテゴリ一覧、運営者プロフィールカード、人気タグなどが表示され、自由な探索をサポートします。
   • モバイル端末からのアクセス時には、本文の視認性向上のため自動的に非表示になります。
3. メインコンテンツ領域 (Main Content):
   • 最新の記事一覧とカテゴリフィルターが、カードデザイン形式で配置されています。

---

🔑 2. 会員登録とログイン

コメントの入力やゲストブックへのメッセージ作成に必要な、アカウント作成およびログイン機能をサポートしています。

⚙️ ログインおよび登録サポート方式

• 標準メールログイン/登録 (Default):
  • インストール直後にデフォルトで有効化されているログイン方式です。メールアドレス、表示名（ニックネーム）、パスワードを登録して新規登録でき、登録後は即座に自動ログインが適用されます。

* **ソーシャルログイン (Better-Auth)**: * 内部的にBetter-Authエンジンを搭載しており、Google、GitHub、カカオ、ネイバーなどを含む **計21種のソーシャルプロバイダーログイン** をサポートしています。 * ただし、ソーシャルログインは、サイト構築後に管理者が各ソーシャルプラットフォームから取得したクライアントIDおよびシークレットキーを設定用の環境変数に手動で挿入する必要があります。入力されていない場合、ログイン画面にソーシャルボタンは表示されず動作しません。（プロバイダーごとの具体的な連携手順は、後日別のドキュメントで案内予定です。）

* **ログイン状態の表示**: * ログインが完了すると、右上ボタンがユーザーのプロフィール画像アイコンとマイページへのショートカットに切り替わります。 * *参考：ユーザーのプロフィール写真を実際に連携して表示する機能は現在開発中のため、デフォルトの画像アイコンで代替表示される場合があります。*