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

株式会社cocoloni

2022.4 - 2022.8 | UI/UX design / CSS coding

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設計が基盤として現在も拡張され続けている