東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

聞くは一時、聞かぬは一生

Q203 フラットデザインとはなんですか?

フラットデザインが流行っていると聞きました。 フラットデザインの定義や、メリット・デメリット、注意点などを教えてください。

A203 光彩や陰影などの立体感を廃した平面的なデザインを指します。

Appleの最新OS、iOS7で「フラットデザイン」が採用されたと話題になっています。
「フラットデザイン」に明確な定義はないようですが、一般的に立体的なデザイン手法(光彩や陰影、映り込みをつける)を廃したデザインを指します。

聞くは一時203-1聞くは一時203-2聞くは一時203-3

これまでの立体的なデザイン                    iOS7のフラットデザイン

ここ数年、デザインの世界では光彩や陰影などを駆使した立体感のあるデザインが流行していました。
思い起こせば2001年。
Windowsが98からXPになった時に、デスクトップ画面などが立体的になり「おおっ!近未来的」と感動したものです(私だけ?)。

聞くは一時203-4聞くは一時203-5聞くは一時203-6

Windowsクラシック表示                              Windows7のデフォルト表示

その後、ありとあらゆるOS、Webサイト、各種UIもそれに追随する形となり、デジタルを飛び出して紙媒体でも立体的な表現がもてはやされるようになりました。
映像の3D化もあり、世のビジュアルは飛び出してばかり。
ちょっと飽きてきた・・・なんとなく、そんな雰囲気もあったのでしょう。

2012年、Windows8がこれまでの立体的デザインを廃したデザイン<=フラットデザイン>を基本UIに採用して話題となりました。当初は賛否両論だった フラットデザインですが、今年に入って、iOS7、YahooJapan、GooglePlayもフラットデザインに移行し、本格的なデザインの流行となりました。
「2013年からはフラットデザイン」と言っても過言ではありません。

聞くは一時203-7

↑画像はMicrosoftホームページより

立体的なデザインに比べ、フラットデザインは画像の作りこみに時間がかからず、読み込み容量も少なくて済みます。

その一方、装飾を削ぎ落としたシンプルさゆえに、
・色やサイズ、レイアウトのセンス
・ボタンやフォームなどの配置、UIの知識
・フォント選び、文字の見せ方
などがとても大切になってきます。

ともすれば、のっぺりとした単調なデザインになってしまいますし、 日本語には向かないとの声もあります。 デザイナーの真価が問われる、ごまかしの効かないデザインですね。

Web上では早くも
アイコン集
・50 Flat Icons Set, Best for Web and App UI Design
WordPressのテーマ集
・40+ Cool Examples of Flat Web Design
UI実例集
・Showcase of Beautiful Flat UI Design
カラーパレット(Windows8風)
・Flat UI Colors
などが紹介されています。

Webデザイナーの方からは「CSS3でゴリゴリの立体デザインを組んだのに・・・」という悲鳴が聞こえてきそうですが、この流行は続き、しばらくの間スタンダードになりそうな気がします。

まずは、上記のようなサイトで色々チェックしてみて、ご自身でもフラットデザインに挑戦してみてはいかがでしょうか?