デザイナーでなくても知っておきたいフラットデザインのこと

近年UIやWebデザインの世界でよく話題になる、フラットデザイン。デザイナーでなくても、Webに関わる人にとって無関係ではないフラットデザインのメリット、普及の理由とは?

古くは、Windows 8のインターフェースとして登場した「メトロUI」、そしてiPhoneのOSとして「iOS 7」が登場して以降、「フラットデザイン」「フラットUI」という言葉がWebやアプリのデザイン用語として広まりました。デザイナーでもない人にとっては、「凹凸がない」こと以外、いまひとつ掴みづらいフラットデザイン。単なる見た目の流行と思われる人も多いかもしれませんが、実は見た目のインパクト以上の深い意味があるのです。その、意外な事実を押さえておきましょう。

UI

Windows 8のUI(左)、iOS8のアイコンボタン(右)はフラットデザインの代表的な例としてよくあげられます。

アップルもグーグルも「フラットデザイン」とは言っていない

一般的にフラットデザインとは、デザインにおける余分な要素を排除して、立体感を生み出すエンボスやグラデーションなどの細かい加工をする代わりに、対象物を抽象化してシンプルでダイナミックなレイアウトや色使いで勝負するデザイン手法です。リッチ・デザイン、スキューモフィズムのような表現とは対照的に、平面的なパーツから作られているのが特徴的です。

iOS 7で採用された新しいユーザーインターフェース(現在のiPhone の操作画面のデザインや、アプリのデザイン)がフラットであったことから一気に「フラットデザイン」の名が広がりましたが、実際のところアップル社もグーグル社も、メトロデザインを生み出したマイクロソフト社も「フラットデザイン」を名称として提唱しているわけではありません。

もとはといえば、グラフィックデザインはどれもフラット(平面)でした。しかし、コンピュータ上でのインターフェースデザインに限っては、平面のなかに現実の物を模すことに注力していったため、非常に立体的なデザインが多く、極端に強調されていきました。これが今になって、ユーザーの経験値、現状で提供できるウェブ技術などを配慮したうえ、再びフラットな状態に戻ったわけです。

いわゆるスマートフォン、モバイル端末、アプリなどが出てきた新しい時代のインターフェースデザインの「通称」と言えるでしょう。

 

フラットデザインの見た目以上の目的とは?

いわゆるフラットデザインを採用しているのは、Windows 8 をはじめ、MacのOS X Yosemite、iOS、GoogleのAndroid OSなどで、モバイル端末時代の一大トレンドであることがわかります。なぜここまで一気に広まったのでしょうか?

たとえば、エンボス加工された立体感のあるボタンがあったとします。PC上ではその質感が美しく表示されていてもスマートフォンではどうでしょう? 小さいがゆえに潰れて見難くなり、かえって汚く見えてしまいます。

 

3694_button

立体的でクリックしやすいと感じるボタンやエフェクトのかかった文字は、スマホなどの小さな画面ではかえって見づらくなってしまうことが多々あります

あるいは、見出しにインパクトを求めて大きな画像文字を使ったらどうでしょうか。PCではよくても、スマホでは右端の文字は削れて読めず、不親切だと感じるでしょう。

こうしたことを避けるために、各端末のサイズに最適化したWebレイアウトを提供することが求められています。つまり、異なる画面サイズごとにコンテンツを並び替えて表示する必要が出てくるのですが、その際フリーレイアウトで自由に配置されたものより、あらかじめグリッドで区切られたような四角いレイアウトで配列したものの方が、表示が大小変化したときに形づくりやすいと言えます。

http://www.starbucks.co.jp/

3694_grid

左がPC、右がスマホの画面キャプチャ。フラットデザインでよく見られるグリッドデザインは、自由な配置をしたデザインに比べ、コンテンツを並べ替えても同じ印象が維持しやすいという特長があります

このように、フラットデザインがひとつの潮流となっているそもそもの意味は、マルチデバイスに対応するコンテンツを制作するために、向いているデザインだからということです。

 

フラットデザインで禁じ手!3つのデザイン手法

1:極端な立体感や意味のない飾り罫で装飾しない

フラットデザインの特長は、対象物を直球で表現するために極端な装飾を抑えることです。見出しを強調するために文字に複数の色を使ったり、下線などの飾り罫も避けます。シャドーやエンボスを加えることで不用意に立体感を持たせることもしません。

http://www.kameleon.pics/

ムダな装飾を用いない

見出しにムダに色を付けたり、飾り罫や下線を引くと「フラットデザインらしさ」がなくなってしまうため、タイトル周りも極めてシンプルに。

ただし扱う商材によっては、「シンプル」「余白が多い」などの表現が向かないこともあります。たとえば情報量の多いサイトではフラットデザインは実現できません。必ずしもフラットな見た目が好ましくないという可能性もあるので注意が必要です。

 

2. リッチな書体ではなくモダンな書体を選ぶ

また、シンプルな演出でおしゃれ感を保つためためには、書体もカギになります。画面の大小に関係なく、読みやすくてモダンなものとなると、ゴシック系で汎用性の高いHelveticaなどの書体がよく使われます。ウェイト(太さ)のバリエーションを揃えて統一感を出す場合もあります。部分的に変わったフォントを使うこともありますが、ポップやクラシックな書体をメインにすると、読みづらかったり変に目立ちすぎたりで、フラットデザインらしくなりません。日本語の書体を選ぶときは、iOSと同じヒラギノの細めのウェイトも人気です。

http://www.fitbit.com/

Fitbit Website Design

「a」の丸みや「r」の抑揚などが特徴的な新感覚のデザインでありながら、遠目にもしっかり読めるゴシック系の書体をセレクト。ゆったりと組んでいる

 

3. 色選びと色を使う範囲を大胆に

フラットデザインは、色を大きな面積で使ってメリハリを出すと効果的です。また、レイアウトもシンプルな構成をベースにします(多デバイスで展開する場合レイアウトを複数作る必要がありますが、シンプルなグリッドで構成すると、統一感のある構成を可能にします)。色を使うときは、こまごまと使うのではなく画面全体、一ブロックなど、面でダイナミックに大きく使います。一方で、1つの画面上に何種類もの色が存在するだけでも、フラットらしさがなくなります。色も厳選して使い分けるとよいでしょう。

http://lorenzoverzini.com/

Lorenzo Verzini Website

全面に色を使い、地色の代わり目でコンテンツも切り替えるデザインがポピュラー。強い色を使う際に文字を白地で使うことも多くなっています

 

  • フラットデザインは、デザインの装飾的な部分を排除した、シンプルさを極めたコンテンツを邪魔しないデザイン
  • フラットデザインはマルチデバイス対応とともに普及。時代に適したインターフェースデザインと言える
  • サイトの目的や商材によっては、必ずしもフラットデザインがマッチしない場合もある

関連記事

  • デザイン
  • BiNDの使い方

どの色が相応しい?介護施設のホームページを3つの違う色で作ってみた

サイトのメインカラーが違うだけで与える印象が変わりますが、なかなか異なる色をいくつも作って比べるのは至難の業。簡単な質問に答えるだけで目的にぴったりのホームページが作れる「AiDジェネレーター」なら、出来上がりのサイトから見比べることが可能!介護施設のサイトに合う色はどれか試してみました。

2017.07.04 - あい
  • Web作りのコツ
  • 集客・マーケティング

【セミナーレポート】これからのウェブ&サービス戦略で大切なこと。

サイトを持つすべての人にとって重要なWebサイトやサービスをどう発展させていくかという課題について、Repro代表の平田氏、KARTE代表の倉橋氏とともに、デジタルステージの洪がWebディレクターの視点で登壇しました。その模様をお届けします。

2017.06.07 - DS Staff