参考になる!素敵なマテリアルデザインのWebサイトまとめ×15

マテリアルデザインのWebサイトまとめ

今回はトレンド真っ盛りの「マテリアルデザイン」が取り入れられたハイクオリティなWebサイトを紹介します。マテリアルデザインのアプリは探せばどれだけでも見つかるのですが、Webサイトはあまりまとまっていません。そこで海外のサイトを探し回って、完成度の高いマテリアルなWebサイトを掘り出してみました。

1. Material Cmiscm

Material Interaction

GO

マテリアルデザインを直感的に理解するために作られた個人のサイト。ページをめくるような動きや、ホバー時(カーソルを当てたとき)のインタラクティブな動きなど、よく出来ています。

2. RS card

Rs Card  Just another WordPress site

GO

クリエイター向けWeb履歴書サービスのサイトです。スクロールしたときの影のつき方がとてもきれいです。

3. ARM AUTO

Auto Repair Materials  Home 1

GO

ページの大半がフラットデザイン寄りですが、最後の「問い合わせボックス」のマテリアルな表現が秀逸です。いかにもメッセージカードっぽさが出ており、直感的に操作が分かりますね。

4. GoogleI/O

Google I O 2015

GO

グーグルの開催する開発者向けカンファレンスの特設ページ。マテリアルデザインの考え方をGoogleが提唱しただけあり、GoogleのサービスやWebページの多くが模範的なマテリアルデザインとなっています。

5. Phoenix

Phoenix Startup UI kit | a tool based on Bootstrap

GO

スクロールに連動した様々な動きが仕掛けられています。ユーザーが直感的に操作が分かるようなデザインかと言うと、ちょっと際どい気がしますが、奥行きや立体感の出し方がとても参考になります。

6. Jet Radar

Cheap flights and airline tickets | Jetradar

GO

シンプルで非常に分かりやすいマテリアルデザイン採用のWebサイト。「→」ボタンの影のつき方と動きがとても参考になります。トレンドを追うために無理やり立体感や紙らしさを出すのではなく、ユーザーが直感的に分かるようにするためにマテリアルデザインを取り入れることが大事ですね。

7. FORQY

FORQY  Create a Fantastic Restaurant Website

GO

ユニークで目を引くデザインにグッときたので紹介します。上に重なる紙と、下地の紙とでインクの色が異なっており、リアルな奥行き感が出ています。このような表現は今後目にする機会が増えるかもしれませんね。

8. Rentberry

Rentberry  Long term apartment rentals

GO

グラデーションが美しいオンライン不動産サービスのWebサイト。テキスト入力できるところやボタンなど要所要所で影が使われており、行うべき操作がとても分かりやすくなっています。

9. Hoo Koo Koo

HOO KOO E KOO  Digital Partner

GO

色づかいやボタンの表現などがまさに「マテリアルデザイン」という感じですね。スクロールしたときに色の変化も美しく、見ていて心地が良いサイトです。

10. MATX

Matx  Material Design Agency Template

GO

マテリアルWebデザインのテンプレートのデモページです。ホバー時のふわっとした動きがリアルな「紙」感を出しています。

11. Materialize

materialize

GO

MaterializeはマテリアルデザインのWebサイトを簡単に作ることのできるフレームワークです。Materializeの概要ページ自体がマテリアルデザインとなっており、見ているだけで勉強になります。

12. Google+

 Google+

GO

スクロールできることがひと目でわかるような表現や、要素の重なりを感じさせる表現が秀逸です。

13. Google Keep

Google Keep

GO

Google Keepにも模範的なマテリアルデザインが取り入れられており勉強になります。机の上で紙にメモ書きしているようなユーザーインターフェースが素敵です。

14. Udacity

udacity

GO

カラフルで美しいマテリアルデザインとなっています。グラデーションの取り入れられ方や、紙が浮いているような影のつけ方がとてもきれいです。

15. Material Design Blog

Showcase

GO

マテリアルデザインに関するトピックを取り上げるブログです。画面遷移時のアニメーションなども直感的で分かりやすくなっています。英語ですが役に立ちそうなコンテンツが盛りだくさんなので是非サイトを巡ってみてください。

最後に

ここまで15のWebサイトを紹介してきました。やはり1番勉強になるのはGoogleが提供するWebサイト・サービスですね。サイト制作の参考になれば幸いです。

【おまけ】マテリアルデザインのWordPressテーマ

当サイトからマテリアルデザインを一部採用したWordPressテーマをリリースしました。よろしければデモサイトをチェックしてみてください。

sangoのデモ


同じカテゴリーの記事
同じカテゴリーの記事一覧
デザイン参考
サルワカ