環境構築と魔法陣の展開

まず、このブログはただの静的サイトジェネレーターではなく、高度なコンポーネント指向を取り入れています。ベースとして採用した魔法陣（フレームワーク）は Astro です。

なぜAstroを選んだのか？

• 島アーキテクチャ (Island Architecture): 静的な部分は完全にHTMLとして出力しつつ、インタラクティブにするべき場所（検索ボックスやステータス画面）だけ JavaScript (Svelte) を送ることで、読み込み速度が爆速になります。
• Svelteとの強力な連携: 📦 Svelteコンポーネント は記述が簡潔で、リアクティブなUIを作るのに最適です。Astroの中で透過的に読み込めます。

UIデザインと世界観の構築

UIはすべて Tailwind CSS v4 を使ってスタイリングしています。

/* グローバルに設定されたテーマカラーの一部 */
--color-primary: #ffd700; /* ゴールド */
--color-bg-surface: #0f0f1e; /* ダークな表面 */

このようなCSS変数をTailwindと連携させ、bg-bg-surface や text-primary のようなクラスで直感的にコーディングできるようにしています。 とくに、クエストログのカードUIや、ステータス画面のレイアウトは Flexbox/Grid を駆使してHUD（ヘッドアップディスプレイ）風にしています。

インタラクティブ要素の実装

この世界にはいくつかの「動く仕掛け」が用意されています。

1. マジック検索 (SearchBox.svelte) ブログ記事のメタデータ（MarkdownのFrontmatter）から情報を引っ張り出し、クライアントサイドで高速に絞り込み検索を行います。Svelteのリアクティビティの恩恵を強く受けています。

2. レベルアップシステム (LevelUpModal.svelte) 一定の経験値が貯まったときや、特別なURLイベントを踏んだときに発火します。Svelteの transition ディレクティブを使って、派手なアニメーションをつけています。

3. パーティクル背景 (ParticleEffect.svelte) HTML5の <canvas> 要素を使い、背景で常に光の粒が漂うようにしています。この微細な動きがRPG感を際立たせます。

READ COMPLETE BONUS

TOTAL EXP: 0

この記事を読み終えたら、報酬EXPを受け取れます。 +1,534 EXP

読了してEXPを受け取る

※ レベルは累計EXPが10,000ごとに1上がります。