アプリのUIを紙で模写すると「モノを見る目」が育つ？『アプリ模写100本ノック』完走者が“生みの親”に成長の秘訣を聞く

『アプリ模写100本ノック』をご存知でしょうか？

既存のスマホアプリを一つ選び、「コア機能だ」と思った3つの画面を模写。アプリの骨格を観察しながら、リバースエンジニアリングのように制作者の意図を考察し、気づきを通してデザインパターンの引き出しを広げる1回30分のユニークなメソッドです。

2024年にDeNAに新卒入社したデザイナーの髙橋 芽衣は、この100本ノックを見事完走。「めちゃくちゃ仕事に活きています」と話します。

その髙橋が、今回『アプリ模写100本ノック』の生みの親である、デザインスタジオ「KRAFTS&Co.」の代表・倉光 美和さんと対談。

「100本ノック」誕生秘話と、100本を経て見えた景色、そしてUIデザインの未来について語り合いました。

「引き出し不足」に悩むデザイナーのために

髙橋 芽衣（以下、髙橋）：はじめまして、なのですが……大変、お世話になりました（笑）。倉光さんのnoteを読んで『アプリ模写100本ノック』を始めたので、感慨深いです。

倉光 美和さん（以下、倉光）：こちらこそお会いできて嬉しいです。同時に何だか不思議な感じです。

『アプリ模写100本ノック』は、元々、ある事業会社の若手デザイナーさんの育成メニューとしてつくったメソッドだったんです。それをnoteで発表したら反響が多く、「私も挑戦しました」とSNS等を通じて連絡をいただくようになりました。

ただ髙橋さんのように「100本完走した」人は決して多くなくて。半年に一人いるかいないかなんですよ。

髙橋：確かに、大変ではありました（笑）。

倉光：髙橋さんは、今DeNAでどのようなお仕事を？

髙橋：2024年春に新卒で入社し、今はデザイン統括部という部署に所属。主にスマホアプリのUIデザインを手がけています。直近では、スポーツ応援実況アプリ『play-by-sports』を担当しています。

髙橋：倉光さんは、ご自身の会社では普段どのようなお仕事をされているのですか？

倉光：私は以前、カプコンやクックパッドなどの事業会社でUIデザイナーとしてキャリアを積んだ後、3年前に独立し「KRAFTS&Co.」を立ち上げました。

ここでは、アプリケーションのUIデザインはもちろんのこと、幅広くデジタルサービスの体験設計や、企業やサービスのブランディングデザインを担当しています。また、デザイナーがいる組織の採用や育成といったマネジメントにも携わっています。

髙橋：ということは、『アプリ模写100本ノック』は、デザイナーの成長を支援するためにつくられたものなのですね？

倉光：そうです。弊社では、さまざまな事業会社から「ジュニアデザイナーの成長支援として、メンタリングをお願いしたい」といったご依頼をいただくことが多くありまして。

その際、実務経験の浅いUIデザイナーの方々から「先輩のように次々と画面デザインのアイデアが出てこない」「どうすればデザインの引き出しが増やせるのか」といった悩みをいただくことがとても多いんですね。

髙橋：まさに私も同じような悩みを持っていました。

倉光：（笑）。そこで私自身が新たな領域に関わる際に、既存のアプリやサービスをリサーチする目的で行っていた手法、アプリをスケッチしてコア機能や求められるユーザー体験を分析する、という一連の流れを、誰でも使えるフレームワークにして、いろんなアプリのデザインを分析してもらったら、経験の少ないデザイナーが目の前のデザインを観察して考察する力が養えるだろうな、と考えたんです。

そして、その様子がSNSやnoteを通して髙橋さんを含めた多くの方に伝わったという……。

髙橋：確かに。私がそのnoteを読ませていただいたのは、2023年の10月くらい。DeNA入社前にインターンをしていた頃でした。

『アプリ模写100本ノック』の原点は「静物のデッサン」

髙橋：私は総合大学出身でデザインの実務経験もほとんどなく、専門的に学んだわけでもなかったので、「このままデザインの仕事ができるのか？」と不安もあったし、「デザインのインプットを増やして、自分の引き出しを増やさないと」と課題感を持っていたんです。

そのことを上司に相談すると、「『アプリ模写100本ノック』が話題になっているから、やってみるといいんじゃない？」と勧められて。アプリ1本につき、30分の時間で区切って挑戦するのがすごくいいなと思い、「コレだ！」と。

倉光：アプリを一つ選んで、最初の10分はアプリを触りながら「観察」、そのアプリがもたらす体験の中で重要だと思う機能が含まれた3画面を決める。次の10分ではその3画面を、手描きで「スケッチ」する。そして最後の10分で3枚のスケッチを貼ったコピー用紙に、それぞれの画面に施されたデザインの工夫を書き出して「考察」する。

色々なプロダクトやソフトウェアを分解して設計や構造をひもとく、いわゆる「リバースエンジニアリング」の手法は、いろんな業界でも実施されていますよね。

ただ『アプリ模写100本ノック』の原点は「静物のデッサン」なんです。

私は大学でデザインを学んだのですが、そこを受験する前に、美術系予備校で静物デッサンを何枚も何枚も描いていたんですね。たいてい「4時間で」と時間制限があって、とにかく「質より量」をまず求められました。

すると画力があがるのもありますが、「モノを見る目」が育つんです。

髙橋：モノを見る目？

倉光：ええ。デッサンを描くことも、デザインをすることもアウトプットですが、アウトプットはインプットがなければできません。

インプットは、まず何かを見ることからはじまります。そして、同じものを見ても、自分の目でモノをとらえて、どう解釈するかによってアウトプットは変わる。

ですので、まずは何でも興味をもって、おもしろがって、積極的にインプットして、あれこれと考えることが、デザイナーの引き出しになっていきます。ひいては、その引き出しが積み上がったうえに、「自分ならではのモノの見方」が生まれ、「自分ならではのデザイン」がアウトプットできるようになると思うんです。

30本目の変化。模写から見えてくるデザインの意図

倉光：100本ノックの1本目は、どんなアプリを選びました？

髙橋：iPhone標準の「メモ」アプリです。

倉光さんのnoteにLINEやFacebookのような「多機能で複雑なスーパーアプリ」はコア機能を読みづらいから避けたほうがいい、とあったので、なるべくシンプルなものからはじめようと。

倉光：1本目からすんなりできました？

髙橋：まず模写そのものが大変でした。

「この画面を模写しよう」と決めて、付箋に描き始めるのですが、細かなところまでトレースしようとすると時間がかかりすぎてしまうんです。正確に描こうとすると付箋1枚に収まらなくって、「あれ？」みたいな（笑）。

倉光：スクロールすると意外と1ページが長いですからね。

なので、ある程度、最初の10分で「この画面にしよう」と決めるとともに、「コア機能は何か」を咀嚼してポイントを絞って画面を切り取って描く。すべて見たまま描くのではなく、ある種の編集力のようなものが必要になりますよね。逆にいうと、模写をするうち、そうした力が養えるともいえるんです。

髙橋：そうですよね。最初はそうした「コア機能はこれ」と読み取る力も足りないから、すぐに10分、30分が過ぎてしまいました。「時間がない！」と焦りながら、読み解いていましたね。

倉光：よくわかります（笑）。ただ100本ノックを続けるうちに、慣れるとともに見え方が変わったのを感じた瞬間、ありませんでした？

髙橋：ありました。明確だったのは、30本目くらいで、スマホだけで料金のあと払いができる『Paidy』のアプリを模写したときです。

『Paidy』には、カード発行をするためのボタンがあって、その上部にカードのイラストが描かれていました。そこにシールが少しだけ剥がれているアニメーションがあって、自然と「このシール剥がしたい！」という気持ちになりました。

「カード発行しましょう！」などとは書かれていないけれど、ユーザーの心理として、「タップしたくなる」導線になっている。うまいデザインだなあ、と気づけている自分がいました。

倉光：すばらしいですね。

たぶん1〜10本目でも、模写をするうち、たとえば「サービスのブランドカラーが赤だから、UIのプライマリーカラーに赤を選んでいるんだな」とか「全体的に丸みを帯びたデザインを好んで使っているんだな」といった表層の考察は誰でも気づけるようになると思います。

髙橋：そうでした。

倉光：でも20～30本くらいになると、「このデザインはきっと、こういう意図があるのでは？」とデザイナーの思惑が透けて見えるようになる。表層的なデザインの工夫だけではなくて、「違う面を探そう」と自然と視座が高くなる気がするんです。

髙橋：まさに！さらに30本を超えたあたりからは、ある程度、アプリのデザインの傾向が見えるようになったと思います。

「今はフラットなデザインがトレンドだな」と気づいたり、角のデザインを見て「このアプリは、ちょっと古臭く感じるかも」などと、細かい部分にまで目がいくようになりましたね。

70本目を超えて開花した実践力。プロジェクトで活きるアプリ模写の経験

倉光：髙橋さんのnoteでは、「70本目で実際に活かせるようにアプリの工夫を分析するようになった」と書いてありました。そのあたりでレベルアップした手応えが？

髙橋：ありました。

ただ70本目くらいからは、実際にプロジェクトに配属されるようになった時期でもあって、その影響も少なからずあったのかなと思います。

「こういう場合、テキストはどんなフォントにしたほうがよかったっけ」とか「確か、こういうときのボタンはあのアプリが上手だったな」とか。

つくる側にまわると、そうした自分の引き出しがどれくらいあるかによって、本当にデザインの幅が変わります。積み上げてきたノックによって、自然と引き出しが増えていたことを感じました。大変だったけれど「少し前の自分、えらい！」と。

倉光：（笑）。しかも、70本を超えたくらいになると、自分のスマホにすでに入っているアプリや、興味の外側にあるようなアプリにまで手を出さざるを得なくなりませんでした？

ここでぐっと引き出しがただ増えるのではなく、「幅の広さ」が出てきます。また、興味が薄かったアプリでもちゃんと「このデザインはココがいい」「デザイナーはこういう意図があるのだな」とこれまでの経験を活かして、考察しやすくなると思うんです。

髙橋：まさにそうでした。100本近くになって海外の英語だけのニュースアプリやマインドフルネスのアプリを考察したりしましたね。

もっとも言語が違えど、UIデザインがうまいアプリは、導線に沿ってサクサクと操作が進む。そうした気づきもありました。

また、スポーツ応援実況アプリ『play-by-sports』を担当したあとは、競馬や競輪などのアプリも「何かヒントが得られそうだ」と模写しました。抽象度を上げると「競技者に思い入れを持って応援する」という意味で似た部分があります。実際、参考になりましたね。

倉光：知らないジャンルや興味のない領域でも、ランキングの上位にあるアプリは「どこかの誰かが必ず熱狂している」ということ。自分視点だけではなく、そうしたユーザー側に立ってUIパターンやアプリの思想が読み取れるようになるのは、まさに100本ノックの大きな効能かもしれません。

たくさんのアプリを観ているうちに、もう「クセ」のように「このUIってユーザーさんから見てどうなのかな」と考察する習慣がついてきますからね。もちろん、自分視点も殺さずに、両方を使い分けられるようになるのが、良いデザイナーなのかなと思います。

100本完走で得た自信と成長。そして、AI時代だからこそ「良いデザインを見極める目」を

倉光：ところで、最後の100本目はどんなアプリを？

髙橋：海外のマインドフルネスのアプリを取り上げたので、日本のマインドフルネスアプリを選んで、比較しました。

実は、社内のSlackの「#times」（個人チャンネル、社内版Xのような位置付け）に「100本ノック」のことをオープンにしていたんです。結構注目されていて、「いよいよ100本目近いねー！」「注目しています！」といった声があったので、どれにするかは結構悩みました（笑）

倉光：100本続けるのって本当に大変なんですが、髙橋さんのようにオープンにして「誰かに見せる」のと、場合によっては「誰かと一緒にやる」のは、『アプリ模写100本ノック』継続のコツなので、大正解だったと思います。

あと「最後の100本目は何を選ぶのがいいと思いますか？」と聞かれたとき、私は「1本目のアプリをもう一度、模写してください」とお伝えしています。

自分がどれくらい成長したか、観察力や考察力がどれくらいあがったのかをはっきりと自覚できますからね。

髙橋：なるほど！メモ帳に戻るべきでした（笑）。

私自身「100本ノック」を完走できたことで、まず自分に自信が持てたことは大きなメリットだったと感じています。引き出しが増えて、デザインのアイデアの幅が広がったのもあるのですが、そうした意見を何かしらの裏付けを持って語ったり、提案できる。

また、「100本ノック」をしてから今も、アプリを触るたびに「これはどんなデザインか」「どんな意図が」とインプットするのが当たり前になり、日々、UIデザイナーとしての血肉になっていると感じています。また、最近はWebサイトなどのグラフィックの領域でも、そうした視点でデザインをインプットするようになりました。

将来、必ずこの視点というか習慣が活きていくだろうと。それが良いアプリやユーザーの方のすばらしい体験につながっていったら素敵だなと思っています。

倉光：必ずそうなると思いますよ。

髙橋：最後に伺ってもいいですか？倉光さんは、デザイナー支援を通して、あるいはデザインを通して伝えていきたいことというか、ビジョンめいたものはありますか？

倉光：デザイン領域は、今後どんどん生成AIが入ってくると思うんです。すると当然、学び方も変わってくる。もしかすると生成AIが肩代わりすることで、人間が介在することのなくなっていく手順やタスクも出てくるでしょうから。

ただ、いくら生成AIがデザインに入り込んでも「良いデザインを見極める目」は私たち人間が持っておく必要がある。根底にあるデザインの知識や人間心理、思想みたいなものも磨く必要は変わらずあり続けると思うのです。

その意味で、『アプリ模写100本ノック』のようなインプットと考察の習慣は変わらぬ価値があると思うし、未来を開くデザイナーの方こそ、どんどんチャレンジしてほしいですね。

髙橋：なるほど。しっかりメモしておきます。本日はありがとうございました！

倉光：こちらこそ、楽しかったです！

執筆：箱田 高樹　編集：川越 ゆき　撮影：内田 麻美
撮影場所：WeWork 渋谷スクランブルスクエア 共用エリア/会議室