作成の目的
スマホアプリゲーム「ミラクルニキ」のアイテムを、ゲーム内ではできない「色で検索」できるようにすることを目的としたファンメイドサイトです。
プレイヤーが思い描いたカラーイメージからアイテムを探せるようにし、日々のコーデ研究をもっとスムーズかつ楽しくすることを目指しました。
デザインのポイント
検索が主役となるサイトのため、メインビジュアルを置かず、立ち上げと同時に検索フォームにアクセスできるシンプルな設計にしました。ピンクを基調としたやわらかい配色で、ゲームの世界観に寄り添いつつも、情報が認識しやすいUIを意識しています。
- ゲームの可愛らしさを損なわないよう、ピンク×ホワイトをベースにした柔らかいトーンで統一
- カテゴリ・色・キーワードを一画面で操作できるよう検索エリアを大きく配置し、スクロール量を最小限に
- 角丸ボックスやアイコンを使い、スマホアプリのような直感的な操作感を意識したUI設計
- メインビジュアルの代わりに、トップでランダム表示されるアイテム一覧を配置し、思いがけないコーデのきっかけに
- 星柄背景や淡い装飾で「ときめき」は残しつつ、検索結果やフィルタの視認性を優先した情報設計
担当範囲
企画／情報設計／UIデザイン／フロントエンド実装（HTML・CSS・JavaScript）／WordPress構築・カスタマイズ／データ登録・サイト運用管理
使用ツール
WordPress / HTML・CSS / JavaScript / Canva
制作時間
初期構築：約数週間（空き時間で制作）※公開後も随時機能追加・改修を継続
