ブログ - 2021-10-21 10:56:00

【Webデザイン】シンプルおしゃれな”ニューモーフィズム”とは??

Posted by 江口 史和里
Shiori Eguchi

みなさん、こんにちは!

前回に引き続き、Webデザインについて調べていたところ

”ニューモーフィズム”という聞き慣れない言葉。

 

New(新しい)+Skeumorphism(スキューモーフィズム)

=Neumorphism(ニューモーフィズム)

 

....スキューモーフィズムとはなんでしょうか??

スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。

(Wikipediaより)

 

 

なんとなくイメージしてみるとするならば、

iPhoneのアプリアイコンでしょうか。

昔のOSのアプリアイコンでは、リアルで立体的なデザイン(スキューモーフィズム)に対し

最近は、フラットデザインが使用されているものが多いです。

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン例)Instagram

スキューモーフィズム・フラットデザイン、と出てきて

そして二つを掛け合わせた”ニューモーフィズム”と移り変わってきているようですね。

画像右のinstagramアイコンも、フラットではあるけどちょっと立体的。

 

 

実際にニューモーフィズムでデザインをつくってみました。

めちゃめちゃ便利なニューモーフィズムサービス☞☞☞ https://neumorphism.io/

マテリアルデザインとは違い、

ひとつの紙(レイヤー)が膨らんでいたりへこんでいるように見えるのが特徴。

 

どのように表現しているかというと、2種類のドロップシャドウ(影)をつけているためです。

影をぼかさずにくっきりさせるとこう。

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン

意外と単純ですが・・・

影の色などを良い感じにするのが難しい・・。

シャドウの入れ方一つで、雰囲気ががらっと変わるのが不思議ですね。

 

以下おまけ。

ニューモーフィズム的・ボタン要素も作ってみました。※PC推奨

マウスポインタを上にのせたり、クリックしてみてくださいね!

 

Posted by Shiori Eguchi
<Remote>WEBコーダー/クリエイター 江口 史和里

江口 史和里が書いたその他記事

2022-01-23
今年の一文字
2019-12-22
かごしまの旅

ブログ TOP

ブログ 2021-04-09 19:15:00

こんにちは☆ 最近はお昼はポカポカ日和なのに 夜は相変わらず寒いく(T-T) 早く暖かくならないかなと願うセキです。   ...


ブログ 2021-03-22 17:43:00

こんにちは!!   かいとです!!     先日、ロケーションフォト撮影に行って参りました! &n ...


ブログ 2021-09-22 17:47:00

    こんにちは井手口です♫   毎週末結婚式の現場に携わる中で日々 感じている事を皆様にもお伝え ...


ブログ 2020-08-21 19:52:00

おはこんばんにちは!!   海斗です!!   突然ですが、みなさんは最近YouTubeご覧になっていますか? ...


ブログ 2022-02-16 11:59:00

  皆さんこんにちは 冬のせいなのか最近どうしても食欲を止めることができない井手口です 寒いと体が蓄えようとするっていいます ...


ブログ 2021-01-18 12:12:00

      みなさんこんにちわ、横山です。 今回は前回の続きで色についてよく考えてみましょう。 &n ...


ブログ 2021-01-22 21:54:00

最近、気になっているTV CMがある。   気になっているというよりも   「記憶に残る」TV CM。 &nb ...


ブログ 2021-02-13 14:38:00

こんにちは^^   昨日、仕事をしていると 郵便物が届きました!! 機材関係かな〜と受け取りに行くと   ( ...


ブログ 2022-12-19 18:49:00

こんにちは、桑原です。   テキストにアニメーションをつけるとき 大体の人がプリセットから選んでるのではないかと思います。 ...


ブログ 2020-11-15 11:27:00

今回のテーマは「福岡市に拠点を置きながら映像制作をするということ 〜その1〜」。(その1と書いたのは一度には書き切れそうにないのでシリーズで ...