こんにちはYOUTRUSTのアプリエンジニアの優依那(YOUTRUST / X)です。
最近YOUTRUSTのアプリでグラデーションデザインを実装しました！
今回はFlutterで使えるグラデーションの種類や実装方法を、実例を交えてご紹介します🌈
早速ですが、SNSで実装されているグラデーションをパッとイメージできますでしょうか🤔💭
Instagramではグラデーションの実装箇所が多く、
アイコン/ストーリーズの活性状態/いいねタップ時のハートアイコン/
QRコード画面の背景/メッセージの背景
などでグラデーションが実装されています。
DM機能のメッセージの背景は、スクロールするとそのスクロール方向にグラデーションが動くといった特殊な実装がされています。
TikTok / mixi2
TiktokでもQRの背景に使用されていたり、 最近話題になったmixi2もアイコンや招待画面、
その他の細かい箇所でグラデーションが実装されています。
YOUTRUST
YOUTRUSTでは新たに、オンボーディングの背景とボタンにグラデーションが導入されました🎉
例に挙げたように、現在のSNSアプリではグラデーションが積極的に取り入れられており、
視認性やブランド印象に関わる重要なUIで活用されています。
グラデーションデザインが注目されている理由
最近では、シンプルで洗練されたデザインが主流となる中で、
グラデーションは「シンプルだけど印象に残る」表現として再注目されています。
特に、ユーザーの目に留まりやすいアイコンやボタン、背景などに効果的に取り入れることで、
アプリ全体の雰囲気やブランドイメージを引き立てる役割も果たしています。
グラデーションを使用することで得られるUI効果
🌟オリジナリティのある色合いで、他のアプリと差別化できる
グラデーションを使うことで、単色では出せない独自の雰囲気や世界観を表現できます。
🌟立体感が出て、クリック率アップにもつながる
フラットデザインのトレンドを取り入れつつ、タップできる範囲が視覚的にわかりやすくなるため、CTRの向上にも効果があります。
Flutterで使える主なグラデーション3選
🌈 LinearGradient：線形グラデーション
LinearGradientは直線方向に色が変化するグラデーションで、
BoxDecorationのgradientプロパティの配下で使用します。
beginとendにはAlignmentを指定します。中央が(0,0)、左上が(-1, -1)、右下が(1, 1)です。
個人的に少し感覚と違ったのが、y軸は上に行くほどマイナスになるので注意が必要です。
🎯 RadialGradient：放射状グラデーション
RadialGradientは放射状に広がっていくグラデーションでradiusで大きさを変更できます。
🕰️ SweepGradient：時計回りグラデーション
SweepGradientは画面横軸の0の座標からスタートするグラデーションを実装できます。
YOUTRUSTで実装したグラデーション
YOUTRUSTのグラデーションはSweepGradientを使用していて
stopsで使用する色の開始地点を調整し、transformでグラデーションの回転を制御しています。
🎯 mesh Gradientを実装できるパッケージ
メッシュグラデーションを実装できる面白いパッケージがあったのでそちらも紹介します。
GUI上でグラデーションを自由にデザインできて、
あとは生成されたコードをコピペするだけで、簡単に実装できます！
🎯 最後に...
ぜひグラデーションを実装する際のお役に立てると嬉しいです！
今回ご紹介した内容は、先日の YOUTRUST 主催の Flutter LT会でも登壇させていただきました！
YOUTRUST では定期的に Flutter のイベントを開催しているので、
興味のある方はぜひXの開発アカウントをフォローしてチェックしてみてください🌟
YOUTRUSTではエンジニアを募集しています！ 興味がある方はカジュアル面談からでもOKなのでぜひ✨
