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

1033
Pocket

フラットデザインの特徴を一言で言うと「シンプルである」という点です。
※フラットデザインとは…グラデーションやドロップシャドウなどの立体的なデザインではなく、2Dである平面で作られたデザインのこと

今回は、「フラットデザインって人気はあるけれど、どんなWebサイトやサービスにも合うの?」というところを、実際のデザインを含めて考えていきたいと思います。

「シンプルである」≠「使いやすい」

フラットデザインがシンプルだからといって、どんな場面でも良いというわけではなさそうです。
<ユーザーがそのデザインを認識できるか?>がポイントになりそうです。

●フラットデザインのメリット
・動作が軽くなる
・マルチデバイス対応しやすい
・オシャレに見えやすい

●フラットデザインのデメリット
・ボタンなどの操作が認識されない可能性がある
・ボタンとコンテンツ内容の区別がわかりにくい可能性がある
・上級者(Webサイトの閲覧に慣れている人)向けのデザインである

ユーザーがWebサイトやサービスを使いにくいと感じてしまうと
致命傷になりかねませんので、気を付けないといけません。

フラットデザインが分からないという方はこちらのサイトがとても分かりやすいのでご確認ください!
5分で分かるフラットデザイン (@IT)
http://www.atmarkit.co.jp/ait/articles/1306/11/news094.html

 

ではどんな場合であればフラットデザインが適しているのかを解明するために、実際にフラットデザインを採用しているサイトの事例を見てみましょう。

 

フラットデザイン事例

日本(にもある)のWebサイトやサービスで、フラットデザインを採用しているサイトやアプリをご紹介していきます。

UBER TOKYO

https://www.uber.com/ja/cities/tokyo
タクシー配車・アプリケーション
uver
デザインがとてもキレイです。
ブラック、ライトブルー、ホワイトという配色もとてもオシャレで使いたくなりますね。
ボタン部分の「+」や「×」などの見せ方をしているのでどこがクリックできるのか認識しやすいですね。

careco

https://www.careco.jp/
24時間いつでもカーシェアリング
careco
大きなボタンデザインが特徴的です。
フラットデザインは大き目のボタン、余白の取り方が重要になりますが、ゆったりと適度な間隔でコンテンツが配置されていて、ボタンもとても押しやすいですね。

ZOZOTOWN

http://zozo.jp/
ファッション通販サイト
zozotown
暗い背景に白の細いアイコンや文字はフラットデザインで多く見かけます。
コントラストがはっきりしているので見やすく、余白を多くとることでクリックもしやすくなっています。

note

https://note.mu/
文章、写真、イラスト、音楽、映像などを手軽に投稿できるクリエイターと読者をつなぐサービス
note
背景に大きな動画を使う手法もフラットデザインにとてもなじみます。
一昔前までは文字やボタンが背景色とかぶって見えにくくなるなんて問答無用でアウトでしたが、このように動画や写真の切り替えで瞬間的に見えずらくなるだけでは、あまりストレスを感じませんね。

Googleカレンダー[アプリ]

カレンダーアプリ(Android/iPhone)
https://play.google.com/store/apps/details?id=com.google.android.calendar&hl=ja
googleカレンダー
Google公式のiPhoneアプリが最近リリースされたGoogleカレンダー、デザインも使い心地もとても良いです。
フラットデザインを追求し続けるGoogleは、お手本にしたいですね。

LINEモール[アプリ]

LINE公式ショッピングアプリ
https://mall.line.me/
linemall 画面をスライドさせて切り替えるのは、アプリではよくある動きですが、スライドのボタンも両サイドが切れたデザインになっているので、「スライドできるんだな」というというのがユーザーに伝わりやすくなっています。

東急ハンズ[アプリ]

東急ハンズ公式 ハンズアプリ
http://www.tokyu-hands.co.jp/
TOKYUHANDS
フラットデザインにプラスして効果的にアイコンを使っているデザインです。
色合いもカラフルなのにまとまっていて、さらに使いやすくもあります。

Eye Em[アプリ]

写真共有アプリ
https://www.eyeem.com/
Eyeem
主役は写真なので、写真が目立つデザインです。
「♥(ハートマーク)」や「コメント」のボタンデザインも存在感はあるのに写真の邪魔をしておらず、コメント機能が入ったり文字が多くなっても最後まで写真がきれいに見えます。
ひとつひとつのディティールがかっこいいですね。

Tonight[アプリ]

今夜のホテル、10秒で予約アプリ
http://www.tonight.at/
Tonight
白に統一したアイコンがボタンであることが表現されています。

Antenna[アプリ]

キュレーションマガジン
https://antenna.jp/
Antenna
クリックした後の細かい動きがとてもかわいいです。
写真や動画で画面に様々な色がありますが、文字やアイコン、クリックできる要素は白一色で統一されています。

フラットデザインはやはり動画や写真にマッチしますね。

このアプリには気に入った記事をクリップする機能があるのですが(画像右側の176、538、などの数字が書かれているところ)、クリップしたときに黄色に変わる動きがとても楽しく、もっとクリップしたくなります。

 

まとめ

いかがでしたでしょうか?
いくつかフラットデザインの事例を見た上で、フラットデザインのサイトの特徴的な部分と、どのような場合に適しているかを考察していきたいと思います。

 

ユーザーがクリックしたくなるための気配り

記事冒頭でもご紹介した通り、フラットデザインを採用している場合、クリックできる部分とそうでない部分がわかりにくかったり、立体的になっていない分「押したい」と思われにくかったりします。
その点事例サイトの多くは、クリックできる場所の色を統一したり、クリックした時に動きを付けるなど”ユーザーが使った時の満足度を上げるための気遣い”が随所に見られました。

 

画像・映像にフォーカスしたいならフラットデザイン

これは言わずもがなかもしれませんが、やはりデザインがシンプルな分、画像や映像に目がいきやすくなります。他の部分をごちゃごちゃさせずに、魅力的な画像や動画に注目を集めたいサイトはフラットデザインと相性が良さそうです。
画像や動画が中心になっているサービスは言葉の壁がないため、グローバル展開も考えやすいですよね。その時にシンプルでわかりやすく、なおかつ使いやすいフラットデザインは大きな武器になるでしょう。

 

やはりターゲットユーザーを考慮する必要がありそう

事例としてご紹介したWebサイト・アプリそれぞれユーザーを意識したデザインになっているものの、日本のサービスに関してはフラットデザインはWebのリテラシーが高い方や若い人向けのサービスに多いです。サイトのターゲットがそこに当てはまるなら、フラットデザインは合っていると言えるでしょう。

逆にあまりWebサイトの閲覧に慣れていない方であれば、従来のサイトと似ているデザインや、言葉での説明がもう少し多いようなデザインでないと使いこなせずに離脱してしまうでしょう。

 

また、フラットデザインに限らずですが、洗練されていてかっこいいデザインだからといって多くのユーザーに支持されるわけではありません。
普段は大衆居酒屋で飲んでいるのに、いきなり高級ホテルのバーに連れて行かれたら居心地が悪いですよね。
実はWebサイトも同じで、いきなりおしゃれすぎるサイトに訪問してしまうと居心地が悪く感じるユーザーもいます。

「デザインがかっこよすぎて80%が離脱」サイバーエージェントのお料理日記アプリ「ペコリ」がハマった意外な落とし穴。 | アプリマーケティング研究所

結局はユーザーファーストに尽きますが、ターゲットユーザーにとって最も使いやすいデザインはどんなものかを考えた上でフラットデザインを採用しなければいけませんね。

Pocket

無料ebook

今すぐ見直すべきサイト内部リンク4つのポイント
姓(必須)
名(必須)
会社名(必須)
電話(必須)
メールアドレス(必須)
個人情報のお取り扱いについて

競合比較ができるSEOツール

最大10項目(順位/被リンク数など)の競合調査が無料でできます。

児玉 茜
2014年7月中途入社。 京都出身のWebデザイナーです。プロモニスタがすべてのWeb担当者の方にとって見やすく、使いやすいサイトになるよう日々進化させ続けます!