#9 HANDS | アプリ模写100本ノック
アプリ模写100本ノックとは
目的
制作者の意図を考察し、気づきを通してデザインパターンの引き出しを広げることが狙い。
「なぜこのデザインなのか」
「このデザインにした結果、どういう効果があるのか」
2点を意識的に考察し、最終的に無意識的に言語化できるようになることがゴールです。
そのためにしっかり対象を観察し、法則性を見つけ出し、即興でカタチにしていくスキルを身につけていきます。
参考にしたもの
Miwa Kuramitsuさんの記事です。
実施手順
模写したいアプリをひとつ選ぶ
アプリを触りながら気になったことをメモする（10分）
付箋を縦にして、3画面を模写する（10分）
用紙に付箋を並べて貼り、気づきを付け足す（10分）
まずはスタイルやコンポーネント、機能、レイアウトの目的を捉え、最終的にはプロダクト、サービスの目的を瞬時に捉えられるように頑張ります。
※基本iOSアプリで行います。
【HANDS】
今回は「HANDS」です。
アプリを触りながら気づきをメモ
【ヘッダー】
タイトル、ハンバーガーメニュー、ポイントカードまたはカートに遷移するボタンがある。
ドロワーでハンズの会員の情報やアプリの様々な設定が格納されている。
【タフバー】
5つあり、店内モードと会員証が単独で存在していることからリアルの店舗で利用することがコア機能の一つとして考えられる。
店内モードのヘッダーにカートがあり、タップしてみるとネットストアと店頭受け取りの選択が表示されるが、関係ないと思って押さないユーザーが多そうだと思った。
【コンテンツ部】
会員証を開いてカードをタップするとカードが明るくなる。会員証を開くとヘッダーはポイントカードに切り替わる。
ニュースはカードで並べられており、アイキャッチ画像が大きい上に、バナーのようなインパクトのあるデザインになっている。
店内モードには便利な機能とタイトルで店内をより便利にお買い物できる機能がまとめられている。ボタンは大きく押しやすい。ドロップシャドウをはっきりさせている。
やってみての気づき
ハンズアプリのいいなと思った点タブバーの会員証ボタンを押すと、トップにカード会員証が出てきて、さらにヘッダーにポイントカードのボタンが配置されていることです。店舗で買い物をする際、ポイントカードをハンズとドコモか楽天を提示できるのですが、一つの画面で全てのポイントカードを表示できるところが便利だと思いました。カードが実際のカードと同じ形をしていてわかりすく、自分の会員ステージが反映されるので、上位会員の人はステータスを味わえるデザインになっていると感じました。さらにカードの下にはゲージがあり、どれくらい購入すれば会員ステージを上げられるかが一目でわかるので、ゲージの進捗によってハンズで買い物をする人が増えるのではないかと思いました。
気になった点は3つあります。
1つ目はボタンのデザインです。四角のボタンでドロップシャドウが付いていますが、ボタンだけが浮いている印象を受けました。コンテンツとボタンの大きさの違いが少ないためボタンで押せるのかどうか悩んでしまうのではないかと思いました。
2つ目はニュースページのタブバーです。今開いているタブから違うタブをタップするとタブが切り替わりますが、その際に押したタブが右に移動します。つまり同じところをタップし続ければ永遠にタブがループすることになります。自分がタップして開いた位置からずれてしまうことでユーザーに迷いが生まれてしまうのではないかと考えました。
商品のバーコードをスキャンして探すことができる機能があるのですが、許可をしていなかった場合、OSの設定からカメラの使用を許可してくださいと表示されました。これではユーザーは自分で設定画面を開いてアクションをしなければいけません。アプリから設定の特定画面に飛ばして欲しかったと思いました。
最後までご覧いただきありがとうございます！
次回の記事でお会いしましょう！