LoginSignup
6

More than 3 years have passed since last update.

じゃんけんフィーバーをFlutter+Neumorphismで実装してみた。

Last updated at Posted at 2020-12-05

はじめに

この記事は、最近流行のNeumorphism(ニューモーフィズム)と代表的なアプリデザインを超簡単に説明する✍️ の続きです。ぜひ前回の記事を読んでからこの記事を読んでください。
今回はじゃんけんフィーバーをFlutterとNeumorphism(ニューモーフィズム)を使用して実装してみます。実際に触れてNeumorphism(ニューモーフィズム)を感じてください🙌

Neumorphism(ニューモーフィズム)を使用するとこんなアプリになります

まず2020年7月に作ったアプリを見ていただきたいです。

新卒の技術研修で作成したアプリです。シンプルで余白が多いですがNeumorphism(ニューモーフィズム)のおかげで寂しくなっていません。ボタンなどの押し心地が良いアプリになりました。

どうやって実現したか

まずNeumorphism(ニューモーフィズム)の原則に沿ってデザインをしました。初めてのFigmaを使って慣れないながら、それっぽく仕上げました。

大事なポイントは3つ
1. 明るい影と暗い影を使って浮き沈みを表現する。
2. 背景色から輝度を変えた色を影の色に使う。
3. 浮き沈みさせた範囲の背景色は変えない。

これを守るだけでNeumorphismになります。詳しい内容はNeumorphism in user interfacesを読むと良いです。

次にFlutterの話です。Flutterはマテリアルデザインのコンポーネントは簡単に利用できます。マテリアルデザインは影(奥行き)があるため浮かせるということは苦労しません。ただ、沈める(凹ませる)には少し工夫が必要でした。当時はBoxPainterを使用して影を描き込むことで表現をしました。お手製の沈めるコンポーネントを作成して利用しました。詳しいコードは解説しません。次の見出しが理由です。

便利なライブラリ

Neumorphism(ニューモーフィズム)のコンポーネントを簡単に利用できるライブラリができていました🎉
ありがとう世界のエンジニア!
今回はこちらのライブラリを使ってアプリを作成します。

作ったアプリ

rpcf.gif

ライブラリのおかげで簡単にますNeumorphismを使用することができました。思いつきで実装してみましたが、無条件にお洒落になるので面白かったです。

詳しいコードはリポジトリをご覧ください。
Github rock_paper_scissor_fever

触れて体験

iOS Apple Store
Google Play Store

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6