KOBITブログ

真新しいだけじゃない!フラットデザインが流行する背景

この記事は約 6分 で読めます。

windows-8-528467_640

フラットデザインは洗練されたUIとして注目されてきました。多くのWebサイトやモバイルアプリに導入され、より分かりやすいデザインへと進化を遂げています。フラットデザインが流行する背景には、現実世界を模倣して過度な装飾へと偏ってきた従来のデザイン手法への批判があると言います。ユーザーにとっての見易さと、レスポンシブ対応を始めとする、製作者にとっての作りやすさの双方がフラットデザインの魅力です。

Apple、Microsoftが次々と採用するフラットデザイン

2012年頃より流行してきたフラットデザイン。洗練さをアピールするUI(ユーザーインターフェース)として、多くのWebサイトやモバイルアプリで採用が相次いでいます。フラットデザインの特徴は、無駄な要素をそぎ落とし、最小限のデザイン要素でコンテンツを表現する点です。例えば、陰影・立体感・エフェクト・質感といった装飾はフラットデザインでは用いられません。単純なグリッドレイアウトに、シンプルなフォントを用いて、ページの目的やコンテンツが分かりやすいようにしています。以下に、フラットデザインの事例を紹介します。

Microsoft:どのOSでも共通の体験を目指したWindows8

windows-8-528467_640

Windows8はフラットデザインの普及に大きな影響を与えました。Microsoftはタッチスクリーンを利用するタブレットでの利用を考慮し、大きなアイコンでメニューを表現するUIを採用しています。

Apple:平面的なデザインを導入したiOS7

iphone-476237_640

デザイン要素を簡略化し、アイコンやボタンを平面的な表現に変更したのがiOS7です。多重のレイヤーによる立体表現は残しつつも、平面化によって、コンテンツを分かりやすくする目的を実現しています。アイコンではなく、あえて文字による表現を残しているのも特徴と言えるでしょう。

Uber:Webサイトもアプリも統一したデザイン

uber

MicrosoftやAppleの流れを汲み、Webサイトやモバイルアプリの開発者もフラットデザインを採用し始めました。ハイヤー配車サービスを提供するUberのWebサイトは、無駄を徹底的に排除したフラットデザインになっています。統一感のあるUIが洗練された印象を与えます。

現実の事物を過度に模倣するデザインへの批判

フラットデザインが注目されてきたのは、過去のデザインに対する批判的な意見が背景にあります。これまでのUIは過度な装飾に頼ってきました。Windows95の時代からボタンに陰影をつける立体効果を取り入れ、どの部分がクリック可能で、どの箇所が入力領域かを表現してきています。画像やアニメーションの精度が高まるにつれ、立体効果はリアリズムへと変化していき、現実の物体と見まごうような表現がUIに導入されました。例えば、紙がめくられる様子がアニメーションで表現されるカレンダーUIが代表例でしょう。

実世界の物体を比喩としてUIに取り込む手法はスキュアモーフィズムと呼ばれ、初めて使用するユーザーでも使いやすいのが魅力です。しかし、現実を模倣するデザイン手法は、作成に時間がかかり、汎用性が低いというデメリットがありました。また、生まれたときからデジタル端末を手にしている世代にとっては、アナログの物体を比喩にする意味合いが薄れてきているという背景があります。必要以上に完璧を追求する手法は、過度な装飾であると批判されるようになってきたのです。そこで提案されたのがフラットデザインでした。

フラットデザインが持つメリットとデメリット

レスポンシブ対応が容易で、コンテンツが注目されやすい

フラットデザインを採用するメリットは、無駄な要素を排除する方針のため、ユーザーがコンテンツに集中できる点にあります。たとえ、画面の小さなスマートフォンであっても、ページの内容が理解しやすいという利点が挙げられます。また、現実の物体を模倣するための画像やリッチコンテンツを使用しないため、画面の読み込み速度が向上するというメリットもあります。

制作者の観点からは、レスポンシブ対応がしやすいという点が挙げられます。画像をあまり使わず、また、グリッドレイアウトが中心になるため、画面サイズの異なるモバイル端末であっても、デザインを柔軟に対応させられるのです。

ユーザビリティと多言語対応に難点

フラットデザインの設計においては、ユーザビリティに十分に配慮しないとユーザーがどこで何を操作できるか迷ってしまうケースがあると指摘されています。これまでユーザーは、下線付きの青文字テキストはリンク、影のついた長方形はボタンと学習してきました。立体性や過度な装飾を避けるフラットデザインでは、これらの伝統に従わないことを意味します。初めて使用するユーザーでも一瞬で理解できるよう、デザインを工夫する必要があります。

多言語対応に注意が必要です。シンプルなフォントを用い、簡潔な文言を使用するフラットデザインでは、英語と日本語の差異が顕著になると言われています。英語は英数字だけですが、日本語は漢字や仮名などが入り混じるため、ユーザーが受ける印象が変わってしまいます。文字の大きさや行間などを工夫し、どの言語でも洗練された印象を与えられるようにしなければなりません。

フラットデザイン設計上の注意点

フラットデザインが向いているのは、カラフルでポップな印象を与えるデザインです。          工数をかけて高級感の漂うWebサイトを作成するリッチデザインとは方向性が異なります。ただ流行しているからといったフラットデザインに流れるのではなく、Webサイトの目的や方向性を考えるようにしましょう。Windows8のような、余白を十分にとったグリッドレイアウトがフラットデザイン設計の基本です。パステル調の色合いを基本とし、サイト全体が統一された色合いになるよう調整します。アイコンは単色系のシンプルなものとし、グラデーションの利用は極力避けるようにします。

フラットデザインはまだまだ進化を続けています。わずかな陰影やレイヤーを利用して、簡潔さと分かりやすさの両立を目指す動きがあります。Googleが提案するマテリアルデザインがその一例です。触感をメタファーとして利用し、ユーザーにとって分かりやすいUIを目指しています。

まとめ

フラットデザインは平面的で簡素なUIを採用し、ユーザーがコンテンツに集中できるよう考慮するデザイン手法です。画面サイズの限られた環境でも閲覧しやすいようにするレスポンシブ対応に相性が良いというメリットがあります。導入の際には、ユーザビリティに十分注意して設計しなければなりません。


CATEGORY:

さあ、KOBITをスタートしよう。