マテリアルデザインがWebの世界で大流行しています。フレームワークやカスタムUIキットを使ったマテリアルスタイルの新しいサイトが毎月いくつも登場しています。
しかし、これは悪いことではありません。むしろその逆です。Googleが自ら好ましいデザイン言語であると認めた、お墨付きのトレンドを用いることによって、デザインプロセスを簡略化できるからです。
もしマテリアルデザインに関心があるのならば、これから紹介するコードスニペットはうってつけです。私のお気に入りの中から、10のスニペットを紹介していきます。
レスポンシブテーブル
See the Pen Material Design - Responsive Table by Sergey Kupletsky (@zavoloklom) on CodePen.
独特の工夫がみられるマテリアルデザインのスニペットです。 Sergey Kupletsky氏が作成したこのレスポンシブテーブルは、ほかのマテリアルデザインスニペットへのリンク集にもなっています。とても魅力的なデザインです。
このスニペットは、ページレイアウトに表がフィットするように、マテリアルデザインの技術を使って作られています。モバイルデザインにおいてもっとも難しいのは、小さな画面でも機能するテーブルを作ることです。
このスニペットの技術は、小さな画面に対処する最善の方法の１つではないでしょうか。また、コードが整頓されているため、どのようなサイズのテーブルも作りやすくなっています。
カードUIの画面遷移
See the Pen Material Design Transition Effect by Iván Villamil (@ivillamil) on CodePen.
素晴らしいアニメーション効果を使った非常に個性的なカードUIデザインは、開発者であるIván Villamil氏が作りました。
上の図を見て、いずれかのカードをクリックしてみてください。カードの中味が各カードの上層に現れるというユニークなアニメーション効果が見られます。モバイルアプリで見られるようなアニメーションが、Webに移植されているのです。
アニメーション効果は完璧で、現在Web上で最先端の演出が表れています。このWeb UIとモバイルUIの組み合わせに、マテリアルスタイルが最適なのは言うまでもありません。
コンパクトログイン
See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.
デザイナーとして働く中で、とてもクールなログインフォームをいくつも見たことがあります。その中でもこのデザインは、インタラクティブな機能と独創的なスタイルという点で並外れています。
右上の明るいピンク色のアイコンをクリックすると、登録フィールドが現れてページを覆います。非常にユニークで、かつ使いやすいインターフェイスです。
では、問題点はどこでしょうか？ このスニペットはJavaScriptをたくさん使っているので、コードの面ではもっとも美しい解決法ではありません。それでも、コンパクトな機能を使ったデザインの好例ではあるでしょう。
配置アニメーション
See the Pen populate material by Scott Kellum (@scottkellum) on CodePen.
ページをローディングすると自動的に配置する、この魅力的なマテリアルデザインのカードレイアウトは、Scott Kellum氏が開発しました。カードは格子状に表示され、カードにマウスを重ねるとマテリアルデザインのモーションを見て取ることができます。
サイトに実装したときにどれくらい役立つのか、どれほど活用できるのかはわかりません。しかし、マテリアルデザインのスタイルとホバーアニメーションを組み合わせたオフグリッドのデザインが見られる楽しいスニペットです。
BS4のマテリアルボタン
See the Pen Bootstrap Buttons - Material Design & Bootstrap 4 by MDBootstrap (@mdbootstrap) on CodePen.
オンラインで入手可能なたくさんのBootstrapのテンプレートの中には、マテリアルデザインを使っているものがあります。そして、このCodePenのサンプルは、Bootstrap 4のマテリアルデザインを使って実行できる魅力的な技術をすべて紹介しています。
実際このスニペットも、Googleのマテリアル言語にフィットするよう手直しされたボタンのコレクションです。しかし、どれも最新のBootstrap 4フレームワーク上で動作するので、Bootstrapで構築したあらゆるページに追加することができます。
Bootstrapを真剣に利用し始めたいなら、最新のリリースを見て検討してください。Bootstrapはあらゆるサイトの基礎として役に立ちますが、マテリアルデザインのサイトでは特に効果的です。
マテリアルデザインのセレクトメニュー
See the Pen Material design select ( javascript ) by LukyVJ (@LukyVj) on CodePen.
ドロップダウンセレクトメニューはフォームデザインに欠かせない要素です。ドロップダウンメニューによってユーザーは、国や言語などを選択することができます。
このマテリアルデザインのセレクトメニューは、一般的なHTMLセレクトメニューをまったく新しい次元に進化させました。
このセレクトメニューは、選択肢を選ぶ際に、典型的なドキュメントスタイルを用いていません。代わりに、アニメーションと選択肢のプロセスを扱うjQueryと、「ul」タグによる無秩序なリストが使われています。マテリアルスタイルを使いこなしていると言っても過言ではないでしょう。
マテリアルの影
See the Pen Material Design Shadows Demos by fainder (@fainder) on CodePen.
マテリアルデザインについて、Googleのドキュメントは、奥行きを示すために影を使うことを強く推奨しています。このCodePenのサンプルでは、それぞれ異なるドロップシャドウ効果を持つ円が示されています。
影を使うことで、ある要素がほかの要素に重なって見えるように、ページの要素を階層化することができます。これによって、特にタッチスクリーン操作で役立つ、仮想空間がスクリーンに生まれます。
とても素敵な効果なので、きっとプロジェクトで真似したくなるでしょう。
天気カードのUI
See the Pen Weather card by Thomas Vallez (@thomvallez) on CodePen.
HTMLとCSSだけで動作するこの素晴らしい天気カードは、開発者のThomas Vallez氏が作成しました。ページのローディングには単純なフェードイン効果を使っていますが、このスニペットで本当に美しいのはマテリアルデザインのスタイルです。
色やフォント、そして天気アイコンに至るまで、すべてが自然なマテリアルスタイルに基づいています。
このテンプレートは、あらゆる種類のカードレイアウトに使えるでしょう。目を見張るようなデザインで、本記事で紹介しているスニペットの中でもっともわかりやすいプロジェクトの１つです。
マテリアルタブ
See the Pen Material Tabs by Michael Richins (@MrGrigri) on CodePen.
マテリアルデザインタブの原理を基にした興味深いプロジェクトです。基本的なJavaScriptとGoogleのデザインガイドラインを用いて、Michael Richins氏がこのCodePenのサンプルを作成しました。
このタブはAndroidスマートフォンやタブレットなどのデバイスと同じように動作します。ライブラリを一切使わない純粋なJavaScriptのみで実行されるので、当然jQueryなどは一切気にかける必要がありません。
サイトに実装するタブを探しているなら、これは非常にクールなエフェクトをもつデザインです。ただ、ページデザインに自然に溶け込むスタイルかどうかは必ず判断する必要があります。
クリックに反応するアニメーション
See the Pen Material Response by Emmanuel Pilande (@epilande) on CodePen.
この見事なレスポンスエフェクトは、Googleのマテリアルなマイクロインタラクション （microinteraction）を簡単に再現する方法として、開発者Emmanuel Pilande氏が作りました。
マテリアルカードの任意の場所をクリックして、エフェクトをご覧ください。 このエフェクトはボタンやページコンテナ、入力フィールドまで、あらゆるものに適用できます。
JavaScriptに依存していますが、どのプロジェクトにも簡単に追加できます。マテリアル本来の外観を求めるなら、保存しておくべき優れたスニペットです。
