#1 Google Maps | アプリ模写100本ノック
アプリ模写100本ノックとは
目的
制作者の意図を考察し、気づきを通してデザインパターンの引き出しを広げることが狙い。
「なぜこのデザインなのか」
「このデザインにした結果、どういう効果があるのか」
2点を意識的に考察し、最終的に無意識的に言語化できるようになることがゴールです。
そのためにしっかり対象を観察し、法則性を見つけ出し、即興でカタチにしていくスキルを身につけていきます。
参考にしたもの
Miwa Kuramitsuさんの記事です。
実施手順
模写したいアプリをひとつ選ぶ
アプリを触りながら気になったことをメモする（10分）
付箋を縦にして、3画面を模写する（10分）
用紙に付箋を並べて貼り、気づきを付け足す（10分）
まずはスタイルやコンポーネント、機能、レイアウトの目的を捉え、最終的にはプロダクト、サービスの目的を瞬時に捉えられるように頑張ります。
※基本iOSアプリで行います。
【Google Maps】
今回は「Google Maps」です。
個人的に使用頻度が高く、機能がシンプルなアプリとして選びました。
アプリを触りながら気づきをメモ
ヘッダーには検索バーがあり、テキスト入力はもちろん、音声や画像入力にも対応している。フローティングで表示。
→ユーザーのアクションは4パターン（テキスト検索、音声入力、画像検索、地図を直接操作）で、フローティングにすることで地図が広い範囲で見える印象を与える。
ボタンは角丸50%で統一されている。
機能はホームに集中している
スポットを保存することが可能。地図に表示され、縮小してもアイコンだけが表示される。
→登録する＝ユーザーがすぐにみたい情報
経路は現在地がデフォルトで入力されている。交通手段は最後に利用したものがデフォルトになっている。
→ユーザーが1番利用するシーンを中心に考えられている。
やってみての気づき
進むボタンが青なのは信号が青の影響を受けているのか。
ボタンにはドロップシャドウをつけることで、境界線をくっきりさせフローティングでの視認性を向上している。
リストはアイコンとタイトルで表示し、ディバイダーでグループ化している。
→ユーザーは押せる位置が明確になる
この地域の最新情報が下部に少し表示。ユーザーは情報を探さなくても得ることができる。
→実際のユーザーはマップを直接触ることが多いので、みたい人が見られる状態がデフォルトになっている。
経路の画面になると、テキストボックスが四角ベースで角丸が小さくなる
→起点と終点がユーザーにとってわかりやすくなる。
移動すると近くのスポットを表示のボタンが出現。ユーザーはそのエリアで再度検索しなくてもボタンを押したら検索できる。
検索した状態で、他の場所を閲覧すると、検索場所の詳細は下にスライドダウンしながら収納されるがタイトルや経路、ナビ開始のボタンはすぐに押せる状態。
→検索している＝ネクストアクションの可能性があることからそのような構造になったのではないか
ここまで一発目をやってみました。まだアプリの法則性が深く理解できていないため、表層の分析が多くなってしまいました。
なぜそのデザインなのか、アプリ（サービス）の特性やターゲットを踏まえながらより深い考察を心がけていきたいと思います。
最後までご覧いただきありがとうございます！
次回の記事でお会いしましょう！