「マテリアルデザイン」はGoogleが発表したデザインのガイドラインです。Googleのサービスは現在ほぼすべてこのマテリアルデザインに則って作成されています。シンプルながらも機能性に優れたこのマテリアルデザインを駆使すれば、ウェブページがより洗練されたものになること間違いなし!
今回はマテリアルデザインのパーツを紹介しつつ、コピペで簡単にマテリアルデザイン風のパーツを再現できるhtml,CSS,Javascriptを紹介していきます!

スポンサーリンク

カードUI

マテリアルデザインといえば定番のカードUI。必要な情報が集約されていながら、洗練されたデザインです。これがコピペで実現できればうれしいですね!

See the Pen card by sora-inu (@sora-inu) on CodePen.

See the Pen Material Card with Animated Featured Image by Knol Aust (@knolaust) on CodePen.

ボックス

これもマテリアルデザインの定番。クリックするとボタンが背景となり、中にコンテンツが表示されます。うまく使いこなせば限られたスペースで最大限の効果を発揮できそうです。

See the Pen Google Material Design by Mark Murray (@markmurray) on CodePen.

ボタン

マテリアルデザインのボタンはクリックしたときの「Ripple effect」が印象的です。波紋が広がるアニメーションによって、クリックできたことが直感的にわかります。これもコピペで実現できるのは嬉しいですね!

See the Pen Materialize Button by legeoffrey (@legeoffrey) on CodePen.

スポンサーリンク

ポップアップ

クリックするとボタンが表示エリアになるのはマテリアルデザインの特徴です。

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

メニュー

これもマテリアルデザインでおなじみのバーガーメニューです。左メニューとも呼ばれ、最近のアプリはこれを使うものが本当に多くなりました。
CSSだけでこれが実現できるのも手軽に実装できて便利です!

See the Pen #1 Burger Menu inspired by Material Design by Victor Freire (@victorfreire) on CodePen.

See the Pen #3 Burger Menu + Material Design Layout by Victor Freire (@victorfreire) on CodePen.

See the Pen [SCSS] Configurable animated Material Design Menu Button by Eduard Mayer (@codewunder) on CodePen.

フォーム

マテリアルデザインのフォームは、フォームが入力中になったり文字が入っていると、プレースホルダーが小さくなって上部に表示されます。

See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.

検索

検索ボタンが入力フォームに様変わり!さりげないアニメーションがページの質を向上させます。

See the Pen Material Fullscreen Search Transition by Luca Dimola (@hone) on CodePen.

チェックボックス

チェックすると四角いボックスがチェックマークに変わります。

See the Pen Google material style checkbox (css only) by Sam (@Sambego) on CodePen.

ヘッダー

ヘッダーにバーガーメニューと言えばマテリアルデザインの定番です!直感的な操作でユーザーフレンドリーなサイトが実現できますね!

See the Pen Material Design Menu Toggle by Matthew Blode (@mblode) on CodePen.

終わりに

以上マテリアルデザインのパーツの紹介でした。これらを組み合わせるだけでもページが完成してしまいます!最近のアプリはこれらを利用されているものが多いですが、ウェブページだとまだまだその数は多くありません。
ユーザーにも直感的で分かりやすく、それでいて洗練されたデザインに仕上げることができるため、うまく使いこなせば他のサイトと差別化が図れそうです。
ぜひ試してみてください!

おすすめの記事