• HOME
  • デザイン
  • マテリアルデザインはGoogleガイドラインを参考に。基本を解説

マテリアルデザインはGoogleガイドラインを参考に。基本を解説

マテリアルデザインとは何でしょうか。Googleが提唱するマテリアルデザインのガイドラインは、サイトやアプリを作る場合だけでなく、あらゆるデザインの参考になるものです。Googleのマテリアルデザインの基本について解説します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

マテリアルデザインとは

Googleが推奨するマテリアルデザインは、厳密にルールが定められたガイドラインが存在します。

Google推奨のデザイン

2014年にGoogleが発表して世界的な統一デザインとなったのがマテリアルデザインです。『マテリアル』とは、英語で『物質的な』という意味を持つ単語です。マテリアルデザインとは、現実世界の物理的法則を取り込んだデザインということになります。

つまり、光と影、物の重なり、奥行きといったものを、実際の物がそこにあるようにデザインするということです。ユーザーが操作する際、直感的にわかりやすい動きや反応をし、誰でも見ただけで扱い方がわかるというものです。

Googleのガイドラインでルールが決まっている

Googleはガイドラインによって厳密にルールを作っており、ルールに則ったデザインでない場合は、マテリアルデザインとは言えません。

ガイドラインでルールを決めることによって、どのようなデバイスや閲覧環境で見ても、誰もがわかるようにするねらいがあるのです。統一されていないデザインは、ユーザーの迷いにつながってしまいます。

\新しい環境/デザイン組織を経験するなら「0ffers」!/

Offersの詳細はこちら

基本概念と使い方

世の中には、さまざまなサイトやアプリがありますが、統一されたデザインによって、初めて利用する際にも簡単に操作ができることを実現しているのがマテリアルデザインです。基本的な概念と使い方を紹介します。

紙要素とボタンやアイコン

画面上にあるボタンやアイコンは、マテリアルデザインにおいては『紙要素』として捉えます。つまり、現実世界での紙と同様に重ねることができ、厚みがあり、伸縮できて無色という要素です。

マテリアルデザインで使用されるボタンは、主に以下の4種類あります。

  • フローティングアクションボタン:浮き出したように見える円形のボタン。テキストを含めるなどアレンジ可能
  • 浮き出しボタン:浮き出したように見える長方形のボタン。クリックやタップで押したような動きがつく場合が多い
  • フラットボタン:テキストのみのシンプルなボタンで、色は自由に付けられる
  • アウトラインボタン:2018年に新規追加された、囲みがデザインされたボタン

アイコンは無料で使用できるGoogle提供の『Material Icon』があり、HTMLのヘッダーにコードを入れるだけで導入できます。色やサイズも変更できるので、マテリアルデザインに簡単に活かせます。

インク要素とカラーパレット

マテリアルデザインでは、画面上の色をインク要素と呼びます。これは、紙に印刷された状態と思えばわかりやすく、文字や写真、動画などもインク要素となります。

色はそのデザインを決める大切な要素ですが、Google推奨のカラーパレットがあり、その中から選ぶことで、マテリアルデザインに合う配色が実現可能です。『メインカラー』『サブカラー』『アクセントカラー』を選ぶ際に参考にすると、デザイン全体に統一感が生まれます。

カラーパレット以外に、白・黒・グレーを合わせて使うことができるので、より見やすい配色を考えてみましょう。

フレームワークやテンプレートの活用

マテリアルデザインが素晴らしいデザインであることはわかりましたが、ルールが細かく、すべて覚えるのは大変です。そこで便利なフレームワークやテンプレートをご紹介します。

Google提供のpolymer

ホームページの各パーツをコンポーネント化する、『Web Components』という新技術が使用されているGoogle提供のフレームワークです。

各パーツの再利用や、複数人での作業がしやすいことが特徴です。新しい技術なので、今後Webデザインの標準になるとも言われているため、先取りしてみましょう。

polymer

手軽に始められるMaterialize

マテリアルデザインを手軽に導入できるCSSのフレームワークです。基本的なパーツやスタイルが準備されているので、シンプルで簡単にWebページを作ることができます。

『Bootstrap』と使い方が似ているので、使ったことがあるならすぐに使いこなせるでしょう。スタイルの変更や追加も可能ですが、カスタマイズが多いと修正しにくい面もあります。

Materialize

デモが便利なMaterial UI

Googleのガイドラインに則って開発されたコンポーネントセットです。全体の色調を設定するテーマと、部品に当たるReactコンポーネント群を組合せ、アプリケーションを作ることができます。

トップページでデモを見ることができるので、どのような見え方をするのか確認しながら開発を進められて便利です。

Material UI

\本業では経験できない新しい環境/開発スタイルを経験するなら「0ffers」!/

Offersの詳細はこちら

まとめ

マテリアルデザインは、現実世界での奥行きや重なり、影や質量を取り入れることで、直感的な操作ができることを目指したGoogle提唱のデザインです。

マテリアルデザインには、細かいガイドラインやルールがあり、開発したくても敷居が高いと感じている人も。しかし、マテリアルデザインを踏襲した便利なフレームワークやテンプレートを活用することで、マテリアルデザインをうまく取り入れた開発をすることができます。

トレンドであるマテリアルデザインを取り入れたい人は参考にしてみてください。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

【Unity&バックエンド採用】Offersコンシェルジュを活用し、VPoE業務に集中できた恩恵とは

幼児や小学生の家庭学習の必要性が求められている今、企業や団体がICTを活用した学習コンテンツの開発に注目している。ファンタムスティックは子ども用の学習アプリやデジタル教育コンテンツの開発に強みを...

転職前提の複業オファーで、2ヶ月後に正社員へ!未来のCTOを採用した注目スタートアップの採用術

スニーカー市場は熱狂的なファンも多く、一次流通・二次流通ともに毎年拡大を続けている。そのような市場の中、スニダンことスニーカーダンク(SNKRDUNK)は市場の拡大を追い風に成長し続けてきたが、...

『実践TypeScript』の著者・吉井健文が考えるTypeScriptの魅力と可能性

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことをマニ...

ヤフーが実践するギグワーク活用がこれからの新しい採用手法に!?リモート環境で求められる人材とはーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

お金

採用・組織

グルメ