- 浮き上がったようなボタンを作りたい人
- ReactNativeでニューモーフィズムUIボタンを作りたい人
と言う方向けの記事になっています。
1. ニューモーフィズムとは?
Neumorphism(ニューモーフィズム)とは、「明るい影」と「暗い影」の2種類の影を使用して、浮き上がったり、くぼんでいるような凹凸のあるデザインのことです。
このデザインを使ってボタンなどのUIを作ると、かなりおしゃれなアプリになること間違いないです!
ちなみに言葉の由来は、
New（新しい）＋Skeumorphism（スキューモーフィズム）
＝ Neumorphism（ニューモーフィズム）
と言う造語らしいです。
2. 概要
本記事では、以下のようなニューモーフィズムUIボタンの作り方を解説します。
3. 作り方
さっそく、ニューモーフィズムUIボタンの作り方について解説していきます。
3.1 ベースカラーを決める
まず、初めに「背景」と「ボタン」のベースカラーを決めます。
ボタンの凹凸を作るので、「背景」と「ボタン」の色はに同じ色にする必要があります。に
3.2 2つの影を付ける
次に「明るい影」と「暗い影」を設定します。
明るい影（光）は左上に、暗い影は右下に設定します。
また、影の色もベースカラーと似た色を設定する必要があります。
私は、以下のオンラインツールを使ってベースカラーの「明るい影」と「暗い影」のコピペして使いました。
CSSコードジェネレーター
このオンラインツールは、サイズやカラーを変更して、お好みのボタンを作成できる便利なCSSコードジェネレーターサイトです。
レイアウトの構成について
サンプルコード(簡易版)|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; export default class App extends React.Component { render() { return ( // 全体のスタイル <View style={styles.container}> {/* 上の影 */} <View style={styles.topShadow}> {/* 下の影 */} <View style={styles.bottomShadow}> {/* ボタン&ボーダーのスタイル */} <TouchableOpacity style={styles.border} onPress={() => console.log("a")}> {/* ボタンの文字列 */} <Text style={styles.text}>Neumorphism</Text> </TouchableOpacity> </View> </View> </View> ); } } const styles = StyleSheet.create({ // 全体のスタイル container: { flex: 1, backgroundColor: "#53b6f3", alignItems: 'center', justifyContent: 'center', }, // 上の影のスタイル topShadow: { shadowOffset: { width: -5, height: -5, }, shadowOpacity: 1, shadowRadius: 5, shadowColor: "#61d5ff", width: "85%" }, // 下の影のスタイル bottomShadow: { shadowOffset: { width: 5, height: 5, }, shadowOpacity: 1, shadowRadius: 5, shadowColor: "#4597ca", }, // ボーダーのスタイル border: { backgroundColor: "#53b6f3", borderColor: "#53b6f3", borderWidth: 1, borderRadius: 20, alignItems: "center" }, // ボタンの文字列 text: { alignItems: "center", justifyContent: "center", padding: 20, fontSize: 28, fontFamily: 'Baskerville-Bold', color: "hsla(0, 0%, 10%, 0.6)" }, }); |
上記のソースコードのように、＜View＞コンポーネントを使って、各それぞれのViewにstyleを設定していきます。
3.3 グラデーションは、お好みで
最後にボタンに影が馴染むように、お好みでグラデーションを設定してください。
グラデーションは、左上にベースカラーの暗い色→左下にベースカラーの明るい色を設定するとボタンに影が馴染みます。
本プログラムは、グラデーションを実装する為に、
expo-linear-gradientライブラリを使用しています。
以下のコマンドを実行をすることでインストールすることができます。
|
1 |
npm install --save expo-linear-gradient |
4. 最後に
今回、「浮き上がったようなボタン」の作り方について解説しました。
他にも「くぼんでいるようなボタン」を紹介したかったのですが、
筆者本人がReactNativeでの「くぼんでいるようなボタン」の作り方がわからない為、今回解説できない状態です。
分かり次第、記事にまとめて再度、紹介したいと思います。
5. サンプルコード
全体のコードは以下のようになります。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/AntDesign'; import { LinearGradient } from 'expo-linear-gradient'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <View style={styles.topShadow}> <View style={styles.bottomShadow}> <TouchableOpacity style={styles.border} onPress={() => console.log("a")}> <Icon name="twitter" color="hsla(210, 100%, 50%, 0.7)" size={40} style={styles.button} /> </TouchableOpacity> </View> </View> <View style={[styles.topShadow, { marginTop: 30, width: "60%" }]}> <View style={styles.bottomShadow}> <TouchableOpacity onPress={() => console.log("a")}> <LinearGradient colors={["#34b6f3", "#71d5ff"]} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} style={[styles.border, { alignItems: "center" }]} > <Text style={[styles.text, { color: "hsla(0, 0%, 10%, 0.6)" }]}>Neumorphism</Text> </LinearGradient> </TouchableOpacity> </View> </View> <View style={{ marginTop: 30, width: "85%" }}> <View style={styles.topShadow}> <View style={styles.bottomShadow}> <TouchableOpacity style={[styles.border, { flexDirection: "row", padding: 5 }]} onPress={() => console.log("a")}> <View style={[styles.topShadow]}> <View style={styles.bottomShadow}> <View style={[styles.border, { marginLeft: 10, marginTop: 5 }]} onPress={() => console.log("a")}> <Icon name="apple1" color="hsla(0, 0%, 20%, 0.7)" size={35} style={[styles.button, { padding: 10 }]} /> </View> </View> </View> <Text style={styles.text}>Neumorphism</Text> </TouchableOpacity> </View> </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#53b6f3", alignItems: 'center', justifyContent: 'center', }, button: { alignItems: "center", justifyContent: "center", padding: 20, }, text: { alignItems: "center", justifyContent: "center", padding: 20, fontSize: 28, fontFamily: 'Baskerville-Bold', color: "white" }, // ボーダーのスタイル border: { backgroundColor: "#53b6f3", borderColor: "#53b6f3", borderWidth: 1, borderRadius: 20, }, // 上の影のスタイル topShadow: { shadowOffset: { width: -5, height: -5, }, shadowOpacity: 1, shadowRadius: 5, shadowColor: "#61d5ff", }, // 下の影のスタイル bottomShadow: { shadowOffset: { width: 5, height: 5, }, shadowOpacity: 1, shadowRadius: 5, shadowColor: "#4597ca", }, }); |
結果
