DESIGN 2013.03.27

フラットデザインな日本国内サイト

  • Design

こんにちは。インヴォーグデザイン部です。 2013年度のウェブデザイントレンドとしてあちこちで取り上げられているフラットデザイン。 2011年に発表されたGoogle+やGmailの新デザインがフラットデザインを採用していたことに端を発し、 この流れが本格的なものとして広がっていったように感じています。

最近ではiPhoneの次期OS、「iOS7」でも採用か?という記事も。
Appleのジョナサン・アイブ、iOSのUIチームと密に協力。「フラットデザイン」推し
http://jp.techcrunch.com/2013/03/22/20130321apple-jony-ive-ios-design-interface/

(ちなみに、先述したGoogle+やGmailのデザインに関わったとされているのがMacオリジナルソフト開発チームの中心メンバーであったAndy Herzfeld。いちデザイナーとして、やっぱりアップルすげえな!と思わされます。)
このフラットデザイン、どちらかと言えばこれまでは海外のサイトで多く見られていましたが、日本のウェブサイトでも少しづつ見かけるようになりました。
というわけで今回は、「2013年的フラットデザイン」な日本のウェブサイトを独断と偏見でまとまてみました。

IMJ

フラット感もありつつ、レスポンシブでシームレスなページ遷移と、
今の時代の空気感をあちらこちらで感じさせるサイト。アイコンも素敵です。

STORES.JP

リンク箇所など、ほんの少し立体感を残しているものの、
サイト全体から感じる印象はフラットデザインのそれですね。
シンプルでクリーン、明快。

株式会社 二番工房

フラットデザインと相性のいいシングルページ構成。
スクロール時にチラッと見える「2」がいいですね。

ワープジャパン株式会社

少し変わったUIを採用したフラットデザイン。
CIに絞ったカラスキームがクリーンな印象。

Ermenegildo Zegna

世界共通のデザインにすることでブランドイメージをコントロール。
写真を多用することで、フラットデザインらしからぬフラット感。

BRANCH

アイコンをポイントにしたフラットデザイン。
たっぷりの余白が伝えたい情報を際立たせています。

UT POP-UP! TYO | UT 2013

先日公開されたアプリ公開記念のキャンペーンサイト。
オフィシャルサイトも以前からフラットデザインですね。ユニクロは。

山形のそば屋|そば処庄司屋

ディスイズジャパニーズフラットデザイン。男前!

日本マイクロソフト

ウィンドウズ8のモダンUIの流れをそのまま組んでいます。

IN VOGUE

最後は先日リニューアルしたインヴォーグのサイト。
操作感を損なわない程度の立体感は残していますが、
レスポンシブも念頭に置いたサイト全体の構成や
厳選したコピーなどトータルのバランスが
日本らしいフラットデザインだと感じます。

という感じで並べて見ると、細かなあしらいやテクスチャでごまかし(?)がきかない分、

● 掲載情報/要素の厳選
● アイデンティティになり得るカラースキームの設計
● 置いただけ感のしないタイポグラフィ
● 完成度の高いフォントの選定
● 情報を立たせるための余白バランス
● あしらいやテクスチャに頼らない密度感向上
  ex.大胆な写真使いやアイコンの使用、ボタン形状など

などに対し、いつも以上に気を配ることが、イケてるフラットデザインを作る上で重要なのではないでしょうか。

この「フラット化/シンプル化」は程度の差こそあれ、ウェブコンテンツ全体でまだまだ続きそうです。