Blog
Webデザイン

日本ではこれから?!流行のフラットデザイン国内事例17個+α

2013-07-26 11:00
この記事は約 5 分で読めます。

Webデザインのトレンドワード「フラットデザイン」。海外事例は多く紹介されていますが、国内事例はあまり見かけなかったのでまとめてみました。
「フラットデザイン」に明確な定義はなく、事例の選別は非常に悩みましたが、要素を含んでいるであろうサイトも含めピックアップしてみましたので参考にしていただければと思います。

フラットデザインとは

簡単に言うと「立体感やテクスチャ、影など現実に似せた装飾を排したシンプルで平面的なデザイン」といったところでしょうか。
さらに、グリッドレイアウト、抑えめのトーンでの統一感、ベタ塗り、などが特徴になるかと思います。

詳しくはこちらが参考になりますのでご覧ください。
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | MEMOPATCH
今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG

国内「フラットデザイン」事例

山口情報芸術センター[YCAM]10周年記念祭

flat-design-in-japan_ycam
http://10th.ycam.jp/
背景色はグラデーションしているものの、緩やかな変化でフラットな印象。

メイクレッスンの大阪<ベリーメイクスクール>

flat-design-in-japan_very-make
http://www.very-make.com/
塗りを大きくとったボタンの配置。鮮やかでカラフルながらもトーンを揃えた統一感。

Webコンサルティングのクリエイティブホープ

flat-design-in-japan_creativehope
http://www.creativehope.co.jp/
フラットなアイコン、全画面ベタ塗り、グリッドレイアウト。

TRIAND Inc.

flat-design-in-japan_triand
http://triand.jp/
グリッドレイアウト。オフィスの天気・気温・湿度のグラフィックも印象的。

Wemake

flat-design-in-japan_wemake
https://www.wemake.jp/
配色やシンプルなログインフォームがフラットな印象。立体的なアイコンがフラット感減か。

Letters, Inc.

flat-design-in-japan_letters-inc
http://letters-inc.jp/
影やテクスチャを多少使用してはいるものの、アイコン、配色でフラットな印象。

カーノル[Carnol]:各自動車メーカーを横断した試乗予約サービス

flat-design-in-japan_car-nol
http://car-nol.com/
一部ドロップシャドウは使用しているが、メニューなどはフラット

Ultra Super New Inc. | A Creative Agency based in the heart of Harajuku, Tokyo.

flat-design-in-japan_ultrasupernew
http://ultrasupernew.com/
グリッドレイアウト。マウスオーバー時のベタ塗りでフラットに。

Maru

flat-design-in-japan_maru
http://maru.no/
落着いた色合いに、グリッドレイアウト。

株式会社ディー・エヌ・エー【DeNA】

flat-design-in-japan_dena
http://dena.com/
グリッドレイアウトを採用。様々な写真でフラットな印象は少ないか。

ユニクロトップ - UNIQLO ユニクロ

flat-design-in-japan_uniqlo
http://www.uniqlo.com/jp/
グリッドレイアウト。コーポレイトカラーの赤が少し強い印象。

THE STABLES ステーブルズ

flat-design-in-japan_thestables
http://thestables.jp/
ロゴマーク(厩舎?)を象ったシルエットでマスクされた写真が特徴的。

株式会社アイ・エム・ジェイ

flat-design-in-japan_imjp
http://www.imjp.co.jp/
グリッドレイアウト。ベタ塗りがもう少しあればフラットな印象か。

CG制作のブルーム

flat-design-in-japan_cg-bloom
http://cg-bloom.com/
シンプルなアイコン。落着いた配色。

株式会社京阪エージェンシー

flat-design-in-japan_keihan-ag
http://www.keihan-ag.co.jp/
画面をいっぱいに使ったデザインがシンプルながらも印象的。

株式会社ワンゴジュウゴ WAN55

flat-design-in-japan_wan55
http://www.wan55.co.jp/
アイキャッチにタイル状にアイコンを配置。

CSSQ | CSSの情報に特化したキュレーションサービス

flat-design-in-japan_css-q
http://www.css-q.com/
アイキャッチ、アイコン使用だけでもフラットな印象か。

+α 国内「フラットデザイン」事例(ローカライズ)

本国のサイトデザインを日本語化したものなので国内事例といって良いのか分からないので、別枠でご紹介します。

Windows 8 - Microsoft Windows

flat-design-in-japan_windows8
http://windows.microsoft.com/ja-jp/windows-8/
フラットデザインの流行のきっかけの一つでもあるメトロUI。

ナチュラルミネラルウォーター | エビアン evian

flat-design-in-japan_evian
http://www.evian.co.jp/
ピンクが印象的

おわりに

いかがでしたでしょうか。これぞ「フラットデザイン」というような国産サイトは、まだ見かけませんが、今秋のフラットデザインを取り入れたAppleのiOS7のリリースで、さらに「フラットデザイン」は盛り上がっていくのではないでしょうか。

個人的にはどっぷり「フラットデザイン」というよりも、今までの質感のあるデザインにフラットな要素を取り入れたハイブリッドなデザインのサイトが増えてくるのではと考えています。

> > >
あわせて読みたい