「マテリアルデザイン」はGoogleが発表したデザインのガイドラインです。Googleのサービスは現在ほぼすべてこのマテリアルデザインに則って作成されています。シンプルながらも機能性に優れたこのマテリアルデザインを駆使すれば、ウェブページがより洗練されたものになること間違いなし！
今回はマテリアルデザインのパーツを紹介しつつ、コピペで簡単にマテリアルデザイン風のパーツを再現できるhtml,CSS,Javascriptを紹介していきます！
カードUI
マテリアルデザインといえば定番のカードUI。必要な情報が集約されていながら、洗練されたデザインです。これがコピペで実現できればうれしいですね！
ボックス
これもマテリアルデザインの定番。クリックするとボタンが背景となり、中にコンテンツが表示されます。うまく使いこなせば限られたスペースで最大限の効果を発揮できそうです。
ボタン
マテリアルデザインのボタンはクリックしたときの「Ripple effect」が印象的です。波紋が広がるアニメーションによって、クリックできたことが直感的にわかります。これもコピペで実現できるのは嬉しいですね！
ポップアップ
クリックするとボタンが表示エリアになるのはマテリアルデザインの特徴です。
メニュー
これもマテリアルデザインでおなじみのバーガーメニューです。左メニューとも呼ばれ、最近のアプリはこれを使うものが本当に多くなりました。
CSSだけでこれが実現できるのも手軽に実装できて便利です！
フォーム
マテリアルデザインのフォームは、フォームが入力中になったり文字が入っていると、プレースホルダーが小さくなって上部に表示されます。
検索
検索ボタンが入力フォームに様変わり！さりげないアニメーションがページの質を向上させます。
チェックボックス
チェックすると四角いボックスがチェックマークに変わります。
ヘッダー
ヘッダーにバーガーメニューと言えばマテリアルデザインの定番です！直感的な操作でユーザーフレンドリーなサイトが実現できますね！
終わりに
以上マテリアルデザインのパーツの紹介でした。これらを組み合わせるだけでもページが完成してしまいます！最近のアプリはこれらを利用されているものが多いですが、ウェブページだとまだまだその数は多くありません。
ユーザーにも直感的で分かりやすく、それでいて洗練されたデザインに仕上げることができるため、うまく使いこなせば他のサイトと差別化が図れそうです。
ぜひ試してみてください！
