PTDでプロのUIデザイナーの凄さを目の当たりにした話
先日PTDというサービスの体験をしてきたので備忘録も兼ねていただいたフィードバックについて書いていきたいと思います。
御託はいい。さっさと作ったものと貰ったフィードバックを見せろ！って方は2)を飛ばして読んでいただければと思います。
さっそくまいりましょう。
1）成果物
まずは前回同様にお題をいただきました。
それがこちら。
お題Vol.1『ホテルグループの予約アプリ』
〇デザイナーの設定
世界中に高級ホテルを展開するコンフォートホテルグループ（仮）が、自社のホテルを予約するアプリをリリースすることになりました。あなたはクライアントワークを行うデザイン会社のデザイナーとして、アプリのデザインを任されています。
〇トンマナ
- 高級ホテルに見合ったハイセンス感
- 尖ったかっこよさよりはリラックス感
- クライアントのイメージ
https://www.pinterest.jp/pin/861594972444871119/
https://www.pinterest.jp/pin/205124958015508696/
https://www.pinterest.jp/pin/300263500157930343/
〇アウトプット画面（2画面）
【ホテル一覧】
- ページ内の要素フォーム、検索結果数、ホテル名、ホテル写真、ホテル所在地
- 地域絞り込み「ヨーロッパ」→「ロンドン、パリ、アムステルダム」の3ホテルが表示されている
【ホテルの詳細ページ】
- ページ内の要素：写真、ホテル名、住所、ホテルのアピールポイント（テキスト+写真）、予約へ進むボタン
〇要件&制限
- 画面下のメニューアイコン（タブバー）は「ホーム」「ホテル一覧」「メッセージ」「プロフィール」の4つ
- アイコンは https://www.flaticon.com/ から使用する
- 写真は https://unsplash.com/ から使用する
- よりデザインを魅力的にするために掲載要素を追加・編集しても良い
- 制作の作業時間は6時間まで（リサーチなどは含めない）
〇ポイント
- 余白やレイアウトを工夫して、グラフィック的に魅力的な画面を作る
- デザインにあった適切な写真やテキストを探して仮当てする
※こちらより一部を抜粋
こちらは前回とは違い、実際にどういったUIにしてほしいという部分まで指定をされていました。
そして出来上がったものがこちら
前回よりはマシになってるはず...!
今回も作成した流れをおさらいしていきます
1.クライアントをリサーチ（今回は空想）
2.与えられた条件を基に顧客のペルソナを決定
3.ペルソナから更にイメージを掘り下げ
4.作った情報や、事前の条件から参考にするイメージ画像や、アプリケーションを設定
5.実際に落とし込みたいアプリケーションの要素やイメージを研究
6.この時点で判明している使用する画像やアイコン等を収集
7.実際に制作
8.スマホから見て崩れていないかチェック
9.完成
今回はより理論的というか、まともな作業工程になるよう意識しました。
特に実際に作り始める前の行程にはかなり時間を使った気がしました。
合計15～20時間くらいはかかったのかな思います。（次からはしっかり計ります...）
ということでこの流れを一つ一つ細かく見ていきます
2）制作過程
1.クライアントをリサーチ
先ずはクライアントの戦略にあたる部分が指定されていなかったので簡単にここで決めてしまいました。
このクライアントの指針としては"高級で世界中に基本的には会員制ホテルとして展開はしているものの、一般の顧客にも目を向けているので、会員は優先しつつ一般の顧客も宿泊できるちょっとお高め～超高級"という方向性を設定しました。
2.与えられた条件を基に顧客のペルソナを決定
最終的には下記のようなペルソナに決定しました。
ペルソナ1
50代男性、世界的な実業家
・未婚
・仕事の関係で常に世界中を移動している
・今回は仕事ではなくプライベートとして宿泊を検討
ペルソナ2
30代男性、一般社員
・既婚、子供2人
・普段は会社員として一般的な生活をしている
・連休に旅行を予定。奮発してちょっとお高めのホテルを検討
3.ペルソナから更にイメージを掘り下げ
ここでは身の回りに近しい知り合いがいなかったので画像や検索した情報を頼りに自分のイメージとして膨らませました。
(お友達は常に募集中です)
具体的にはこのような感じに設定しました。
想定ペルソナから抽出した要素
・客層は良識がある一般人から上流階級な人物
・突発ではなく計画的な旅行
・ホテルを中心に旅行
4.リサーチした情報や、事前の条件から参考にするイメージ画像や、アプリケーションを設定
条件として世界中にあるホテルであり、かつ目的が宿泊の予約なので、今回はエクスペディアとhotels.comを主な参考としました。
検索はキーワードというよりもタグのようなイメージで絞り込みを行えると良いのかなと思い、wantedlyを参考にしました。
5.実際に落とし込みたいアプリケーションの要素やイメージを研究
ここでホテル予約サイトの大まかな流れを掴み、そこからどの部分がより重要で必要になってくるかを模索しました。
実際に落とし込む要素として
〜検索結果画面〜
-最重要-
・滞在期間と場所と人数
・絞り込んだ検索の内容が見える
・ホテルのイメージ、名前、値段
-重要-
・ホテルの簡易的な詳細（キャンセルできるか、クレカが使えるかなど）
・ホテルを閲覧済みかどうか
〜ホテル詳細画面〜
-最重要-
・ホテルのイメージ
・ホテルの名前
・ホテルの場所
・部屋のプランの値段
・キャンセルや予約の情報
-重要-
・ホテル自体にある施設、サービス
・全部屋共通のサービス
・部屋ごとのオプション
-あったほうがよい程度-
・部屋の詳細
あたりを意識しました。ほとんど既存アプリのパクリになってしまいましたが、自分の中でどこが最重要で、逆に後回しにしていい情報は何か、などを考えながら項目を決定していきました。
また、アプリの検索結果→ホテルの詳細という流れの中で重複してもいい情報は何か、この一連の流れでユーザーが違和感なく情報を受け取れる構造はどうなるかを意識していました。
作っていくうちに優先度がぐちゃぐちゃになってしまい、重要度に沿って要素を配置できなかったのは一つ反省点となりました。
やはり既存のアプリケーションは必要な情報だけを綺麗に整えてありますね。すごい...
6.この時点で判明している使用する画像やアイコン等を収集
ここでは単純に必要な素材を集めました。
特にアイコンにおいて、線の太さが同じくらいかどうか、アイコンが示している情報が混同しないようにできるだけ似ているアイコンは使わないという点を意識しました。
画像もホテルの詳細画面で、イメージ画像と実際に書かれている情報が違わないよう意識しました（ダブルベッドと書いているのに画像はツインベッドになっているみたいなことが起こらないような意識）
7.実際に制作
準備もできたのでゴリゴリ制作に取り掛かりました。
このタイミングで、ワイヤーと実際のビジュアルデザインをほぼ同時に進めてしまったのは失敗だったかなと思います。
余白やコンポーネントの大きさなどは意識して配置をしたものの実際に完成して全体を見た時の小さな違和感達を潰すのに結構時間を使ってしまいました。
実際のスマホで見た時も、PCで見ている配置とずれている現象も起きたので、完全にワイヤーだけをサクッと作って、このタイミングでスマホで見てズレを修正したり、違和感を潰せばもっと時間を短縮できた気がします。
8.スマホから見て崩れていないかチェック
これめちゃくちゃ大事です。
PCの画面上では良く見えても、実際にスマートフォンを介してアプリケーションを見てみるとかなり印象も変わりますし、先でも言いましたがスマホの画面で見てみるとPCの画面とスマホでの画面でズレるところが発生します（おまかんだったらごめんなさい）
恐らく画面の発色の違い等で色が変わって見えることもあるので（こればっかりはどうしようもないのかもしれない）一度できたものをスマホで確認することをおすすめします。
9.完成
完成！！！！！！！！！！圧倒的達成感！！！！！！！！！！！！！！！！！！
3)フィードバック
圧倒的達成感に浸るのも束の間、この出来上がった現時点での謎の物体を評価していただきます。
1.ツモマーさんからのフィードバック
あろうことかメンターの方より先にツモマーさん(@tsumomah)からフィードバックをいただきました。
というのも、前回の稚拙な画面を作った際に現在プロとしてご活躍されているデザイナーの方数人にフィードバックを求めました。（ご返信いただいた方々本当にありがとうございました！）
その中でツモマーさんからフィードバックをいただいた上に「PTDっていうサービスの体験があるからよかったらチャレンジしてみてください！」と教えていただきました。
これやってるのは実はツモマーさんのおかげです。優しい人が多すぎて少し泣きました。
そんなこんなで、出来上がったものをツモマーさんにも見ていただこうと思い、申し込みと同時にツモマーさんへDMをしました。
そしていただいたフィードバックがこちら
## 一覧
- ヘッダー エリア「ロケーション」など検索条件変えられるようにしておくといいかも
→わかりやすいようにアイコンや「再検索する」などのラベルを表示させる
- 「1/84」は写真でしょうか？何かしらのアイコンかラベルがあるとわかりやすかも
→実際は詳細にあれば要素ではあるかも、ここではイメージ画像1つあればいいかな
- ホテル名以下の情報が多い気がする
→情報が左右と散らばっているので最小限差別化する情報があればいいかな。1人1泊の最低料金、ロケーション、評価数だけ
- タブバーのプロフィールアイコンだけ複雑に見える
→他に合わせてもう少しシンプルでもいいかも
## 詳細
- 写真複数ある場合スライドできるように矢印があるとわかりやすい
- 「10/9-10/13…」などの条件をここでやらせてしまうと面倒くさいので予約確認画面がある体でそこでやらせていいかも、もしくは「プラン」などタイトルつけて「スタンダード、ファミリー」との間くらいに
→今回作る画面ではないけど前後の画面を手書きのラフでもいいから要素の確認メモを作ると精度上がるです
- 「キャンセル無料」と「今すぐ…」はそこまで重要ではなさそうなのでもう少し小さくていいかも、押せるボタンっぽくも見えてしまう
- 「wifi無料」などのアイコン+ラベルは全部見えるようによう4カラムくらいでホテル説明文の下時に載せるでもいいかな
- 「ロンドンに位置するこの…」のline-heightはもう少し高さ持たせるよ余裕が出るかも、初期表示4行まで見えてそのあとは「詳しく見る」とかのディスクロージャーで実装するとスマート
- 部屋情報の写真も一覧と同じ比率でいいかも、基本16:9でOK
- 予約ボタンは横幅いっぱいでもいいかも、今右寄せの強い理由がないので
感じていた違和感や、自分では気づかない部分が全て言語化されている...!!!!すげぇ...!!!!
特に詳細画面の
"「10/9-10/13…」などの条件をここでやらせてしまうと面倒くさいので予約確認画面がある体でそこでやらせていいかも"という部分。
ここでも「なるほど」と漠然に飲み込んでいましたが質問として、「エンジニアが実装の際にめんどくさくなるのか、それともUI的にイケてないのか」と聞いてみると
あの部分で変更したときに画面的に変わるところってないんですよね、もし変えた場合の期待値って、部屋がの値段がかわるとか予約できる部屋がなくなるとかと思って。
もしやるならこの条件で良い？って確認画面で変更するとかかなと。もしくは一覧でもいいかな。
あとは詳細で変えた場合、そのまま一覧に戻ったときにどうなるのか考えると、詳細に入る前の一覧条件と変わるのでさっきまで見てた順番かわる？
とか下手したらエンプティになってやっぱ詳細戻りたいってなっても条件変更で見えなくなるのかなと、となると詳細でかえたものは一覧では引き継がないでもいいのかな、とかユーザーが機能を理解するのに苦戦しそうだなと
※下手に改編したらごちゃごちゃになりそうなのでそのまま引用させていただいております
(...思考の深度が水たまりとマリアナ海溝レベルで違う...!!!)
確かにここの条件はかなり幅広くなるので、前後関係も合わせてかなりUIに与える影響は大きいし、検索の構造自体が破綻しかねません。
仮にこの状態でエンジニアの方に提出していたらタイキック3発くらいもらってもおかしくないレベルで考えが浅かったです。
事前の条件から2画面に入れこまないといけないという無意識も相まってここはほかの部分よりも雑な作りになってしまいました。
2.PTD岡部さんからのフィードバック
そして、PTD岡部さんとの対面でのフィードバック。今回は体験ということで事前の質問に対して30分のフィードバックをいただきました。
事前の質問として「余白の考え方」「カラーについての考え方」「要件設定やタスクフローの考え方」を聴きました。
※こちらは会話でのやりとりだったので意訳されていたり忘れている部分があります。
・余白の考え方
余白については"お皿の上に料理を乗せるイメージ"というアドバイスをいただきました。
どういうことか。お皿に料理を乗せる時って基本的には真ん中に配置すると思います。その真ん中の料理の部分が要素で、お皿の何も乗っていない縁の部分をマージンとして考えるといいよ。と教えていただきました。
脳内に電流が走るくらいわかりやすくて内心ニヤニヤしてしまいました。
これわかりやすすぎるので全人類に伝わってほしいです。
・カラーについての考え方
こちらはコントラスト比を例に論理的なやり方を教えていただきました。
・要件設定やタスクフローの考え方
こちらではカスタマージャーニーマップやユーザーストーリーマップといった実際に現場でも使用されるような手法を紹介していただきました。
まだまだ知識が足りないので、こういった実際に使える手法を教えていただけるのは本当にありがたいです。
・時間制限
そしてこの事前の質問とは別に「今後もアプリを作る上で初学者は時間制限を気にするべきか」という質問をしました。
回答としては、今回の課題において時間制限を設けたのはどこまでも細かく調整してしまって終わりが見えなくならないようにしている側面がある。
実のところ100%完成したものというよりは、60%〜70％程度の完成度の中で根本的なUIデザインをみたい。
ということでした。
確かに！！！！
時間制限についてはあまり気にはしないようにしていましたが、確かに必要以上にこだわってしまうことを防ぐための時間制限は有効的な手段かもしれません。
現に今回のお題も100%になることを目指してしまったので、自分が現時点でどの工程が重要なのかを見極めながら作る必要がありそうです。
4)おわりに
改めて、今回はPTDというサービスの体験としてフィードバックをいただきました。
期待していた以上に良い体験となりました！
と同時に「このレベルにたどり着かないとプロとしてやっていけないのか」と思うとこれまで以上に気合が入りました！！
いただいたフィードバックからもデザインの設計面、ビジュアル面ともに今後の課題が見えました。
再三言っておりますがフィードバックをもらうことは本当に大事です。
自分の足りない部分の確認や今後の課題を見つけるためにも小さな部分でもいいのでフィードバックをもらいましょう！
この記事が気に入ったらサポートをしてみませんか？