【これからのトレンド!】フラットデザインのメリット・デメリットとは

フラットデザインのメリット・デメリットについて紹介。初心者でも分かるようにフラットデザインとは何なのか、そしてこれからトレンドになるデザインとは事例をもとに詳しく解説しています。これからデザイナーを目指す方も知っておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

本稿は、Design School Canvaブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。

そもそもフラットデザインについて詳しく知りたい方は、フラットデザインとはについても合わせてご覧ください。

 

目次

 

フラットデザインとは

あなたは、フラットデザインがブログやデザイントレンド一覧で話題になっているのを見たことがあるでしょう。

このシンプルなスタイルは、様々な表現ができますが明確には定義されていません。

 

3Dではない

そのスタイルの名前は

  • 平らな形状。
  • 奥行きを表現する影、ハイライト、テクスチャなどの詳細を表現しないこと。

の、2つの要素から名付けられました。

 

スキュアモーフィックデザインではない

フラットデザインはスキュアモーフィズム(実世界のオブジェクトやプロセスに似せた装飾スタイル)に対する反応として始まりました。

スキュアモーフィズムは、ドロップシャドウ・リアルな質感・反射・面取りなどのような効果をよく使います。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

フラットデザインの一般認知

フラットデザインの全貌が見えるようになったのは、2012年から2013年ごろです。

Windows8とiOS 7のリリースのおかげで、非常に認識しやすく(そして、より再現しやすく)なった年です。

1_windows-8-662x372

2_ios-7-662x587

Windowsの鮮やかなモジュール式レイアウト と、アップルのきれいに簡素化されたアイコンからフラットデザインの開発の経過、トレンドへの影響が見て取れます。

UXPinのスタッフは、Fast Co. Designでフラットデザインの発展の「山場」は、主流のトレンドとスキュアモーフィックデザインに葬り去られたと指摘しています。

しかし、フラットデザインの勢いはまだ強く、主流になりそうな勢いです。 それでは、その長所と短所、将来の可能性について見てみましょう。

メリット

 

レスポンシブデザインとの互換性

マイクロソフトとアップルが、フラットデザインに飛びついたので、フラットデザインはUXへの新たなアプローチとしてすぐに採用されました。 それは、Webとモバイルのデザインとして一般的であり続ける良い理由になりました。

フラットデザインは、そのグリッドベースのレイアウトとシンプルなグラフィックスのおかげで、簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置することができるので、色々な設計カテゴリに適用することができますが、特にWebやモバイル設計に適しています。

 

Sergey Valiukhから、Webとモバイル間の一貫性のあるシンプルなUXを提供できる、レイアウトを再配置する例を紹介します。

3_web-and-mobile-662x364-620x340

一方、たくさんの影とテクスチャーを持つスキュアモーフィックの非常に詳細なスタイルは、固定サイズイメージを拡大縮小すると、上手く変換できないことがよくあります。

デザイン代理店Dapper GentlemenRyan Allenは、Flat 2.0で「フラットデザインは1ピクセル単位の完全なデザインより、はるかに簡単にコンテンツに適したサイズにスケーリングできる」と書いています。

 

柔軟なフレームワーク

フラットデザインは、グリッド・カード・モジュール・ブロックなどと相性が良く、均一な幾何学的形状になる傾向があります。 このタイプのレイアウトは、どんなところに使っても、認識しやすく直感的に操作できます。

グリッドはどんな状況にも適用できる柔軟性のあるフレームワークです。 これにより、デザイナーは制限されたレイアウトに押し込むより、最適な配置を実現することができます。

 

例えば、このBureau of Bettermentのパンフレットは、様々なサイズの正方形や長方形を使って、タイポグラフィやアイコンなどの様々な要素を際立たせています。 均一な色とシンプルなイラストは、フラットな効果を演出しています。

4_grid-662x443-620x415

一方、このWebサイトは、違う方法でグリッドを使っています。メニューからスタッフの写真へ、さらにサービスのリストへグリッドを使っています。

5_grids-662x1732-391x1024

 

きれいな、読み取り可能なタイポグラフィ

また、フラットな質感は文字へのアプローチへも影響します。より大きく、より合理的なタイポグラフィになります。影やその他の効果が無いことで、文字が読みやすくなります。

6_large-type-662x1283-528x1024

サンセルフ書体は、このスタイルと相性が良く、一般的によく使われます。 ですが、セリフ書体もあまり凝っていない文や、見出しやメニューの文字として、「大きい文字」でなら使うことができます。

7_serif-type-662x346-620x324

 

デメリット

 

ユーザビリティへの妥協

フラットデザインのクリーンで効率化された質感を出そうとするがために、美学的思想に熱中する罠に落ちるデザイナーもいます。

これは、ユーザビリティにも悪影響を及ぼし、Webおよびモバイルデザインに潜むリスクになりえます。全てがフラットな見た目なら、どこがクリック可能で、どこがクリックできないのかが見えにくくなります。

シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分からなくなったり、ユーザーが慣れ親しんだ視覚的な手掛かりが無くなってしまう可能性があります。

 

一例として、このWebサイトを見てみましょう。

すべてのボックスはクリック可能ですか?その一部のみ?一見で判断するのは難しいでしょう。

8_web-usability-662x1264-536x1024

識別性の欠如

デザインプロジェクトを計画しているすべてのビジネス、ブランド、または個人は、ユニークなデザインを望んでいます。彼らが、Webサイト、アプリ、名刺、イベントポスター、または他の何かを捜しているかどうかに関わらずです。

フラットな設計の欠点の一つは単純化し、狭義のビジュアルスタイルに固執することで、似たデザインになりがちです。

純粋なフラットスタイルを使用しているデザイナーは、自分のプロジェクトに適用できる原則の選択肢は限られています。

 

例えば、これらの関係のないモバイルのインターフェースは、Marco La MantiaSimone Lippolis(下の最初の画像)とLuis Vaz(2つ目の画像)によってデザインされましたが、両方ともサンセルフ書体の白い文字、基本的な幾何学的形状をしています。また、色合いも同じです。

9_similarity-662x733

10_similarity-662x670

 

流行りに集中しすぎる

フラットデザインが、現在のテクノロジーにおいて、近代的で直感的だとデザイナーに認識されれば、人気のスタイルとして定着するでしょう。

しかし、この傾向には一つの問題があります。デザイナーの一部は本当にその有用性を考えることなく、流行に乗るために適用されることです。

 

これは、目的のないデザインになってしまいます。初期のフラットデザインでは長い影を付けている例が良く見られました。

Alexander LototskyErik Malmsköldのこの2つの例は、最も一般的な文字とアイコンに長い影のトレンドを付加した典型的な例です。両方ともフラットデザインの創成期、2013年に作成されました。

11_long-shadows-662x949-620x888

12_long-shadows-662x663-620x620

流行りの見た目を追い求めるだけでは、前述したように、ユーザビリティに悪影響を与えることになります。

 

視認性を犠牲にはしますが、薄く軽い書体を使うことによって、クリーンで最小限のデザインになります。

視認性を考慮して文字の軽さを最適に調整しないと、名刺やモバイルアプリ、Webサイト向けには問題になることもあります。

13_font-too-small-662x497-620x465

 

フラットデザインのこれから

フラットデザイン2.0

デザイナーは、過去数年でフラットデザインを試してみて、ここで取り上げた長所と短所のいくつかに気づき、それを踏まえてスタイルを調整することにしました。

フラットデザインの初期は、厳密な視覚単純化することを特徴としていましたが、最近の傾向は、美しさと機能的であることを両立するために、シャドウとテクスチャのような要素を少しだけ再導入するようになってきました。

純粋にフラットなアプローチにこれらの調整したスタイルを、多くの場合、「フラット2.0(Flat 2.0)」または「ほぼフラット」なデザインと呼ばれるようになります。

 

このスタイルは多くの妥協案を提供します。フラットでクリーンなシンプルさを残しつつ、見た目の多様性と高められたユーザビリティのためのスキュアモーフィックな質感を追加できます。

テクニックの一つとしては、要素を階層や色の変化や影を追加することにより、平坦さに深さとレイヤーを追加します。別の一般的なハイブリッドアプローチとしては、写真だけではなく、イラストやアイコンの追加です。

 

以下の例では、グリッドレイアウトと読みやすい文字は残りますが、レイヤー要素とテクスチャー化されたイラストを追加することにより、一層フラット2.0のアプローチとしての良い例となっています。

14_flat-2.0-662x543-620x508

 

マテリアルデザイン

「ほぼフラット」なデザインと多くの共通点のあるマテリアルデザインは、Googleが開発した視覚言語で、グリッドベースのレイアウトや「意図的な色の選択、エッジツーエッジ画像、大規模なタイポグラフィ、および意図的な空白」を特徴とし、大胆な視覚効果があります。

15_material-design-principles-662x289-620x270

このスタイルはユーザーがすぐに理解できるように「現実に接地されている視覚的な手がかり」と「おなじみの触覚属性」を持つ紙風のアプローチを採用しています。

それはスキュアモーフィズムにも少し近づいているようです。

 

例えば、Tubik StudioからこのUIのコンセプトでボタンの微妙な影や色は、即座に明確にユーザの注意を引きます。背景の大きなスクリプト書体と紙のようなレイヤーは、マテリアルデザインの特徴をよく表しています。

16_material-design-662x495-620x463

マテリアルデザインは、明らかにフラットデザインの要素を備えていますが、光と影、モーション、およびその他の詳細への注目が、フラットデザインはより便利で柔軟に適合させることができることを実証しています。

 

Googleによる自由に入手できるマテリアルデザインへの詳細なガイドは、ガイドラインに従うのか、好きな要素・テクニックを取り込むのかにかかわらず、デザイナーが自分の仕事にマテリアルデザインを簡単に導入しやすくしました。

これはまた、デザイナーの独自の解釈や実験推奨し、フラットデザインやマテリアルデザインの両方の進化を促しました。

つまり、デザイナーがトレンドと新しいもの何かを作る時に、マイクロソフトやアップル、Googleなどの大企業がデザインスタイルの大衆化にとても影響を与えていますが、次の「大きな波」を作る手助けをするのはデザイナーなのです。

 

ディスカッションに参加しましょう

フラットなデザイン(視覚的なシンプルさ)とスキュアモーフィズム(視覚的な馴染みやすさ)の背後にある精神を考える時、両方の概念は確かに共存できることに気づくでしょう。この二つの完全な微妙なバランスは、ここ数年の未来が明確に証明してくれるでしょう。」 — UXPin for Fast Co. Design

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

今後デザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。