function なんとなくウェブサイトを作ってみたいけどよく分かんない人の話 (6){

»前回のお話


■ニューモーフィズムってなんなん?

新Webトレンドのニューモーフィズムって何?って事で色々調べた結果。
(詳しい説明を描く文章力が無いので先人の知恵を紹介させて頂きます。)

ざっくり一言で表すならエンボスデザインです。

2020年のトレンドになるとかならないとか言われてるのでとりあえず取り入れてみようという次第です。


■ニューモーフィズム実践編

ニューモーフィズムは背景色とベースカラーが同じで、浮き上がりや凹みの部分にハイライトやシャドウが入る感じになります。

色の指定はHSLカラーで指定すれば輝度を変えるだけで楽なのでHSL()を採用。
(参考サイトを見るとメインカラーとハイライト、シャドウの3パターンの色で説明しているところが多いですが凹みを表現する時は微妙に暗い色にした方が自然に見えたのでdentColordentShadowを追加しています。)

dent
→(固いものに当たったり、打ったりしてできる)くぼみ、へこみ

実際のコードはこちらになります。


CSSの色指定

@mainColor : hsl(215, 25%, 90%);
@dentColor : hsl(215, 25%, 88%);
@lightShadow : hsl(215, 25%, 100%);
@darkShadow : hsl(215, 25%, 70%);
@dentShadow : hsl(215, 25%, 60%);

CSSを適用させる文字

<h1 id="eyeCatcher"><span>Yuki Ono's Laboratory</span>御野ユキの小部屋</h1>

CSSの設定

body {
  background: @mainColor;
}
 #eyeCatcher {

  //凸
  color: @mainColor;
  text-shadow:
        -2px -2px 2px @lightShadow,
        2px 2px 2px @darkShadow,
        4px 4px 8px @darkShadow;

  //凹
  span {
    color: @dentColor;
    text-shadow:
          -1px -1px 2px @dentShadow,
          1px 1px 1px @lightShadow,
          1px 1px 5px @lightShadow;
  }

}

※ニューモーフィズムに直接関係ないスタイルは省略しています。


■解説

実際に表示される結果が下記の画像の通りになります。

キャプチャ

いい感じに凹んだり浮き上がったりしていますね。

凸を表現する場合、影は細くくっきりさせたシャドウ広くぼんやりさせたシャドウの2パターンを適用させる事でより立体的に表現でき、可読性も向上されます。

ハイライトも出来るだけ細くくっきりさせた方が良い気がします。

文字の大きさ・太さによって数値が微妙に変わると思いますので実際に表示させながら調整してください。


逆に凹を表現する場合、メインカラーの輝度を2%落としシャドウの輝度も10%落とすことでより自然に表現させています。

今回は文字サイズも小さめなのでよりシャドウの輝度をがっつり落とす事で可読性を向上させています。

こちらも文字サイズ・太さによって数値が変わります。


■あとがき

四角とか丸とかはジェネレータがあるのでそれを利用すると簡単ですね。


次回はメニューボタンの作成になると思います。

それでは。

}

»次回のお話



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

6
たぶんWeb屋さん。ときどきプログラミング。イラスト、デザイン、英語の勉強中。劣等感がお友達。http://oyuki.jp/