progyu88

YouTubeの投稿体験談、芸能情報とスマホアプリを書きます。

【比較】 アプリのUI マテリアルデザインとフラットデザインの違いってナンダ?

今日は、初心者向けに、アプリのUI(ユーザーインターフェイス)のなかでも マテリアルデザインとフラットデザインの違いについて書きます。

先日、Google日本語入力のアプリがアップデートされたときに、”マテリアルデザイン採用”という言葉が使われていました。(1)

しかし、マテリアルデザインの意味がわかりませんでした。友達の間では、アプリに詳しいのですが、プログラマーでも、デザイナーでもないので技術的なことはわからないです。そこで、僕は「マテリアルデザインって何なのか?」「以前知ったフラットデザインとは、どこが違うのだろうか?」と疑問に思ったことを調べました。その結果、マテリアルデザインとフラットデザインには違いがあることがわかりました。

 

マテリアルデザインとは?

Google日本語入力の設定

 

Google日本語入力 画面

 

マテリアルデザインとは、誰もが使えるデザインシステムのことです。(2)誰もが使えるデザインを設計する この考え方、学校の授業で聞いたことがありませんか?

そう、ユニバーサルデザインです。ユニバーサルデザインとは、年配者がターゲットのバリアフリーとは違い、文化・言語・国籍の違い、老若男女といった差異、障害・能力が違う人 誰もが利用できることを前提に設計するデザインです。(3)

 

誰もが使えるデザインをしなくてはいけない裏には、世代によって「こういった画面の作りが、受け入れられる」というのがあるからだと思います。ましてや、Googleは世界的にサービスを提供しています。だから、Googleは世代間でのギャップを超えるデザインを作る必要があった。

逆に、ウチのアプリの利用者は世代がハッキリしているから若者、主婦、お年寄りに受け入れやすいデザインをやっていきますと考える企業には、考えるキッカケがなかったと思います。世界的企業のGoogleだからこそ生まれるデザインに対する考え方ですね。

 

フラットデザインとは?

LINE 設定画面

フラットデザインというのもあります。フラットとは、平ら。つまり、クリックするボタンなどを平らに表示していこうとする考え方のデザインです。画像は、LINEですが極めて平らになっています。

なぜなら、フラットデザインのほうが現代的で、メッセージ性が強いと考えられているからです。他には、デザインを見れば年代がわかると言われますが、あえて特有のデザインをしないことで長い期間生きるデザインにする、余計な装飾をしない分、制作側の作業時間の短縮に繋がるからとも言われています。(4)

ただ、フラットデザインはユーザーにとっては、戸惑いも生まれます。今までは、リッチデザインといってボタンが立体的になっていたので、「ここを、クリックをすればいいのだな」とわかりました。しかし、フラットデザインでは、平面的な表示をするので「ここは、クリックできるのか?」と躊躇してしまうからです。

 

2つの違い

2つの違いを、簡単にすると以下のようになります。

マテリアルデザイン

考え方・・・誰もが使えることが出来るデザインを作る。

イメージ・・・すごく未来のことを考えている。見た目は、フラットデザインと変わらないけど、核なき平和社会の実現のような夢への挑戦。

 

フラットデザイン

考え方・・・強いメッセージを発信するデザインを作る。

イメージ・・・目の前のことを考えている。ボタンの変更であったり、ユーザーに直接的な影響がある。

 

参考サイト

(1)Android版Google 日本語入力がマテリアルデザインに!機能追加でさらに使いやすく! | オクトバ

(2)マテリアル・デザインって何? Androidデザイン責任者にインタヴュー : ギズモード・ジャパン

(3)ユニバーサルデザイン - Wikipedia

(4)5分でわかるフラットデザインの起源と歴史 | SEO Japan