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



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

2012年に Windows 8、2013 年に iOS 7 がリリースされ、このころを境に一気に web デザイン業界でフラットデザインが普及していきました。それまでの立体的なリッチデザインに比べるとデザインはシンプルになりますが、小さい画面でたくさんの操作をするスマホでも見やすく、また直感的に操作できることから、ボーダレスなデバイス環境にマッチしたデザインとして普及していきました。web デザイン界というと流行り廃りがありますが、このフラットデザインは当面継続すると考えられています。そんな訳で web デザインに興味を持っている方が、一度は見ておきたいフラットデザイン・サイトをご紹介します。

目次
  1. デザイン初心者必見!一度は見ておきたいフラットデザインサイト15選
  2. 脳トレ lumosity(ルモシティ)
  3. Google Design
  4. クラウドワークス・ドリームプロジェクト
  5. ユニクロ エアリズム
  6. EDWIN ヨーロッパ
  7. NESPRESSO
  8. Bloomberg Media
  9. TOYOTOWN
  10. dentsu
  11. 早稲田大学
  12. 東京都採用ページ
  13. フリーランサー
  14. gengo
  15. WISTIA
  16. 梶謙製磁社
  17. フラットデザインのWordPressテーマ
  18. まとめ

デザイン初心者必見!一度は見ておきたいフラットデザインサイト15選

脳トレ lumosity(ルモシティ)

lumosity

lumosity(ルモシティ)

世界180カ国以上で利用されている脳トレのサイトになります。世界中だれでも一目で分かるように設計されたフラット・デザインは、グローバリゼーションを見据えたwebデザイナーには参考になります。またユーザーが見ていて飽きないような色使いやアニメーションは、特徴的です。

Google Design

google-designGoogle Design

Googleのデザインについて紹介されているサイトになります。さすがグーグルとうなずけるフラットデザインです。各デバイスにもレイアウトが柔軟に対応し、フレームワーク的にも参考になるデザインです。

クラウドワークス・ドリームプロジェクト

クラウドワークス クラウドワークス・ドリームプロジェクト

フリーランス・受発注サイトのクラウドワークスが企画するプロジェクト紹介サイトになります。現在進行形のプロジェクトを紹介するサイトで、”ドリーム”ぽい雰囲気が演出されています。

ユニクロ エアリズム

ユニクローエアーリズム ユニクロ エアリズム

ユニクロのエアリズム・キャンペーンサイトになります。私は「エアリズムと何ナニ」というコンセプトで、自分なりの組み合わせを作って、友達とシェアするとエアリズムやiPadが当たる、という内容で、世界中にエアリズムを広めることを目的としています。ついつい触りたくなるフラットなデザインは特徴的です。

EDWIN ヨーロッパ

edwinEDWINヨーロッパ

日本を代表するジーンズメーカー「EDWIN」の欧州版サイトになります。トップデザインの区切り方から製品紹介、ニュース、万人ウケするフラットデザインにまとまっています。スマホで見た場合もキレイにまとまっていて、「EDWINかっこいい」と多くの方が思うと思います。

NESPRESSO

nespresso [NESPRESSO(http://www.nespresso.com/positive/jp/ja#!/sustainability)

自宅で淹れたてのエスプレッソが楽しめるNESPRESSO製品。スクロールエフェクトも取り入れたフラットデザインは、世界中の人に馴染むデザインとなっています。同じサイトデザインで20カ国語以上の言語を表記可能となっていますが、どの言語にしてもスッキリしたサイトデザインにまとまっています。

Bloomberg Media

bloomeberg Bloomberg Media

世界の経済情勢をお届けするブルーンバーグの紹介サイトになります。凝ったフラットデザインに加えて、動画や動きのある円グラフで躍動感を演出しています。さすが世界を代表するメディアサイトといえます。

TOYOTOWN

toyotown TOYOTOWN

テレビコマーシャルでもお馴染みのトヨタタウンの紹介サイトになります。シンプルなトップデザインとは裏腹に、各コンテンツには思考を凝らしたフラットデザインが取り入れられています。こんなサイト作れたらいいな、と思っちゃいますよね。

dentsu

dentsudentsu

さすが日本を代表するメディアカンパニーといえるサイトデザインになっています。コンテンツ内容の分かり易さだけでなく、色使いやフォント等も見やすくデザインされています。企業系サイトのデザインとして参考になります。

早稲田大学

早稲田大学早稲田大学

2014年末にサイトリニューアルした早稲田大学。コンテンツ内容が一目で分かるように仕上げられています。日本語バージョンでは英語と日本語が表記されて、すっきりした感じはありませんが、英語バージョンでサイトを見るとかっこいいです。学校以外にも会社紹介など様々なジャンルで活用できそうなデザイン事例です。

東京都採用ページ

東京都 東京都採用ページ

東京都の職員採用サイトになります。行政機関としては全国的にも珍しいオシャレなフラットデザインとなっています。シンプルなデザインの中にもJavaScriptで画像をスライドし、見ていて飽きずに、ユーザーが興味を持つサイトデザインとなっています。

フリーランサー

フリーランサー フリーランサー

世界で1600万人以上が参加しているフリーランス・サイトになります。シンプルで機能性あふれるフラットデザインとなっています。プロジェクトや製品紹介などのサイトデザインとしても参考になると思います。

gengo

gengo gengo

世界中の言語を人的に格安で翻訳してくれる、もしくは自分が翻訳家として活躍できるサイトになります。だれでも扱いやすいように、参加しやすいようにシンプルなデザインで分かり易く構成されています。アカウント作成後のダッシュボード画面も扱いやすいフラットデザインになっています。

WISTIA

wistia WISTIA

動画の管理やスタイル編集などができるツール系サイトになります。サービス概要をはじめ、ログイン後のダッシュボードも直感的に操作できるフラットデザインとなっています。

梶謙製磁社

梶謙製磁社 梶謙製磁社

江戸時代から続く有田焼の窯元「梶謙製磁社」の紹介サイトになります。シングルページにフラットデザインを採用しているサイトになります。デザインはYKKAPやBMWメールマガジンなどを手掛けたAHREFinc

フラットデザインのWordPressテーマ

wordpress-flat-theme WordPressテンプレート

WordPressの中でも「Flat」は、フラット度が高い無料テンプレートになります。カラー、ボタン、レイアウトなど、フラットデザインがはじめての方でも馴染みやすいテンプレートとなっています。

まとめ

いかがでしたでしょうか?フラットデザインといってもシンプルなサイトデザインからアニメーションや動画などを盛り込んで機能的なフラットデザインに仕上げているモノまで様々です。実はフラットデザインと一言で言ってもトレンドがあって、今年はフラットデザインにシャドーを加えたものやゴーストボタン、シンプルなフォントに機能、明るい色調がトレンドとなっているようですよ。ネット上ではフラットデザインで活用できるフリー素材も充実していますので、あなたもフラットデザイン、挑戦してみませんか?

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp