Tres Innovation

2017年07月21日

マテリアルデザインの第一歩!Google推奨マテリアルデザイン風のボタン作っちゃいます。

Pocket

 

 

 

こんにちは、ミニオンが好きな番野です。

 

今回はマテリアルデザインについて紹介したいと思います。

マテリアルデザインは数年前にGoogleが発表したデザインのガイドラインになります。

グーグルのサービスもほぼマテリアルデザインに則って作成されていますね。

 

近年マテリアルデザイン風のフレームワークも増えてきており、

デザインに導入しやすくなってきています。

シンプルながらも機能性に優れた、まさに今風のマテリアルデザインを駆使すれば、

より洗礼されたデザインになりそうですね。

 

 

 

マテリアルデザインとは?

 

 

そもそもマテリアルデザインとは?という所は以下になります。

 

  • マテリアルデザインは紙とインクのメタファーからできている(公式の直訳だと印刷ベース)
  • それぞれのマテリアルには「厚み」(1dp)の概念がある
  • インタラクションは基本的に現実世界に即したものとなる
  • 画面や他のマテリアルに対して貫通するような動きはダメ(マテリアルのZ軸回転アニメーションとか)
  • マテリアルを重ねれば影が濃くなる
  • 上に持ち上げれば影が広がる

 

などなど

 

 

結果なにが優れているのかというと

 

 

物理学のルールに沿って上手にデジタルの世界に反映させている事、

ユーザーが次の操作や何をどうしたら良いか素早く直感的に理解できるという所ですかね。

今回は自分も初挑戦という事でマテリアル風のボタンを作成したいと思います。

 

 

 

早速マテリアルデザイン風のボタンを作ってみる

 

 

ソースコードを参照にご確認ください。

 

 

 

HTML

 

 

 
ボタンを三つ並べます

 

 

 

CSS

 

 

 

マテリアル風なカラーリングにしたらより良いでしょう。

 

 

 

JS

 

 

 

 

 

SAMPLE

 

 

SAMPLE

 

 

サンプルではマウスオンしたらフワッとボタンが上がり、

さらにクリックすると波紋のようなものがモワッと広がるエフェクトがかかります。

おそらくグーグルのサービスを使っている時にどこかで見た事があるエフェクトですね。

 

 

 

まとめ

 

 

今回はボタンのみのご紹介をしましたが、その他にも代表的なカードUI、

メニュー・フォーム等をマテリアルデザイン風にできるフレームワークもあります。

マテリアルデザインは動きや直感的な操作性が、

個人的に心地よいのでどんどんチャレンジしていきたいと思います。

 

 

 

 

 

 

この記事を書いた人

I hope share!この記事をシェアする