制作背景
留学、ワーキングホリデー、家族移住など、多くの人達が海外への長期渡航をしています。外務省のホームページや現地警察のホームページに現地の犯罪情報を知る事はできますが、それらの多くは文章のみであり具体的にどこに入ったら危なくて、その危ない地域はどんな風景なのかを知る事は非常に難しいです。ProviatoreではGoogle Mapに日本人に人気のある渡航先の現地警察の統計を紐づける事により、渡航前にどの地域でどの犯罪が多く起きているかをストリートビューと地図と一緒に見る事ができます。
Proviatore(プロヴィアトーレ)はラテン語で「前もって」を意味するProとラテン語で「旅人」を意味するViator(ヴィアトール)を少し軽快な響きにしたViatore(ヴィアトーレ)を、組み合わせた造語です。
ターゲット層
海外への長期渡航を検討している18歳から35歳の男女
使用ツール
企画書：Notion
ワイヤーフレーム制作：Claude.ai
技術調査：Google Gemini、Claude.ai
オンボーディング画面の制作：Adobe After Effects
プロトタイプ制作：Figma
モックアップ：Photoshop
動画素材：Freepik
マップ画面の地図と写真の画像生成：Google Gemini
制作過程
1.企画
当初は学校のVRを用いた架空のスマホアプリの画面を３画面作成し、それのモックアップを制作すると言う課題から始まりました。しかしながら、自分としてはそれだけで終わらせるのは勿体無いと思い、個人プロジェクトとしてProviatoreのフルUIの制作に取り掛かることを決めました。
2.企画書
Notionを使用して、Proviatoreを制作する目的、ターゲット層、代表的なペルソナ、実装で必要になると仮定される技術、治安情報の取得方法、Claude.aiで制作したワイヤーフレーム、使用したフリー素材やテンプレート素材の名前とリンク、Google Mapをはじめとする既存サービスの著作権に関して記載されているリンクなどを書きました。架空のアプリではありますが、それでも実際にリリースされることを意識して書きました。
3.ワイヤーフレーム制作
多くの会社がAIを導入し始めているため、このプロジェクトでも企画書で決めた内容を元にClaude.aiにワイヤーフレームを作成させました。ここで意識したのは全てをAIに任せるのではなく、あくまでレイアウトや必要な機能を考えるのは自分で行い、AIはあくまでも作業時間の短縮に使うことを意識しました。
左上：ログイン画面 右上：画面の遷移図 左下：ユーザー登録画面 右下：使用時の動線
4.デザイン制作
渡航前に現地の治安を細く知るというアプリの本質から、キラキラした観光地ではなく日常風景が相応しいと思いFreepikでベルリン、東京、シカゴの路上の動画をダウンロードし、それらを組みあわせた動画をオンボーディング用に使用しました。再生ボタンと停止ボタンを設置し、旅先の雰囲気を味わえる雰囲気にしました。
登録画面とログイン画面には、実際に私がロサンゼルス国際空港とトロントで撮影した写真を使用しました。
登録画面では名前、メールアドレス、パスワード、渡航目的を入力出来るようにし、長期的に渡航目的のデータを元にアプデ出来るようにする。ログイン画面では登録した情報の他にもGoogle、LINE、appleのアカウントでログイン出来るようにし、ユーザーの負担を減らす仕様にしました。
登録画面では名前、メールアドレス、パスワード、渡航目的を入力出来るようにし、長期的に渡航目的のデータを元にアプデ出来るようにする。ログイン画面では登録した情報の他にもGoogle、LINE、appleのアカウントでログイン出来るようにし、ユーザーの負担を減らす仕様にしました。
ホーム画面はすでにアカウントを持っている方の場合は、最近調べた地域を表示し再び調べる際に、最低限の操作で済むようにしています。初めて使用する人と既存ユーザーに、共通してあるのが検索バー、地図機能、おすすめの場所一覧(初利用の場合は登録時のアンケートをベースに作成、既存ユーザーは今までの検索履歴を元に選んでいます)などがあります。特にユーザーは渡航先の地図を繰り返し見ることが考えられます。その為、ログイン時に一番上にとして最近調べた地域を表示することは、ユーザー満足度の向上に貢献すると考えています。
バンクーバーやソウルと言った日本人に人気のある都市にのみ現地の警察のAPIと連動するように設計しています。全ての都市でそれを行うのは不可能な為、今後需要が大きいと判断した都市のみ警察のオープンデータと連携する範囲を拡大することを検討しています。
バンクーバーやソウルと言った日本人に人気のある都市にのみ現地の警察のAPIと連動するように設計しています。全ての都市でそれを行うのは不可能な為、今後需要が大きいと判断した都市のみ警察のオープンデータと連携する範囲を拡大することを検討しています。
最近調べた地域の下に危険レベルについてのボタンを設置しました。画面全体のバランスを崩さない事と普通の文章との、差別化のため下に線を引きました。危険レベルについてをクリックすると、モーダルで各地域の危険レベルの味方を見ることが出来ます。危険情報は外務省に書いてある、内容を反映しております。
ホーム画面には各地域のカードが配置されており、記載内容は警察オープンデータと連携する都市としていない都市で共通のものになっています。国名(地域名)と都市名の下には前述した危険レベルが書いており、その下にはNumbeoのAPIから取得した危険情報を日本語に翻訳したものが書いております。探索するボタンをクリックすると、次のセクションで説明する、地図機能に遷移します。具体的に発生している犯罪とそれらの発生頻度を、タグ状で書いており、カードでは日本人の方が特に気になる５つの犯罪状況を書いています。情報元であるNumbeoではどの地域でも同じ単語が使われるので、事前に日本語訳を用意しています。詳しく見るボタンをクリックすると、モーダルでNumbeoで共有されている犯罪状況が表示されます。プロトタイプでは実在する都市への風評被害を防ぐため、架空の都市名を使用しています。
マップ画面の構成は現地警察APIと連携しているページとしていないページで大きな違いは無く、基本的には上にストリートビュー、下に地図と現在地を示すピンと言う構成です。両パターンとも、ストリートビューのフル表示が可能で、実際にその地域を歩いている感覚になれます。警察のAPIと連動している都市には、三点ボタンがあり、そこから警察APIとの連動画面に遷移できるようにしています。
接続するときにはそれぞれ接続中、接続完了、接続終了中、接続終了のモーダルを用意し、文面もそれらのステータスに合わせて変えています。余計な混乱を避けるため、アイコンは動作中と動作終了時でのみ分けています。アイコンの色はアイコンと同じ色を採用しており、アプリ全体の統一感を演出しています。
左上：データ接続中画面
右上：接続完了画面
左下：通信終了中画面
右下：通信終了画面
右上：接続完了画面
左下：通信終了中画面
右下：通信終了画面
接続後には現地警察のオープンデータと連携した情報をGoogle Mapにオーバーレイした画面になります。そのため、この地図の画面のUIは、都市によって大きく変わります。この都市の場合は、犯罪発生箇所が局所的に表示され、その部分をクリックすると現地で発生した犯罪情報をGoogle翻訳APIコールして翻訳されたものが表示されます。
ホーム画面からアイコンをクリックすると設定情報に遷移します。基本的に登録時に設定した、名前、メールアドレス、パスワード(プライバシーの保護のため伏字として表記されています)、渡航目的が表示されます。登録するユーザーの中には、渡航先が変わる方やこれから渡航先を決める方もいると考えられるため、渡航予定地は後から設定する仕様にしています。治安情報の変更の通知を受けれるようにするため、通知受取も追加しています。登録時に設定した内容も編集ボタンをクリックすると、他同様に同じ画面で変更できます。パスワード変更の場合は本人確認をするため、別ページに飛ぶ仕様にしています。
上：設定画面
下：編集画面
下：編集画面
アカウントを削除する時はモーダルが表示され、操作ミスによる削除を防ぐ仕様にしており、他機能よりも操作ミスを起こした時の代償が大きいため赤字にしています。
Figma Link
リンクから実際にProviatoreのプロトタイプを体験してみてください！
