SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Googleのモバイルアプリフレームワーク「Flutter」でUIデザイナーがやるべきこととは

  • X ポスト
  • このエントリーをはてなブックマークに追加

 今回は、Googleが提供している「Flutter」と「マテリアルデザイン」を含むUIデザインについてお伝えします。解説するのは、デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんです。

  • X ポスト
  • このエントリーをはてなブックマークに追加

 こんにちは!株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。

 今回はGoogleが提供している「Flutter」と「マテリアルデザイン」を含むUIデザインについてお話しします。ご存知の方も多いと思いますが、まずは「Flutter」について簡単にお伝えします。

「Flutter」ってなに?

 Flutterは2018年にGoogleがリリースしたオープンソースのフレームワークです。「モバイルアプリフレームワーク」という位置付けのサービスで、「Android」や「iOS」など異なるOSに対して同じソースを共有し、アプリケーションを同時にクロスプラットフォーム開発することが可能です。

出典:Flutter
出典:Flutter

 現在は、ウェブやWindowsデスクトップにまでその裾野を広げていて、開発する際に便利な機能が多数搭載されています。(プラグインやハードウェア、ビルド環境などの違いから、一部個別の対応が必要なケースもあります)

Flutter公式サイトはこちら

 Flutterでは「ホットリロード」と呼ばれるコード変更の確認などを、再びフルビルドすることなく反映できるため、アプリケーションの開発スピードを高速化することができます。また、UI(ユーザーインターフェース)を柔軟かつ自由自在にカスタマイズができるなど、効率が良く、工数やコスト削減などにつながる多くの機能を備えています。

クロスプラットフォームアプリ開発のメリット

 Flutterのようにクロスプラットフォーム開発が可能なフレームワークでは、単一のソースコードで、AndroidやiOSなど複数のプラットフォームに対応したアプリが作成できます。ホットリロード機能で高速なアプリの再実行が可能で、共通のコードとデバッグの高速、共通化によってスピーディーな開発を実現しています。

出典:Flutter
出典:Flutter

 異なるプラットフォームでアプリを作動できたり、ホットリロード機能で工数、開発コストを削減したりと、メリットやデメリットもたくさんあると思います。今回は「デザインの観点」から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は「ウェジェット」とよばれるパーツの組み合わせでアプリケーションを構築する仕様となっています。ナビゲーションやタブバー、ボタンなどさまざまなウィジェットがありとても汎用性が高いため、実現したいレイアウトを迅速かつ柔軟に作成することができます。

出典:Basic widgets | Flutter
出典:Basic widgets | Flutter

また、ホットリロード機能を利用することで、変更結果を即座に確認することができるため、コードを書き換えるだけで簡単に仕様を変更することが可能です。レイアウト変更における工数を削減し、スムーズな仕様変更ができる点は大きなメリットだと言えます。

3.Android/iOS を同時に作成しリリースできる

一般的には、AndroidとiOSのアプリをそれぞれ個別に作るため、2回分のリソースが必要となります。しかしFlutterでは AndroidとiOSで分けることなく開発ができ、共通のコードで対応(例外もあります)ができるため、Android/iOSの同時リリースを行うことが可能です。

工数が減ることにより、一般的にはAndroidとiOSのふたつのプラットフォームで開発するよりも予算を押さえることが可能となります。

この記事の続きは、「CreatorZine」に掲載しています。 こちらよりご覧ください。

※CreatorZineへの会員登録(無料)が必要になる場合があります。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15170 2021/11/11 08:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング