Date:2015年03月17日ツイートGoogleが作るサービスのほとんどが「マテリアルデザイン」で作られていることを知っていますか?自然に溶け込んできているデザイン。新たしいデザインって違和感を感じる人が多いのですが、この「マテリアルデザイン」は工学的に緻密に計算されてデザインをしていくので違和感を感じる人が少ないのです。そこのところも様々なサービスで「マテリアルデザイン」が取り入れられる要因ともなっているようです。「マテリアルデザイン」とは?Googleがアニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義しています。画像をクリックで拡大たとえ3Dで表現の中にでも機密に計算された世界で物体を浮かしたり影をしっかりリアルに描くことが「マテリアルデザイン」だとガイドブックに載っている。物体の大きさ・太さも考慮して、浮かした時やアニメーションさせた時に元の大きさと違和感がないようにする。余すところなく余白を使いデザインしていく画像をクリックで拡大ポイントとしては動線に沿ったところを均一にデザインしていくレイアウトと言ったところか。当たり前でデザインの基本だが、Googleデザイン大ドラインを見ると、この裏にもかなり機密な「マテリアルデザイン」ルールがあるようだ。参考にしたい「マテリアルデザイン」UIデザイン、WebサイトまとめすでにいくつかのWebサイトやアプリデザインにマテリアルデザインが採用されており、つい先日GoogleのiOS版アプリもマテリアルデザインにリニューアルされたばかりです。今後のデザイン制作の参考にしてみましょう。UI画像をクリックでサイト移動マテリアルデザイン最大の特徴でもあるアニメーションを表現した、モバイル向けUIデザイン。UIhttps://dribbble.com/shots/1640866-Alarm-Material-UIRamotion/paper-switch画像をクリックでサイト移動スイッチOn/OFFを作動することで、アニメーション付きで背景が切り替わります。Design画像をクリックでサイト移動ChromeブラウザをマテリアルデザインにしてみたUIデザイン。したデザインはあらゆる端末から表示しても一貫性あるコンテンツレイアウト。exploration画像をクリックでサイト移動マテリアルデザインを使ってGoogleの検索ページをリデザインしたコンセプトUI。既存サービスの機能とビジュアル面を徹底的に洗い出し、リデザインされたGoogleニュースのコンセプトUIデザイン。どのようなプロセスでプロジェクトを進めたのか知ることができるケーススタディ。Gmail画像をクリックでサイト移動サイトを表示したときのスプラッシュページからレイアウトまで、マテリアルデザインの統一感がうまく表現されたサンプルWebサイト。Calendar画像をクリックでサイト移動こちらもマテリアルデザインを採用し、スクロールするとコンテンツがカーテン状スライドで切り替わり、サービス内容やスクリーンショットもアニメーション付きで表示。Interaction画像をクリックでサイト移動マテリアルデザインのアニメーションがどのように反応するか説明したプロジェクトページ。各コンテンツをクリックするとアクションが作動し、どのようなスタイルがあるのか確認するときにも◎。音楽検索アプリとして有名なShazamでは、すでにマテリアルデザインをベースにしたアプリインターフェースを採用しています。目覚まし時計アプリのインターフェースで、直感的な操作ができる素敵なUIデザイン。app画像をクリックでサイト移動マテリアルデザインのガイドラインを元に、グリッド上にレイアウトされたモバイル端末用UIデザイン。UI」はマテリアルデザインに使える配色をまとめたサイトです。アクセスすると様々な色が表示されます。どれもマテリアルデザインに合う色合いになっていますよ。クリックするとカラーコードをコピーできます。マテリアルデザインのためのCSSフレームワークレスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。モバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。GitHubhttps://github.com/Dogfalo/materializeMaterializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。License)です。/ツイートシェアこの記事が気に入ったらいいね!しようSharetubeの最新記事をお届けします著者プロフィールマツオカソウヤプログラマー。Sharetube作ってる人。サーバ周り、サービス設計、システム、デザイン、執筆を手掛ける。SNSのJoinchrome、ソーシャルRSSのBazzfeed、TwitterアプリのPicleの失敗を経て、今に至る。今日もまた東京の何処かでコードと記事を書いています。最近ヤンマーが激アツである。女性職員に何度も迫った「セックスしよう」むりやり誓約書も書かせる鬼畜ヅラ野郎だった1107まとめ作成数6948022総ページビューマツオカソウヤプログラマー。Sharetube作ってる人。サーバ周り、サービス設計、システム、デザイン、執筆を手掛ける。SNSのJoinchrome、ソーシャルRSSのBazzfeed、TwitterアプリのPicleの失敗を経て、今に至る。今日もまた東京の何処かでコードと記事を書いています。美女を眺めていられる良質MVを10個紹介しますね。