• follow us in feedly
scroll_icon
shuffle_button
時代はGoogleが提唱している「マテリアルデザイン」に来ている 参考にしたい「マテリアルデザイン」UIデザイン、Webサイトまとめ

時代はGoogleが提唱している「マテリアルデザイン」に来ている 参考にしたい「マテリアルデザイン」UIデザイン、Webサイトまとめ

Release Date:
時代はGoogleが提唱している「マテリアルデザイン」に来ている 参考にしたい「マテリアルデザイン」UIデザイン、Webサイトまとめ

Googleが作るサービスのほとんどが「マテリアルデザイン」で作られていることを知っていますか?自然に溶け込んできているデザイン。新たしいデザインって違和感を感じる人が多いのですが、この「マテリアルデザイン」は工学的に緻密に計算されてデザインをしていくので違和感を感じる人が少ないのです。

そこのところも様々なサービスで「マテリアルデザイン」が取り入れられる要因ともなっているようです。

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

Googleがアニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義しています。

48秒で分かる「マテリアルデザイン」

Google デザインガイドライン「マテリアルデザイン(Material design)」

画像をクリックでサイト移動

Material design

https://www.google.com/design/spec/material-design/introduction.html

オブジェクトをしっかり計算した上で表現することが大事

画像をクリックで拡大

たとえ3Dで表現の中にでも機密に計算された世界で物体を浮かしたり影をしっかりリアルに描くことが「マテリアルデザイン」だとガイドブックに載っている。

画像をクリックで拡大

物体の大きさ・太さも考慮して、浮かした時やアニメーションさせた時に元の大きさと違和感がないようにする。

画像をクリックで拡大

レイアウト 余すところなく余白を使いデザインしていく

画像をクリックで拡大

ポイントとしては動線に沿ったところを均一にデザインしていくレイアウトと言ったところか。当たり前でデザインの基本だが、Googleデザイン大ドラインを見ると、この裏にもかなり機密な「マテリアルデザイン」ルールがあるようだ。

参考にしたい「マテリアルデザイン」UIデザイン、Webサイトまとめ

すでにいくつかのWebサイトやアプリデザインにマテリアルデザインが採用されており、つい先日GoogleのiOS版アプリもマテリアルデザインにリニューアルされたばかりです。今後のデザイン制作の参考にしてみましょう。

Alarm Material UI

画像をクリックでサイト移動

マテリアルデザイン最大の特徴でもあるアニメーションを表現した、モバイル向けUIデザイン。

Alarm Material UI

https://dribbble.com/shots/1640866-Alarm-Material-UI

Ramotion/paper-switch

画像をクリックでサイト移動

スイッチOn/OFFを作動することで、アニメーション付きで背景が切り替わります。

Ramotion/paper-switch

https://github.com/Ramotion/paper-switch

Google Chrome Material Design

画像をクリックでサイト移動

ChromeブラウザをマテリアルデザインにしてみたUIデザイン。スッキリとしたデザインはあらゆる端末から表示しても一貫性あるコンテンツレイアウト。

Google Chrome Material Design

https://dribbble.com/shots/1677098-Google-Chrome-Material-Design

Google - Material exploration

画像をクリックでサイト移動

マテリアルデザインを使ってGoogleの検索ページをリデザインしたコンセプトUI。

Google - Material exploration

https://dribbble.com/shots/1790652-Google-Material-exploration

Google News

画像をクリックでサイト移動

既存サービスの機能とビジュアル面を徹底的に洗い出し、リデザインされたGoogleニュースのコンセプトUIデザイン。どのようなプロセスでプロジェクトを進めたのか知ることができるケーススタディ。

Google News

https://www.behance.net/gallery/20386163/Functional-and-visual-redesign-of-Google-News

Inbox by Gmail

画像をクリックでサイト移動

サイトを表示したときのスプラッシュページからレイアウトまで、マテリアルデザインの統一感がうまく表現されたサンプルWebサイト。

Inbox by Gmail

http://www.google.com/inbox/

Google Calendar

画像をクリックでサイト移動

こちらもマテリアルデザインを採用し、スクロールするとコンテンツがカーテン状スライドで切り替わり、サービス内容やスクリーンショットもアニメーション付きで表示。

Google Calendar

http://www.google.com/calendar/about/

Material Interaction

画像をクリックでサイト移動

マテリアルデザインのアニメーションがどのように反応するか説明したプロジェクトページ。各コンテンツをクリックするとアクションが作動し、どのようなスタイルがあるのか確認するときにも◎。

Material Interaction

http://material.cmiscm.com/

Shazam

画像をクリックでサイト移動

音楽検索アプリとして有名なShazamでは、すでにマテリアルデザインをベースにしたアプリインターフェースを採用しています。

Shazam

https://play.google.com/store/apps/details?id=com.shazam.android

Morning Routine

画像をクリックでサイト移動

目覚まし時計アプリのインターフェースで、直感的な操作ができる素敵なUIデザイン。

Morning Routine

https://play.google.com/store/apps/details?id=net.havchr.mr2

Raindrop Android app

画像をクリックでサイト移動

マテリアルデザインのガイドラインを元に、グリッド上にレイアウトされたモバイル端末用UIデザイン。

Raindrop Android app

https://dribbble.com/shots/1804300-Raindrop-Android-app-Material-design

出典:Googleマテリアル・デザインから学ぶ4つの重要ポイント

マテリアルデザインに使える配色をまとめたサイト「Material UI」

Material UI

画像をクリックでサイト移動

「Material UI」はマテリアルデザインに使える配色をまとめたサイトです。アクセスすると様々な色が表示されます。どれもマテリアルデザインに合う色合いになっていますよ。クリックするとカラーコードをコピーできます。

Material UI

http://www.materialui.co/colors

Materialize - マテリアルデザインのためのCSSフレームワーク

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。

主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。

Materialize

画像をクリックでサイト移動

Documentation - Materialize

http://materializecss.com/

Dogfalo/materialize · GitHub

https://github.com/Dogfalo/materialize

Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。

MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

出典:Materialize - マテリアルデザインのためのCSSフレームワーク

この記事が気に入ったら

いいね!しよう

Sharetubeの最新記事をお届けします

著者プロフィール
マツオカソウヤ

プログラマー。Sharetube作ってる人。サーバ周り、サービス設計、システム、デザイン、執筆を手掛ける。SNSのJoinchrome、ソーシャルRSSのBazzfeed、TwitterアプリのPicleの失敗を経て、今に至る。今日もまた東京の何処かでコードと記事を書いています。