• LIGの広告成功事例
WEB

絶対おさえておきたいフラットデザインのまとめ

絶対おさえておきたいフラットデザインのまとめ

こんにちは。ライターの内藤です。
恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。

装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。
フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。

もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。
最初から全部読まなくても大丈夫です!

▼目次

  • フラットデザインとは
    • フラットデザインの例
    • フラットデザインの概要
    • フラットデザインの名称について
    • フラットデザインの議論
  • フラットデザイン制作時のポイント
    • レイアウト
    • 要素と配色
    • フォント(タイポグラフィ)
    • 言葉や文章
  • フラットデザインで使える素材集
    • PSDのUIキット
    • サイトプラットフォームのセット
  • まとめ
  • おまけ

フラットデザインとは

まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。

フラットデザインの例

フラットデザインのサンプル1

 

フラットデザインのサンプル2
※たくさんあるテンプレートの中の一つを例にしました。

 

フラットデザインのサンプル3

 

フラットデザインのサンプル4

 

フラットデザインのサンプル5

 

その他にもフラットデザインのサイトを見たい方は、下記のページに素晴らしいサイトがまとまっていますので、よかったら参考にしてください。

 

フラットデザインの概要

「フラットデザイン」に明確な定義はありませんが、このような表現をされる場合があります。

In practical terms, flat design means designing without the usual gradients, pixel perfect shadows, and skeuomorphism that’s been rampant in recent years (more on this later) to achieve what appears to be a “flat” interface.

<要約>
実際現場で使っている「フラットデザイン」が意味するところは、よく使うグラデーションや影(シャドウ)、skeuomorphism(現実のものに似せたUI)を使わずにデザインすることである。

具体的にまとめるとこんな感じになると思います。

  • 質感や立体感がほとんどない
  • エフェクトは最小限
  • 文字も最小限
  • 目的や商品が一目でわかる
  • 部品の機能が一目で分かる
  • 各要素がくっきりしている
  • グラデーションを使わない
  • シンプルなタイポグラフィ
  • シンプルなグリッドレイアウト

ユーザビリティとアクセシビリティを突き詰めたもの
のようにも思えてきますね。

後述するように、「フラットデザイン」という言葉自体もまだ曖昧で、最初に書いたとおり明確な定義がないので、「ちょっと違う」と思う方もいらっしゃるかもしれません。
もし、もっと的確な表現があったら是非教えて下さいm(_ _)m

 

フラットデザインの名称について

「ミニマルデザイン」も、フラットデザインと同じような意味合いで使われることがあるそうです。
或いは、”Flat & minimal Design”(フラット・アンド・ミニマルデザイン)などと呼ばれることもあります。
例えばこんな風です。

「フラットデザイン」は確かに今年の流行になると思いますが、言葉の方はまだ安定していない感じです。

 

フラットデザインの議論

フラットデザインの概要で触れた「skeuomorphism」は、先の文章中でフラットデザインとの対比に使われています。

A skeuomorph is a physical ornament or design on an object made to resemble another material or technique.
<要約>
skeuomorphは違うものの質感に似せて作る装飾やデザインや技術のこと。

ボタンをより立体的に見せたり、木目調のテクスチャを使ったり、ノートアプリではぱらりとページがめくれるエフェクトなどなど。
それと対照的なのがフラットデザインです。

実は、このSkeuomorphism推進派と反発派との間で、海外ではけっこう大きな議論が巻き起こっているようです。
興味のある方は日本語で書かれている記事がありますので、よかったらご覧ください。

 

フラットデザイン制作時のポイント

フラットデザインは、もちろん単に装飾やエフェクトを全部なくせばいいというわけではありません。
ポイントは、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す
ことを忘れないようにすることだと思います。

ではこれから具体的なポイントを項目別に見ていきます。
このサイトを例に解説します。
フラットデザインのサンプル6

レイアウト

紙媒体と同じようにグリッドを意識したものが多いです。
Web屋さんや編集者の方はよくご存じだと思いますが、グリッドレイアウトとは、ページ内に同一マージンを儲けた複数のブロックを配置し、そのブロックに合わせてコンテンツを配置することです。
グリッドを意識することによって、

  1. 情報が整理整頓される
  2. 見やすく理解されやすくなる

というメリットがあります。

上記のサイトにグリッド線を入れてみました。
グリッドレイアウト

この余白の使い方やブロックの置き方については、LIGブログの記事で詳しく紹介しています。

「分かりやすさ」や「見やすさ」「理解しやすさ」をシンプルに表現するためのフラットデザインにはグリッドレイアウトはとても適しています。
そのため、フラットデザインは可変グリッドレイアウト、いわゆる「レスポンシブデザイン」であることが多いのだと思います。

LIGブログにレスポンシブデザイン・可変グリッドレイアウトについての記事がありますので、こちらも参考になります。

もちろん、グリッドレイアウトではなくてもフラットデザインは可能です。
例えば、こんな風にシンプルを極めたようなレイアウトももちろんあります。

フラットデザインのレイアウト2

どちらも、ぱっと見てどこに何があるのか整理されているレイアウトであることが共通点です。
そのために余白を上手に使っています。

余白を意識してレイアウトしてみてください。

 

要素と配色

フラットデザインでは原色が使われることが多いです。
フラットデザインでの色使いはかなり重要です。

何故かというと、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す
ことが目的だからです。

  1. 広い面積にキーカラーを使う
    フラットデザインの色使い1
  2. 要素と要素の区分がクッキリ分かる色使いをする
    フラットデザインの色使い2

などによって、鮮やかなインパクトを与えることができます。
具体的には、

  • 彩度の高い色を使う
  • 複数の色を使う場合は、色相または明度を離す

などによって実現できると思います。

また、色と同時にアイコンやメニューなどの要素も一目で分かるようにするのがポイントです。
フラットデザインの要素
これは一目でメールマガジンと分かりますし、目立っています。
目立つ色に、シンプルなアイコン。
アクアアイコンなど、ガラスのようなアイコンが流行したことがありましたが、あの逆というイメージです。
ピクトグラム(例:道路標識)のように、シンプルで一目で分かるシンプルなものを使います。
後述のフラットデザインで使える素材集で、フリーの素材集をご紹介いたしますので、そちらもご覧ください。

色に関しては、LIGブログの記事も参考にしてみてください。

もちろん、白と黒だけの配色でフラットデザインを作ることも可能です。それは後述します。

 

フォント(タイポグラフィ)

  1. 伝えたいメッセージやブランドイメージにあったフォントを選ぶ。
    フラットデザインのタイポグラフィ1
    例に取っているサイトでは、ブランドロゴと同じようなフォントを使用してメッセージを大きく打ち出しています。
  2. 複数のユニークなタイポグラフィを取り入れる

    フラットデザインのタイポグラフィ2
    こちらでは、漢字(しかも干支の方の申)、ひらがな、アルファベットと、色々なフォントを使って表現しています。

  3. シンプルなフォントのアクセントととして、珍しいフォント入れてみる

    フラットデザインのサンプル2
    こちらでは、大きさも工夫しています。
    メニューや吹き出しはサンセリフフォント、大きな「&」はセリフフォントを使用してアクセントをつけています。

ここでも、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す
ということがやはり一番のポイントで、鮮やかでインパクトを与えることを考えるといいと思います。

 

言葉や文章

フラットデザインではシンプルな印象を保つために、言葉の数を減らすのが通常です。
余白が多く言葉が少なければ、それだけインパクトが大きいという具合です。
デザインの際、例えばメニューの数や名前の文字数など、文字数に気をつけて設計する必要があります。
説明も最小限に留めることで、返って印象を強める効果があると思われます。
フラットデザインの言葉・文章
ここでも、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す
ための文章設計が必要になります。

フラットデザインで使える素材集

制作に役立つ素材集をどうぞ!

PSDのUIキット

サイトプラットフォームのセット

  • Flatstrap

    Flatstrap
    Twitter Bootstrapをフラットデザイン化したフレームワークです。

  • BootMetro

    BootMetro
    Windows8 Metroスタイル風UIのCSSとJSがセットになっています。

  • Metro UI CSS

    Metro UI CSS
    こちらもWindows8 Metroスタイル風UIのcssセットです。

  • Flat UI

    Flat UI
    フラットUIのcssフレームワークです。

最後にご紹介した「Flat UI」の中身はこんな感じです。
Flat UIの中身
ちゃんとSassでも開発できるようになっていますし、便利なリンク集も入っています。

まとめ

フラットデザインはシンプルで余計なものがないデザインですが、ただ単に簡素にするのではなく、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す
インパクトを与える
デザインです。

メッセージ・製品・ブランドなどを強調したい時に有効利用できるデザイン手段として、知っておいて損はないと思います。

おまけ

日本ではまだあまりフラットデザインの例が見られませんが、実は昨年から既に「白と黒だけで、しかもインパクトのあるフラットデザイン」のサイトがあったのです。
LIGブログを見ている人であれば、多分ピンときてしまったと思います。

 

 

一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出す

インパクトを与える

 

 

 

 

 

 

 

 

段田商会!

フラットデザインな段田商会

EC会の反逆児は、末恐ろしい。。。

この記事を書いた人

榊原
榊原 外部ライター 鎌倉
生まれも育ちも横浜のホエールズ狂。DB技術者・プログラマを経てWeb技術者。デザイナの相棒と"webや"をやっています。[http://web-ya.works/]|[最近のヒット!(過去のブログ)]|[webや]

こちらもおすすめ

フラットデザインで考える 新しいUIデザインのセオリー

フラットデザインで考える 新しいUIデザインのセオリー

  • 著者宇野 雄
  • 価格¥ 2,570(2015/11/11 15:47時点)
  • 出版日2014/11/21
  • 商品ランキング141,918位
  • 単行本(ソフトカバー)192ページ
  • ISBN-104774169544
  • ISBN-139784774169545
  • 出版社技術評論社