ajike switch

フラットデザイン入門② 『フラットデザインの流行性と必然性』

flatdesign-samune02
こんにちは、はきりです。
3日連載のフラットデザイン入門、
初日は『フラットデザインは混合している』でした。
本日は2日目、『フラットデザインの流行性と必然性』です。
では早速どうぞ!

CIから見る流行としてのフラットデザイン

もともとフラットデザインと呼ばれているデザインの台頭はwebに限らずグラフィックでも同様の兆しがあります。(グラフィックの人は「フラットデザイン」という言葉遣いも意識もしていない気がしますが)特に時代性を表すCIデザインの分野ではこの傾向は見られ、フラットなCIを導入しているケースが見られるようになってきました。最近リニューアルされたCIから見える『フラットデザイン化』の流れを探してみたいと思います。

CIとは…企業文化を構築し特性や独自性を統一されたイメージやデザイン、またわかりやすいメッセージで発信し社会と共有することで存在価値を高めていく企業戦略のひとつ。企業のマークやロゴの策定を指すことが多い。

今回はCIのBefore/Afterの事例を多く挙げているこちらのサイトを参考にさせていただきました。

1106_whatsflat-2
個人的にCIデザインの傾向としてはロゴやマークを作り込む(精巧さ・複雑さ)流れから反動する形でフラットな表現(単純化・簡素化)が台頭しつつある印象です。

1106_whatsflat-3
ただ面白いことに反フラット化としてリッチ表現を強める企業も少なくはなく、2極の流れにあると思います。(GoogleをはじめdropboxやSymantecなどweb界隈の企業の多くはフラット化している印象です)

1106_whatsflat-4
フラット・リッチを問わず、全体的に線的な描写(動的)から面的な描写(静的)へ移行していることが「フラットデザイン」がブームとして意識される一因で、これはPC的フラットデザインにも通じている点だと思います。
※ここで言う静的・動的はwebページの解釈ではなくデザインの要素や印象を指しています。

1106_whatsflat-5
またフラット・リッチのどちらでもグラデーションの表現を使うことはありますが、

  • フラットは色の表現を際立たせるためのグラデーション
  • リッチは影の描写による立体感を際立たせるためのグラデーション

このような違いがあり、この違いがフラット・リッチの最も大きな違いかもしれません。

「CIから見る流行としてのフラットデザイン」まとめ

  • 線的な描写から面的な描写へ移行しつつある
  • グラデーションが影の描写でなくデザインの要素として扱う機会が増えている

 

技術的な側面から見るフラットデザイン

様々な状況に対応するために

これから様々なデバイスに対応するよう、展開する画面サイズに合わせるために各画面サイズに合わせて画像を用意することは手間がかかる&画面サイズ可変への対応度はそこまで高くないように思います。その問題に加え、様々なディスプレイ解像度に合わせて画像を用意することはほぼ不可能になってくる。こういったレスポンシブ/マルチデバイス対応の問題点と現状の画像で表現するスキューモフィックなデザインとは相性が悪い。様々な画面サイズ、解像度に瞬発的に対応できるデータの作り方が求められるようになると、必然的に解像度に依存しないベクターデータの存在が重要になってくるのではないでしょうか。
ベクターデータとは… 詳しくはwikiをどうぞ

SVG形式の復権は必然?

モダンブラウザにほぼサポートされているSVG形式、上記の理由からベクター形式の画像フォーマットは理想的であるが、サイズの大きさやサポートの不安定さなどの側面から見ればまだまだ復権とは言いがたいが、技術的な側面が解決すれば今後使用されるケースは増えていくと思う。

SVGについて取り上げている良記事がありました。
『Retina対応にSVGは本当に使えるのか?』
SVGの使用例。地図の画像がSVG形式で拡大してもキレイな状態を保っています。
http://edition.cnn.com/election/2012/ecalculator#_
http://www.bbc.co.uk/news/world-us-canada-20009195

「技術的な側面から見るフラットデザイン」まとめ

  • 今までリッチ・スキューモフィックな影や奥行きの装飾的な表現は
    ビットマップ画像でレスポンシブ・マルチデバイス対応には非効率。
  • イラストやデザインがベクターデータ化していくと、
    必然的に余計な装飾の排除と色の平面化。
  • 文字を画像で書き出さず全てwebフォント・システムフォントを使用していく、
    ボタンも画像で書き出さずCSSで実装

デザインの可変性が重要視され、技術的な側面から出た上記の問題点に効率よく対応するためには、脱スキューモフィック・平面的なレイアウト=フラットデザインが必然的になってくるのではないか。

また以上の点は技術的な対応のために「デザインの最小化」が施されていると受け取ることもできる。どの環境でも平等に効率よくコンテンツへ辿り着く事を最優先としたコンテンツファーストな考え方であると思う。

今日のまとめ

本日はwebやグラフィックに限らずデザインがフラット化している点(流行性)と、技術的な側面に適合するためにフラットデザイン化している2点を追ってみました。

個人的にはデザインの流行は技術的側面に適合する形で現れるものだと思っているので、デザインの要素を省く必然性からフラットデザインが登場したと改めて感じました。3日連載の最終日である明日はその部分をもう少し掘り下げますのでご期待ください。明日は『日本語でフラットデザインをするならば』です。お楽しみに!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×