インターネットを駆使して失踪した少女の行方を追う「リアル体験型モキュメンタリー」ゲーム 「HAZE coffee #ある珈琲店にまつわる謎」ゲームを見るのWebサイト全般を制作しました。 珈琲店を経営する家族に起きた事件を、SNSやホームページ上の情報をたどって考察するもので、 問題の答えを入力すると次のページに進んでいける構造になっています。 api認証とハッシュを使って謎解きのネタバレを防いでいるほか、時代設定に合うサイトの雰囲気を細かに再現しました。
サイトを見る
担当・制作時間
ワイヤーフレーム(10h) デザインカンプ(10h) コーディング(各15hほど)
VisualStudioCode / Figma / Photoshop / Illustrator
サイトの目的
ゲームのメインコンテンツ。ゲームの設定であるコーヒー店や人物のSNSが実在するかのように没入して楽しんでもらう。
ターゲット
20~30代男女
デザインについて
没入感を楽しむゲームなので、全体的に「実在するようなデザイン」を意識しています。特にSNSのページは「2004年〜2005年に女の子が趣味で作成したSNS」という設定を厳密に再現し、ホバーの感触や素材選びなどにこだわりました。
コーディングについて
「謎解きの答えが正解であれば、次のページへ遷移できる」という仕組みは、ソースコードからのネタバレを防ぐため、 正解の答えをハッシュ化したうえで、api認証を使ってリダイレクトさせ、次のページにリンクするという構造にしました。 また、ヒントサイトはプレイヤーの進行度によって少しずつ閲覧できるよう、細かな入れ子構造にこだわりました。
