【これからのトレンド！】フラットデザインのメリット・デメリットとは
フラットデザインのメリット・デメリットについて紹介。初心者でも分かるようにフラットデザインとは何なのか、そしてこれからトレンドになるデザインとは事例をもとに詳しく解説しています。これからデザイナーを目指す方も知っておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。
そもそもフラットデザインについて詳しく知りたい方は、フラットデザインとはについても合わせてご覧ください。
目次
フラットデザインとは
あなたは、フラットデザインがブログやデザイントレンド一覧で話題になっているのを見たことがあるでしょう。
このシンプルなスタイルは、様々な表現ができますが明確には定義されていません。
3Dではない
そのスタイルの名前は
- 平らな形状。
- 奥行きを表現する影、ハイライト、テクスチャなどの詳細を表現しないこと。
の、2つの要素から名付けられました。
スキュアモーフィックデザインではない
フラットデザインはスキュアモーフィズム(実世界のオブジェクトやプロセスに似せた装飾スタイル)に対する反応として始まりました。
スキュアモーフィズムは、ドロップシャドウ・リアルな質感・反射・面取りなどのような効果をよく使います。
フラットデザインの一般認知
フラットデザインの全貌が見えるようになったのは、2012年から2013年ごろです。
Windows8とiOS 7のリリースのおかげで、非常に認識しやすく(そして、より再現しやすく)なった年です。
Windowsの鮮やかなモジュール式レイアウト と、アップルのきれいに簡素化されたアイコンからフラットデザインの開発の経過、トレンドへの影響が見て取れます。
UXPinのスタッフは、Fast Co. Designでフラットデザインの発展の「山場」は、主流のトレンドとスキュアモーフィックデザインに葬り去られたと指摘しています。
しかし、フラットデザインの勢いはまだ強く、主流になりそうな勢いです。 それでは、その長所と短所、将来の可能性について見てみましょう。
メリット
レスポンシブデザインとの互換性
マイクロソフトとアップルが、フラットデザインに飛びついたので、フラットデザインはUXへの新たなアプローチとしてすぐに採用されました。 それは、Webとモバイルのデザインとして一般的であり続ける良い理由になりました。
フラットデザインは、そのグリッドベースのレイアウトとシンプルなグラフィックスのおかげで、簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置することができるので、色々な設計カテゴリに適用することができますが、特にWebやモバイル設計に適しています。
Sergey Valiukhから、Webとモバイル間の一貫性のあるシンプルなUXを提供できる、レイアウトを再配置する例を紹介します。
一方、たくさんの影とテクスチャーを持つスキュアモーフィックの非常に詳細なスタイルは、固定サイズイメージを拡大縮小すると、上手く変換できないことがよくあります。
デザイン代理店Dapper GentlemenのRyan Allenは、Flat 2.0で「フラットデザインは1ピクセル単位の完全なデザインより、はるかに簡単にコンテンツに適したサイズにスケーリングできる」と書いています。
柔軟なフレームワーク
フラットデザインは、グリッド・カード・モジュール・ブロックなどと相性が良く、均一な幾何学的形状になる傾向があります。 このタイプのレイアウトは、どんなところに使っても、認識しやすく直感的に操作できます。
グリッドはどんな状況にも適用できる柔軟性のあるフレームワークです。 これにより、デザイナーは制限されたレイアウトに押し込むより、最適な配置を実現することができます。
例えば、このBureau of Bettermentのパンフレットは、様々なサイズの正方形や長方形を使って、タイポグラフィやアイコンなどの様々な要素を際立たせています。 均一な色とシンプルなイラストは、フラットな効果を演出しています。
一方、このWebサイトは、違う方法でグリッドを使っています。メニューからスタッフの写真へ、さらにサービスのリストへグリッドを使っています。
きれいな、読み取り可能なタイポグラフィ
また、フラットな質感は文字へのアプローチへも影響します。より大きく、より合理的なタイポグラフィになります。影やその他の効果が無いことで、文字が読みやすくなります。
サンセルフ書体は、このスタイルと相性が良く、一般的によく使われます。 ですが、セリフ書体もあまり凝っていない文や、見出しやメニューの文字として、「大きい文字」でなら使うことができます。
デメリット
ユーザビリティへの妥協
フラットデザインのクリーンで効率化された質感を出そうとするがために、美学的思想に熱中する罠に落ちるデザイナーもいます。
これは、ユーザビリティにも悪影響を及ぼし、Webおよびモバイルデザインに潜むリスクになりえます。全てがフラットな見た目なら、どこがクリック可能で、どこがクリックできないのかが見えにくくなります。
シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分からなくなったり、ユーザーが慣れ親しんだ視覚的な手掛かりが無くなってしまう可能性があります。
一例として、このWebサイトを見てみましょう。
すべてのボックスはクリック可能ですか？その一部のみ？一見で判断するのは難しいでしょう。
識別性の欠如
デザインプロジェクトを計画しているすべてのビジネス、ブランド、または個人は、ユニークなデザインを望んでいます。彼らが、Webサイト、アプリ、名刺、イベントポスター、または他の何かを捜しているかどうかに関わらずです。
フラットな設計の欠点の一つは単純化し、狭義のビジュアルスタイルに固執することで、似たデザインになりがちです。
純粋なフラットスタイルを使用しているデザイナーは、自分のプロジェクトに適用できる原則の選択肢は限られています。
例えば、これらの関係のないモバイルのインターフェースは、Marco La Mantia・Simone Lippolis(下の最初の画像)とLuis Vaz(2つ目の画像)によってデザインされましたが、両方ともサンセルフ書体の白い文字、基本的な幾何学的形状をしています。また、色合いも同じです。
流行りに集中しすぎる
フラットデザインが、現在のテクノロジーにおいて、近代的で直感的だとデザイナーに認識されれば、人気のスタイルとして定着するでしょう。
しかし、この傾向には一つの問題があります。デザイナーの一部は本当にその有用性を考えることなく、流行に乗るために適用されることです。
これは、目的のないデザインになってしまいます。初期のフラットデザインでは長い影を付けている例が良く見られました。
Alexander LototskyとErik Malmsköldのこの2つの例は、最も一般的な文字とアイコンに長い影のトレンドを付加した典型的な例です。両方ともフラットデザインの創成期、2013年に作成されました。
流行りの見た目を追い求めるだけでは、前述したように、ユーザビリティに悪影響を与えることになります。
視認性を犠牲にはしますが、薄く軽い書体を使うことによって、クリーンで最小限のデザインになります。
視認性を考慮して文字の軽さを最適に調整しないと、名刺やモバイルアプリ、Webサイト向けには問題になることもあります。
フラットデザインのこれから
フラットデザイン2.0
デザイナーは、過去数年でフラットデザインを試してみて、ここで取り上げた長所と短所のいくつかに気づき、それを踏まえてスタイルを調整することにしました。
フラットデザインの初期は、厳密な視覚単純化することを特徴としていましたが、最近の傾向は、美しさと機能的であることを両立するために、シャドウとテクスチャのような要素を少しだけ再導入するようになってきました。
純粋にフラットなアプローチにこれらの調整したスタイルを、多くの場合、「フラット2.0(Flat 2.0)」または「ほぼフラット」なデザインと呼ばれるようになります。
このスタイルは多くの妥協案を提供します。フラットでクリーンなシンプルさを残しつつ、見た目の多様性と高められたユーザビリティのためのスキュアモーフィックな質感を追加できます。
テクニックの一つとしては、要素を階層や色の変化や影を追加することにより、平坦さに深さとレイヤーを追加します。別の一般的なハイブリッドアプローチとしては、写真だけではなく、イラストやアイコンの追加です。
以下の例では、グリッドレイアウトと読みやすい文字は残りますが、レイヤー要素とテクスチャー化されたイラストを追加することにより、一層フラット2.0のアプローチとしての良い例となっています。
マテリアルデザイン
「ほぼフラット」なデザインと多くの共通点のあるマテリアルデザインは、Googleが開発した視覚言語で、グリッドベースのレイアウトや「意図的な色の選択、エッジツーエッジ画像、大規模なタイポグラフィ、および意図的な空白」を特徴とし、大胆な視覚効果があります。
このスタイルはユーザーがすぐに理解できるように「現実に接地されている視覚的な手がかり」と「おなじみの触覚属性」を持つ紙風のアプローチを採用しています。
それはスキュアモーフィズムにも少し近づいているようです。
例えば、Tubik StudioからこのUIのコンセプトでボタンの微妙な影や色は、即座に明確にユーザの注意を引きます。背景の大きなスクリプト書体と紙のようなレイヤーは、マテリアルデザインの特徴をよく表しています。
マテリアルデザインは、明らかにフラットデザインの要素を備えていますが、光と影、モーション、およびその他の詳細への注目が、フラットデザインはより便利で柔軟に適合させることができることを実証しています。
Googleによる自由に入手できるマテリアルデザインへの詳細なガイドは、ガイドラインに従うのか、好きな要素・テクニックを取り込むのかにかかわらず、デザイナーが自分の仕事にマテリアルデザインを簡単に導入しやすくしました。
これはまた、デザイナーの独自の解釈や実験推奨し、フラットデザインやマテリアルデザインの両方の進化を促しました。
つまり、デザイナーがトレンドと新しいもの何かを作る時に、マイクロソフトやアップル、Googleなどの大企業がデザインスタイルの大衆化にとても影響を与えていますが、次の「大きな波」を作る手助けをするのはデザイナーなのです。
ディスカッションに参加しましょう
「フラットなデザイン(視覚的なシンプルさ)とスキュアモーフィズム(視覚的な馴染みやすさ)の背後にある精神を考える時、両方の概念は確かに共存できることに気づくでしょう。この二つの完全な微妙なバランスは、ここ数年の未来が明確に証明してくれるでしょう。」 — UXPin for Fast Co. Design
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
今後デザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。
