【Webデザイン トレンド】今度こそニューモーフィズムの話
Webデザインで心掛けていることはそのデザインは本当に必要かと自問自答しながら作ることです。
駆け出しの頃は自分的に良かれと思って盛り盛りにデザインし行きます。
作り始めると止まりません。あれもやってみよう。これもやってみよう。と膨大な内容になります。
ですが本当に良いデザインは実にシンプルです。
フラットデザインから続くミニマリズムを継承するマテリアル・デザインは実にシンプルですがデザインによる要素をクローズアップさせる方法としてシンプルが故にユーザーにとって理解しやすいと思います。
そのマテリアル・デザインに親和性が高い手法がニューモーフィズムです。
グラフィックデザインとWEBデザインを比べてみる
Webデザインはグラフィックデザインと比べると文字のデザインが甘いです。
いくら書体を細かく設定してもウェブサイトを閲覧しているPCのフォント環境に依存するためフォントが無い場合は表示せず、しかも文字化け。
それが嫌でGoogleなどのWebfontを使うと読み込みに時間がかかりSEO的によろしくありません。
見た目の自己満足かSEO的な実利か、悩ましいところです。
前回もご紹介しましたが下記サイトは本当に勉強になりました。
プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ
特に文字回りのところでフォントは書体では無くfont-weightやfont-sizeでジャンプ率を変えながら文字組みを行った方が最適化されるという思考はとても参考になりました。
私は白が大好きです。
清潔感があってホワイトスペースやホワイト・ネガティブスペース、ホワイト・グリッドはデザイン手法の必需品です。
実際にコーディングしてNeuomorphismさせてみる
さらに好物になりそうなのがニューモーフィズムというデザイン手法です。
私は基本的にはフラットデザイン信望者ですのでマテリアルデザイン的な感じで好印象です。
個人的な見解ですがグラフィックデザインでいうところの箔押し的な表現の様な気がします。
具体的にCSSで作るポイントは<body>とニューモーフィズムを設定する要素の背景色を合わせて2つのグラデーションで箔押し的な表現をする様です。
See the Pen
Neumorphism by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
完成形
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Neumorphism</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<section>
<div class="box"></div>
<form action="#">
<input type="text" placeholder="Name">
<input type="text" placeholder="Mail">
<input type="submit" value="Button">
</form>
</section>
</body>
</html>見本として<div>にboxというクラス名をつけてニューモーフィズム・グラデーションを適用させます。
もう一つは<form>の<input>にニューモーフィズムのグラデーションを設定してみます。
CSS
*{
margin: 0;
padding: 0;
font-feature-settings: "palt";
box-sizing: border-box;
}
body,html{
width: 100%;
height: 100%;
}
body{
background-color: #f8f8f8;
}
.box{
width:300px;
height:300px;
border-radius: 31px;
background-color: #f8f8f8;
box-shadow: 7px 7px 14px #cacaca,
-7px -7px 14px #ffffff;
}
section{
display: flex;
justify-content:space-around;
align-items: center;
height: 100%;
}
input{
width:200px;
height:50px;
border-radius: 5px;
background-color: #f8f8f8;
box-shadow: inset 4px 4px 4px #c9c9c9,
inset -4px -4px 4px #ffffff;
border: none;
padding-left: 20px;
}
input[type="submit"]{
width: 100px;
padding-left: 0;
cursor: pointer;
margin-left: 20px;
background-color: #f8f8f8;
box-shadow: 5px 5px 7px #cacaca,
-5px -5px 7px #ffffff;
}
<section>にdisplay: flex;をかけて<div>と<form>を横一線にします。
そして<body>と<div class=”box”>、<input>の背景色を統一します。
CSS
body{
background-color: #f8f8f8;
}
.box{
background-color: #f8f8f8;
}
input{
background-color: #f8f8f8;
}ニューモーフィズムのポイントの2つのグラデーションを<div class=”box”>と<input>に設定します。
CSS
.box{
box-shadow: 7px 7px 14px #cacaca,
-7px -7px 14px #ffffff;
}
input{
box-shadow: inset 4px 4px 4px #c9c9c9,
inset -4px -4px 4px #ffffff;
}