Googleの提唱しているマテリアルデザインは、エレガントなだけでなく機能的なデザインのフレームワークと言えます。
AndroidやYouTubeなど身近なサービスに適用されているため、ほとんどの方が目にしたことがあるかと思います。

しかしマテリアルデザインを取り入れてブランドを表現しようとしたとき、他のブランドと似たり寄ったりになってしまった、ということはないでしょうか。
実際のところ、マテリアルデザインをフラットデザインの延長として捉えてしまうと、マテリアルデザインでどうブランドを表現すればいいのか困惑している企業もあるでしょう。

今回は、マテリアルデザインを取り入れていきたいけれど確固たるブランドを確立したいお店や企業に考えて欲しい、マテリアルデザイン時代のブランド戦略を考える上での３つのポイントをご紹介します。

マテリアルデザイン時代のブランド戦略を考える際の3つのポイント

マテリアルデザインは直訳すると「物質的なデザイン」で、「紙」と「インク」で構成された奥行きのある3D空間をイメージした、シンプルなデザインフレームワークです。
紙を立体的に表現するために影を使ったり、分かりやすさを向上させるために動き(モーション)を取り入れたりしているのが特徴です。

Googleはマテリアルデザインのガイドラインを定めており、「マテリアルデザインとはこうあるべきである」という細かい定義がなされています。
GoogleのモバイルアプリケーションやWebサービスのほとんどでマテリアルデザインが取り入れられているので、マテリアルデザインのガイドラインと各種サービスを見比べてみるとマテリアルデザインがどのようなものかがお分かりになると思います。

一方、実際にガイドラインの規定通りにデザインしていくと、個性が出しづらく、Googleの各種サービスと非常に似通ったデザインになってしまう、というのもよくあることです。
しかし、本質的にはマテリアルデザインはデザインの「外堀」を埋めるだけで、マテリアルデザインのポイントを押さえながら個性を出すこともできるはずです。

そこで、実例を見ながらブランドを強調するマテリアルデザインというものがどのようなものなのか、そのポイントを探りたいと思います。

1. ブランドのペルソナを決めよう

マテリアルデザインにスポットライトが当たる際に、配色やフォントフェイスなどの細部から考えようとしてしまいがちです。
しかし、他のブランドと明確な差別化を図りつつも、マテリアルデザインを採用するのであれば、ブランドのペルソナから考えてみましょう。

ペルソナとは、Webマーケティングを行う上での架空のターゲットユーザーのことです。
どのようなホームページでも、自分たちの顧客はどんな人なのかを決めるのは重要なことです。
デザインにおいては、ペルソナを決めることで配色やフォントなどを選ぶ上での方向性が決まります。

1.png

例えば、こちらはレシピを発見し、シェアし、保存することができるPestoというアプリです。
実際の料理ブックをぺらぺらとめくるような体験をこのアプリ上でもできるように、というコンセプトのもと、若くてセンスのある男女に向けてデザインされました。
アイコンやカラーはマテリアルデザインのガイドラインに沿っていますが、緑色の配色や葉っぱの絵がヘルシーに見えますね。

2.png

一方、こちらはクレーン航空のモバイルアプリのデザインです。
コーポレートカラーであるネイビーが青空を連想させ、ポータブルなチケットがマテリアルデザインとマッチしています。

参考：
ホームページ運営に欠かせない！ペルソナの設定方法とは？

2. エレガントなロゴマークを作ろう

5.png

ロゴマークはブランドアイデンティティを作り出す上で最も重要な要素の一つであるといっても過言ではありません。
しかしながら、マテリアルデザインを取り入れてブランドを作りたいのであれば、マテリアルデザインとロゴマークが「共存」できるように考える必要があります。

どういうことかというと、ロゴマークがあまりにも派手で誇張しすぎていると、マテリアルデザインのエレガントさを台無しにしてしまう可能性があるということです。
ほかのUIの邪魔をしないように同じようにエレガントであるのが好ましいです。

ブランドを表す印章として、ロゴはアプリ立ち上げの際に一瞬だけ表示させたり(スプラッシュ画面で表示させたり)、ナビゲーションの近くにささやかに表示するのがよいでしょう。
ロゴを過度に強調しすぎてデザイン上のヒエラルキーを壊してしまっては、ブランド戦略としてもマテリアルデザインとしても失敗です。

参考：
エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

3. 使うフォントで差別化しよう

AndroidのデフォルトではRobotoというフォントがシステムフォントとして使われており、Googleのマテリアルデザインでもこのフォントがよくしようされます。
また、Robotoで表現しきれないあらゆる言語のフォントはNotoと呼ばれるフォントでカバーされています。
しかし、マテリアルデザインを表現する際にこれらのフォントを使わなければいけないという決まりはありません。

3.png

フォントにゴシックを使うのか明朝を使うのかで大きく印象が変わるように、ブランドを表現するときにどのフォントを使うのかは慎重に選ばなければなりません。
フォント選びはそれほどにブランドが演出するキャラクターに多大なる影響を与えます。

ただし、全体のUIを通して適用されたメインフォントがうまくマテリアルデザインとマッチするとは限りません。
なぜなら、タイポグラフィに関するマテリアルデザインのガイドラインは、もともとは伝統的な印刷物のデザイン(いわゆるDTPデザイン)の基盤の上に成り立つものだからです。
装飾に凝りすぎたフォントは個性的で差別化しやすそうに思えますが、マテリアルデザインとの相性がよくないように見えるのはそのためです。

4.png

左のクレーン航空のアプリの場合は搭乗時刻などの重要な情報を太字のゴシックで強調しています。
また、ベースラインを合わせ、大きさを変えることで、単一のタイプフェイスでも十分に個性が発揮されており、マテリアルデザインとも調和が取れています。
一方右側の「The Fortnightly」は、ヘッドラインと本文に2種類のフォントを使うことでブランドを表現しています。

先ほどのロゴと同じように、ヒエラルキーを守り、ベースラインを揃え、余白を十分に取りましょう。
これだけ守るだけでも、十分にエレガントに見えるでしょう。