見出し画像

UIデザイン | bitterアプリの制作プロセス 01

bitterアプリは旅のアプリです。

今回はbitterアプリのデザインプロセスをご紹介します。

(メジャーなアプリではないので...参考になるかはわかりませんが。)

興味を持っていただける方、じぶんとは違う制作プロセスだなぁ〜なんて面白いと思う方がいるとうれしいです。

デザインの工程で行ったこと

0 :『旅行アプリをつくりたい!』なぜつくりたい?? 掘り下げる。
1 :アイディアの検証
2 : ユーザー像、ユーザーとの接点の明確化と仮説検証
3 : 機能の整理と画面デザイン作成
4 : プロトタイプを作成
5 : ユーザインタビューとユーザビリティテストのタスク設計
6 : プロトタイプを使ってユーザビリティテストの実施
7 : 要件整理
8 : 画面遷移図作成
9 : 画面デザイン作成
10 : UI設計書、開発指示書リソース作成

工程の3〜6や、7〜9は検証を繰り返し、画面を追加したり、機能を削ったりしながら進めました。

機能は、3で画面と合わせ検討、整理しました。

まずは、なぜつくりたいのか?について掘り下げたときのことや、アイディアの検証で制作したものをご紹介します。

今回のアプリは、やりたい!欲しい!!!!!!と思い制作したため、やりたいこと=機能がたくさんある状態から少しずつ削っていきました。

ユーザーのニーズが多い場合や、プロジェクトの情熱が高い場合、機能は多くなりがちです。『機能多い方が便利じゃない?』との声もあると思いますが、整理し削らないと『多機能すぎて使えない』『難しいアプリ』になってしまい、利用までのハードルが高くなってしまいます。

何度も繰り返し検証...検証。現在のUIに至りました。

(リリース後も、少し多かったようにおもいつつ...今に至ります。)

『旅行アプリをつくりたい!』なぜつくりたい?? 掘り下げる。

いろいろ叶えたいと思っていた世界がありました。

地域の食や伝統文化を残したい!
人の行動を広げたい!
未来に残し価値のあるものにしたい!
誰かのために役にたつものにしたい!
知的好奇心をくすぐる体験を提供したい...

きりがありません。

そこで、

やりたいことをポストイットに書き出し、分類。グループ化し、

関係性がわかるように図化、文章化しました。

(あまり意識していませんでしたが、過去行ったKJ法と呼ばれている手法を気づいたときには使っていました。)

じぶん自身ひとり旅をして発見した気づきが日常を変化していった体験をもとに『幸せに気づく人を増やす』旅をサポートする

整理している際に、名称も合わせ検討しました。

bitter(ビター)  苦い、苦しいなどあまりイメージは良くない単語ですが、『旅』って楽しいだけじゃなく、苦しい体験や苦しいように思える光景に触れることで得られる気づきが素晴らしい発見だと思いこの名称にしました。

(旅...旅。。。タビ。。タビー、ビター、bitter! )

そして、言語や空気感がじぶん以外のメンバーに伝わるようコンセプトシートを作成しました。


コンセプトシート

コンセプトシートをつくる目的は、思想、アイディア、価値などを可視化し、意見の交換ができるようになったり、頭の中を整理することに使われます。

本当に必要なことに気づきやすくなります。

初期のコンセプト。(なんだか...決意表明みたいだな...。)

その次に、アプリで『何ができて』『どのような価値があるのか』を機能ごとにまとめました。

リリースした機能

地図上でブックマークを管理

ブックマークを地図上に登録や確認ができる、場所別ブックマーク機能。

『旅』の準備がしやすいといいな。普段調べている場所をそのまま旅行計画に使えるといいのに...と思っていました。

『ブックマーク』を閲覧する方法がリストじゃなくてもいいのでは?と思った体験をきっかけに、『ブックマークを場所別に整理し、確認できること』をベースに機能を整理しました。

ウェブページ上で場所をかんたんにブックマーク

スポット名や住所を自動で表示、登録できる機能。

ウェブページを見ているときに場所の候補を出して入力せずにできるといいのに!と思っていました。

また、海外のスポット名や住所は、文字変換が使えないスポットもありますし、とにかく入力しなければならないものを減らすことは必要だと考えていました。

旅のルートと旅程を自動で作成する

スポットと期間を選択するだけでかんたんに旅のルートと旅行計画表が作成できる機能。

計画中の課題は、土地勘がない場所だと...歩ける距離なのか? 電車で行くことができるのか? などわからないことが多いです。

(今まで、1つ1つのスポットを入力し、移動手段や時間を確認していました。)

ざっくりでもいいからなんとなく旅程ができあがっているとつくりやすいと思っていました。


コンセプトシートの段階ではボツにしていなかったのですが、機能を整理する中で優先度が低いと判断したものを削りました。

優先度が低いと判断するポイントは、『実現したいと思っている世界と一致しているか』『既に世の中にある機能ではないか』の2つです。

ボツになった機能

あまり公にすることはないと思いますが...せっかくなので。(笑)

リリース時に見送った機能の一部をご紹介します。

旅日記 SNS。

旅人の日記や旅程をかんたんに見ることができたり、じぶんが行きたいと思っていた場所のプランを見ることができる... 旅版Instagram。

旅のプランをシェアできると作成する時に参考になるなぁと思っていましたが、既にあったことと、心の底から行きたいと思っているのに行けないもやもやを解決したいと思っていたので、他の機能より優先度が低いと判断しました。


GPSで自動で『行った』を判断

自動でまだ行っていないスポットと行ったスポットを振り分けてくれる、自動スタンプラリー

GPSでは『行った』のか? 『通っただけ』なのか?わからないこともあり、UIが複雑になることが懸念されました。

○○のスポットに行きましたか? を通知し、ユーザーに操作してもらうことを考えると、使わないユーザーは煩わしさを感じると判断し見送りました。


コンセプトシートのポイント

目的によってコンセプトシートの内容は決める必要はありますが、

1. アプリの価値をわかりやすく伝えること
2. 機能過多なアプリから機能を削ること

この2つの目的を実現したかったので、

『ユーザーの価値』『利用シーン』『機能』をぱっと見てわかること

をポイントにしました。

機能の整理で困っている方、じぶんの想いをもっと伝えたいと思っている方は、つくってみてもいいかもしれません。

制作工程でつくってよかったと思うものの1つです。

今回は全体の工程の中の0と1で制作した内容の1部をご紹介しました。

0 :『旅行アプリをつくりたい!』なぜつくりたい?? 掘り下げる。
1 : アイディアの検証
2 : ユーザー像、ユーザーとの接点の明確化と仮説検証
3 : 機能の整理と画面デザイン作成
4 : プロトタイプを作成
5 : ユーザインタビューとユーザビリティテストのタスク設計
6 : プロトタイプを使ってユーザビリティテストの実施
7 : 要件整理
8 : 画面遷移図作成
9 : 画面デザイン作成
10 : UI設計書、開発指示書リソース作成

次は『2 : ユーザー像、ユーザーとの接点の明確化と仮説検証』の制作工程をご紹介いたします!

では、また!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

泣きそうです。
2

bitter

旅プラン作成アプリ『bitter(ビター)』の公式アカウント。 https://www.bitter-trip.com

bitterアプリ | スマホアプリの開発プロセス

bitterアプリの企画、デザイン、開発プロセスをご紹介します。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。