【アプリ模写100本ノック #1】ついに開始｜FamiPayアプリをUI/UX視点で分析
こんにちは！ぶんです。
早速今回から、#アプリ模写100本ノック を投稿できたらと思います。
1.アプリ模写100本ノックとは
▼概要
「アプリ模写100本ノック」は、アプリの“骨格のみ”を高速で模写することで、UIデザイナーとしての**「瞬発力」**を鍛えるためのトレーニングです。
▼瞬発力として捉えているスキル
UIデザイナーにとって重要だと考えているのが、次の3つのスキルです
対象を観察する
事象から法則性を見つけ出す
即興でかたちにする
これらがトータルで発揮されている状態を、本取り組みでは**「瞬発力」**と定義しています。
▼なぜ「骨格」だけを模写するのか
あえて装飾やビジュアル表現を削ぎ落とし、
情報構造や画面設計といった「骨格」だけをトレースすることで、
アプリの根幹となる「コア体験」は何か
制作者はどこに意図や重心を置いているのか
を深く考察することができます。
▼この取り組みの目的
模写を通じた気づきを積み重ねることで
デザインの考え方や構造パターンを蓄積する
自分の中の「引き出し」を増やす
即座に形にする力を高める ことを目的としています。
▼参考文献
本取り組みについては、テラダクニオ（nio）さんの記事をきっかけに知ったものです。
nioさん、ありがとうございます🙌
2.アプリ模写100本ノックのやり方
模写したいアプリを1つ選び、
アプリを触りながら気になったことをメモする(10分)
ふせんを縦にして、選択した3画面の手書きで模写する(10分)
アプリを触りながら、気になったことをメモする(10分)
3.対象アプリについて 【対象アプリ:アプリ名】
アプリ概要
・famipayアプリはfamilymartが運営する、familmart内での買い物を便利にするアプリです。
・Famipayという独自の決済方法が搭載されており、Familymart以外でも使用できるため決済アプリとしての側面もあります。
想定ターゲット
・Family martの利用者
全体を通しての気づき
・第一印象として感じたのは、決済アプリとしての側面も強いことです。アプリ内では、ローン情報のお知らせやFamipay決済利用限定クーポンなどFamipay決済の利用を促していきたい印象を感じました。
・操作して感じた印象：情報量が多いもののコンテンツが大きいため圧迫感を感じにくいことで、初めての利用者からしてもストレスは感じにくい印象でした。
・他のアプリと比べて気になった点：ナビゲーションメニューが6つあるのが珍しいと思いました。左から優先度の高いコンテンツになっているように感じました。
4.模写実践
実戦①：ホーム画面
📝気づいたこと(30分ワーク中の気づき)
・バーコードが最上部に配置されており、支払いがしやすい設計。
・よく見るブランドページは過去の行動履歴により自動で追加されている。
・ブランドのロゴカラーを中心にお知らせコンテンツも同じ色味で統一されており、統一感のある印象を与えてている。
・ホームページからはスクロールしないとクーポン情報が見れず、ほしい情報が最初の画面内に映っていない印象。
🔁記事化していて気づいたこと/記事化していての補足・再考
・スクロールしていない状態の画面では決済バーコード以外にはファミペイの決済に関わる情報しかない。
・ローン情報>クーポンでの優先順位の設計になっており、利用者側としてはクーポンの方が知りたい情報ではあるが、提供側からするとクーポンは能動的に見るからこそ、提供側から伝えたいローン情報を上に持ってきているのか？
・文字量が多いキャンペーンが多く、情報量が多く感じるが、オブジェクト自体の幅をとることで圧迫感を軽減させているデザインになっている。
・よく見るブランドページも重要な情報と感じていなかったので上部に配置されているのはなぜか？→オブジェクトの形的に長方形のお知らせばかりだと単調な印象になるからか？
💡改善案
•「よく見るブランドページ」の部分を、アイコンのくまに吹き出しをつけて、何か一言お知らせを話しているデザインにする。
→アプリ全体として親しみやすい印象をもたらす・デザインの印象も単調にならない・発信者側として伝えたい情報も伝えられる。
実戦②：クーポン画面
📝気づいたこと(30分ワーク中の気づき)
・クーポンと回数券で切り替えられる。
・目立たせたいクーポンには"数量限定"や"new"などの表示がついている。
・クーポンをお気に入り登録すると、お気に入りクーポンだけでソートがかけられる。
・セットを押すと外面下部から”クーポンがセットされました”とトーストが出現。
・セットをするとホームに”セット中”の表示とアニメーションが出る。
・並んでいる順番はジャンルや新着などごちゃ混ぜになっている。(おすすめ→何回も使える→new)
・セットすると「セットする」→「解除する」に切り替わる
・クーポンを「贈る」ボタンの新しい体験がある。
🔁記事化していて気づいたこと/記事化していての補足・再考
・クーポン内の写真をタップすると写真が拡大で表示することができ、そのクーポンが使用できる対象商品を確認したい利用者に向けて考えられている設計。
・「贈る」という体験を設計することでアプリの利用者を増やす＝ファミペイユーザーを増やしたいという戦略？
・クーポン内には斜線を使わずにフォントの強弱をつけて視認性を高めている。
・お試しクーポンはクリックしないと対象のクーポンが表示されない。
💡改善案
・クーポンの数が多いからこそ、新着順と順番をソートできたり、食品などジャンルでソートできる機能があると便利
・お試しクーポンがクリックできることに気づきずらいので、シャドウを入れるなどして押せる感をもっと出す。
実戦③：チャレンジ画面
📝気づいたこと(30分ワーク中の気づき)
・チャレンジ前とチャレンジ中で区別されている。
・チャレンジの中にはアンケートも含まれている
・数字が多く使われており目に止まりやすい。
🔁記事化していて気づいたこと/記事化していての補足・再考
・チャレンジの中にアンケートを入れることで、ゲーム性を出して参加者側の障壁を軽減させている。
💡改善案
・ゲームの挑戦権があるものないものがごちゃ混ぜになっており、どれかよくわからないから参加しない選択をしている人は多そう。
・参加の条件が複雑。
まとめ
初めての「アプリ模写100本ノック」をやってみて、普段何気なく触っている画面にも、制作者の意図や細かな工夫がたくさん詰まっていることを実感しました。
また、観察するだけでなく、実際に模写して手を動かすことで新しく気づくことも多く、「考えながら作る」ことの重要さも感じました。
初回ということもあり、考えすぎてしまいかなり時間がかかってしまいました💦
2回目以降は進め方も整理しながら、より効果的なトレーニングにしていきたいと思います。
そして何より、楽しみながら続けていきます🔥