• HOME
  • デザイン
  • マテリアルデザインのアイコンとは。作り方やフリー素材の入手方法まとめ

マテリアルデザインのアイコンとは。作り方やフリー素材の入手方法まとめ

Googleが発表した新たなデザインの概念であるマテリアルデザインとは、どのようなデザインなのでしょうか?また、マテリアルデザインのアイコンを作る場合の作成方法や、フリー素材のアイコンの入手方法についてまとめました。

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

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

マテリアルデザインとは

マテリアルデザインは、2014年にGoogleが発表した新たなデザインの概念です。どのような規定や特長があるのかを見ていきましょう。

質量を表現したデザイン

マテリアルデザインの特長は『質量を表現している』という点です。マテリアルデザインは平面ではなくZ軸の概念を持つ『3D空間』と、その場を照射する『仮想の光』を備えています。

光が生まれるということは影が生まれるということであり、ひいては物質に『質量』が生まれることになります。この影の表現によって物質の質感や質量を表現することが、マテリアルデザインがこれまでのデザインと異なる部分です。

Googleがガイドラインを定めている

マテリアルデザインは、発案者であるGoogleがガイドラインを定めています。質量や影を意識した巧みなデザインを考えたとしても、このガイドラインを満たしていない場合はマテリアルデザインとは認められません。

影の付け方・ボタンの形状・紙の重ね方・レイアウトといった全ての要素に細かいルールがあります。

ガイドラインがきちんと定まっていることで、マテリアルガイドラインを作成しようとするデザイナーが、マテリアルデザインを意識したデザイン設計を考えることが可能なのです。

Googleマテリアルデザイン ガイドライン

マテリアルデザインアイコンの作り方

マテリアルデザインのアイコンを作成する場合にどのように作成していくべきか、手順や考え方について解説します。

基本的なルールや考え方

マテリアルデザインに対する基本的な考え方やルールを知っていきましょう。マテリアルデザインには『実際に触れることができる現実感』が根底にあります。

そのためにも、まずは『現実の物理法則に沿うこと』がポイントです。物体の重なりや影の付き方が現実世界と同じになることで、『どんな操作をすれば良いか』をユーザーは直感的に理解できます。

印刷物向けの基本的な要素を取り込みつつ、ユーザーに分かりやすいように、ユーザーのアクションに対しアニメーションで反応するといった連続性のある動きを意識することも大切です。その上でGoogleのガイドラインに沿ったデザインが求められるのです。

NGなアイコン

マテリアルデザインにおいてNGとされるアイコン作成の例をご紹介します。

質量を表現するためとはいえ、『立体的』なアイコンデザインはNGです。あわせて斜めから見たようなアイコンを使ってもいけません。マテリアルデザインでは真横もしくは真上から見たデザインのアイコンを使いましょう。

複雑すぎるデザインや、無生物に顔をつけてキャラクター化したアイコンも、マテリアルデザインの規定によってNGとされています。

作成の流れ

作成にはAdobe製品の『Illustrator』などの描画ソフトが必要です。またアイコンのテンプレートがある場合も、あらかじめダウンロードしておきましょう。ここでは、Illustratorでの作成手順について紹介します。

Illustratorを立ち上げた後、まずはバックグラウンドを作成します。影の透明度などもガイドラインに細かく定められていますが、テンプレートを利用することで設定が比較的簡単に行えます。

ガイドラインに規定されている『shade』や『tint』を追加することで、デザインに自然な凹凸感が生まれます。それぞれレイヤーを新たに作成しましょう。バックグラウンドが完成した後でアイコンの主役であるフォアグラウンドを作成し、こちらにもshadeとtintを追加してください。

マテリアルデザインに使用できるカラーについても細かな規定があるため、注意が必要です。配布されているカラーパレットをダウンロードし、誤って規定外の色を使わないようにしましょう。

フリー素材配布サイトから入手

すでにできあがっているフリーアイコンを利用する方法もあります。マテリアルデザインのアイコンを配布しているフリー素材サイトを紹介しますので、活用してください。

Material Icons

『Material icons』は、Googleが提供しているアイコン素材のサイトで、無料利用できるアイコンが多数配布されています。

15カテゴリ、750種類にも及ぶマテリアルアイコンをSVGやPNGでダウンロードすることが可能です。CSSを利用することで、大きさや色を変えることもできます。

Material icons

Nova

『Nova』は4000以上のアイコンがダウンロードできるかなり大規模なフリー素材サイトです。ただし、無料で利用する場合は350個という上限があり、それ以上のダウンロードは有料となります。

無料で利用する場合、1つのWebサイトやプロジェクトごとに100個以下のアイコンしか使用できず、5人以下のチームでのみ利用など細かい規定がありますので、利用前に確認しましょう。4種類の拡張子で保存ができるので、ユーザビリティにも優れたサイトです。

Nova

まとめ

マテリアルデザインは、質量を意識した最新のデザイン概念です。直感的に使える点やユーザビリティに優れ、Googleが定めているガイドラインを満たしていることが条件となっています。

自身で作成することもできますが、Googleの『Material icons』などの素材サイトからダウンロードもできるので、積極的に利用してみてください。マテリアルデザインを用いてWebサイトをブラッシュアップしていきましょう。

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

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

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



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

CTOが採用にコミット。短期間で効率的にリードクラスのエンジニア2名を採用できた理由とは

2020年にヤフーとの業務提携を発表したマイベスト。今後さらなる事業成長のための開発を推進するために、ハイスキルのエンジニアが必要不可欠に。スピード感が求められる中、同社が意思決定したのが業務委...

eKYC市場の「API商社」として100社以上の導入。少数精鋭のエンジニアドリヴンだから進められる事業推進と開発の魅力とは

日本で唯一のeKYC対応のデジタル身分証アプリ「TRUSTDOCK」と本人確認API基盤を提供する株式会社TRUSTDOCK。顧客は金融業界や人材業界、エンタメ業界まで広がっている。近年は福岡市...

「業務委託→正社員」を視野に入れてアプリエンジニアの採用に成功。人気アプリ運営会社の採用事情とは?

1,000万DLを突破した人気音楽投稿アプリ「nana」を運営する株式会社nana musicは、2021年1月にDMMグループから独立し、第二創業期を迎えようとしている。これまで外部リソースを...

複業転職でリードエンジニアを採用成功。PMF前のスタートアップが実践する複業転職の秘訣とは

従業員オンボーディングを仕組み化し、新たなメンバーの入社体験を向上させる従業員オンボーディングSaaS「Onn(オン)」を手掛けるワークサイド。スタートアップにおける採用の大きな障壁となるのは優...

デザイン

お金

採用・組織

グルメ