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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

マテリアルデザインを採用しながらも、独自のブランドイメージを構築するのは難しいと感じているひともいるでしょう。
マテリアルデザインにはガイドラインが定められており、その規定の中でブランドを考えなければならないと思い込んでしまうからです。

しかし実際のところ、このガイドラインはあくまでも土台にすぎず、もっと自由に考えてもよさそうです。
もちろん使用するのに推奨される色や フォント などはありますが、ブランドを作る際にはこうした制限は一旦取り払って考えてみたほうが、自由な発想が生まれるのではないでしょうか。

Credit: Photos on Expressing Brand in Material