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

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

Offers Q&A機能」では、キャリア選択に関する悩みを相談したり、有識者/経験者と意見交換したりすることができます。

▼人気の質問

いきなり質問は難しいかも...と言う方も、まずは皆様の質問/回答を見て、
キャリアに関する価値観や選択肢をアップデートしていきませんか?

かんたん1分無料登録/ログインでQ&A機能を使ってみる!

マテリアルデザインとは

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

Google推奨のデザイン

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

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

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

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

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

基本概念と使い方

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

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

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

マテリアルデザインで使用されるボタンは、主に以下の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 Q&A機能」では、キャリア選択に関する悩みを相談したり、有識者/経験者と意見交換したりすることができます。


いきなり質問は難しいかも...と言う方も、まずは皆様の質問/回答を見て、 キャリアに関する価値観や選択肢をアップデートしていきませんか?



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

医療・介護系SaaSの開発組織をOffersで構築へ!エピグノが実践する業務委託の採用手法とは?

医療・介護機関向け人材マネジメント領域において、「エピタルHR」「エピタク」「エピオペ」という3プロダクトを展開する株式会社エピグノ。2021年に資金調達を行い、同領域におけるデジタルトランスフ...

3回の面談を経てTech Leadを採用!タレントプールとしてOffersを活用するサイカの採用術

データサイエンスを駆使したマーケティングソリューションを提供するサイカ。2020年に「モノづくりビジョン」を定義し、時代や社会にインパクトを与えるプロダクトを生み出すべく、開発組織の構築を進めて...

MLエンジニアを2名採用。1年間ずっと出会えなかった層にOffersですぐ出会えました

SO Technologiesは広告会社支援SaaS「ATOM」や店舗集客支援サービス「ライクル」、ネット広告仕入・提案・ 運用支援サービス「AG Boost」、Webマーケティングのノウハウメ...

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

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

デザイン

お金

採用・組織

グルメ