Neumorphism（ニューモーフィズム）とFlutterでの実装方法

Flutter
2023.08.11
スポンサーリンク

Neumorphism（ニューモーフィズム）は、近年のUIデザインのトレンドとして注目されているスタイルです。この記事では、Neumorphismの概要と、Flutterでの具体的な実装方法について解説します。

Neumorphismとは？

Neumorphism（ニューモーフィズム）は、リアルな物理的な要素をシンプルに表現するデザイン手法で、近年のUIデザインのトレンドとして注目されています。このデザインスタイルは、陰影と光の効果を巧みに利用して、ボタンやカードなどの要素が画面から浮き出るように見せることが特徴です。

陰影と光の効果

Neumorphismの最大の特徴は、陰影と光の効果を使って3Dのような視覚効果を生み出すことです。通常のフラットデザインとは異なり、Neumorphismでは、要素の外側に柔らかい陰影を配置し、内側には光の反射を表現します。この組み合わせによって、要素が画面から浮き出ているかのような錯覚を生み出します。

シンプルで洗練されたデザイン

Neumorphismは、シンプルで洗練されたデザインを提供します。色彩は控えめで、主に中立的な色調が使用されることが多いです。このため、ユーザーの目を引きつけることなく、全体のデザインと調和します。

ユーザー体験への影響

Neumorphismのデザインは、ユーザーに対して直感的な操作感を提供します。要素が浮き出ているように見えることで、タッチやクリックが期待される場所を自然に示すことができます。これによって、ユーザーは迷うことなく操作を行うことができるでしょう。

FlutterでのNeumorphismの実装

Flutterでは、以下のように3つの異なるNeumorphicデザインを簡単に実装することができます。

1. シンプルなNeumorphicボタン

ボタンに陰影と光の効果を追加して、浮き出るように見せます。

// Neumorphicボタンの実装例
Container(
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.white,
        offset: Offset(-5, -5),
        blurRadius: 15,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        offset: Offset(5, 5),
        blurRadius: 15,
      ),
    ],
  ),
  child: FlatButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

下記のサイトでコピペして確認してください。

DartPad
An online Dart editor with support for console, web, and Flutter apps.
dartpad.dev
 
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.white,
                  offset: Offset(-5, -5),
                  blurRadius: 15,
                ),
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: Offset(5, 5),
                  blurRadius: 15,
                ),
              ],
            ),
            child: TextButton(
              onPressed: () {},
              child: Text("Button"),
            ),
          ),
        ),
      ),
    );
  }
}

2. Neumorphicカード

カードにも同様の効果を適用し、リアルな見た目を実現します。

// Neumorphicカードの実装例
Container(
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.white,
        offset: Offset(-5, -5),
        blurRadius: 15,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        offset: Offset(5, 5),
        blurRadius: 15,
      ),
    ],
  ),
  child: Text("Card"),
)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.white,
                  offset: Offset(-5, -5),
                  blurRadius: 15,
                ),
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: Offset(5, 5),
                  blurRadius: 15,
                ),
              ],
            ),
            child: Text("Card"),
          ),
        ),
      ),
    );
  }
}

3. Neumorphicスイッチ

スイッチにもNeumorphismを適用することで、一貫したデザインを提供します。

// Neumorphicスイッチの実装例
Switch(
  value: _isSwitched,
  onChanged: (value) {
    setState(() {
      _isSwitched = value;
    });
  },
  activeThumbImage: AssetImage('path/to/your/image'),
  inactiveThumbImage: AssetImage('path/to/your/image'),
  activeTrackColor: Colors.grey[300],
  inactiveTrackColor: Colors.grey[300],
)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Switch(
            value: _isSwitched,
            onChanged: (value) {
              setState(() {
                _isSwitched = value;
              });
            },
            activeTrackColor: Colors.grey[300],
            inactiveTrackColor: Colors.grey[300],
          ),
        ),
      ),
    );
  }
}

まとめ

Neumorphismは、現代のUIデザインにおいて魅力的な選択肢となっています。Flutterを使用すれば、このデザインを簡単に実装することができます。

上記のコードを参考にして、自分のプロジェクトにNeumorphismを取り入れてみてください。

スポンサーリンク