株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > cssのネタ帳~ニューモーフィズムっぽいボタン~

cssのネタ帳~ニューモーフィズムっぽいボタン~

UPDATE : 2020.11.25

CATEGORY :
Sato
Sato

Sato

2020年のwebデザイントレンドになるんではないかと言われていた

スキューモーフィズム



そもそもスキューモーフィズムとは…
スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の物質に似せるために行うデザインや装飾を指す用語である。
wikipediaより引用

よく例に挙げられるのが、iPhoneのインターフェイスです。
iOS 6のデザインと、iOS 14のデザイン比較
iOSのユーザーインターフェイス比較
以前はつやつやで陰影があり、立体的に表現されています。
現実世界のボタンを模すことで「押せる!」ということが伝わってきます。
アイコンの下には映り込みまであり、よりリアルに演出されていますね。

それがiOS 7以降、フラットなデザインとなりました。
Windowsも7以前では立体的なUIが使用されていましたが、8以降ではフラットデザインへと変化しました。


そんな一昔前感のあるスキューモーフィズムですが、

・まるで雑誌の1ページようなレイアウトのwebデザイン

・紙に印刷したかのようなテクスチャのwebデザイン

などなど、
以前のリアルな物体感!とは少し違った形で再ブームが起こるのではないかな~と思っています。
(ちなみに↑の黄色い線も「蛍光ペンでマークしたような」装飾ですね)


そんなスキューモーフィズムとフラットデザインの良いとこ取りの派生形を
「ニューモーフィズム」と言うそうです。ニュー+スキューモーフィズムですね。

cssで、ニューモーフィズムっぽいボタン!
BUTTON
うっすら浮かび上がるようなボタンになりました。
マウスオン・タップで、凹んだような見た目になります。
ポイントは光が当たっていることを表現する点です。(このボタンの場合左上)
そのため背景とボタン本体には白が使えない、というのが難点でしょうか…

この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design