株式会社タカラッシュ

誰もが“世界観”に没入できるUI/UX改善プロジェクト

株式会社タカラッシュ

Takarush Co., Ltd.
宝探し謎解きを探せるサイト「ハンターズヴィレッジ」を運営。多くのコンテンツを保有する謎解き・宝探しのポータルサイトとして、ユーザーと自治体・企業を結ぶプラットフォームを提供しています。

支援前の課題

• 検索やお気に入りなどの機能が十分に活用されず、ユーザーが求めるコンテンツにすぐにたどり着けない
• サイト上の言葉やビジュアル表現がヘビーユーザー向けで、初見・ライトユーザーが「難しい」と感じて離脱してしまう
• 会員登録機能はあるもののメリットが感じづらく、新規ユーザーのリピート率が低い
• Webサイトのデザイン・ユーザビリティに対して依頼を頂く企業からの印象をよくしたい

グッドパッチの対応とご支援後の成果

• ヘビー・ライトユーザー双方を取り残さないUI設計を実現し、検索機能やクエスト詳細画面を改善
• デザイン案のプロトタイプを制作し、2回のユーザーテストを実施して仮説を検証
• 「ハンターズビレッジらしさ」とは何かを再定義し、世界観を刷新。統一されたビジュアルデザインで、冒険心をくすぐるワクワク感を演出
• 初心者向けオンボーディングページを作成し、独特な世界観や用語の理解を促進
• 「コイン」機能の導入により、発見報告（クリア記録）を促すインセンティブ設計を実現

まるで物語の主人公になったような気分で、実際に隠された宝物を探し出すワクワク感を体験できる、宝探し謎解きイベントサイト「ハンターズヴィレッジ」を運営する株式会社タカラッシュは、多くのコンテンツを保有するポータルサイトとして発展してきました。
しかしその裏では、デザイナー不在のまま運用が続いたことにより、サイト構造が複雑化し、「参加したいイベントにたどり着けない」といった声が多く寄せられるように。特に、専門用語や独特の世界観が前提となっているサイトは、初めて訪れるユーザーにとってはハードルが高く、せっかくの“ワクワクする体験”の入り口で離脱してしまうという課題を抱えていました。
またハンターズヴィレッジは、会員登録数やアクティブ率の高さを強みに、自治体や企業に対して「イベント開催の場」としての魅力をアピールしています。そのため、Webサイトのデザインからレガシーなイメージを持たれてしまったり、使いやすさに問題があると、サービスの信頼性を損なうリスクをはらんでいました。こうした背景から、UI/UXの観点での改善を目的に、グッドパッチへご相談いただきました。

使いやすく、親しみやすいサイトを目指して、まずはユーザーインタビューを実施しました。対象はライトユーザーとヘビーユーザー。それぞれに普段の利用シーンや使いづらいポイント、ハンターズヴィレッジならではの魅力について詳しくヒアリングしました。すると、興味深い発見が。
それは多くのヘビーユーザーが「謎解き」そのものよりも「宝探し」に価値を感じていたということです。宝探しイベントによって、普段の行動範囲を超える非日常体験ができることが、継続利用のモチベーションになっていると分かったのです。
これはインタビューをしなければ分からなかった事実であり、後のペルソナ設定において重要な参考情報となりました。また「発見報告」と「クリア」の違いが分からないなど、ユーザーが頻繁に迷う用語も発見でき、改善のための多くの示唆を得ることができました。

次に、ヒューリスティック評価に基づくUI/UXフィードバック※も実施。実際のユースケースを想定しながら、ユーザーが操作に迷いそうなポイントや、体験の流れを妨げる要素を一つひとつていねいに洗い出しました。

※UI/UXフィードバックとは・・・・・
ユーザーインターフェース（UI）とユーザー体験（UX）の専門家が、サービスの課題を分析レポートする、グッドパッチの人気サービス。定量分析だけでは発見しきれない、使いやすさや分かりやすさの改善点を発見できます。UI/UXフィードバックの詳細はコチラ​​

三者（ユーザー、グッドパッチデザイナー、クライアント）の視点を起点に、コンテンツや構造をゼロから再設計。クライアントからの要望もていねいにすくい上げつつ、「ユーザーにとって本当に使いやすい形とは何か？」を軸に、何度も検討を重ねました。複数の改善案が考えられる場合にはすべてのアイデアを画面に起こし、選択肢を比較できる形で提案することで、何が最適なのかを徹底的に考え抜きました。
作成したワイヤーフレームは、素早くプロトタイプに起こし検証に移行。未利用（利用意向あり）の方、ライトユーザー、ヘビー（プロ）ユーザーまで、計9名の方にご協力いただき、ユーザビリティテストを行いました。テスト中に発見した課題はその場でUIデザイナーが修正案を検討し、すぐに次の検証に反映させるなど、アジャイルな開発サイクルを回しながら、より良い体験を追求していきました。

ハンターズヴィレッジにおいては、「発見報告」という行為が重要な役割を持ちます。これはタカラッシュの宝探しをクリアしたことを証明するキーワードを、ハンターズヴィレッジのサイトに入力するというものです。ユーザーは「発見報告」によってポイントなどの報酬を獲得できるようになります。
しかしながら、現状は特に「タカラッシュと認知せずに宝探しを楽しんだ人」が発見報告に至りづらい、という課題がありました。
これに対しグッドパッチでは、クリア後にユーザーが自然に発見報告を実施できるよう、画面の表示タイミングや文言を工夫しました。その上で、実際のユーザーを対象にテストを実施しました。
すると、確かに初見ユーザーでも「発見報告」への導線に気づいて実施しようとしてくれました。ただ、「発見報告」をするために必要な「会員登録」で離脱してしまうユーザーが多くいたのです。

テストの結果を踏まえ、導線をさらにブラッシュアップすることに。会員登録を促す画面に、ユーザーが登録や発見報告のメリットを事前に理解できるよう、「コンテンツの豊富さ」が伝わる設計に変更しました。
その他にも多くの試行錯誤を重ね、検証から納品まで約2カ月を費やし、最終的に100画面以上を作成して完成に至りました。ユーザーテストから得られた“予想外の発見”を体験に反映させることで、より現実的で効果の高い会員登録フローを実現できました。

検索フロー全体の設計にあたっては、ユーザーインタビューで明らかになった行動パターンの違いを反映しました。ライトユーザーは「自分が行けるエリアで実施しているイベントがあるか」を重視し、ヘビーユーザーは「終了期限が近いものから選ぶ」傾向があったため、検索条件や情報の見せ方にも配慮をしました。
検索機能では、ヘビーユーザー向けに「すでにクリアしたクエストを除外できる機能」を追加。これにより、まだ挑戦していないクエストを効率よく探せるようになりました。一方、ライトユーザーに対しては、「エリアではなく都道府県での絞り込み」「クエストの魅力や特徴にフォーカスした絞り込み」「ジャンルなど好みの世界観での絞り込み」など、絞り込み機能を改善することで、自分の関心や行動範囲に合ったクエストに出会いやすくしました。

クエスト詳細画面では、ハンターズヴィレッジや謎解きイベントに詳しくない人でも情報を理解しやすい構造に変更。ヘビーユーザー向けにはすぐに発見報告（クリアを記録する機能）ができるよう上部にボタンを配置し、好みの情報にすぐ飛べるようなタブを追加しました。
これにより、さっき読んだ情報を見返したいライトユーザーも、ピンポイントの情報を見たいヘビーユーザーも活用できるようになりました。情報量が多いページでも任意の情報にたどりつきやすくするUIパーツを配置し、それぞれが「見やすい」と感じる画面設計を実現しました。

お気に入り機能は、これまで有料会員ユーザーのみの機能でしたが、リニューアルで無料会員ユーザーにも利用できるように。ヘビーユーザー向けには発見報告していないクエストのみを探せるように改善し、お気に入り内での絞り込みも可能にしたことで、特定のエリアにあるクエストを一気にクリアしたいというユースケースも満たすUIとなりました。

リニューアル前のサイトは、ビジュアルデザインにルールがなく、さまざまなテイストが混在していました。そこで今回のプロジェクトは、「ハンターズヴィレッジらしさ」とは何かを見つめ直すところからスタートしました。
まずは、クライアントが目指すサイトイメージをヒアリング。方向性をすり合わせながら、複数のビジュアル案を提案しました。提案時にはムードボードを用い、世界観やテイストの具体的なイメージを視覚的に共有。「冒険感」をどう表現していくかを軸にしながら、クライアントと認識をそろえていきました。
実際のデザイン制作では、カラーやフォント、アイコン、イラストなど、細部にまでこだわりながら、スマートフォンとPCの両方に最適なレイアウトを検討。マップアイコンや羅針盤など、冒険を連想させるモチーフを積極的に取り入れることで、サイト全体に“冒険の舞台”としての統一感をもたせました。

イラストには遊び心を加え、「TAKARASH GUILD」や「QUEST BOLD」といった特別なタイポグラフィを採用。 また、地図のイラストには敵キャラとして木やヘビをさりげなく潜ませるなど、遊び心も含んだデザインを制作しました。
さらに、こうした統一感のある世界観を守るためにも、今後、誰が制作しても一定の品質を保てるようにビジュアルのルールを整理。グッドパッチが離れた後も新規ページをスムーズに制作できるよう、詳細なビジュアルガイドラインを整備し、クライアントへ引き継ぎました。

ハンターズヴィレッジには独特な世界観や用語が複数存在しており、初心者にはとっつきにくいという問題がありました。そこでユーザーセグメントに合わせて、「初めての方へ」「ハンターズヴィレッジとは」という2つのページを大幅に改善しました。各ページの構成から検討し直し、それぞれのユーザーに最適な情報設計を行いました。
「初めての方へ」は本当の初心者向け、「ハンターズヴィレッジとは」はハンターズヴィレッジを遊び始めて、より具体的な仕様（報酬が何をやるといくらもらえるかなど）について知りたい方向けに情報を整理しました。
その結果、検証において、ハンターズヴィレッジを認知していないユーザーから「どういうサイトなのか分かった」と好評でした。
また、エンタメサービスならではの独自世界観や特徴的な用語（「発見報告」「チャレンジパラメーター」など）が多くあり、それらを世界観を崩すことなく初心者に分かりやすく伝えるため、説明文とビジュアルを追加しました。用語の説明には直感的に理解できるイラストを添えるなど、ビジュアルとテキストを組み合わせた説明方法を採用しました。

ユーザービリティの改善と並行して、新たなインセンティブとなる「コイン」機能の追加も実施しました。これはタカラッシュが実現したい最大の機能でした。ユーザーから、「発見報告後に貯まるポイントに対して、サイト上で貯まるだけでは価値を実感できない」という声があったため、貯めたインセンティブを食品や割引券など、リアルに価値を実感できるものにしたかったのです。
コインの導入にあたっては、「そもそも、なんのためにコイン機能を導入する必要があるのか？」という目的を言語化し再整理することから着手しました。議論を繰り返し目的を整理した後にユーザインタビューを実施し、コイン機能によってどのような成果が見込まれるのか検証をしました。

ユーザーインタビューを行ったところ、「コインは新規会員登録のモチベーションにはなりえないが、発見報告を後押しするインセンティブとしては有効である」という結論に至りました。この事実を踏まえ、あくまでもクエストをクリアした後に報酬を得るための「発見報告」動作の動機づけとして位置付けました。
この検証結果を基に、具体的な仕様を策定し、UIデザイナーと協働して該当ページを作成しました。

また「ポイント」「経験値」「レベル」「ランク」など、クエストクリアによって貯められるものが多種多様であり、特に初心者ユーザーからすると何によって何がどう貯まるのかが直感的に理解できず混乱を招いていました。
そこで本当に必要なものは何か、それをどのように見せたらいいのかを整理し、該当画面を作成していきました。貯まるものを分かりやすく表示し、特にレベルアップしたことを視覚的に表現することで、ワクワクする・さらに上を目指したくなる体験を目指しました。アニメーションや視覚効果を用いて、達成感を感じられる体験を取り入れました。

作成したプロトタイプを用いて、再度ユーザーテストを実施。ヘビーユーザーからは絶大な評価を獲得しました。

絞り込み、気づかなかった。終了日が近い順はめちゃくちゃ重要なので使いたい。これはありがたい！！！

絞り込みの機能が、いろいろ考えられて選びやすくなってると思えた。何よりこの『クリア済みを除く』が推し。すごく使い易い

サクサク進むし、みやすい。リニューアルを楽しみにしています

また、ライトユーザーもサイト内を回遊することでやりたいと思うクエストに出会えるようになりました。

最初になんとなく登録して以来開いていなかったが、ハンタースコアを貯めるとどうなるかが見えたので、もう一回使いたいなと思えた

クエストの見つけやすさ、絞り込みとかの表示は見やすかった。新しい探すという観点ではやりやすかった

行きたいイベントがあってみる、という場合、その後何度も繰り返し行きたくなるような仕掛けがあると思った
テスト結果を受けて最終的な調整を行い、UI/UX観点の重要性をエンジニア陣にも理解してもらいながら、開発工数とのバランスを取りつつ最適な設計を実現しました。

今回のリニューアルプロジェクトでは、複数のペルソナ（ヘビーユーザーとライトユーザー）を同居させるUI/UXデザインの実現という難しい課題に取り組みました。クライアント要求である初見・ライトユーザーに向けた画面設計を重視しつつ、既存のヘビーユーザーの体験を損なわないというバランスのとれたUI/UXを実現し、エンタメサービスならではの独自の世界観や特徴的な用語を、世界観を崩すことなく初心者に分かりやすく伝えるという工夫も盛り込みました。
さらに、新しく実装するコイン機能に対して、ユーザーメリットと事業としての成果向上を両立させる設計も実現。ユーザーインタビューを通じて得られたインサイトを基に、役割を整理しインセンティブを設計しました。
グッドパッチが提供したすべての成果物は、タカラッシュ社の今後の発展に活用できるよう詳細なドキュメントとしてまとめられ、デザインシステムやビジュアルガイドラインは、クライアントが自社で継続的に活用できる形で提供し、プロジェクト終了後も一貫したデザインクオリティを維持できるようサポートしました。

Producer：三重野 竜司
UX Design：秋野 比彩美、今宿 未悠
Art Direction：栃尾行美
UI Design：河内 愛美
営業：片岡 圭史