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コーダー/クリエイター 江口 史和里
|
ブログ 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
こんばんは★ 山男ことヤマオです。 今回はレーザー企画第二弾 「レーザーを創る時にない頭で考えてること 〜持論の巻 別に知らなくてもい ...