Flutterにおけるデザインの作り方（個人開発向け）⭐️
この記事はFlutter大学のアドベントカレンダー20日目の記事です。
はじめに
Flutterで個人開発し始めた方から「デザインは最初に作った方がいいのかな。」「Figmaの使い方も全くわからない。」という声を聞くことがありました。最近実装の傍、デザインを頼まれる機会がちょこちょこ増えてきたので、今日はFlutterでアプリ開発を始めるときのFigmaのデザインの作り方を紹介していきます。初心者向けに解説していきます。非デザイナーなので専門的なことは書けません（勉強中）が、誰かの参考になったらいいなと思います。
Flutterにおけるデザイン
Flutterでのアプリ開発ではAndroid,iOSの両方に適したウィジェットがそれぞれ標準で用意されています。AndroidではMaterialウィジェット、iOSではCupertinoウィジェットというそれぞれのOS系統のデザインのウィジェットが使えます。
MaterialウィジェットはGoogleが提唱しているMaterialDesignで作られています。
MaterialDesignとは現実世界にある物の動きや影、奥行きに沿ったデザインを意味します。
どのようなコンポーネントが標準なのか、以下に目を通すと良いです。
対して、CupertinoウィジェットはAppleが提唱するHuman Interface Guidelinesで作られています。Human Interface Guidelinesとは言葉・画像・デザインをどのように選択すればユーザーが簡単にコンテンツや機能を使えるようになるかをまとめたガイドラインです。
コンポーネントは以下です。
これらのコンポーネントは標準でウィジェットが用意されているため、スタイルに合わせてウィジェットを使うことで一番実装コストが低く、速く実装ができます。
Flutter自体Googleが開発しているフレームワークなので、実際の開発でもMaterialウィジェットを使用することが多いです。もちろんCupertinoウィジェットを使用してiOSスタイルで作ることも可能ですが、メインはMaterialウィジェットを使用するのがいいと思います。（iOSアプリのみ開発するならCupertinoでも良いかも）
ちなみに以下のパッケージを使用することで、プラットフォームに応じて変換することもできるようです。
デザインの流れ
ここからは個人的なデザインを作る流れを紹介していきます。
- まずは想像のデザインを描き出してみる
- 似たようなアプリを見てみる
- 必要な画面を洗い出す
- Figmaでデザインする
- 日本語設定にする
- 画面フレームの追加
- 図形（コンポーネント）の追加
- おすすめのキットやプラグイン
- テーマカラー決め
- テキストスタイル
- プロトタイプを作成する
- 最後に付け足してみる
1. まずは想像のデザインを描き出してみる
まずは単純に自分が作りたいアプリを頭の中で想像して、そのイメージを紙などに描き出してみます。こんなのがあったらいいなくらいでいいと思います。実際の開発ではデザインの前にワイヤフレームというアプリの枠組みを作成するのですが、それに当たると思います。早速Figmaで作るのも良いと思います。
こんなイメージ。（字が汚い笑すみません😭）
2. 似たようなアプリを見てみる
次は似たようなアプリを見てみましょう。どんな機能や画面が必要なのか、ボタンやテキストの配置はどうなのか、色の使い分け方など、似てるアプリでもそれぞれにこだわりがあったりするので、多くのアプリを見てみると良いかもしれないです。
AppStoreで類似のアプリをインストールしたり、いろんなアプリUIを見れるサイトを見て参考にしましょう！おすすめのサイトは以下です。
-
UI Pocket
既存アプリのUIデザインギャラリーサイト。アプリのカテゴリや機能ごとに検索ができます。
-
Mobbin
有料でないと全てのUIをみることはできないですが、アプリが豊富でiOSとAndroidごとに探すことができます。
-
Pinterest
Pinterestで「App Ui Design」や「Flutter」などと検索するとアプリのUIデザインの画像が大量に出てきます。おしゃれで素敵なデザインが多いので、少し遊びをいれてみたいときはここからアイディアをもらえます！
他のアプリを見ることで自分の作るアプリのイメージが湧きやすくなりますし、新しいアイディアが浮かぶかもしれませんね。素敵なデザインを見つけたり、取り入れられそうなものがあったら先ほどの想像で描き出したワイヤフレームを修正したり、メモを取っておくと良いですね。自分の普段使っているアプリやFlutter大学メンバーの作成したアプリなども参考になりそうですね！
3. 必要な画面を洗い出す
自分のイメージや他のアプリを基に、実際に自分のアプリでどんな画面を作るのか整理します。画面に対してそれぞれどんな機能があるのかを洗い出します。最初は小規模でスモールスタートが良いそうなので、なるべく最低限の機能と画面数にします。自分で実装可能かどうかレベル感も考えて、時間がかかりそうなものはアップデートで増やしていくスタンスが良さそうです。これを元にデザインを作っていきます。
4. Figmaでデザインする
では早速Figmaでデザインしていくんですが、まずはよく使う操作を紹介します。
日本語設定
英語設定になっている人は日本語設定にすると、Figmaも使いやすくなると思います。
右下の？ボタン ＞ Change language から変更できます。
画面フレームの追加
スマホの画面サイズのフレームを追加します。この上に1画面ずつ図形を重ねてアプリデザインしていきます。
左上のフレーム（ショートカットキー[F]）を押すと、右側に端末名が表示されるので、任意の端末を選択してください。
図形（コンポーネント）の追加
左上の図形ボタンからいろんな図形を追加できます。
これらを使用して、ボタンなどを作成したりします。
ここまで操作の方法が分かったら、ほとんどデザインできるので、図形などを使用して早速作っていきましょう。
おすすめのキットやプラグイン
-
Material Design 3 kit
FlutterのMaterialウィジェットと同じコンポーネントなどが用意されているので、これを使用するとデザインも実装もより速くなります！
-
Android UI kit
Androidのステータスバーなどのコンポーネントが用意されています。
-
Apple Design Resources(iOS17)
iOSのステータスバーなどのコンポーネントが用意されています。
-
Material Symbols
このプラグインを使用すると、FlutterのMaterialDesignIconウィジェットを使用できるので便利です。
テーマカラー決め
テーマカラーは簡単に決めるのであれば、メインカラーとサブカラーとアクセントカラーの3色を決めると良いと思います。
配色に困ったら以下のサイトなどを使用してみるのが良いです。
-
Color Magic
キーワードを元にAIが配色を生成してくれます。とっても便利。
-
Color Hunt
メイン・サブ・アクセントの3色がとても見やすいパレットが豊富です。
Material Designに沿うのであれば以下を使用すると良いと思います！
-
Material Color System
Flutter大学のすささんが公開しているMaterialColorパレットがとても見やすくなっているサイトです。
カラーパレット設定
カラーが決まったら、Figmaでカラーを保存しパレットを作成しておくとデザインもスムーズに行えます。
使いたいカラーを図形などにセットし、①[::]ボタン ＞ ②ライブラリの右の[＋]ボタン からカラーを保存することが可能です。使う際は①[::]ボタンからカラーを適用できます。どのコンポーネントにもこのカラーが使えるようになりました！
ちなみにFigmaにMaterial Theme Builderというプラグインがあり、色を指定すると自動でカラーパレットを作成してくれます。Material Colorならこちらを使用すると良さそうです！
テキストスタイル設定
テキストを追加するときに文字サイズや太さを指定すると思いますが、これらのスタイルも保存することができます。方法はカラーと同じく ①[::]ボタン ＞ ②[＋]ボタンです。
プロトタイプ作成
ちなみにアプリのように実際に動作確認したいと思ったときはFigmaのプロトタイプを使用すると良いです。
例） ページ1の右下ボタンを押下したら、ページ２に飛ばしたいとき。
右下ボタンを選択 ＞ 右側のプロトタイプからインタラクションの[＋]ボタン で動作を設定できます。
これまで紹介したツールや操作でデザインが大体完成すると思います。特にあまりデザインに時間をかけたくないという方は紹介したkitやプラグインをぜひ使ってみてください。
5.最後に付け足してみる
大体デザインが完成してきたけど、もう少し良くしたいと感じたときはフォントを変更したり、アニメーションを追加してみるのがおすすめです！
フォントはGoogleフォントを使用すると比較的簡単に変更することが可能です。
アニメーションは少し追加するだけでユーザの受け取り方は変わってくると思うので、簡単なアニメーションだけでも実装してみてはいかがでしょうか。
おわりに
ここまで閲覧いただきありがとうございました！紹介した全てを使わなくても、良さそうだと思ったものを取り入れてみてください！この他にもアプリアイコンやフィーチャーグラフィックなどの画像を作成する必要があるので、後日更新したいと思います。個人開発の始めの壁はデザインかもしれない(？)ので、誰かのお役に立てたら嬉しいです！何かあれば指摘ください！
参考
Discussion
Flutterのデザインでよく悩むんですけど、デザインの参考になるサイトやプラグインのご紹介をしているのを見つけれたのと、SwiftUIとJetpack Composeで使えるプラグインもあるのか〜と感動しました😆
手書きのイラストを使うのも僕やることあるのですが、すぐにできるので、頭の中のイメージを可視化できて、スッキリしますね!
素晴らしい記事でした🙇
Jboyさんー！いつもありがとうございます！！！☺️☺️💙💙
ええええ、友達ってバレる💦
Figmaのプラグインはいいもの見つけました!
年末年始にゆっくりみます!