• HOME
  • デザイン
  • マテリアルデザインの色選びとは。パレットやサイトを活用しよう

マテリアルデザインの色選びとは。パレットやサイトを活用しよう

2014年からGoogleの主なサービスに導入されたマテリアルデザインは、ユーザーの利便性を高める役割を果たしています。さらに、色を上手に活用することでさらに視覚的機能を高めることができます。ここではマテリアルデザインの色選びについて解説します。

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

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

マテリアルデザインとは

マテリアルデザインは『物質的なデザイン』と直訳されます。物質の動きや影、物が持つ奥行きをデバイス上で表現するデザイン手法のことです。

ボタンやアイコン、カードなどの『紙要素』と、色や文字などの『インク要素』の二つの要素で構成され、奥行きや影を取り入れることでユーザー目線に配慮した直感的なインターフェイスを作り上げることができます。

物理的な法則に則ったデザイン

マテリアルデザインとは異なるものとして『フラットデザイン』という手法があります。平面的かつシンプルにデザインすることで利便性に配慮していますが、このデザインに物足りなさを感じるユーザーも少なくありません。

マテリアルデザインは動きやアニメーション、影や奥行きなどを導入して、視覚に多様な影響を与えます。物理的な法則に則ったデザインなので、ビジュアル的にも認識しやすいWebサービスを作り出せるのです。

色の選び方

マテリアルデザインにおける色の選び方は重要です。Webサービスにおいては比較的鮮やかで明るい色が使われる傾向があります。これらの色はユーザーにとって判別しやすく操作性を向上させることから、Google社も鮮明で明るい色を推奨しているのです。

ここからは、カラーの具体的な活用について解説します。

カラーパレットの活用

Googleは、デザイン制作において自由に活用できるカラーパレットを用意しています。

MATERIAL DESIGN

このカラーパレットには多くの色が用意されており、使いたい色を選んでコードをコピーできます。

また、ネット上には他にも多数のカラーパレットが無料で公開されています。自分にとって使いやすいパレットを選び、デザイン構成に役立てるとよいでしょう。

メインカラー

Webサイトやアプリケーションを制作する際の主軸となるカラーを『メインカラー』と言います。メインカラーはサービスの一番広い面積を占めており、そのサービスのイメージを作り出しています。従って主に開発の最初の段階でメインカラーは決定されます。

サービスの内容に合わせた適切な色を選択するよう心がけましょう。

サブカラー

『サブカラー』はメインカラーのサポート的な役割を果たしています。メインカラーと同系色の色を設定し、グラデーションを作ることでユーザーの利便性を高める効果を発揮します。

サブカラーは、メインカラーほど目立たせることなく、メインカラーを際立たせる箇所に使います。

アクセントカラー

大切なポイントや重要なボタンなど、ユーザーの視線を集めたいときにアクセントとして利用するカラーです。あくまで部分的な強調をする際に利用するカラーなので、使いすぎることがないように注意しましょう。

アクセントカラーは、本当に目立たせたい部分にだけに差し色の役割を果たすケースが多い色です。メインカラーとの違いを鮮明にして、ユーザーの目を引くカラーを選ぶのがポイントになります。

色の使い方をサポートしてくれるサイト

マテリアルデザインの色選びは奥が深く、どのように選択すれば良いのか判断に迷う場面があります。不適切な色を選択してしまうと逆にサービスの利便性を下げてしまうことがあるので、慎重に選ぶ必要があるのです。

ここからは、色の使い方をサポートしてくれるおすすめのサイトを2つ紹介します。

色の組み合わせならMaterial Palette

Material Paletteは、用意されているカラーパレットの中から2色を選択し、マテリアルデザインに合うWebサイト構成を提案してくれるサイトです。

サイト上にあるボタンは美しいだけでなく操作性に優れており、楽しみながら簡単にマテリアルデザインのカラーを構成できます。

Material Palette

色とアイコンを探せるMaterial Design Colors

マテリアルデザインカラーに始まり、UIアイコン、UIデザイン、ソーシャルカラーやHTMLカラーなど、あらゆる場面に対応できるコンテンツを多数用意しているサイトです。

サイトにはブログがあり、使い方のノウハウなども掲載されていることから、分からないこともすぐに解決できます。

Material Design Colors

まとめ

マテリアルデザインにおいて、色選びは大切なポイントになります。Webサービスの特性に合わせた効果的な色を選択することで、そのサービスの利便性が格段に上がることもあるのです。

色の選択は奥が深い作業ですが、Web上には無料のツールや役立つサイトがいくつも用意されています。これらをうまく活用して、クオリティの高いマテリアルデザインを実現しましょう。

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

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

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



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ