ブログ - 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

ブログ 2022-10-28 03:30:00

こんにちは!   宮崎です!   去年の10月にピークスマインドの内定者インターンに入ってから   ...


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

こんにちは、桑原です。 AEトラジション第3弾です!   クリエーターあるあるですが、大体使うトランジションて決まってき ...


ブログ 2021-07-31 21:24:00

GH5ユーザの皆さん、こんな経験はございますでしょうか?   ----カメラの録画中にバッテリーが落ち、 SDカードのデータ ...


ブログ 2021-03-28 22:00:00

どうもこんにちは山内です★ もうすぐ4月ということでなんと私の子供も小学校デビューします!!! 小学校にいくということは新しい世界に飛び ...


ブログ 2022-11-11 19:45:00

どうも皆さんはじめまして!     2023年新卒内定者インターンの志水 勇輔(しみず ゆうすけ)です &nbs ...


ブログ 2023-02-13 22:18:00

みなさんこんばんは!永原です! インターン期間も含め、ピークスマインドに入ってから1年以上が経ちました。 最初は未経験の私にこんなことで ...


ブログ 2023-05-27 15:37:00

今日はコロナ禍を終え、急激に最近忙しくなってきたからこそ感じたことをツラツラと書きます。「挨拶」と「整理整頓清掃」これが出来ない会社やチーム ...


ブログ 2024-03-31 01:02:00

どうも皆さんこんにちは! 志水 勇輔(しみず ゆうすけ)です     僕は動画クリエイターとして、カメラマンとし ...


ブログ 2023-11-29 14:19:00

みなさんこんにちは! 今回は、11/15〜11/16、1泊2日の東京研修の2日目です!   2日目は朝ホテルで朝食をとること ...


ブログ 2023-06-17 12:18:00

こんにちは。あるいはこんばんは。 社会人になって早くも2ヶ月半が経ちました。割と楽しく日々を送っております大窪です。最近買ったスカートが良 ...