• # 情報設計
  • # UI design

P o r t l

日本初のボートシェアリング
予約プラットフォーム

サービスの概要

船を貸したいオーナーと船を借りたいユーザーをマッチングさせる日本初のボートシェアリングサービス。

富裕層の遊びのイメージがある船の貸し切りをシェアリングサービス化することで、個人でもリーズナブルな価格で手軽に利用できるものに。

基本的に船の持ち主であるオーナーが操縦も行うが、オーナーが操縦できない場合でも、オーナーが信頼できるキャプテンを操縦者として採用することも可能。

Portlの予約プラットフォームでは、ユーザーがボートを予約して利用するまでのフローと、オーナーがボートやキャプテンを登録してユーザーに提供するまでのやりとりをすべてオンライン上で完結できるwebサービスである。

クライアントの課題・要望

予約フローを最適化したい

  • 現行のものは取り急ぎで作ったため、どの画面も不完全な状態である。
  • 船の料金体制はオーナーによって異なるため、ユーザーの予約リクエストから確定までに両者間で料金を決める必要があるため、予約フローが複雑化している。
  • 船を扱う事業は法律上ルールが厳しく、オーナーのボート登録がかなりめんどうなのでストレスのない設計にしたい。

ターゲット

幅広い年代にみやすいデザインにしたい

これまでの予約者の傾向から、ボートを利用する顧客は20~30代の若者である一方、ボートを登録するオーナーは50~60代のため、年代関係なく使いやすいシンプルなデザインにしたい

解決策

複雑な予約フローを全体的に俯瞰するため、ユースケースの洗い出しとメインループの確立

法律上キャプテンの選定は、オーナーと面識のあるキャプテンのみになるため、ユーザーの予約フローには関与しない。

  • ユーザーのあらゆる行動パターンを洗い出し、最も理想的なフローをメインループとして確立させる。
    予約リクエストから予約完了までのやりとりでユーザーが迷子にならないよう、オーナーとユーザー間で常にステータスがわかる状態にしておくのが望ましい。
  • 船に関する不安や料金のトラブル防止のためにオーナーとユーザー間でコミュニケーションが取りやすい状態が望ましい

各ボートの登録やユーザー登録に必要なエンティティの洗い出し

登録情報が膨大かつ各項目も簡単に記入できるものではないため、一度に登録まで持っていくのは難しいそうだ。
何度かログインすることを考慮した設計が必要である。

ワイヤーフレーム

日本ではまだ存在しないサービスのため、海外の同業者のUI設計を基盤制作。 検索から予約リクエストまでのユーザーフローは日本の優れたシェアリングサービスを参考に制作

トンマナ

海を連想する青をメインに、非日常のワクワク感や賑やかなパーティーをイメージさせる黄色をアクセントに採用。

UIデザイン

コンポーネント

年齢層が幅広いため、操作する人がなるだけストレスがないよう、不要な装飾、配色はなるべく避け、最小限のコンポーネントに抑えシンプルなデザインを意識した。

TOP

ボートを借りて様々な遊びが体験できることを認知してもらうため、ファーストビューで体験のバリエーションを見せるUIに。
同様にキャッチコピーはアニメーションでサービス名が変化させた。

予約フロー

検索画面では、フィルターや絞り込み機能を追加。
借りれる場所が視覚的にわかるよう、マップ上で値段やボートがわかるUIに。

予約リクエスト前に料金の交渉や不明点を相談できる機能を追加し、両者間のトラブル防止に。

メッセージ機能・予約管理ではユーザーが今どこにいるのかを明確にするため、ステータスの変化を常に表示し、次にとるべき行動の導線をもうけておく。

ボート登録

登録情報の多いボート登録画面を1画面の情報量を減らすことでストレスを軽減。
免許証情報など、一度PCから離れる必要がある項目があるため、情報の一時保存ができるように。

どのステップからでも入力できるようにすることで登録の一歩のハードルを下げる。

マイページ

開発費用の都合上、オーナー、ユーザー別でマイページを制作ができなかったため、ベースはゲスト用のマイページとし、ボート登録を行った時点でオーナーに必要なメニューが追加されるような仕様でUIを制作。

メッセージや予約管理は、ゲストとオーナーで混合しないように、タブで分けてオーナー、ユーザーどちらも使いやすい設計に。

鬼塚 勇士YUSHI ONITSUKA

わかりやすい世の中に。

わかると楽しいし、好きになる。でも、わからないと嫌いになってしまう。
やりたいのに、好きなのにわからなくてやめてしまうのはもったいない。
独学でなりたかったデザイナーになれた自分だからこそ、
「わかること」の可能性と希望を強く感じてます。
デザインの力でわからない壁をなくし、
「好き」や「やりたい」を増やしたいというのが私のコンセプトです。

photoshop, illustlator, XD, figma, HTML/CSS, Javascript, wordpress

  1. 2018年 4月~ webディレクター
  2. 2019年 1月~ webデザイナー/コーダー
  3. 2020年 4月~ webデザイナー/アートディレクター