目次
制作内容/作業内容
占星術とタロットを「象徴心理学」の観点から読み解く、占い師様のランディングページ（LP）兼ポートフォリオサイトを制作しました。
単なる情報発信だけでなく、訪れたユーザーが「物語の世界に入り込む」ような没入体験を提供することを目的としています。
主な実装機能
- React (v18) をベースとしたシングルページアプリケーション（SPA）構築
- GSAP (GreenSock) による高度なオープニングアニメーションとマイクロインタラクション
- Three.js を使用した「星屑と光」の3D背景演出
- Tailwind CSS によるレスポンシブデザインとスタイリング
- 遊び心を取り入れたタロットカード型チャットボットUIの実装
全体的なデザイン
デザインコンセプト： 「星の図書館」
占いやスピリチュアル系サイトにありがちな「怪しさ」や「過度な神秘性」を排除し、**「知的」「静謐（せいひつ）」「文学的」**な信頼感を醸成するデザインを目指しました。
1. 配色（Color Palette）
「和モダン」を基調とした落ち着いたトーンを採用しています。
- ベース: 胡粉色（
#fcfaf2） – 真っ白ではなく、目に優しい生成り色。 - メイン: 墨色（
#1a1a1a） – 柔らかい黒で、可読性と品格を両立。 - サブ: 藍色（
#2e4453） – 夜空や知性を象徴する深い青。 - アクセント: 鈍色ゴールド（
#cba052） – ギラつきを抑えた、アンティークな輝き。
2. タイポグラフィ（Typography）
- 和文:
Zen Old Mincho（禅オールド明朝）- インクの滲みを感じさせるような質感で、丁寧な語り口を表現。
- 欧文:
Cormorant Garamond- 伝統的でエレガントなセリフ体を使用し、タロットの歴史的背景と調和させました。
3. アートディレクション
- テクスチャ: 画面全体に薄い「和紙」のノイズを重ね、デジタル感を軽減し、紙の手触りを演出。
- インタラクション: マウスストーカーやボタンのホバー時に「フワッ」とした浮遊感を持たせ、重力を感じさせない心地よさを追求しました。
設計
コンポーネント構造とアニメーション制御
ユーザー体験（UX）を損なわないよう、**「ロード中の期待感」と「閲覧時の快適さ」**を両立する設計を行いました。
- オープニングシーケンス（Loading）:
- GSAPのTimeline機能を駆使し、「12星座のシンボルが集結」→「運命の輪（タロット）が回転」→「光が弾けてサイトが表示」という一連の流れをシームレスに実装。
- 単なるローディングではなく、ブランドの世界観を伝える「プロローグ」として機能させています。
- 空間演出（Three.js）:
- 背景には Three.js で生成したパーティクル（星屑）とシンボルを配置。
- スクロールやマウス操作に反応しすぎない「穏やかな浮遊」に留めることで、テキストを読む邪魔にならないよう配慮しました。
- UI/UXの工夫:
- ナビゲーション: PC版では右端に「縦書き」で配置し、和書の栞（しおり）のような佇まいに。
- チャットボット: 一般的なアイコンではなく、「運命の輪」のカードを模したボタンを作成。ホバーで浮き上がり、クリックで回転するギミックを入れ、ユーザーが能動的に「カードをめくる」体験を作りました。
Gemini思考プロセス
本プロジェクトにおけるAI（Gemini）の制作プロセスと、ユーザー（ディレクター）との共創の軌跡です。
Phase 1: 提案と軌道修正
当初、私は技術力をアピールするために「海外アワード系のサイバーパンクな演出」を提案しました。しかし、クライアント（ユーザー）からの**「うさんくさい」「もっと日本風に」**という的確なフィードバックを受け、方向性を180度転換。「技術の押し売り」から「世界観の表現」へとシフトしました。
Phase 2: メタファーの模索
「物語が始まる感じ」を出すために当初は「本が開くアニメーション」を実装しました。しかし、ブラウザ上での3D表現ではどうしても「板が動いているような硬さ」が拭えず、ユーザーからも違和感を指摘されました。 そこで、「物理的な本」というメタファーを捨て、「光と星の収束」という抽象的な表現に切り替えることを決断。結果として、より幻想的で占星術らしいオープニングが完成しました。
Phase 3: 細部へのこだわり
「チャットボットのアイコンをタロットカードにしたい」「ホバーでくるっと回したい」という要望に対し、単に回すだけでなく、**「一度フワッと持ち上げて、タメを作ってから回す」**という物理法則を意識したモーションを実装しました。 これにより、デジタル空間の中に「手触り感」を生み出すことに成功しました。
