webra

ウェブ&グラフィック全般。デザイナーの乱れ書き。

フラットデザインはモダニズム建築と同じ道を辿るのか?

   

フラットデザインとモダニズム

フラットデザイン、はやってますね。YahooやiOS7でも導入されて、長期的なトレンドになるんでしょうか。

スポンサードリンク

フラットデザインの特徴

フラットデザインの特徴はといえば

・シャドウやグラデーションを省いて奥行き感をなくす
・直線やグリッドを意識した機能的なレイアウト
・メリハリのついた色使い
・華美な装飾やテクスチャを使わず質感を排除

ぐらいでしょうか。

画像も少なくレスポンシブルにも対応しやすいことや、非デザイナーでもページ作成がしやすいのがはやっている理由でもあるのでしょう。デザイナーにとっても直接の作業量自体が減るのはありがたいことかもしれません。

例えば、フラットデザインの逆のリッチデザインなどは作業量が半端ないです。

Camera-Icon

<iPhoneのカメラアイコン>

このようなアイコンを「全てのボタンに付けてくれ。もちろんオリジナルデザインで!」なんて言われたら目眩がしそうです…

一見、シンプルで誰にでも出来そうなフラットデザインですが、ここに大きな落とし穴がある気がします。似た様な例として建築界におけるモダニズムを見てみましょう。

モダニズム建築の弊害

モダニズム建築とは20世紀初頭に起こった建築様式。コンクリートや鉄骨など新しい技術の開発によって、それまでの宗教的・権威的な装飾を否定し、機能的・合理的で自由な建築を創造しました。

代表的な建築家がル・コルビュジエやミース・ファン・デル・ローエ。二人が建てた住宅を見ると、とても戦前に建てられた物とは思えないほど洗練されています。今でもデザイナーズハウスとして通用しそうな色あせない魅力があります。

img_savoya

<サヴォア邸|ル・コルビュジエ>

img_mies

<ファンズワース邸(左) シーグラムビル(右)|ミース・ファン・デル・ローエ>

彼らが提唱した機能的でシンプルで新しく自由な建築は世界中に広まりました。
「荘厳なキリスト教の大聖堂や伝統的な寺社仏閣のような建築は出来ないけれど、これなら簡単に出来そう!(と思ったかどうかは知りませんけど)」と模倣され、しかも短納期で低予算で大量に作られた結果、世界中がコンクリートとガラスの四角い箱だらけになってしましました…

これがモダニズム建築の弊害というやつです。コルビュジエやミースのような天才的なデザイナーが建造した建築は半世紀を過ぎても魅力的なのに、意図を理解せずに短絡的に彼らを模倣しただけの建築には、もはやなんの魅力もありません。

同じことがwebとフラットデザインにも言えないでしょうか?

本質を理解せずに安易にフラットデザインに飛びつくと、シンプルなだけで面白みのないサイトが世の中に溢れかえってしまうかもしれません。そうならないためにも、デザイナーは特に気を配らないといけません。僕も気をつけます。

結論として言いたいことは、「フラットデザインは思うほど簡単じゃない。むしろ難しい。」と言うことです。

フラットデザインを作成する際に気を付けること

最後にフラットデザインサイトを作成する際に、気を付けたほうが良さそうなことを思いついただけ書いておきます。

・白場(空白)を活かしたデザイン

装飾が出来ない分、メリハリの効いたレイアウトを心がけましょう。ただ、スペースを「空けている」のと「空いている」のは違います。

・上下左右のマージンに特に気を使う。

要素が少ないので少しのバランス崩れが全てを台無しにする可能性があります。

・グリッドに沿った整列

これもマージンと同じく少しのズレが致命的になる可能性があります。

・タイポグラフィを活かしたレイアウト

タイポグラフィとはフォントの美しさを活かしたデザインのこと。フォント指定でMac・ヒラギノならなんとかなりそうですが、Winのメイリオやタブレットのドロイドフォントだと、う~ん…MSゴシックは問題外です。画像を使えば問題ないんですが、レスポンシブル対応がしやすいメリットがなくなりますし、webフォントを使うのもどうなんでしょう。悩ましい問題です。

・ジャンプ率は大きめに

装飾が無い分見出しと本文の違いが出しにくいと思われます。ジャンプ率(テキストの大きさの比率)を大きめに設定してメリハリをつけましょう。

・ユーザービリティーを意識したデザイン

例えば立体感が出せないので、ボタンがボタンとして認識されない可能性があります。配置や色合いを工夫しましょう。また、アイコンの認識スピードもリッチデザインに比べると遅いです。

>参考記事
だいたい40秒くらいでわかる「フラットデザイン」について
フラットデザインについて @maka_velicom が思う6つのこと。

 - notes