はじめまして。株式会社ビデオマーケットのプロダクトデザインのマネージャーをやっております、野口と申します！現在進行中の自社サービスのアプリリニューアルにおいてクロスプラットフォーム開発SDK「Flutter」を採用しています。人的開発リソースを効率的に活用できる等導入にメリットがあった為、今回会社として初のFlutterに挑戦となりました。UIデザインも模索しながらでしたが、ネイティブでの開発と比べどういった実務の差があったのか紹介したいと思います。
ビデオマーケットにおけるこれまでのアプリUIデザイン
現在(リニューアル前)「VideoMarket」
WebViewアプリ + PHP(Laravel)
レガシーなUIと階層構造で課題が多くあり、根本的に解決するべき点が多く完全リニューアルの方向となりました。
サブブランド「minto（ミント）」
iOS,Androidネイティブアプリ
OS準拠のガイドラインを踏襲。マテリアルデザインガイドラインを忠実に取り入れたことにより、Google Play「ベスト オブ 2017」エンターテイメント部門入賞しました。 WebViewによるWeb UIからアプリらしいUIを作る文化が社内に定着しました。
(残念ながら、2019年4月にサービスを終了しました)
コンテンツホルダー直営 映像配信プラットフォーム「MIRAIL（ミレール）」
iOS,Androidネイティブアプリ
仙台オフィスを中心に開発。モダンな開発環境により、短い開発期間で多様なデバイスに対応しました。
リニューアルアプリのUIデザイン(iOS)
公式UIライブラリの活用
Cupertino (iOS-style) widgets
https://flutter.dev/docs/development/ui/widgets/cupertino
Flutterで実装可能なOS準拠(風)のライブラリはこちらで確認しました。iOSユーザーにとっての体験を最適化させるために積極的に採用しました。
メリット
- ほとんどのコンポーネントを網羅されている
- サイトが見やすくまとまっているので、アプリエンジニアとこのページを見ながら実装の相談がしやすい
デメリット
- 最新OSに追加されたコンポーネントやiOSであまり見かけないマイナーなコンポーネントは未対応の場合がある
- 余白やサイズ感が若干違う
気づいたこと、拘ったこと
- ネイティブ(Swift)アプリと遜色のない挙動をとり、言われても気づかないくらいのクオリティーだった
- プロダクト進行時、SF Symbols発表前だったのでよりiOSライクなUIにするべくiOS(風)アイコンを画像で用意した
- FlutterにはAndroidライクなライブラリが豊富に用意されていたが、違和感があるためあえて使わなかった
使用したデザイン関連ツール
今回はデザインプロセスのフローに合わせて以下のようなツールを使いました。
１）Sketch：UIデザインツール
社内でこれまではAdobe XDをメインで使用していましたが、、プロジェクト始動時(2018年夏頃)、UIコンポーネント(シンボル)作成機能があった「Sketch」を選択しました。※現在はXDもアップデートされ機能差分はなくなっています。
公式サイト：https://www.sketch.com/
２）Trunk：UIデザインバージョン管理
複数名のデザイナーでシンボルファイルを同時に更新するため、バージョン管理ツールを導入しました。
公式サイト：https://jointrunk.com/
３）Backlog：ファイル共有
Sketchファイルの保存場所として活用。メリットとしては下記の点がありました。
- プロジェクト単位で隔離されたクラウドストレージ
- 一部のメンバー(デザイナー)しかアクセスしない
- Finder上でプレビュー出来る
公式サイト：https://backlog.com/ja/
４）Zeplin：UIガイドツール
今回Flutterでの開発ということで、UIガイドツールはGoogleの「Gallery」も候補にあがったが、アセットの書き出し機能を利用したかったので、「Zeplin」を選択しました。
初期設定 (Project設定)
Zeplinの新規Project作成において、選択できるプラットフォームはWeb、iOS、Androidの三択しかなくFlutterという選択肢はないので、今回はAndroidを選択しました。
画像の書き出しについて
基本的に画像はベクター画像(SVG)で書き出しました。アプリ開発におけるSVGの取り扱いは考慮する点が多く、トライアンドエラーは多少必要になります。今回もアンカーポイントの置き方やレイヤー構成等をなるべくシンプルにすることで、表示崩れを防ぎながら作成しました。
ビットマップ画像について
Flutterでの画像指定については以下のページに記述があります。
https://flutter.dev/docs/get-started/flutter-for/android-devs
画像サイズに指定において、密度の概念はなく全て等倍(論理ピクセル)で指定します。
画像の保存方法はiOSに近いものがあり、ピクセル比毎のディレクトリに同じ名前のビットマップ画像を入れるかたちになります。
単位の読み替え
Flutterは数値設定時の単位はpxなので、Androidプロジェクトのdpをpxに読み替えてもらうかたちで認識を合わせました。
インストールしたプラグイン
https://extensions.zeplin.io/johnatagoranet/flutter_extension
Flutter用スタイルを表示してくれるプラグイン。参考程度に活用。
公式サイト：https://zeplin.io/
今後の対応 Android版アプリの開発
１）OS準拠のライブラリの出し分け
まずはiOS版から先にリリースするため、Android UIは次フェーズになります。Flutterの利点を生かすため、必要な範囲を見定め、ビデオマーケットとしてのUIデザイン作成ポリシーを確立していく必要があります。
２）OS別設定値のチューニング
文字間等、同じ設定値でも違った見た目でコンパイルされます。※左がiOS、右がAndroid
まとめ
初めてFlutterと聞いたとき、いったいどういうものなのか他社事例も少なく未知数な部分が多く多少の不安要素はありました。事実、デザインツールの対応が追いついていないことや、クロスプラットフォームゆえのOS準拠UIをどう振り分けて考えるかの問題等、まだまだ今後考えていかなければいけないことがあります。 しかし、実際にやってみると皆で調べながらひとつひとつ解決していくこと、日々エンジニアの理解が進み形になっていく様子等、最先端の技術発展と共に歩んでいる感覚を味わえるということはめったに出来ない貴重な経験だと思いました。
またネイティブアプリの場合、実装部分はアプリエンジニアに丸投げすることしか出来ませんでしたが、DartはJavaScriptの代替言語ということで、Flutter for Webの対応も踏まえてデザイナーもUI実装に参入しやすいのではないかと思っています。デザイナー自身が開発言語の理解を深めることで、より細かいインタラクティブなデザインの実現につながると思います。
今夏、リニューアルアプリのリリースに向け、現在最終調整中です。劇的にUIは刷新されており、とても使いやすいアプリに仕上がっていると思います。１日も早くより良い映像体験をお届けしたい気持ちでいっぱいです。リリースをお楽しみに！
