Flutterで"動く"UIトレースやってみた

こんにちは！Yusukecと言います。
今回が初のnote投稿です。

私は普段はマーケティングの企画職をしているのですが、プライベートのアプリ開発に興味があり、半年前からFlutterを学んでいます。

Flutterとは？：）
→Googleが開発・提供するアプリ開発のフレームワークです。
→iOS、Androidに対応。独自の描画エンジン内臓でUIの自由度が高く、動作も軽量な点がウリ。
→公式サイトはこちら。

コロナの影響もあって完全に独学なのですが、その過程で取り組んだ”動く”UIトレースがとても良い勉強方法でしたので、是非シェアさせてください。
実際にトレースしてみた３つのアプリの制作録を通じて、”動く”UIトレースの学習効果や醍醐味、また、モチベーションが意外と続いた話などを書きたいと思います。
なお、まだまだ初心者レベルですので、技術的な話や開発のノウハウみたいな話は一切していません。（できません！）

これからFlutterを始められる方の何かの参考になると嬉しいですし、私自身、この半年間ですっかりFlutterのファンとなってしまったため、このnoteをみてFlutterって面白そうと思って頂けたら幸せです。また、プロ開発者の方におかれましては是非暖かい目でご覧いただければと思います...！

そして意外なことに、本業のマーケティングにも良い学びがありました。アプリやWebに携わる企画職の方にもなんらか参考になると嬉しいです。

それでは目次です。

1. "動く"UIトレースとは？

そもそも”動く”UIトレースとは？ですが、
「実際のサービスをそっくりコピーしたアプリ・Webを開発すること」
と言う意味で使っています。

UIトレース自体はWebやアプリ界隈のデザイナーさんの勉強メソッドで、世の中の素敵サービスのビジュアルをトレースするものです。私はUIトレース系のnoteが好きで良く拝見しており、今回はプログラミングの勉強方法として活用させて頂きました。

なぜ始めたかというと、その前にオリジナルアプリ開発にチャレンジしていたのですが、入門動画で学んだ程度の知識では、全く歯が立たなかったのですね。。もっと実装力を高めねばと思い、方法を考え、アプリのトレースを始めてみたのが今年の1月頃でした。

１つで終える予定だったのですが、始めてみたら意外と楽しく、最終的に3つのアプリをトレースしました。次から１つずつ紹介しますが、是非忌憚ないご意見もらえると嬉しいです！

2. トレースその１〜Uberアプリ〜

はじめにトレースしたのはUberです。元々サービスが好きで、アプリも洗練された印象があるので選びました。

開発したアプリをスマホで実際に動かした様子を動画にまとましたので、ぜひご覧ください。（1分近くありますが、15〜16秒あたりがハイライトです！）

いかがでしょう！思ったより本物に寄せることが出来た気がします。（なおUberの開発サイクルは非常に早く、現在のUIは既に変化しています。。涙）

初めてなので試行錯誤の連続でしたが、振り返ると、①UIのトレース、②ロジックの実装、③"動き"の演出の３つのステップを繰り返していたように思います。

順に説明していきます！

---

まずはUIのトレースを進めていきます。

開発中の画面はこんな感じです。左でコードを書き、右にスマホのシミュレーターを立ち上げて、出来栄えを確かめます。

FlutterではHot Reloadと呼ばれる、コードを変更すると即座にUIにも反映される最強機能があるので、まずはざっくりとパーツを置いてみて、徐々に細部を微調整するという力技が可能です。初めのうちはこのHot Reloadが楽しくで、いろんなパーツを自作していました。

例えば冒頭のUberのロゴも、円と四角の組み合わせで作っています。
色を変えて遊んでみたり。

FlutterでUberのロゴアニメを作ったので、色変えて遊んでみました😃

FlutterのAccentカラーのシリーズ良いですよね。

black | blueAccent,
pinkAccent | purpleAccent,
amberAccent | greenAccent#Uber #Flutter pic.twitter.com/H01fU3HDJg

— Yusuke-c (@yusukec3) May 9, 2020

今見るとGIFで良かったんじゃないかと思ったりしますが、とはいえGIFの作り方も分からんし、悩むくらいなら作ってみよう、くらいのノリでサクサク作りました。

この時点ではまだ地図の表示やアプリらしい動きはありませんが、完成形をイメージ出来るので、モチベーションが湧いてきます。特にFlutterはUIを作りやすいので、まずはトレースをひと通り終えてしまうのがおすすめです。

---

次にロジックや難しいUI（地図など）の実装を進めました。

どこから手を付けるべきかも分からず、まずは不明点をリストアップしました。当時のメモはこんな感じです。

□ 地図はどうやって表示するのか？
□ 地図のトンマナはUber風に変えられるのか？
□ ユーザの入力を元に目的地を予測して、候補を表示することができるか？また、入力途中からもリアルタイムに更新できるか？
□ ユーザの現在地を取得できるか？
□ ルートはどのように描画するのか？（点群？？）
□ ルートのアニメーションは、地図の描画ライブラリに含まれるのか？それとも自分で実装すべきか？
□ ルートの描画範囲をどうやって地図の表示範囲に収めるのか？
□ 起動後のロゴ・アニメーションはプログラムで動かすのか？
（他多数）

リストを書き上げたあと、とりあえず途方に暮れたのを覚えてます。。この時期独学に限界を感じ、FlutterエンジニアのMeetUpイベントにも申し込んでいたのですが、コロナの影響で中止になったりしていました。あとはもうぐぐるしかない。

複数の問題を同時に解こうとすると手が止まることが分かったので、１日１つのテーマに絞って、潰していくことにしました。早めに終わった日は早めに切り上げて、終わらない日は課題を刻み、テーマが２つあったことにします。

毎日↓のようなラフスケッチを書いて方針を立て、ぐぐり、コードに落とす作業を２ヶ月ほど続けました。

死ぬほどぐぐった後に気づいたのは、大抵の問題には誰かがもう答えを出してくれてることです。当たり前ですね。。。でも、これに気づいてとても気が楽になりました。ちゃんとググれば必ず答えはあるし、逆にググっても答えが出ない場合は、遡って見直した方が良い場合もあることを学びました。

途中、全く実装が思い付かず、諦めたくなるような課題もいくつかあったのですが、そんな時は「Uberは世界最高峰のアプリだから、これができたらなんでもできる！」と、自分に言い聞かせました。笑
今思えば、自分の実装力を大きく超えたアプリを選んで正解だったと思います。その方が未知のライブラリや開発者ブログに出会えて良いですね。

---

さて、そんな苦行を経て、いよいよ”動き”の演出に入ります。ここはアプリの総仕上げで、動くトレースの醍醐味とも言えるパートです！

そもそもアプリのアニメーションって、かっこいいですよね。下の画像はUberの公式から拾ってきたものですが、

どれもとてもクールです。スッと始まり、サッと伸びて、とても軽快。
重力を感じさせないと言うか。

このようなアニメーションの緩急をイージングと言うそうですが、これがあるのとないので、かなりアプリの印象が変わってきます。

例えば以下のルートアニメでは、左が始めに作った時、右が最後にイージングを調整したものなのですが、

かなり印象が違いますね！！！

まあ、私のさじ加減一つではあるのですが。笑

とはいえ、これまで苦労して作ってきたアプリがにわかにUberらしい動きを見せると、ちょっとした感動があります。これは”動く”UIトレースならではの醍醐味だと思うのですが、初めは簡素に、徐々に複雑に組み上げていくので、その途中で急に"らしさ"を感じる分界点があるんです。

そして、何をもってUberをUber"らしく"感じているかは、意外と自分自身でも良く分かっていないもんだ気づかされます。Uberの場合は、イージングのさじ加減がそれでした。（少しそれますが、Uber公式のブランドガイドラインには”Uberらしさ”が規定されています。"Motion"の項を見ていただくと、Uberが動きに込める思いが書かれていて、面白いです。）

---

こうしたステップを繰り返して、冒頭動画のアプリが出来上がりました。

作業時間は、おそらく80〜100時間程度だと思います。隙間時間を見つけての作業だったので、年始の連休明けに始めて、3月中旬くらいまでかかりました。

1つ目で想像以上に長くなってしまったので（汗）、次からサクサク行こうと思います。あと２つです！

3. トレースその２〜UberEatsアプリ〜

次にチャレンジしたのはUberEatsです。Uberがかなり独創的なUIだったので、コンテンツがリストで並ぶような、一般的なUIを学ぶために選びました。

ホーム画面〜検索UIまでを実装しています。UberEatsは時間帯やエリアによってコンテンツが変化するので、何度か起動してキャプチャを繰り返しました。

一番苦労したのは、検索画面の動きの実装です。UberEatsの検索画面は、非常に細かい動きに溢れています。

【検索トップ】
・初めは検索バーが上部の２割程度を占め、その下にカテゴリ一覧がグリッドで２列に並ぶ。
・下にスクロールすると検索バーが小さくなり、カテゴリ一覧の表示領域が大きくなる。（同時に検索バーにシャドウがつく）
・1ミリだけスクロールして手放すと、自動でバーが縮む。逆も然り。
・２列に並んだカテゴリは、登場するときにサッと下からスライドインするようなアニメーション効果がある。
...（他、検索入力や検索結果画面にもギミック多数）

共通しているのは、ユーザが興味を惹かれたポイントを大きく表示し、逆に注意が逸れた要素は小さく表示する、と言うUX設計だと思います。これらを実装したところでUberEats”らしさ”が出てきたので、次のアプリへと進みました。作業時間は40時間ほどだったと思います。

4. トレースその３〜ヘルスケアアプリ〜

最後にチャレンジしたのはAppleのヘルスケアです。iOS純正アプリのデザインに興味があったのと、ヘルスケアデータを引用する方法を知りたくて選びました。

ページ数は少なめで、実装は2日程度です。あまり特徴的な”動き”はありませんでしたが、iOSの純正アプリはUIをトレースするだけでApple"らしさ"が出るのが凄いです。

勉強になったのは、iOSアプリのライブラリの扱いでした。FlutterにはAndroidとiOSの定番デザインが用意されていますが、Google提供のサービスということもあり、Androidデザインがスタンダードとなっています。iOSをメインに開発を考えられている方は、純正アプリのトレースが良い練習になるのではと思います。

5. まとめ

このnoteでは、私が年始からチャレンジしてきた”動く”UIトレースについて、その面白さや進め方をシェアさせて頂きました。Flutter開発の楽しさも伝わっていると嬉しいです。

最後に、私が”動く”UIトレースに取り組んで良かったと思えるポイントを３つにまとめます。

<1> 完成像が明確なので実装に集中でき、モチベーションを保ちやすい（いきなりオリジナルアプリを作ろうとすると、完成像も実装もあやふやで手が進まない）

<2> ハイクオリティなアプリを題材に選ぶことで、強制的に自分の引き出しを増やせる（いつか役立つはず）

<3> ”動き”がアプリの印象に与える影響が大きいことに気づく（本業のマーケティングでも役立ちそう）

以上です！

私の場合、仕事は企画職＆コロナ中でしばらくは独学せざるを得ない状況でしたので、ぴったりな勉強方法でした。もちろんOJTで学ばれる方、メンターをつけられる方、様々いらっしゃると思います。（初めからオリジナルアプリにチャレンジできる方も尊敬します！）
おすすめのFlutter勉強方法があれば、是非教えてください。

---

次のステップは、オリジナルのアプリ開発です！ちゃんとアプリストアに公開できる日が来るように頑張ります。

開発中、ぐぐるたびに思うのは、他の方のブログが本当に勉強になり、励みになることです。ワンマン学習には限界も感じていまして、よろしければコメントやTwitterでレスポンスいただけると嬉しいです。

最後までお付き合いくださり、ありがとうございました！