カーソルを追いかける
頭・目・体がポインターを自然にトラッキング。まるで見つめられているみたい。
✦ あなたの Live2D アニメの奥さん
ハル
Haru · Live2D Cubism Model
本物の Live2D Cubism モデルだよ。カーソルを追いかけて、まばたきして、呼吸して、表情も変わるの。💗 クリックでモーション、下のボタンで気分を変えてね〜
ハルを呼んでいます…
おかえりなさい〜 ♡
01 — Profile
ハルについて
Live2D で命を吹き込まれた、あなたのための2Dキャラクター。
キャラクター設定
- 名前
- ハル (Haru)
- モデル
- Live2D Cubism 4
- 性格
- やさしい・元気 ☺
- 好きなもの
- 抹茶、夜更かし、あなた
- 表情
- 8種類
- モーション
- アイドル・タップ
「おかえりなさい。今日もおつかれさま。」
ハルは Live2D Cubism 4 の実モデルとして描かれた、インタラクティブなアニメキャラクターです。静的な画像ではなく、リアルタイムに動くリグ（moc3）で、あなたのカーソルを目で追い、自然にまばたきし、髪が物理で揺れます。
このページはオープンソースのテンプレートです。フォークして名前やセリフを変え、好きな Live2D モデルに差し替えれば、あなただけの「2Dの奥さん」サイトが完成します。
02 — Features
特徴
高速・高SEO・かわいいを両立した設計。
まばたき・呼吸・髪の物理
Live2D モデルに組み込まれた自動アニメーションで、いつでも生きているよう。
高速・高SEO
Astro が静的HTMLをプリレンダリング。重いWebGLランタイムは表示領域に入ってから遅延読み込み。
ライト / ダークテーマ
「さくら」と「夜」を切り替え。設定は保存されます。
7言語対応
日本語・英語・スペイン語・ドイツ語・トルコ語・ポルトガル語・中国語に対応。
レスポンシブ & アクセシブル
スマホからワイド画面まで対応。prefers-reduced-motion も尊重。
03 — FAQ
よくある質問
Live2D・パフォーマンス・ライセンスについて。
ハルは本物の Live2D モデルですか？
はい。Live2D Cubism 4 の実モデル（moc3・テクスチャ・モーション・表情）を pixi-live2d-display と PixiJS で描画しています。CSSの模造ではなく、本物のリグです。
なぜ高速で SEO に強いのですか？
ページ本体は Astro で静的HTMLとしてプリレンダリングされ、意味のあるテキスト・メタデータ・構造化データを含みます。重いLive2Dランタイムはキャンバスが表示領域に入ってから遅延読み込みするため、初期表示が速く Core Web Vitals に優しい設計です。
別のキャラクターに差し替えできますか？
できます。任意の Cubism 2/4 モデルを public/assets/live2d/ に置き、スクリプト内の MODEL_URL をそのモデルの .model3.json に向けるだけです。
無料で使えますか？ライセンスは？
サイトのコードは MIT ライセンスです。サンプルモデル「Haru」は Live2D Inc. の無償提供素材で、Live2D の利用条件に従います。商用利用前に必ず規約をご確認ください。