1. Web-Knight[ウェブナイト]トップ
  2. UI/UX・デザイン
  3. 【事実】ほとんどのウェブサイトはフラットデザインで出来ている
UI/UX・デザイン
フラットデザイン画像

【事実】ほとんどのウェブサイトはフラットデザインで出来ている

あなたはイマドキのウェブサイトのほとんどがフラットデザインが採用されているのはご存知でしょうか?ホームページ、ランディングページ 、ブログ、ウェブアプリケーションなど随所で見受けられます。

そこで今回は、フラットデザインとは何か?また、採用する理由やメリットを紹介。具体的なウェブサイトを通してフラットデザインへの理解を深めていきます。

  • フラットデザインとは何か?
  • なぜフラットデザインを採用するのか?
  • 分かりやすいフラットデザインサイト5つ

この記事を書いている僕はWebエンジニア歴5年ほど。最近は開発だけではなく、使いやすい分かりやすいデザインも重要だと感じています。

スポンサーリンク

フラットデザインとは?

影をつけた立体感、光沢などの質感を出さない、平坦でシンプルなデザインです。

以下は iPhone iOSのアイコン画像です。

https://gori.me

もともと左のリッチデザインが採用されていましたが、時代の流れとともに現在は右のフラットデザインに変わりました。

なぜフラットデザインを採用するのか?

良いユーザインタフェース

スマホの小さな画面で、いかにわかりやすく伝えるか?モバイルファーストで作成すると、フラットデザインが採用されることが多いです。

スッキリしていて分かりやすいフラットデザインは良いユーザインタフェースと言えます。

コンテンツを強調できる

シンプルなデザインだからこそ、ユーザの目線は自然と文章やアイコン、画像にいきます。コンテンツをしっかり伝えることができます。

マルチデザインに対応

スマホ、パソコン、タブレットなど、デバイスが異なる場合でも簡単にサイズを調整できるため、画面が崩れないメリットがあります。

分かりやすいフラットデザインサイト5つ

ウォレットアプリKyashのランディングページ

https://kyash.co

フラットでは単調になりがちなデザインも、丸い曲線やグラデーションで差別化しています。

申し込みボタンのみに影をつけることでボタンを強調。このボタンのクリックこそが、ユーザに一番起こして欲しいアクションでしょう。

影をつけることで、ボタンかどうか分かりにくいフラットデザインの短所を解消しています。

タクシー配車アプリMOVのランディングページ

https://m-o-v.jp/

シンプルなデザインにより、文章やアイコン、動画などのコンテンツに自然と目がいきます。

アイコンもフラットデザインで統一されていますね。

また、スクロール時にふわっと表示させる動きを出すことで、ユーザをコンテンツに引きつけることができます。

プログラミング学習サービスのホームページ

https://prog-8.com/

フラットデザインに多い柔らかい色彩がたくさん使われています。

デザインがシンプルだと、文字フォントの個性も引き立ちますね。

欅坂46のホームページ

http://www.keyakizaka46.com

ロゴカラーにも使われている、緑と紫のグラデーションが印象的なサイト。

各セクションの仕切りやブロックがスッキリして見やすいですね。

パソコンで表示するとごちゃごちゃしていますが、スマホファーストなら良いのかも。

UXコミュニケーションズのホームページ

https://www.uqwimax.jp/

余計なエフェクトが一切なく、各セクションの区切りがハッキリしています。

スマホからタップしやすい大き目のブロックで構成されていますね。

ランディングページとは違い、情報提供サイトはこのレイアウトが多い印象です。

まとめ

いかがでしたか?フラットデザインの長所を知ることは出来たでしょうか?

参考サイトを見るとフラットな中にも、グラデーションやスクロール時の動きで、ユーザを引きつけるための工夫が感じられます。

あなたがいつも使っているサイト、わかりやすいな思ったサイトもフラットデザインかも知れませんね。