最先端をおさえておきたい!フラットデザインとは【初心者向け】

近年Webやアプリデザインで話題の「フラットデザイン」初心者の方でも分かるように過去の歴史から比較して、フラットデザインとはどういった特徴があるのか説明していこうと思います。

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

近年Webやアプリデザインで話題の「フラットデザイン」。

フラットデザインを採用したアプリやWebサービスも増えているためデザイナーでも習得を目指している人が多くいます。

今回は、初心者の方でも分かるように過去の歴史から比較して、フラットデザインとはどういった特徴があるのか説明していこうと思います。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

 

フラットデザインとは

フラットデザインとは、できるだけ影やグラデーションなどの装飾を使わずに表現したシンプルで平面的なデザインのことです。

代表的な例はiPhoneやiPadで使われているアイコンです。

iOS7から飾り気や立体感がほとんどない非常にシンプルなものに変更されました。

 

例1 iOS7のインターフェース

ios7-620-01

以前のアイコンでは、影やグラデーションなどを用いた装飾性の高い「リッチデザイン」が使われるのが一般的でした。

「リッチデザイン」は立体感がある分、現実のものとそっくりに見え、一目で何をするためのものかが分かりやすかったためです。

 

例2 iOS6のインターフェース

ios6-620

しかし、パソコンが普及し、一般の人たちがパソコンの操作に慣れてくると、現実のものに似せる必要がそれほどなくなってきました。

また、スマートフォンやタブレットが普及したことで、パソコンと比べて画面が小さい端末でも見やすく、押しやすいボタンが求められるようになってきました。

 

そこで注目されたのが、「フラットデザイン」です。

フラットデザインでは、できるだけ装飾性を抑えたシンプルなデザインなため、スマートフォンやタブレットの画面でも非常に見やすく、ボタンも押しやすいというメリットがあります。

そのため、最近ではウェブサイトやアプリなど、さまざまな場面で「フラットデザイン」が用いられるようになっています。

 

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

フラットデザインの事例と特徴

今度はウェブサイト上で使われているフラットデザインを見ていきましょう。

こちらが、最新のApple公式サイトです。

例3  Appleの公式サイト

apple-02-620

そしてこちらが、以前のApple公式サイトです。

 

例4 以前のApple公式サイト

apple-03-620

見比べてみると、最新のものはメニューバーが平坦で立体的になっていないことがわかりますね。ボタンも分かりやすく、押しやすい感じがします。

例5 メニューバー

apple-021-620

次に、文字に注目してみると、文字数が少なく、短い言葉で表現されていることが分かります。使用するテキストが最小限になっているのもフラットデザインの特徴です。

 

例6 文字

apple-023-620

中央では画像が使われていますが、左右に十分な余白があり、何の広告なのかが瞬時に分かるようになっています。

スマートフォンで見た場合も非常にシンプルで見やすくなっています。

 

例7 スマートフォンで見た場合

smartphone-0122-620

こうして見てみると、フラットデザインとはたんに見た目がシンプルなだけではなく、ユーザーにとって使いやすいデザインになっていることが分かります。

特にスマートフォンやタブレットなど、パソコンよりも画面が小さい端末でも快適に使えるように考えられているところに特徴があると言えます。

 

フラットデザインのメリット

フラットデザインのメリットをまとめると、次のようになります。

 

スマートフォンやタブレットなど画面の小さめな端末でも見やすく、クリックしやすい

フラットなデザインにすることで、スマートフォンやタブレットなど異なる画面サイズでも快適に使えるようになります。
異なる画面サイズでも自動的に見やすく調整されるレスポンシブデザインとも相性がいいと言えます。

シンプルなデザインのために制作するのがぐっと楽になる

メニューバーやアイコンなどに影やグラデーションをつけないので、その分制作するのが楽になります。
また、シンプルなレイアウトが多いので、その分制作するのがぐっと楽になります。

ブラウザの読み込み速度が速くなる

シンプルなデザインなので、ブラウザの読み込み速度が速くなります。
読み込み速度が向上すれば、検索でヒットされやすくなり、SEO的にもメリットがあります。

 

フラットデザインのデメリット

フラットデザインにはデメリットもあります。

主なデメリットをまとめると、次のようになります。

 

ボタンやリンクが認識しづらくなる

フラットデザインでは、アイコンなどに影やグラデーションをつけないために現実のものとは異なる形で表現されます。
そのため、パソコン操作に不慣れな人にとっては、少々分かりづらいものになってしまいます。

 

個性的でなくなる

シンプルなデザインのために、デザインがワンパターンになりがちな傾向があります。
使用する色やレイアウトを工夫しなければ、ありがちなデザインになってしまうので注意が必要です。

 

情報量の多いサイトには不向き

フラットデザインでは十分な余白をとり、できるだけシンプルにすることが前提です。
そのため、情報量の多いサイトではフラットデザインにすることができません。

 

フラットデザインのコツ

レイアウトに関して

レイアウトは複雑にならないようにできるだけシンプルなものにします。
シンプルにするために見えない線(グリッド)に沿ってデザインするのもいいでしょう。
グリッドにすることで、レスポンシブにも対応しやすくなります。

また、あらかじめ十分な余白を設けて、何を強調するのかを明確にしておくことも大切です。
サイト全体で統一されたデザインになるように心がけましょう。

 

文字に関して

使用するテキストは最小限にしぼりこみ、瞬時に相手に伝わるようにします。
また、文字に複数の色を使ったり、下線などの飾り罫を使ったりすることは避けます。

書体は読みやすくてモダンな書体を(ゴシック系で汎用性の高いHelveticaなどの書体)を選んだ方が無難です。
日本語の書体では、ヒラギノなど細めのウェイトと相性がいいようです。

 

色に関して

影やグラデーションなどは使わずに、できるだけ原色に近い単色を使って塗りつぶすようにします。
色は彩度を少し落としたくすんだ中間色を選んだ方が見やすく、文字も目立ちやすくなります。

ビビットな色合いは目を惹きますが、長時間見続けるには不向きなので注意が必要です。
また、背景色をうまく利用して境界線を設けるようにすると、画面全体にメリハリが出てきます。

 

フラットデザインの勉強法

フラットデザインについての書籍を読む

フラットデザインの概略をつかんだ後は書籍を読んでさらに理解を深めましょう。

おすすめ書籍は次の2冊です。

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

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

 

お手本になる作品を見る

また、フラットデザインについて学びながら、お手本になるようなデザインも数多く見ておくようにするといいでしょう。

すぐれた作品にはレイアウトや配色、文字の使い方など、学ぶべき点が数多くあります。

 

参考サイト

20 Great Examples of the Flat Trend in Web Design

Examples of ‘Flat’ in Web Design

Webデザインの参考にしたい今流行りのフラットデザインサイト15選

フラットデザインを採用するかはターゲット次第?!事例10選まとめとフラットデザインが適しているパターンを考察

 

自分で作ってみる

フラットデザインについて十分に学んだ後は、実際に自分でデザインしてみましょう。
最近ではフラットデザインを作成するための便利なサイトやツールがたくさん用意されています。

以下はその一部です。フラットデザインを作成する際に利用してみてください。

 

配色

Flat UI Colors

 

アイコン作成

2.5dButton Flat UI Elements

 

CSS フレーム

Flat UI

 

UIデザイン

FLAT UI DESIGN

 

以上、「フラットデザイン」とはどういったものなのか説明してきました。

アプリやWebサービスを使ってもらうためにデザインの重要性は日々高まっています。数年後には新しいデザインのトレンドが来ているかもしれませんが、こういった新しいデザインを習得しておくとデザイナーとして十分活躍できるはずです!

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。