フラットデザインについて @maka_velicom が思う6つのこと。

Advertisement

フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに~みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。
あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。

英語圏と同じにしない

テキストで大胆なタイポグラフィを扱うには今の所、限られたフォント、有料Webfontなりで対応する事になります。なので日本語でタイポグラフィを組むにはグラフィックデータに頼るしか無いと思っています。フラットデザインの場合、特に記事中心のブログサイトなど、画像文字での運営はなかなかしんどい物です。一般的なサイトであれば、画像をガンガン使っていくしか無いのかな、と。

そうでなければ、もういっその事、英語を使いましょう。もしくはミニマルに徹しましょう。
でなければ成り立たないと思います。それくらいフラットデザインではタイポグラフィが重要になると思います。

これについては、こちらの記事がとても参考になりました。ステキ記事

Modern UI のようなフラットデザインを目指して使いづらくなっている件について
http://dev.classmethod.jp/information-design/usability/consideration-modernui/

メリハリが今まで以上に必要

タイポグラフィはフラットデザインの中で特に主になり得る物です。
これの他に写真などがありますが、装飾を極限までそぎ落としたフラットデザインの場合、インパクトを持たすにはタイポグラフィや写真に頼る事が多いはず。
そのうちの1つが日本語フォントという問題で影響を受けてしまうのですが、これが使えない場合は写真、もしくは何かモチーフ、線画によるシンプルな装飾なりでメリハリをつけるのが比較的楽だと思います。全体デザインで特徴付けるのも可能だと思いますが、非常にハードルも高く、サイトの種類に影響されます。

ただでさえ配色と要素でかなり絞られたデザインです。ヘタすると、どこにでもあるフラットデザインのサイトになってしまうので、何か1つ、特徴付けられる要素を考えた方が無難だと思います。

多色すぎず、単色すぎず

基本的にフラットデザインはタイポグラフィと色で魅せる物だと思います。
色んなカラーが楽しく、鮮やかな印象でスタイリッシュなデザインにすることができます。ただ、多色すぎると本当に目が痛いです。

デザインでよく単色、あるいは色数を極端に少なくして全体トーンを合わせているケースがよく見られます。フラットデザイン時、色数自体を少なくすると、非常に面白みが無いです。ただし、メリハリのある、ビビットなカラーリングの場合は多色すぎると品が悪く見えるので、これはセンスの問題だと思いますが、重くならない程度に彩度だけ合わせるなりして配色する方が良いと思います。
色の選択も、同じ系統の色でまとめると落ち着いた雰囲気にはなりますが、正反対の物を取り入れたりすると面白いです。

また、白と黒は今まで以上に濃度を凝った方が良いです。
黒でもかなり印象が違います。色で構成を整えるフラットデザイン時は、白と黒はかなり重要なポジションになります。とにかく色のあるスペースが大きいので、色使いには慎重になった方が良いです。

OSとは違う

Win8のModernUIと呼ばれるものは、あくまでもOSの話。
UIやUXの観点からすればWebと同じだろうと思うのですが、それでもやはり許容範囲が違います。OSでの欠点は逃げ道がありません。Webの場合はターゲットが大きく差がでる事もあり、「ある程度」許容されると思います。また、OSとの大きな違いは動線です。Webでの動きは大体決まっています。「クリックをしたら次のページに進む」もしくは「戻る」この基本構造から発展して「ウィンドウが出る」「並び替わる」「メールを送る」「データをアップロード、ダウンロードする」など。ある程度予想が付きます。なのでメタファーなどもある程度限られている為、許容される事が大きいです。

ただしOSの場合は「クリックしたら何が起きるかわからない」事の怖さが段違いです。詳しい人なら尚更、1クリックでアプリが動くのかOSそのものが動くのか、更にそこからアプリがどう動くか、OSがどう動くか、と、クリックに対する選択がかなり多いです。

Webは基本的に「読む」「書く」事が主なので、ある程度の導線があるわけです。
この延長でWebはデザインしてあげると良いと思うのです。

ミニマルデザインの延長?

フラットとかシンプルなアイコンとか鮮やかなカラーリングとかにとらわれ過ぎないで、ミニマルデザインの基本を思い返して欲しいのです。元々ミニマルが流行った時に、いろんな注意点があったはずです。基本とも言えるUIやUXが、既に我々は通った道なのに、その時の問題点を忘れている気がするのです。あれだけミニマルデザインが好きとかカッコイイと流行っていたのに、比較的近い存在のフラットデザインを毛嫌いされるのはなぜでしょうか?ミニマルもそもそも好きではなかったか、単にモノトーン・モノクロが好きだったのか、チープにも見えてしまう配色、そのようなクオリティのフラットデザインばかりが目に止まるからでしょうか。この問題はきちんとユーザー目線に立って理解を深めると、更に面白い発展が出来るのかなと考えさせられます。

そもそも論

フラットデザインの前提として「タッチする」という概念がキーだと思います。
Win8のModernUIも、タッチ操作を意識した結果のインターフェースです。スマートフォンアプリでフラットデザインが注目されているのは限らたスペースでタッチさせる事に有効な為でしょう。
冒頭で紹介させていただいた記事と、この記事とで違和感を感じる方もいらっしゃると思うのですが、現在様々なところで議論されているフラットデザインは、WebサイトなのかスマートフォンアプリなのかOSなのか、それぞれ記事毎に視点も違いますし、書いてる方も、議論されている方も、それぞれ自身の分野での視点があります。

例えば本記事中の「OSとは違う」の項、話がややこしくなるのでそこでは書きませんでしたが、スマートフォンアプリの場合はかなりOSと近い物があります。しかしアプリの場合は操作もスワイプ、ピンチなど独特な物があり、ユーザーが選択できる(アクションできる)事がより限られ、電波や充電などの影響もターゲットによっては多少なりとも影響があるのでUX的な考慮が、より重要項目となります。

フラットデザインの論点は、一体どの視点での話なのかが非常に重要なのかなと感じます。

最近気になったフラットよりのWebデザイン

オランダ、BOLDKINGというサイト。ロゴ、タイポグラフィ、アイコンまで統一感出してます。なのでフォントもGT Walsheimという丸みのあるシンプルなつくりの物を使ってますね。

オランダ、BOLDKINGというサイト。ロゴ、タイポグラフィ、アイコンまで統一感出してます。なのでフォントもGT Walsheimという丸みのあるシンプルなつくりの物を使ってますね。
http://www.boldking.com/


大きなタイポグラフィと写真・イラストが特徴的。テキストはProxima NovaというWebフォントです。 こういうのができるのが英字のうらやましいところ

大きなタイポグラフィと写真・イラストが特徴的。テキストはProxima NovaというWebフォントです。 こういうのができるのが英字のうらやましいところ
http://futureinsightslive.com


なんと立命館大学。SPO-KEN LEARNING GUIDEというサイト。テクスチャ使ってますが、全体的にフラットを意識してるかなと思って気になってます。

なんと立命館大学。SPO-KEN LEARNING GUIDEというサイト。テクスチャ使ってますが、全体的にフラットを意識してるかなと思って気になってます。
http://www.ritsumei.ac.jp/shs/shs_guide/


大きなスクエアのざっくりレイアウト。英字が映えますね。

大きなスクエアのざっくりレイアウト。英字が映えますね。
http://kodochform.se/


フラットというかミニマル。超大胆な写真と黄色のアクセントがとてもスタイリッシュな印象です。

フラットというかミニマル。超大胆な写真と黄色のアクセントがとてもスタイリッシュな印象です。
http://cgibytonic.com/Services


Minimal Monkeyさん本当カッコイイですよね。色とテキストだけでこんなにステキにできるのはなかなか無い

Minimal Monkeyさん本当カッコイイですよね。色とテキストだけでこんなにステキにできるのはなかなか無い
http://minimalmonkey.com/


Dieselのサイト。ナナメに切り込んだレイアウトがカッコイイです。基本的にシャドウが無い事が一般的だと思いますが、このように一部、シャドウを必要な部分だけ上手く組み合わせても良いかなと思います。

Dieselのサイト。ナナメに切り込んだレイアウトがカッコイイです。基本的にシャドウが無い事が一般的だと思いますが、このように一部、シャドウを必要な部分だけ上手く組み合わせても良いかなと思います。
http://www.diesel.com



うーん・・こう書いてみると、やはりブログデザイン手を入れたくなってしまう・・・以前のテーマを、そのままのレイアウトでCSS変えただけですからね。。ちょっと退屈なサイトだなって思いました。あ、タイトルはちょっとやってみたかっただけです。気にしないで下さい(笑