『cocoloni占い館』
新規開発/リニューアル

Overview

[ サービス概要 ]

人気占い師が多数監修する占いコンテンツを集約した、
占いポータルサイト。
ライト層向けの『Sun』と、より濃いファン向けの『Moon』の
2ブランドで展開。

[ プロジェクト背景 ]

10年以上運用を続けてきた既存サイト『本格占い館』は、
機能追加と改修を重ねる中で情報構造が複雑化し、
デザインもPC主体のままだった。
そこで、より幅広いユーザーが入りやすい“入口サイト”として再定義することになり、ライト層向けとして『Sun』を新規開発、
既存コンテンツを『Moon』に移行しUIをリニューアルするという
2軸でのブランド再構築することになった。

[ 目的 ]

• 長期運用されてきた既存サイトを、現代のユーザー行動に合わせて再設計し、継続的に利用されるサービスへと刷新すること
• 『Sun / Moon』2ブランドの世界観を整理し、今後の運用・拡張を見据えたUI基盤を整備すること

※本ポートフォリオでは、Sun を中心に掲載しています

Project

• 既存の「本格占い館」を刷新し、『cocoloni占い館 Sun / Moon』として再構築
• 『Sun』では初めて占いに触れるライトユーザーが“雰囲気で引かれやすい”デザインと、無料で試せるコンテンツを軸に入口体験を再設計
• 『Moon』では既存占いコンテンツの仕様に準拠する必要があったため、大枠のレイアウト設計や最低限のUI整理を中心に対応
• PC/SP 両対応で、更新頻度の高いキャンペーンや新着メニューも運用しやすい構造に整理

My Role

• サイト全体のUIデザイン（PC/SP）
• トップ〜下層のページテンプレート設計
• ロゴ・アイキャッチイラスト制作
• HTML / CSSコーディング（一部）
• リリース時に必要なバナー類・特集ビジュアルの制作、品質チェック

Problems & Constraints

• 長年利用している既存ユーザーの「慣れ」を壊し過ぎずに、新規ユーザーにも分かりやすいUIにする必要があった
• Sun / Moon でターゲットやトーンが異なる一方、運用コストを抑えるために極力共通コンポーネントで構成する必要があった
• キャンペーンや新メニューの更新頻度が高く、バナーや特集の差し替えを前提にしたレイアウト設計が求められた
• 既存コンテンツを集約したMoon側では仕様的な制約が多く、すべてを作り直すのではなく段階的な刷新が必要

Design Approach

[ Sun ]

• 20〜30代女性を想定し、やわらかさと明るさを感じる配色とイラストトーンを設計
• 初めて訪れたユーザーでも、「無料で試せる」「どんな占いがあるか」がすぐ分かるブロック構成に整理
• カード型レイアウトや余白設計により、バナーが引き立つようUI自体はシンプル寄りに調整

[ Moon ]

• 既存の占いコンテンツ自体のデザインは踏襲しつつ、ヘッダー / フッター / ナビゲーション / 余白設計などページ骨格とUIフレームを中心に再設計
• ボタン形状やコンポーネントのルールはSunと共通化し、運用しやすいデザイン基盤へ整理

Outcomes

• リニューアル後、Sunの無料コンテンツ経由での新規ユーザー流入が増加
• UI整理によりサイト全体の統一感が向上し、運用時の拡張性が向上
• リニューアル実施後もサービス改善が継続されており、当初設計したUI設計が基盤として現在も拡張され続けている