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

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

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

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

→「Offers」をもっと詳しくみる!

マテリアルデザインとは

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

まとめ

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

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

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

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

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

本業では経験できない、新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

デザイン

お金

採用・組織

グルメ