ブログ - 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-02-13 22:55:00

本日は、8人の新卒のエントリー者の2次選考。1次選考はオンライン開催。今回の2次選考はオフライン開催。密を避けるため、2回に分けて実施。 ...


ブログ 2024-10-23 22:32:00

こんばんは! いかがお過ごしでしょうか? 最近自炊を再開して健康になりつつある、なかむら りんです!   さて、私が5つ目 ...


ブログ 2024-10-18 20:37:00

  誰もが使うInstagram 今はFacebookよりもXよりもInstagramが一番使われていると言われていますが ...


ブログ 2023-07-31 22:58:00

どうも、大窪です。クリエイターやってます。はい。 なにかで聞いたことがあるんですけど、プロの俳優とは何か、それは自らを俳優と名乗る覚悟だ、 ...


ブログ 2021-02-26 20:37:00

前回はフォントの選び方について書かせて頂いたのですが       今回は次の段階、文字色の選び方につい ...


ブログ 2024-10-24 14:51:00

  最近はお天気もよくて、日差しもつよくない日があって公園デビューをした我が子   そして、可愛く写真をとろーーー ...


ブログ 2020-12-21 17:02:00

After Effects は細かな作業の連続です。   そのためキーボードショートカットを使いこなすことで作業効率が劇的に変 ...


ブログ 2024-06-28 13:26:00

結婚式のBGM × ドラマ主題歌   とても密接ですよね^^       T ...


ブログ 2021-02-08 20:05:00

こんにちは、桑原です。 ARの商品化に向けていろいろ試しているわけですが、 ポケモンGOをはじめキャラクターを登場させるという認識が ...


ブログ 2020-07-18 23:41:00

こんばんは★ 山男ことヤマオです。 今回はレーザー企画第二弾 「レーザーを創る時にない頭で考えてること 〜持論の巻 別に知らなくてもい ...