こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。
今回はGoogleが提供している「Flutter」と「マテリアルデザイン」を含むUIデザインについてお話しします。ご存知の方も多いと思いますが、まずは「Flutter」について簡単にお伝えします。
「Flutter」ってなに？
Flutterは2018年にGoogleがリリースしたオープンソースのフレームワークです。「モバイルアプリフレームワーク」という位置付けのサービスで、「Android」や「iOS」など異なるOSに対して同じソースを共有し、アプリケーションを同時にクロスプラットフォーム開発することが可能です。
現在は、ウェブやWindowsデスクトップにまでその裾野を広げていて、開発する際に便利な機能が多数搭載されています。（プラグインやハードウェア、ビルド環境などの違いから、一部個別の対応が必要なケースもあります）
Flutter公式サイトはこちら。
Flutterでは「ホットリロード」と呼ばれるコード変更の確認などを、再びフルビルドすることなく反映できるため、アプリケーションの開発スピードを高速化することができます。また、UI（ユーザーインターフェース）を柔軟かつ自由自在にカスタマイズができるなど、効率が良く、工数やコスト削減などにつながる多くの機能を備えています。
クロスプラットフォームアプリ開発のメリット
Flutterのようにクロスプラットフォーム開発が可能なフレームワークでは、単一のソースコードで、AndroidやiOSなど複数のプラットフォームに対応したアプリが作成できます。ホットリロード機能で高速なアプリの再実行が可能で、共通のコードとデバッグの高速、共通化によってスピーディーな開発を実現しています。
異なるプラットフォームでアプリを作動できたり、ホットリロード機能で工数、開発コストを削減したりと、メリットやデメリットもたくさんあると思います。今回は「デザインの観点」から3つに絞って紹介します。
1.Android／iOS／ウェブ（chrome browser）ともに共通したUIデザインを開発可能
Flutterでは、Googleが推奨するマテリアルデザインを採用しています。それにより、ユーザーがサービスを直感的に理解し、操作できるデザインがベースとなっており、各プラットフォームに依存しない共通のUIデザインを可能にします。
またFlutterの「Pixel Perfect」を活用することでAndroid／iOSともに共通した表現が可能となるため、OSに依存することなく共通したUIを構築できます。差別化を図ることもでき、実現したいプロダクトに合わせた柔軟な開発ができます。
またiOSの開発には、Appleの デザインガイドライン（出典：Apple「Human Interface Guidelines - Design - Apple Developer」）が定義されていて、そのガイドラインに沿ったUIを提供する「Cupertino」というパッケージを利用することも可能です。
2.ウィジェットを使ってレイアウト構築ができる
Flutterは「ウェジェット」とよばれるパーツの組み合わせでアプリケーションを構築する仕様となっています。ナビゲーションやタブバー、ボタンなどさまざまなウィジェットがありとても汎用性が高いため、実現したいレイアウトを迅速かつ柔軟に作成することができます。
また、ホットリロード機能を利用することで、変更結果を即座に確認することができるため、コードを書き換えるだけで簡単に仕様を変更することが可能です。レイアウト変更における工数を削減し、スムーズな仕様変更ができる点は大きなメリットだと言えます。
3.Android／iOS を同時に作成しリリースできる
一般的には、AndroidとiOSのアプリをそれぞれ個別に作るため、2回分のリソースが必要となります。しかしFlutterでは AndroidとiOSで分けることなく開発ができ、共通のコードで対応（例外もあります）ができるため、Android／iOSの同時リリースを行うことが可能です。
工数が減ることにより、一般的にはAndroidとiOSのふたつのプラットフォームで開発するよりも予算を押さえることが可能となります。
