【初心者にやさしい】Flutterアプリ開発のお供となるツールなど10選

# 本記事の目的
　Flutterの学習を始めてはや2ヶ月が経とうとしています。 __現時点での目標としては、3ヶ月目に自作のアプリケーションを実装したい__ と考えていますが、その過程で __便利なツールやサイトなどが豊富にある__ ことに気付いたので、その中から __10個__ 選んでご紹介したいと思います。
　初心者の方でも役に立つものを選んでいるつもりですので、参考になれば幸いです。

# 本記事の構成
　本記事では、Flutter開発に役立つモノとして、「__サイト編__」、「__ツール編__」、「__動画教材編__」の3つに分けてご紹介し、合計で10個となるようにしてあります。
　「__サイト編__」は主に「__見て参考にするもの__」、「__ツール編__」は主に「__自分で操作して参考にするもの__」、「__動画教材編__」は主に「__動画を見て参考にするもの__」という区分けにしてあります。

# 便利なサイト編

## ①Flutter公式サイト
![](https://i.gyazo.com/4580eb305bc04ffd77e0a77f6a35800a.jpg)
　まずは何と言っても、「__Flutter公式サイト__」です。
　とにかく解説が充実しており、Flutterというものを一から理解するのに最適だと思います。
![](https://i.gyazo.com/64926eaff56dfaec9e5be3e1b9b60249.png)
「__Get Started__」というコーナーで、Flutter開発のための環境構築からスターターアプリの開発まで、一連の流れを体験できるのでとても便利です。

　ちなみに、 __環境構築__ に関しては個人的に難しいと感じたので、初心者の方でもわかりやすいことを心がけて記事にしてありますので、よろしければ参考にしてみてください。
　　↓↓↓
　[【初心者にやさしい】Flutter3での環境構築の手順書(WindowsとMac両方)](https://qiita.com/technoship0329/items/0296fbd7bfc1f374669c)

![](https://i.gyazo.com/d1cd70ade902437498d54244f29ed4fc.png)
また、「__Widget Catalog__」というページでは、Flutterでの開発には欠かせない要素である、「__Widget__」について、どのようなWidgetがあるのか、どのような使い方ができるのかなど、分かりやすく解説してくれているので、おすすめです！！

全て英語なので、「英語が苦手...」という人は苦労するかもしれませんが、 __内容は一番信頼のおけるもの__ ですので、おすすめとさせていただきます。

　[Flutter公式ページはこちらから](https://flutter.dev/)
　[Widget Catalogはこちらから](https://docs.flutter.dev/development/ui/widgets)

## ②Material Design Palette
![](https://i.gyazo.com/b3bd8dc7f02a75d5224b671814b721d7.png)
　次にご紹介するのは、「__Material Design Palette__」です。これは、Google社が提供している基本デザインである「Material Design」を使用したデザインについて、アプリの配色をどのようにしたいかを検討するときに便利なサイトとなっております。
　
　やはり配色を決めるときに、実際にどのような色具合になるのかということを自分の目で確認したくなりますよね？
　そのときに、このサイトを使用すれば、 __自分が選んだ色の組み合わせが実際にどのように見えるのかを確認することができます！__
![](https://i.gyazo.com/d6c9427a83c69edbd7086771f4a52105.png)
　使い方は簡単で、チェックしたい色の組み合わせを選ぶと自動的に表示してくれます。 __UIにしっかりとこだわるならこのサイトを使用する価値は大いにあります。__

　[Material Paletteはこちらから](https://www.materialpalette.com/)

## ③Dribbble
![](https://i.gyazo.com/24092838edc2955fb728350424e0858c.jpg)
　次にご紹介するのは、「__Dribbble__」というサイトです。これは、 __世界中の何百万人というデザイナーが、自分で作成したデザインを公開しているサイト__ になります。
　思わず使ってみたくなるような素晴らしいデザインが沢山展示されているので、これらのデザインからインスピレーションを受けることも多々あるでしょう。
![](https://i.gyazo.com/cf5d4381ddca138e4d9fff135e38e8c7.png)
　Flutterでのモバイルアプリの開発のための参考になるデザインも豊富です！

　[Dribbbleはこちらから](https://dribbble.com/)

# 便利なツール編

## ④App Icon Generator
![](https://i.gyazo.com/ee6c437198b4b415b18f0cf24bbabb10.png)
　ツール編、まず最初は、 __モバイルアプリのアイコンのデザインを簡単に作成できるツール__、「__App Icon Generator__」です。アイコンに使用したいデザインファイルをアップロードし、適用したいデバイスの種類を選択すれば、あとは自動的にアイコンのデザイン作成が実行されます。
　そのファイルをエディターに読み込めば、実装は完了となります。

　[App Icon Generatorはこちらから](https://appicon.co/)

## ⑤Color Zilla
![](https://i.gyazo.com/c4e531e65cb07b3fee4a8aad5f89874a.png)
　次にご紹介するのは、GoogleChromeの拡張機能である、「__ColorZilla__」です。
![](https://i.gyazo.com/109df67b8495321af3d2a355934dcc79.jpg)
この拡張機能を導入すると、上の写真の右上のように、ペンマークが現れます。
![](https://gyazo.com/588ab5173eb5fe7c71131872440aaaeb.jpg)
現れない場合は、上の写真のように「拡張機能→ピン留め」をしましょう。

「__Pick Color From Page__」を選択すると、その時点の画面にある色のコードを読み取ることができます。
![](https://i.gyazo.com/8320a0861e2050a55e474f1ebabd0ce7.jpg)
　アプリの実装で、自分で細かく配色を決めたい場合もあると思います。その時は、__このColorZillaを使えば、参考にしたいサイトで使われている色のコードが分かるので、それをアプリの色設定のところで使用すれば良いことになります。__

　[Color Zillaはこちらから](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja)

## ⑥Google Fonts
![](https://i.gyazo.com/b1c040ef980a459338263166617da915.png)
　次にご紹介するのは、「__Google Fonts__」です。これを使うと、Googleが提供しているウェブフォントを自分のアプリ開発で使うことができます。様々なフォントが用意されているので、とても使いやすいツールになります。

　導入にあたっては、以下のサイトが参考になりますよ！
　[Google Fonts導入手順参考](https://flutternyumon.com/how-to-use-googelfonts/)

　私が実装した時は、GoogleFontsのファイルをエディター上に保存して、それを読み込むことで使用可能にするという方法をとったのですが、このサイトで紹介されている方法によると、 __Flutterの外部パッケージ__ を利用することで、もっと簡単に実装が済んでしまうようですね。

　[Google Fonts公式はこちらから](https://fonts.google.com/?query=Source+)

# 便利な動画教材編

## ⑦The Complete 2021 Flutter Dev Bootcamp with Dart
![](https://i.gyazo.com/3a9b7923221eeb5280e4729dd513dd0d.png)
　動画教材編としてまずご紹介するのは、Udemyで有料教材として提供されている、「__The Complete 2021 Flutter Development Bootcamp with Dart__」という教材です。
　この教材は、Google社のエンジニアである、「__Angela Yu__」という講師によって提供されているものになります。

　この教材の良いところは、「__そもそもFlutterとはどういうものなのか__」という __概念的な観点の講義と、実践的な講義のバランスが絶妙__ だという点です。私は受講し始めてまだ半分の地点までしか来ていませんが、 __このコースをマスターすれば、Flutterを使用したアプリ開発に必要な知識は整ってしまうような気がしています！__

　講義は英語ですが、「__MicrosoftEdge__」を利用して翻訳をかけると、字幕も含めて永久的に日本語翻訳してくれるので、 __英語が苦手な人でも安心__ ですよ！

　ただ、「__Flutter2系__」での動画ですので、「Flutter3系」に対応していません。まだ3系対応の動画を販売してくれていないようなので、これで我慢するしかないようなのですが、概念的なところを見るだけでも相当ためになるので、おすすめには変わりありません！

　ぜひ購入してみてください！（通常価格20,000円くらいですが、セールだと2,000円くらいになります😄)

　[この動画教材はこちらから](https://www.udemy.com/course/flutter-bootcamp-with-dart/)

## ⑧FlutterでのはじめてのTDD!
![](https://i.gyazo.com/bd29cbf5b417c337735456b57baae604.png)
　次にご紹介するのは、同じくUdemyで提供されている、「__FlutterでのはじめてのTDD!__」という教材です。
　TDDとは、「__Test Driven Development__」の略であり、「__テスト駆動型開発__」と呼ばれているものです。これは、アプリケーションの挙動テストを先に行なった上で実装を進めていくという手法のことであり、 __効率的かつ安全なアプリ開発のために利用されているもの__ になります。

　本動画では、長年SEを務めてきている講師が、Flutterでテスト駆動型開発手法を用いて電卓アプリを作るという内容になっています。テスト駆動型開発の何が良いのか、どのように実践するべきかということをとても分かりやすく解説してくれているので、非常に勉強になりますよ！

　[この動画教材はこちらから](https://www.udemy.com/course/flutter-tdd/)

## ⑨YouYube Flutter公式チャンネル
![](https://i.gyazo.com/e26066bc5179d8484e34065ca409c6c5.jpg)
　次にご紹介するのは、 __YoutubeのFlutter公式チャンネル__ です。 __迷ったら「公式」__ と言われるほど、公式での情報収集は大切です。

　このチャンネルでは、公式サイトのスターターアプリの開発の解説から、便利な機能の解説まで幅広い内容を扱っています。やはり「英語」という点が難点ではあると思いますが、自動翻訳機能を使えば苦手な人でもある程度のところまではいけると思うので、ぜひ試してみて下さい！
![](https://i.gyazo.com/5789074fab45f69f2d30c6e470fca2e8.jpg)
　ちなみに個人的には、この「__Widget Of The Week__」というコーナーがとても好きですね。便利なWidgetについて解説してくれていますので、勉強になります。

　[この動画教材はこちらから](https://www.youtube.com/c/flutterdev)

## ⑩KBOYのFlutter大学
![](https://i.gyazo.com/a4dbc63a005479fe498bee05d8b9e7b0.jpg)
　最後にご紹介するのは、ご存じ「__KBOYのFlutter大学__」です。Flutterでの開発を始めようとして、大体この動画に一番最初に出会う人が多いのではないでしょうか。

　つい最近までは、古いバージョンのFlutterに対応した動画だったのであまり役に立たない部分が多かったのですが、__最近になって新しいFlutterのバージョンに対応した動画をアップロードしてくれたので、この先明るいです！！__

　実践的なアプリ構築動画もあるので、とても便利ですよ！！

　[この動画教材はこちらから](https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw)

# まとめ　
　今回は、「__サイト編__」、「__ツール編__」、「__動画教材編__」と3つの項目に分けて合計10個のものをご紹介しました。

　もちろん個人的に便利だと思ったということもありますが、 __Udemyでの動画内で紹介されていたもの__ や、 __他の方のブログなどで多く紹介されていたもの__ から抜粋してご紹介しているので、どれをとっても納得のいく内容のコンテンツだと信じております。一つでも参考になれば幸いです。

　これからもお互いエンジニアとして頑張っていきましょう！！