アプリ模写100本ノック_JINS #38

今回はJINS(iOSアプリ)です。

　JINS(iOSアプリ)は、アイウェアブランドJINSの公式アプリです。
前回作ったメガネの度数が分からない、保証書が見つからない、どんなメガネ が似合うのか分からないをJINSの公式アプリはメガネ選びのお悩みを解決し、 メガネ選びをもっと便利に楽しくお得にするアプリです。
さらに、ユーザー情報のご登録で店舗で使えるクーポンがもらえます。

JINSでメガネを購入したことはないのですが、JINSのアプリのUIがすごいという情報を聞き、今回対象にしました。

アプリ模写100本ノックとは

目的

1. そのアプリのコア体験について製作者の意図を考察し、気づきを通じてデザインパターンの引き出しを広げることが狙い。

2. 自分の知識として定着させる

なんでやるのか

デザインを作る上で瞬発力が必要
そのために以下のスキルが重要になる
・対象を観察する
・事象から法則性を見つけ出す
・即興で形にする

参考文献

Miwa Kuramitsuさんのこちらの記事です。頑張ります。

アプリ模写100本ノックやり方

1. 模写したいアプリを選ぶ（５分）

2. アプリを触りながら、気になったことをメモする（１０分）

3. 付箋を縦にして、選択した３画面を手書きで模写する（１０分）

4. 容姿に付箋を並べて貼り、気づきを書き足す（１０分）

自分は上記の後に2から4のまとめとして「やってみて感じたこと・気づいたこと」を書き出しています。
では本題に入ります。

アプリを触りながら、気になったことをメモ

• ホーム

  • ナビゲーションバー固定

  • アイキャッチでカルーセルで商品やコンテンツを紹介してる

  • 「新着のクーポンがあります」ボタンにグラデーションがかかってる

    • タップしたら下からモーダルが表示される。モーダルを閉じるとボタン自体が消える

  • 「人気のメガネランキング」セクションでは、カードで５つ人気のメガネをスライダーで配置してる

    • 順位を表現する色（金銀銅）を使用してる。他要素はブランドカラーの赤をタップできる要素に使用している

  • 全体的に白黒赤で構成されている

    • キャンセルはグレーを使ってる？

    • グレースケールをうまく使っている印象

  • 別ページに切り替わるのではなく、下からのモーダルで別ページを表現している

• 商品

  • 下からのモーダルで表示される

    • 画面左上のもどるボタンか、下方向へのスワイプで画面を閉じられる

  • 商品画像と商品名、金額、型番だけの情報でアイキャッチがまとめられておりスッキリしている

    • 画面下部に商品説明が少し見えるようにデザインされている

やってみて感じたこと・気づいたこと

ホーム_商品_My JINS

　今まで見てきたアプリの中で一番綺麗かつ優しいUIだなーと思いました！
アプリ内でメガネを購入できるだけでなく、お店でできる購入までの体験（眼鏡をかける）もカバーしているんだなーと思いました。また、お店で使用する機能や、お店で購入したメガネの保証書を見れる機能、お店で利用できるクーポンの紹介など、店舗での体験も考慮されています。大きく分けて２つあるアプリの機能をすごくシンプルにまとめていてすごいなと思いました。

　ホーム画面では、人気メガネのランキングや、商品を使ったコーディネート特集、メディア記事など、メガネの紹介とメディアサイトの機能２つを持っています。アプリ全体は白色で統一されており、アイコンやテキストボタンにプライマリカラーの赤を使用しています。
画面を表示した時にいいなと思った点は、タイポグラフィです。セクションごとのタイトルのフォントが大きめに設定されているのと、カルーセルと「人気のメガネ」セクションの間に少し広めにマージンが取られているため、アイキャッチのカルーセルに目が入った時にストレスなく「人気のメガネ」セクションに目が映るなと思いました。
　商品画面では、商品詳細と、カートに入れるボタンと商品を試着できる画面に遷移するボタンが配置されています。
商品画像カルーセルと商品名、金額、型番だけの情報でアイキャッチがまとめられています。画面全体の背景色が白色、商品画像カルーセルの背景が白色、メガネの色を切り替えるトグルボタン下とメガネ詳細情報の間に広めのマージンがとられています。そのため、画面上半分が白い背景の中に商品画像のカルーセルとトグルボタンのみがあるシンプルなデザインになっています。また、商品名や金額、シェアボタン、お気に入りボタン、カートに入れるボタンも大きく配置されているため、限定的な情報だけで画面全体を埋めています。めちゃくちゃシンプルでおしゃれだなーーと思いました！
画面下部で固定されている「この商品を試着」ボタンをタップすると、ARでメガネをかけられるのですが、どれだけ頭を振っても眼鏡をかけている状態から外れず、すごいです。
もう一ついいなと思った点は、画面自体が下からのモーダルになっていることです。アプリ全体の設計として、タブバーに用意された画面以外に遷移した先の画面は全て下からのモーダルになっています。画面を移動するインタラクションが限定されているため、今どこにいるのかで迷うことが減るなと思いました。
　My JINS画面では、実際のお店に関する自分の情報がまとめてあります。「JINS Regular Member」セクションが実際のカードのデザインに寄せており、QRコードをタップすると画面が明るくなり、会員コード画面が表示されます。「JINS Regular Member」セクションのみ上下左右にドロップシャドウを引いており、アプリ内で重要な要素だということが汲み取れるし、ユーザーも探しやすいなと思いました。

「すげえ！半端ねぇ！」みたいなことを言いながらアプリを触っていました。こんなデザインやれるようになりたいです。以上です。