コテージキャンパス

https://github.com/mai1101/team-ar-app

CSS

JavaScript

HTML

宿泊者の思い出が、次の旅人の地図になる。

Yuuka KOBAYASHI

YUME TAKANO

Mai Asai

推しアイデア

無人コテージに泊まった宿泊者が、旅の思い出をその地域のマップとメッセージに残していくアプリ。宿泊者は過去の宿泊者の記録や思い出を、メッセージや写真・音声から見ることができ、自分たちも記録を残すことで次の宿泊者に繋いで行く。

作った背景

おもてなしの利点の一つは人の温かみを感じること。ホテルの客室などにあるお客さんが書き加えることのできるノートから着想を得て、無人コテージにて、宿泊者から宿泊者におもてなしをするというアイディアから本プロダクトを開発した。

推し技術

AR.jsとMindARで現実世界に星座・地図チェキをブラウザARで重ねて表示。Firestoreのリアルタイム同期で他の旅人の星が瞬時に現れる。チェックアウト時の手書き絵が次の宿泊者の背景を飾る体験設計が特徴。

プロジェクト詳細

image

image

主な機能

①チェックイン・チェックアウト時 チェックイン時にユーザ名を決めます。チェックアウト時にイラストを残せます。 ②地図を見る 観光地によくある地図をカメラにかざすと、他の宿泊者が残した記録が見れます。 ③星空を見る ARで上方を見ると過去の宿泊者の声が聞こえます。

詳しい説明

1. チェックイン・チェックアウト

体験の流れ

  1. コテージに到着し、初めてアプリを使う時チェックインをします。チェックイン時にユーザ名を入力します。
  2. コテージから去るとき、手書きのイラストを残すことができます。

工夫した点

1.画面全体がノートをイメージしており、過去の旅行客の残していったイラストと写真が背景に表示されるようにしています。

2.ページをめくることも可能で、めくると過去の旅行客が残していったイラストを見ることができます。

2. 地図を見る

宿泊施設に置かれた手書き観光マップにスマホをかざすと、過去の宿泊者が残した「旅の記録」がAR空間に浮かび上がる。

体験の流れ

  1. マップにかざす:観光マップにスマホカメラを向けると、チェキ風のカードが地図上に出現。
  2. カードをタップ:宿泊者のコメント・名前・投稿日が見られます。
  3. 思い出を残す:自分も写真やコメントを投稿して地図上に配置できます。

工夫した点

  • 手書きマップを AR ターゲットに:印刷した観光マップを MindAR.js に認識させ、地図上の座標に合わせてチェキを配置しました。
  • 季節フィルター:夏に訪問したのに冬の記録が表示されても微妙、カードが増えすぎるという問題を解決するために、登校時の季節(前後合わせて3ヶ月)に投稿されたカードだけ表示しています。
  • デザイン:カードは写真・コメント・投稿者名・日付がチェキのような見た目で表示されるようにしました。また、「カメラを起動する」の画面も他の機能と統一感のあるデザインにしました。
  • 本人のみ編集可:自分が投稿したカードだけ編集・削除できます。
  • カード移動:ノートをイメージしているので、カードを自由に移動できます。移動させると元々どこにあったかわからなくなるため、カードと元の位置を繋ぐ線を追加しました。「元に戻す」ボタンで一気に元の状態に戻ります。*
  • いいね機能:いいねが多いほど前面に表示されるようにしました。

3. 星空を見る

ARで上方を見ると星空が広がり、それぞれの星から過去の宿泊者のメッセージを見ることができます。

体験の流れ

  1. 星をタップ:過去の宿泊者のメッセージや音声を視聴できます。
  2. 星を残す:自分もメッセージや音声を、新たな星として残すことができます。

工夫した点

  • メッセージだけでなく、音声も記録できるようにしました。音声が記録された星はピンク色になります。
  • 過去のメッセージに「いいね」ができるようにし、10以上の「いいね」を集めた星は黄色に変わるようにしました。
  • 「いいね」が10以上で、かつ近い位置にある星同士が線で結ばれることで、星座が生まれます。
  • 背景にタップへ反応しない細かい星を散りばめることで、投稿された星がまだ少ない場合でも、画面が寂しくならないようにしました。image

Yuuka KOBAYASHI

@18369f2df9fd6f9a