Posted by | ![]() |
江口 史和里 Shiori Eguchi |
みなさん、こんにちは!
前回に引き続き、Webデザインについて調べていたところ
”ニューモーフィズム”という聞き慣れない言葉。
New(新しい)+Skeumorphism(スキューモーフィズム)
=Neumorphism(ニューモーフィズム)
....スキューモーフィズムとはなんでしょうか??
スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。
(Wikipediaより)
なんとなくイメージしてみるとするならば、
iPhoneのアプリアイコンでしょうか。
昔のOSのアプリアイコンでは、リアルで立体的なデザイン(スキューモーフィズム)に対し
最近は、フラットデザインが使用されているものが多いです。
例)Instagram
スキューモーフィズム・フラットデザイン、と出てきて
そして二つを掛け合わせた”ニューモーフィズム”と移り変わってきているようですね。
画像右のinstagramアイコンも、フラットではあるけどちょっと立体的。
実際にニューモーフィズムでデザインをつくってみました。
めちゃめちゃ便利なニューモーフィズムサービス☞☞☞ https://neumorphism.io/
マテリアルデザインとは違い、
ひとつの紙(レイヤー)が膨らんでいたりへこんでいるように見えるのが特徴。
どのように表現しているかというと、2種類のドロップシャドウ(影)をつけているためです。
影をぼかさずにくっきりさせるとこう。
意外と単純ですが・・・
影の色などを良い感じにするのが難しい・・。
シャドウの入れ方一つで、雰囲気ががらっと変わるのが不思議ですね。
以下おまけ。
ニューモーフィズム的・ボタン要素も作ってみました。※PC推奨
マウスポインタを上にのせたり、クリックしてみてくださいね!
![]() |
Posted by Shiori Eguchi
<Remote>WEBコーダー/クリエイター 江口 史和里
|
ブログ 2022-11-22 19:49:00
どうも皆さんこんにちは! 2023年新卒内定者インターンの志水 勇輔(しみず ゆうすけ)です   ...
ブログ 2024-10-31 23:34:00
こんにちは!先日、友人の結婚式に行ってきましたin 韓国! 大学時代サークルを通して仲良くなった友人出会った時からとってもアクティブで海外 ...
ブログ 2021-01-30 21:00:00
こんにちは、桑原です。 最近21卒内定者の子にAfrer Effectsを1から教えることが多いので 復習の意味も込めてトランジションの ...
ブログ 2021-02-05 12:46:00
こんにちは!たけばです! 今日はネット民にはおそらく 刺さるであろう映画の紹介! &n ...
ブログ 2021-02-19 21:47:00
こんにちは! かいとです 段々と気温も上がっていきそろそろ春なのかなと思っておりましたが、   ...
ブログ 2023-08-26 23:31:00
どうも皆さんこんにちは! 志水 勇輔(しみず ゆうすけ)です 皆さん、夏といえばなんですか? &nbs ...
ブログ 2021-02-05 21:08:00
こんばんは ひきちひきです 今日は私が最近はまってずっと食べてるお菓子を紹介させてください^^ &nb ...
ブログ 2024-08-30 23:27:00
こんにちは! 先日のブログの続きから、、、 ラスベガス研修1日目! 夕方ごろに到着して、まずラスベガス ...
ブログ 2022-12-19 12:09:00
こんにちは! 宮崎です 今日は私のお気に入りのMVやライブを &nbs ...
ブログ 2023-07-25 20:00:00
どうも、銀次です! 暑い季節、食べたくなるものはなんですかね?? そう!!焼肉ですよね。 ...