3分でわかる!フラットデザインとマテリアルデザインの違い

フラットデザインとマテリアルデザイン

フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。ここでは、簡単にフラットデザインとマテリアルデザインの違いについて述べていきます。

フラットデザインのメリット

フラットデザインのメリット

フラットデザインはリッチデザインと呼ばれる立体的でリアル感のあるデザインの流行が後退した頃に注目され始めました。スマートフォンのアイコンやロゴタイプでもフラットデザインを用いるケースが増えています。
フラットデザインのメリットについて考えてみましょう。フラットデザインはさまざまな媒体に浸透しているため、抵抗なく受け入れることができるということ、人の目に優しくストレスを与えにくいデザインであること、そして、無駄な装飾をそぎ落としシンプルに磨きをかけているため洗練された都会的な印象を与えること、これらがフラットデザインの持つメリットと言われています。また、リッチデザインに比べ、ファイルの容量を小さく抑えることができるという点もフラットデザインのメリットと言えます。

フラットデザインのデメリット

フラットデザインのデメリット

一方、フラットデザインのデメリットに挙げられるのが、酷似したグラフィックデザインが生まれやすいという点です。

それはフラットデザインが、限りなくシンプルに仕上がるがゆえに起こる問題で、そういった点に関しては細心の注意が必要になってきます。また、フラットデザインには影という概念がないため、Webでボタンとして使用する場合、クリックできるのかどうかわからないという操作性における課題が生まれる危険性があります。

マテリアルデザインのメリット

マテリアルデザインのメリット

マテリアルデザインは広義でフラットデザインの一部とも言われますが、大きな違いがあります。
マテリアルデザインは「視覚」ではなく「触覚」に語りかけるようなグラフィックデザインで、実際に操作しているかのような効果を演出するデザインです。フラットにデザインされたものに意味のあるモーションを加えることで、ストレスなく操作方法等をガイドすることに長けています。影を利用するなど多少のリアリティがある表現もマテリアルデザインの範囲内で、Google社より制作ガイドラインが設けられているため、迷うことも少なく制作することができるでしょう。

マテリアルデザインのデメリット

マテリアルデザインのデメリット

一方、ガイドラインが設けられているということはデメリットとも言えます。マテリアルデザインのガイドラインに沿っての制作となるため、グラフィックデザインとしての差別化を図ることが難しく、オリジナリティの追求という点では苦戦する可能性があります。また、フラットデザインと比べると必要とする容量が大きく、場合によっては工夫しながら制作していく必要があります。

デザイナーは、フラットデザインのメリット・デメリット、マテリアルデザインのメリット・デメリットを理解しながら、上手に活用していく必要があります。

それぞれを効果的に使う参考情報

それぞれを効果的に使うには特徴を理解することが大切です。グラフィックデザイン制作を進めていく中で、フラットデザイン・マテリアルデザインともに、どちらが何に適しているのかを的確に判断しながらデザインを考えていきましょう。

動きがありすぎるとユーザーの視覚に疲れを引き起こしてしまい、動きがなさすぎるとユーザーに飽きをもたらしてしまうかもしれません。両社のデザインの良い面を上手に生かし組み合わせていくスキルが、今後必要になってくるのではないでしょうか。

効果的な利用

平面であることを極めたフラットデザインと、平面でありながら立体の要素を取り入れたマテリアルデザイン、これらのデザインにおける違いを理解することで、シーンに合わせてデザインを使い分けることが可能になります。そうしたデザインの知識があなたのグラフィックデザインの幅を広げていくことでしょう。

関連記事

2015年Webデザイントレンド

2015年Webデザイントレンド

Webデザインを制作する時は必ず、インターネットが生み出すあらゆる可能性を考慮しましょう。デザイナーの斬新なアイデアは、人々の交流や想像力の範囲を世界規模へと広げていきます。そうした例は、広告制作会社のWebサイトなど、時代の最先端をいく業界ではよくあることです。 この記事では、2015年に流行しそうな注目のWebデザイントレンドを厳選してご紹介します。これを読めば、真のイノベーションを理解し、新たなチャンスを見い出せるはずです。中には、”モダンなWebサイト”という概念を完全に覆すトレンドもあるかもしれません。 1. 大きく作る “大きく作る”というのは、今日のWebデザインにおいて最も重要な原則でしょう。とはいえ、この種のホームページに抵抗がある人は多くいます。具体的には、アバブ・ザ・フォールド(スクロールせずに閲覧可能な領域)。このタイプのデザインでは、画像や動画の上に短い言葉を並べたものだけをに表示します。中にはナビゲーションすら取り除いたものや、(少なくとも)小さなアイコンとして隠しているものもあります。 このWebデザインのトレンドは、”映画風”と”ブックカバー”の2種類に分類されます。映画やテレビの広告に着想を得た前者に対し、後者は書籍やカタログの表紙といった昔ながらのコンセプトを進化させたものです。 このトレンドを支えているのは、視覚的効果と実用性です。まず、サイトを訪れたユーザに、一瞬にして最大級のインパクトを与えることができます。さらにコーディングがしやすく、モバイル端末でもデスクトップパソコンのモニタでも正常に動作します(表示デバイスの画面サイズによらず、レイアウトは一定に保たれます)。 このような画像の全画面表示がはやり出したのは去年のことです(「2014年のwebデザイントレンド」という記事で紹介しました)。そして、高画質画像や高速化した技術の利用が増えるにつれ、Webサイトは”ブックカバー”のレイアウトから、さらなる進化を遂げようとしています。 “映画風”のトレンドで重要なのは、全画面(または、ほぼ全画面)に映し出された動画と、その上に表示される短い言葉や要素です。このスタイルを初めて取り上げたのは「2013年のWebデザイントレンド」という記事ですが、当時はまだ少数の代理店のWebサイトにしか使われていませんでした。 そのトレンドが今、勢いに乗っています。つい昨年、Paypalはホームページをアップデートして、背景に動画を全画面で表示するようにしました。これがきっかけとなり、このコンセプトは主流になっていったのです。 2. マルチメディアを体感させる マルチメディアのコンセプトは、かなり古いものです。マルチメディアという言葉自体が使い古され、誤用された結果、もはや本来の意味はほとんど残っていません。それにもかかわらず、デザイナーやプログラマーの多くは、もっと魅力的なマルチメディアを体感してもらおうと日々努力しています。 かつて、こうした手法にはFlashをプラットフォームとして使用していました。それが今ではHTML5のcanvas要素に変わり、いずれはこれでWebサイト上の視覚効果を、ほとんど作り出せるようになるでしょう。 HTMLのcanvasを使って作成したインターフェースの例として、注目のサイトをもう1つ紹介しましょう。こちらはブルックリン在住のミュージシャンJonathan Dagan(j.viewz)が運営する、コミュニティー主導型のDNA projectのサイトです。視覚に訴える背景動画を始め、j.viewzが試作した曲(ユーザがダウンロード可能)や、コラボしている人たちがアップした動画や音楽、フィードバックなどがあり、j.viewzの新アルバムの制作予定が分かるようになっています。 Website via Raise the River さらにもう1つ、すばらしい例を挙げましょう。このRaise The RiverのWebサイトの特長は、最適な視覚的メタファーと、情報の見せ方にあります。程よい速度でアニメーションが進み、スクロールが無効になっていると、ユーザは必然的に一息ついて、このページの進行にペースを合わせることになります。 インターフェース設計においては、ユーザ側ですべて操作できるように設計するのが一般的です。しかし、このWebサイトを見ると、あえて一定時間ユーザ操作を無効にすることで、より良いユーザエクスペリエンスを実現できるケースもあることが分かります。 3. 視差効果で動きを生み出す/h3> 視差効果は、さまざまなアニメーションへと進化を遂げました。そのすべてに共通して言えるのは、「スクロールやマウスの動きに応じて、ページ内の要素やプロパティを動かす」ということです。よく見ると分かると思いますが、この記事で紹介しているWebサイトのほとんどに、この手法が使われています。では、もう少し他の例を挙げましょう。 スクロールイベントと手書きのアニメーション このMint Design Companyのサイトを見ると、昔のCSSスプライトの技術が独創的な手法で使われていることに気付くでしょう。その効果によって、簡素な企業Webサイトが、魅力あふれる個性的なサイトに見えるのです。 斬新なスクロール Website via QUO+ QUO+のヘッドセットのページは、縦にも横にもスクロールします。このサイトを見ていると、まるで迷路の中を進んでいるようなワクワクした気分になります。さらにスクロールをすると、製品の色が変わっていく部分も楽しめます。 4. 動き出す絵本 このタイプのページは上の1つ目の例のように、ユーザが所定の位置までスクロールするとアニメーションのシーケンスが始まります。たいていは、数個の要素がページ内に滑り込んできたり、フェードイン効果で浮かび上がったりします。 BOLDKINGの製品ページ(上のサイト)では軽量化したSVGとJavaScriptを使い、視覚的メタファーを用いて製品の流れを説明しています。そのアイデアやアニメーションもさることながら、これを1.5メガバイト以下のページ容量で実現しているというから驚きです。JavaScriptのライブラリ1つで、そのくらいのサイズになるものもあります。なお、このアニメーションシーケンスの中には、操作できるものも1つあります。 Colin and DewiのウェディングWebサイトは、単純ながらも効果的な方法で、ユーザに集中して物語を読んでもらえようにしています。一度に表示されるのは物語の一節のみです。次のパートを読むにはスクロールする必要があります。 普通のスクロール機能と変わらないような気もしますが、実際は3DのCSSアニメーションを使って、テキストの一部を表示したり隠したりすることで、話の続きを読みたいと思わせているのです。 ヘッダーとページに、マウス操作に連動した視差効果を使う Website via HábitatWeb この効果を使うと、3次元空間を見ているような錯覚を作り出すことができます。Habitat Web(上のサイト)やArchéologie de la Grande…

2014年 ウェブデザインのトレンド トップ10

2014年 ウェブデザインのトレンド トップ10

昨年は多くの新しいアイデアが生まれ、ウェブデザイナーにとって有意義な年でした。あるものは消え、あるものは成功して今後も影響を与え続けることになりました。 2013年に大ヒットしたトレンドは2014年には目新しさを失い、その一方で世界中のデザイナーが新しいトレンドに磨きをかけ続けるでしょう。 では、2014年はどんなウェブデザインのトレンドが待っているのでしょうか? これからそれを紹介します。ご意見を、ぜひコメントに残してください。 1.フラットデザインの繁栄 — Website: wistia.com フラットデザインなど一時的な流行に過ぎなかった思うなら、それは間違いです。フラットデザインは強力なミニマリストデザインです。デザインをシンプル、クリーン、現代的に保つ、ということです。これらは、ほとんどのクライアントからいつも聞かされる言葉です。 皆がフラットデザインを使う理由は、それに意味があるからです。無駄を削り、空白を有効利用し、全体として優れたユーザ体験を提供します。デザイナーは多くを使わずに大きな成果を達成することを余儀なくされ、フラットデザインは2014年の第1のトレンドになると私は考えます。 2.レスポンシブデザインは必須 — Website: KasraDesign これは、間違いなく標準になります。クライアントは応答型デザインを要求し、開発者はコーディングに必要なものを学び、それを追求します。理由は単純に、「需要」です。スマートフォンやタブレットが飛ぶように売れている今、マーケティングの可能性は巨大です。あなたのクライアントが零細事業のオーナーであったとしても、他社のサイトで応答型の動作を目にすれば、このデザインを話題にするでしょう。 3.ウェブサイトの画質が向上 — Website: Portraits 長年、デザイナー達は優れた画像を追求してきましたが、クライアント側では必ず問題が生じてきました。2014年には、より高品質で創造的でユニークな画像が手に入ります。その理由は、手ごろな価格にローディング速度の高速化、そしてどこからでも高画質の画像にアクセスできることです。 4.視差効果ウェブサイトの人気 — Website: Hot Dog 遠い昔、960画素ウェブサイトの時代には、IE6で効果的に機能しなければなりませんでした。インパクトと効果的な文言がすべてでした。視差効果デザインはそれを、スクローリングの効果、パワフルな画像、力強く創造的なタイポグラフィで実現します。2014年には、特に有名ブランドが視差効果デザインを多用するようになるでしょう。 5. インフォグラフィックスは、やはり最良のデータ表現方法 — Website: Gabriel Gianordoli インフォグラフィックスは小さなスペースに多くの情報が入り、人目を引きますが、低コストです。事業主がインフォグラフィックスを依頼する理由はそこにあります。エンドユーザがこれを好む理由は、インフォグラフィックスにはそれぞれ独自の個性があるからです。タイポグラフィや大胆な色づかいと形の組み合わせなど、少し風変わりで見る人の興味を引きます。 真面目に取り組むクリエイターなら必ず、正確な事実と数値を元にストーリーを作り上げます。視聴する人は子供時代の漫画の世界に入り込み、見ているだけで楽しめるかも知れません。でも、実はそのとき人はたくさんの情報を吸収しており、そして、人は情報が大好きなのです。インフォグラフィックスは大量のデータを伝えるための非常に効果的な方法であり、2014年には間違いなく、ますます多用されるようになるでしょう。 6.タイポグラフィが主役 — Website: Crop The Block さよならGeorgia、さよならTimes New Roman、さよならHelvetica。2014年にようこそ。タイポグラフィに真面目に取り組むときが来ました。これまでも真面目に扱われていましたが、今ではタイポグラフィは主流になりました。人々は雪崩のように押し寄せるモバイルアプリケーションの中を泳ぎながら、ありとあらゆる素晴らしいタイポグラフィを見せつけられ、それが大きな要因となってフォントの使われ方への期待が高まっています。 高品質なフォントが手ごろな価格で入手できるようになり、もうArialでは不十分です。ユーザは相変わらずのHelvetiaを見ると何かが足りないと感じるようになり、事業主はフォントファミリー全体に高い料金を支払わなくなっています。 7.ウェブサイトはコンテンツを重視して単純化 — Website: The New York Times ニューヨーク・タイムズは最近、ウェブサイトのデザインを一新しました。このデザインは、そのシンプルでクリーンな手法によって最新のトレンドの多くを語っています。新しい手法ではありませんが合理的な次のステップとして、ますます多くのウェブサイト、特に「重い」コンテンツのサイトがこの例に倣うでしょう。余計な飾りを取り払えば実質のコンテンツが輝いて見え、デザインが脚光を浴びようとするのではなく、本来の役目を果たすようになります。 8.ショートプレゼン動画の再来 — Website: Goldee…

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。