アプリ模写100本ノック_Yahoo!フリマ #100
1. アプリ模写100本ノックとは
概要
アプリ模写は、骨格のみを高速で模写し、「瞬発力」を身につけるトレーニングです。
３画面を対象に付箋に骨格や気づきを書き出した後、まとめとして「3.やってみて感じたこと・気づいたこと」を書いています。
目的
アプリのコア体験について製作者の意図を考察し、気づきを通じてデザインパターンの引き出しを広げ、自分の知識として定着させること
即興で形にする能力を身につけること
参考文献
Miwa Kuramitsuさんのこちらの記事です。頑張ります。
z対象アプリ
今回はYahoo!フリマ(iOSアプリ)を対象にしました！
Yahoo!フリマ(iOSアプリ)は、個人間で取引できるフリマアプリです。 PayPayで支払いや売上金の受け取りができます。
2. アプリを触りながら、気になったことをメモ
探す画面
ナビゲーションバー（サーチバー、お知らせ、やることリスト）
サーチバー
タップすると「さがす」画面と同じ画面が表示される
（感想）「さがす」画面への遷移ルートが２つあることと同じなので、アプリ内の回遊率が上がりそう
お知らせ
「あなた宛」と「みんな宛」にタブが分かれてる
（感想）やり取りでの通知と運営からの通知に別れてるってことなのかな？
（感想）ユーザー全体を「みんな」、個人を「あなた」と表現しているのが、サービスとの距離感が近くなる感じがしていいなと思った
やることリスト
取引を開始すると、やって欲しいことがここに表示される。「返信してください」とか
（感想）対応のし忘れを防止し、サービスの民度を保つためにある機能な気がした。ありがたい機能だなと思った。
カテゴリタグ
「保存した検索条件」「おすすめ」「フォロー」「グッズ交換」「投稿」以外は商品カテゴリ
（感想）「コスメ・美容」などのカテゴリタブと上記４つは同じ階層ではないと思うが、ユーザーの慣れとか使い勝手を考慮したのかなと思った。
3. やってみて感じたこと・気づいたこと
ホーム画面
ホーム画面は、出品された商品をカテゴリ別に見ることができる画面になっています。
選択可能オブジェクトが３列のグリッドに沿ってタイルのように並んでいます。
いいなと思った点は、４点あります。
１つ目は、サーチバーのプレースホルダーにサービス名が入っている点です。
「Yahoo!フリマ」は元々「PayPayフリマ」だったこともあり、現在のロゴよりも「Yahoo!」という単語の方がブランドイメージが強化されることも考慮し、ロゴをUIに使わず、プレースホルダーにサービス名を入れているのかなと推測してます。
自然かつ意味のある方法で組み込んでいるのがいいなと思いました。２つ目は、ナビゲーションバー右上に配置されたやることリストの存在です。
これにより、ユーザー間でのやり取りのミスからサービス自体に不満が生まれるCtoCで起きがちなことをカバーできるんだなと思いました。
今回は購入体験までは行わなかったため、今度利用してみようと思いました。３つ目は、タイル状に表示された商品群の中に４マス文使った大きなタイルがある点です。
どういったアルゴリズムで大きなマスの画像が決まっているのかはわからないのですが、これによって選択疲れの帽子に繋がり、商品をタップしやすくなるなと思いました。
個人的に不思議だなと思ったのは、なんとなく大きなマス以外の商品をタップしていることです。これもなんかの法則であるんですかね？４つ目は、タブバー中央に配置された「出品」の上に固定配置された「1000円相当」の吹き出しバナーです。
「1000円相当」という吹き出しだけでは、どういう意味なのか理解できないのですが、配置位置なのかデザインなのか、理由がまだ明確にわからないのですが、「おそらく出品したら1000円くらいお得になる何かがありそう」と思えるなと思いました。
また、下にスクロールすると非表示になるため、バナー自体にストレスを抱くこともないのがいいなと思いました。
商品画面
商品画面は、選択した商品の詳細情報と、共有ボタン、お気に入り登録ボタン、購入手続き画面に遷移するボタンが配置された画面になっています。
いいなと思った点は、大きく１点あります。
画面内の情報の優先度のバランスです。
一番優先度が高く、前に出ているのが商品画像、次に画面下部固定のCTAボタン「購入手続きへ」で、次が金額、次が商品名かなと思います。
自然と目に入ってくる情報の順序を綺麗にコントロールされているなと思いました。
気になったと思った点は、１点あります。
画像タップ後に表示されるハーフモーダルの背景色が黒いなっている点です。
画像をタップして大きく表示されるのはいいと思うのですが、ハーフモーダルのUIを使っており、背景色が黒になっているため、どんなUIで表示されているのか分かりにくく、モードの閉じ方が直感的に判断しづらいなと思いました。
出品・持ち物画面
出品・持ち物画面は、タブバーにある「出品」ボタンをタップすると表示される画面です。
商品の出品画面もしくは、グッズ交換画面に遷移できる画面になっています。
いいなと思った点は、２点あります。
１つ目は、出品のショートカット機能です。
「写真を撮る」「アルバム」「バーコード」「動画を撮る」というショートカットが用意されており、それぞれ「出品する」ボタンをタップするハードルを軽減するボタンになっていました。
ショートカットと言うほど「出品する」ボタンをタップした後に行うアクションと違いはなく、「アルバム」ボタンに関しては「出品する」ボタンをタップした時と全く同じアクションになるのですが、あえて別窓口のボタンを用意することで入力画面への遷移率を高めているんだろうなと思いました。２つ目は、タブバーのボタン名を「出品」として、画面名を「グッズ交換」を考慮して「出品・持ち物」としている点、また「グッズ交換」をこの画面内に置いている点です。
この画面には推しアイテムのグッズを物々交換できる「グッズ交換」画面に遷移するボタンが配置されています。これにより、「出品する」ではない「持ち物交換する」という目的がこの画面内に存在しています。
「グッズ交換」をタブバーに配置することも可能だと思うのですが、「近しい動作の出品画面に配置しているんだろうな。既存ユーザーが混乱することも考慮してタブバーの表記は「出品」のままにしているのかな。」など、いろいろ妄想しました。
以上です。
4. あとがき
noteに継続的に投稿することが自分のスキルとしても、就職活動の提出物としてもとても役に立ったので、継続してよかったなと思っています。
100本やってみて感じたことなどは別記事にて投稿します。
今後は、他の100本ノックを投稿していこうと考えています。
アウトプットありきでインプットしていく習慣を引き続き行い続けます。