Luna Arcana
LP Design
占い師のためのスピリチュアル系ランディングページ
プロジェクト概要
個人で活動する占星術師・宵月詠奈のブランドサイトとして、予約獲得を目的としたランディングページを制作しました。
スピリチュアル系サービスにありがちな「派手すぎる・安っぽい」デザインを避け、深夜の静寂と宇宙的な神秘感を纏った高級路線を採用。訪問者が「この人に鑑定してもらいたい」と感じるブランド体験を設計しました。
デザインから実装まで一貫して担当し、WordPressカスタムテーマとして納品しています。
解決すべき課題
信頼感と神秘性の両立
スピリチュアル系サービスは「怪しい」と敬遠されやすい。高級感のあるビジュアル言語と実績の明示によって、初見の訪問者にも信頼を感じてもらう設計が必要でした。
コンバージョンへの導線設計
世界観に没入させながらも、自然に「無料相談」ボタンへ誘導するUXが必要。情報設計とCTAの配置を慎重に設計しました。
パフォーマンスを保ちながらのビジュアル表現
星空・パーティクル・グロー効果など重厚なビジュアルを、外部ライブラリに依存せずCanvas APIとCSS animationのみで実装。軽量さと表現力の両立が求められました。
デザインシステム
宵月詠奈の言葉で、あなたの星を読む。
制作プロセス
リサーチ・ターゲット定義
競合となる占い師サイトを20サイト以上調査。「高単価にもかかわらず信頼される占い師サイト」の共通要素（プロフィールの具体性・実績数値・世界観の一貫性）を抽出し、設計方針を策定しました。
コンセプト設計
「深夜0時、静寂の中で宇宙と対話する」というコンセプトを軸に、カラー・フォント・モーションのトーンを決定。ネイビー×ゴールドの配色は「格調」と「神秘」を同時に表現するために選択しました。
ビジュアルデザイン・実装
Figmaでワイヤーフレームと高精度デザインを作成後、WordPressカスタムテーマとして実装。パーティクルアニメーションはCanvas API、グロー効果はCSS box-shadowとfilterで表現し、外部JSライブラリへの依存をゼロに抑えました。
改善・調整
ファーストビューのビジュアルインパクト強化、鑑定メニューの優先度の可視化、実績数値の大型表示など、コンバージョンと信頼性の両面から継続的に改善を実施しました。
成果・工夫ポイント
（Canvas API + CSS のみ）
（Hero / About / Menu / Voice / Flow）
（全セクションでトーン統一）
「怪しく見えないスピリチュアルサイト」という矛盾に思えるテーマに対し、フォント・カラー・余白・モーションを精緻にコントロールすることで、神秘性と信頼性が共存するブランド体験を実現しました。
学びと振り返り
世界観は細部に宿る
スクロールバーの色・引用符の装飾・ボタンの発光まで、細部のトーンを揃えることで全体の完成度が大きく変わると実感しました。
コンバージョン設計との両立
世界観に没入させる演出と、迷わずCTAに辿り着けるUXは、しばしば相反します。情報設計の順序とボタン配置の反復が重要でした。
Canvas APIの表現可能性
重いライブラリを使わずとも、Canvas APIとrequestAnimationFrameで豊かなビジュアルを実現できることを体感。パフォーマンスへの意識が深まりました。
次回への課題
モバイルファーストの設計をより早い段階から取り入れること、Figmaでのデザイントークン管理を徹底することが今後の改善点です。
担当範囲
構成設計 / デザイン / コーディング / WordPress実装
使用ツール
Figma / Photoshop / VS Code / WordPress / Elementor
このLPが向いている方
・スピリチュアル・占い系の世界観を大切にしたい方・高単価でも信頼感のあるLPを作りたい方・女性向けの上品なブランド設計をしたい方・感性と導線の両方を整えたい個人事業主の方
同じような世界観のLP制作をご希望の方へ
世界観と信頼感を両立したLP制作に対応しています。
占い・美容・個人サービスなど、感性を大切にしたデザインをご希望の方はお気軽にご相談ください。