「フラットデザイン」を使いこなすために必要な要素について

いやー、ありがたい。

前回書いた、とにかく適当に「フラットデザイン」を解説する記事に釣られて頂いた方が何人かいらして、これはまあ、投げっぱなしにするのもアレやなということで、僕的な答えを一応提示しておこうかしらという趣旨です。

ちなみに今回は出し惜しみカマして、一番最後にて発表しようと思っておりますので、お時間ある方はお付き合いよろしくです。

最初に言っておくと、正解とか不正解とかないですから。僕の見識と食い違っていたとしても、別にそれは間違いだと主張する気はまるでありませんから。

まずは、フラットデザインに必要な要素は

欧文書体？？

サンセリフ？？

グリッドデザイン？？？

と、こういうご意見をいただきまして。

おさらいしますと、前回の記事にて僕がフラットデザインに必要な要件に関しては

• グラデーションを使わない！
• 質感は無視して、とにかく塗りつぶし！
• 形に迷ったら正方形！
• カラフル大事！ビタミンカラーよりもちょっとくすませて！
• 整列して並べて、気持ちよく配置！

とプラスアルファ！

という感じの話の持って行き方でした。このプラスアルファに対して、ご意見を頂いた感じです。

グリッドデザインというか、整列が重要な要件であることは、既に5ヶ条に入ってますので、割愛します。整列は重要です。なぜなら、整列してない状況ってのは、混乱を生むし、見づらいし、不必要な引っかかりを与えるからです。
もちろん、あえて揃えないデザイン、整列状況の中で強調のために強調要素を配置するというデザイン手法もありますが、これはフラットデザインに必要ありません。

スルッとしてる、形に引っかからない、故のフラットなんじゃないですかね。

という感じで、いきますか。

まず僕の意見の前に、

フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com

こういう見識もありますよ。と。わかりやすく、かなり的確に言及されていると思います。

僕が前の記事でどうして出し惜しんだのかと言いますと、実に文章化して、そこに説得力をもたせるのが難しい要素だからです。まあ、おいおいやります。

サンセリフ？欧文書体？？

サンセリフっていうのは、至極簡単に言って、ゴシック書体ってことです。

フラットといえばゴシック！というのは、まあ、僕はあまり関係ない気がしてます。

さらに言うと、パーツレベルで言えば、和文書体だろうと、欧文書体だろうと、さほどフラット感を失うことはないんじゃないかなぁ。

セリフ書体でもさらには和文書体でも、フラットに寄せることは可能だと思います。まあ、コレばっかりはパーツで解説するのはズルいですよね、パーツレベルならどんな言い訳でも可能ですもんね。

おそらくタイポグラフィーのことについて、欧文書体かな、サンセリフかなというご意見を頂いたんだと思います。

タイポグラフィー、もしくはタイポ感はかなり重要です。なぜならフラットデザインを採用したらもう拘る部分が、アイコンとかタイポくらいしかないからです。タイポにこだわらないで何に拘るよ！という感じですね。

フラットデザインはミニマルデザインの延長か？

僕もMaka-Veli.comの松本さんの真似をして、ちょっと思う丈を言いますと、延長ではない、つまり別物だ！との主張です。

ミニマルデザインのサンプルとして

tom reinert design

Andrew Lucas – UX/UI Designer – London

Marco Fumagalli – Architect, Product Designer & Interior Designer

こういう感じを揚げますが、ミニマルデザインってのは、余白を駆使しつつ、エッセンシャル（必要最低限）なパーツで構成するデザイン手法です。

ミニマルを採用する場合の狙いとしては、洗練とか、すっきり感とか、高級感等を狙う場合が多いです。

さて、

では今度はフラットのサンプル

Interactive Advent Calendar | It’s a Shape Christmas

Future Insights Live 2013

こういうデザインに対して、洗練とか、スッキリ感、高級感って、ありますか？？？

先に言うと、答えが先にあって、サンプル提示しているので、ズルい言及ですが、おそらく、ミニマルの延長線上の効果を狙ってのフラットデザインではないでしょうね。ミニマルの進化・深化がフラットでは間違いなくありません。

もちろん洗練とか、すっきり感とかはミニマルの流れを汲んでいることはまあ事実だと思いますが、必要最低限の要素だけか？となると、まあ違うでしょうし、かなりあえて正方形を採用したり、くすんだカラーをあえて採用したりと、意図的な余計な要素を沢山はらんでいると、僕は思ってます。

フラットが与える効果としては、フレッシュな印象だとか、トレンド感だとか、チープ感、ガジェット感、遊んでいる感じ、こんな効果をフラットデザインは狙って使われます。

フラットデザインを採用した場合、高級感や、作りこんだ印象をエンドユーザーに感じてもらうことは難しいと思います。

理由はまあシンプルで、フラットとセットで語られるメトロUI、モダンUIがいい例だと思います。

フラットデザインは親切なのか？

これはまあ、一概には言えないですが、不親切でしょうね。

フラットデザインに寄せるために、いろんな要素を削り、単純化して、遊んで見せるために、削った要素こそ、分かりやすさにつながるわけですし。

どちらが洗練されててユーザーフレンドリーかっていったら、まあ、作りこんだほうが圧倒的に洗練されてて、使いやすくわかりやすいでしょうね。

アイコンやボタンは何が出来るのかより正確に表現している方がわかりやすいですからね。

どっちに遊び心や躍動感があるかと質問を変えれば、意見は半々くらいになるでしょうけど。

松本さんはwebデザインとOSを混同するなと指摘しています。機能とデザインを切り離すのは困難ですが、印象や情報を整理したり操作するという観点で見る限り、比較して検討するのは役に立つと僕は思っています。

さてそろそろ

色々脱線して来ましたが、僕的にフラットデザインに必要な最後のパーツをお知らせします。

それはずばり

大胆さ！

です。がっかりしましたか？そうでしょうそうでしょう。こうなることがわかっていたから、ふわっとさせておいたんです。

Future Insights Live 2013

Minimal Monkey – Stephen Burgess

大胆な配色！

大胆な文字遣い！

大胆なレイアウト！

遊び心と言い換えてもいいです。

大胆さ！遊び心！を踏まえてもう一度この記事を読み返してもらえると、僕が一生懸命節々に伏線を張っている感じが楽しめます。

わざわざ正方形とか、わざわざ文字がでかいとか、このわざわざ、あえて、意図的な遊び心が、フラットデザインには必要なんです。

そうです、余程のことがない限り、企業サイトや物販サイトに遊び心は必要ありません。遊び心の不必要なサイトに、フラットデザインは間違いなくフィットしません。

がっかりしましたか？そうでしょうそうでしょう。

これについて、説得力を持たせて、名言化することは、自分のセンスを名言化するのと同じくらい難しいのです。

でもまあ、フラットデザインのエッセンスを拝借するのは圧倒的に簡単だと思いますので、難しく考えずにトレンディーさを楽しんじゃってもいいんじゃないかなぁと思ってます。

僕の場合、トップのロゴ部分に、大胆さと遊び心を持たせてます。僕なりに大分遊んでます。文字とかデカめにしてます。こんだけトップ部分で検索窓をフィーチャーしたブログがあるだろうか！

配置や色が面白いねえとか、遊んでるぅ！とか思わせることまで意識できたら、こりゃあもう、完璧にフラットデザインを使いこなしてますぜ！

ぜ！

こういう要素分解のような思考実験や、仮説反証ってやつは、刺激になるし、なによりセンスを培ってくれるので、好きです。

だいたい40秒くらいでわかる「フラットデザイン」について*frasm

文：シンタロヲフレッシュ

はてブ

pocket

twitter