ブログデザイン備忘録 ~ニューモーフィックデザイン

1. ニューモーフィズム
2. ニューモーフィックデザインの特長
3. ニューモーフィックデザインの例
4. まとめ

1. ニューモーフィズム

　ニューモフィズムとは、物質の質感を似せるスキューモーフィズム(Skeumorphism: wikipedia:スキューモーフィズム )とフラットでシンプルなデザインを組み合わせたもので、new+skeumorphismでNewmorphism（ニューモーフィズム）と名付けられた。昨年末ぐらいからトレンドになっているらしい。ニューモーフィズムなデザインとか、またはスキューモーフィックデザインに対してニューモーフィックデザインと呼ぶことにする。

ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

2. ニューモーフィックデザインの特長

　バックグラウンドと要素（ボタン、チェックボックス、テキストボックスなど）のベース色を同じにして、ベース色よりも明るい色と暗い色を使った2種類の影(box shadow)により、要素がバックグラウンドよりも浮き上がるあるいは凹んでいるように表現する。

3. ニューモーフィックデザインの例

ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator | コリス内のリンク先にNeumorphic Generator というニューモフィックデザインになるようなCSS styleのコードを生成してくれるツールがあり、以下にいくつか生成した例を示す。

例1:円凹み

<div style="width:200px;height:200px;background: #D2DBEE;">
<div style="width:100px;height:100px;transform: translateY(50%) translateX(50%);background: #D2DBEE; border-radius: 100%; box-shadow: inset 9.91px 9.91px 19px #B9C1D1, inset -9.91px -9.91px 19px #EBF5FF;"> </div></div>

例２:円浮き上がり

<div style="width:200px;height:200px;background: #8367e9;">
<div style="width:100px;height:100px;transform: translateY(50%) translateX(50%);background: #8367e9; border-radius: 100%;box-shadow: 12.01px 12.01px 15px #775ED4, -12.01px -12.01px 15px #8F70FE;"> </div></div>

例3:四角凹み

<div style="width:200px;height:200px;background: #D2DBEE;">
<div style="width:100px;height:100px;transform: translateY(50%) translateX(50%);background: linear-gradient(145deg, #F9FFFF, #ABB2C1); border-radius: 15%; box-shadow: inset 9.91px 9.91px 15px #BFC7D9, inset -9.91px -9.91px 15px #E5EFFF;"> </div></div>

例3:四角浮き上がり

<div style="width:200px;height:200px;background: #89d28e;">
<div style="width:100px;height:100px;transform: translateY(50%) translateX(50%);background: linear-gradient(145deg, #A3F9A9, #6FAB73); border-radius: 15%; box-shadow: 12.01px 12.01px 15px #7DBF81, -12.01px -12.01px 15px #95E59B;"> </div></div>

例4:ボタン

以前紹介した入力フォームのデザインを応用してニューモフィックデザインを採用した例を以下に示す。

atatat.hatenablog.com

輪郭が薄いので、色によっては認識しづらいという欠点がある。

<div style="width:200px;height:100px;background: #8367e9;">
<div><input type="button" value="ボタン" style="cursor:pointer; transform: translateY(50%) translateX(50%);width:100px;height:50px;text-align:center;text-decoration:none;color:white;background: #8367e9; border-radius: 15%;box-shadow: 12.01px 12.01px 15px #775ED4, -12.01px -12.01px 15px #8F70FE;border:none;"></div> </div>

例5:ボタン(エフェクト追加)

<div style="width:200px;height:75px;background: #EEF0F4;">
<div style="width:100px;height:25px;transform: translateY(100%) translateX(50%);text-align:center;text-decoration:none;color:black;background: #EEF0F4;box-shadow: 12.01px 12.01px 15px #D9DADE, -12.01px -12.01px 15px #FFFFFF;"onmouseover="this.style.background='gray';this.style.color='red'"onmouseout="this.style.background='#EEF0F4';this.style.color='black'">ボタン</div></div>

ボタン

例6:テキストボックス

<div style="width:300px;height:100px;background: #D2DBEE;">
<div><input class="text" type="textbox" placeholder="Email Address" style="width:200px;height:50px;transform: translateY(50%) translateX(25%);background: linear-gradient(145deg, #F9FFFF, #ABB2C1); border:none; box-shadow: inset 9.91px 9.91px 15px #BFC7D9, inset -9.91px -9.91px 15px #E5EFFF"></div></div>