2 Comment / Trackback

グラデーションや影を使わないフラットなWebデザインは去年から流行の兆しを見せていて、このWriting Modeもフラットであることを意識して制作しています。

Writing Modeはレスポンシブデザインを採用したので、iPhoneやiPadでも表示確認をしながら作っていて、その時に何となく感じたのがフラットデザインはスマートデバイスに対してすごく親和性が高いということ。
もちろん、シンプルなフラットデザインには、スマートデバイスによる無線（特に電話回線による通信）でのインターネット接続への配慮として、できるだけ通信量を少なくするという意図もあるでしょう。

だけど、僕はフラットデザインは単純にビジュアルデザインとしてもスマートデバイスと親和性が高いと感じているのです。
個人的にそう感じる理由をざっと書き連ねてみることにします。

ポインティングデバイスがマウスでないということ

PCとスマートデバイス（タッチパネル）の最も大きな違いは、ポインティングデバイスの違いだと僕は思っています。
ポインタ（マウスカーソル）が画面に映し出されているか否かという違いはとても大きい。

マウスカーソルが画面のなかにいるPCの場合、Webを見る側の感覚としては、どうしても画面にデザインが映し出されていて、それを擬似的なポインタが操作している感が否めない。どこか他人事感がある、というか。
だから、画面に奥行きを感じられるようなリッチなデザインのほうが操作しやすい、というのがあるんじゃないかな。

一方でスマートデバイスの場合、指やスタイラスペンで直接画面に触れてWebページを操作するので、当然ポインタは画面のなかには現れてこない。ポインティングデバイスが画面の外にリアルに存在するから、ユーザーは画面を見ながらポインティングデバイスを無意識に追う必要がない。

この操作感の違いがビジュアルデザインに与える影響って、とても大きいと思うのです。

スマートデバイスでWebを見る感覚は、本を読む感覚に近い

繰り返すけど、PCで見るWebページはあくまでも据え置きの画面に映し出された映像という印象が強い。一方で、厚さ数ミリのデバイスを実際に手に取って操作できるスマホやタブレットの場合、Webページを見る感覚は本を読むのに近い。

よくよく考えると、紙のデザインってWebほど華美な装飾はしないことが多い。印刷技術の問題（グラデーションや影ってあんまりキレイに印刷できなかったりする）もあるだろうけど、グラデーションや影ってそんなに使わないのが一般的。
紙というものが持つ質感そのものに微妙な陰影があるし、手に取って読む本の場合、据え置いてある画面と違って、見る場所によっていろんな光の当たり方をするから、真っ白な紙面にも自然と光のグラデーションが発生する。だから、背景に下手にグラデーションを敷いたりする必要がないんだと思う。
これはスマートデバイスにも同じことが言える気がしていて、だからフラットなデザインに違和感を感じない。

あとは、スマートデバイスは指やスタイラスペンのようなリアルなポインティングデバイスを使って画面に直接触れるわけで、Webページが平面であることを否が応にも実感せざるをえないわけです。
スマートデバイスで見るWebは、PCで見るWebのようにポインタごと画面に映し出された映像を客観的にとらえられないからこそ、スキューモーフィック（たとえばiOS6のiBooksのブックスタンドのように、実物を模したデザイン表現のこと）に奥行きを持ってデザインされることに対して、より違和感を感じやすいのかもしれない。

新iOSの噂の的「フラットデザイン」とはなんぞや？ : ギズモード・ジャパン

今後はシンプルでフラットなデザインが主流になっていく

PCで見るためのWebデザインは、旧来通りに奥行きを意識してグラデーションや影を用いたもののほうが「最適化」されたビジュアル表現と言えるのかもしれない。
だけど、デスクトップファーストのWebデザインが最適解かというと、すでにそうとは言い切れず、スマホやタブレットを無視してWebはもはや成り立たない。むしろ今後はスマートデバイスファースト。

ということは、やっぱりフラットなデザインは今後Webデザインの主流になっていくんだと思う。
ニュータイプのWebデザイナーに求められるビジュアルデザイン力は、Photoshopのテクニックをバリバリに駆使したグラフィカルな表現力よりは、タイポグラフィやスペーシングを緻密に考えられるエディトリアルデザイナー（レイアウター）としての能力かもしれない。
あとは「CSSだけでどこまでやれんの？」っていう、フロントエンドエンジニアとしての能力もビジュアルデザイン力と切っても切れなくなりつつある。

そして、当然ながらWebらしいインタラクション表現を考えられる能力はデザイナーに必要不可欠。
Webデザイナーがグラフィックデザイナーと決定的に違うのは、UIとして最適な動き（モーション／エフェクト）を考えなければならないことだし、シンプルなビジュアル表現をすればするほどインタラクションによってスペースを上手に作り出したりすることが重要になってくる。

結局のところ、数年前までWebデザイナーがスキューモーフィックなビジュアル表現を用いてWebページを制作してきたのは、Webという新しいメディアに対するリテラシーの低いユーザーが多かったからなんだと思うのです。
実物を模したようなわかりやすい表現で、できるだけ敷居を低くすることがユーザーフレンドリーなWebデザインだった。

しかし、すでにWebを存分に使いこなすユーザーが多くなった。そしてスマートデバイスの普及でWebはより一層、生活に身近な存在になった。Webを見ない仕事や生活はもはや考えにくいほどだし、それほどまでにみんなWebを使い慣れてきた。
つまり、ユーザーの多くがフラットでシンプルなデザインでも躊躇なくWebページを閲覧し、操作できるようになったということ。

もう、華美な装飾でユーザーを惹きつけたり、リテラシーの低いユーザーに対して「少しでも、とっつきやすいデザインを」というステップは終わってきてるんだと思います。

フラットなWebデザインの課題

それじゃ、「明日からはスマートデバイスファーストで、華美な装飾は排除したフラットなデザインを作るぞ」でいいのか、というと事はそれほど単純なわけでもない。

たとえば、フラットなWebデザインを作るうえで最も大きな課題だと感じるのが、クリッカブルなオブジェクトの表現。

フラットなデザインの場合、特にボタンがボタンっぽくない。
僕は仕事でECサイトやランディングページをデザインすることも多いけど、やっぱりボタンはコテコテにボタンっぽくデザインしたほうがクリックされるんです。それは間違いない。

ユーザーにアクションを促すWebページは、やっぱり多少派手に奥行きを持たせてデザインしたほうが現状はよい気がします。
そこは単純に、「世の中でフラットなデザインが流行ってるから」という安直な理由でデザインコンセプトを変えていくべきではない。
ビジネスのゴールを見据えたデザインを作ることこそ、Webデザイナーの使命。

最近のWebデザイン界隈におけるフラットデザインブームってなんか間違ってませんか？ | sogitani.baigie.blog

また、指やスタイラスペンのようなポインティングデバイスは直感的ではあるけれども、マウスカーソルほどピンポイントに狭いエリアを指し示すことが難しい。
デスクトップファーストで作ったレスポンシブデザインだと、どうしても「これ、指で押すの無理じゃね？」っていうボタンができちゃったりするけど、今後はボタンの大きさだったり、ボタン間のスペースだったり、クリッカブルなオブジェクトの扱いはスマートデバイスでの操作性も考慮して、より慎重にならなければいけないんだろうなぁ。

さて。そんなこんなでフラットデザインに対してここ1年ぐらい思ってたことを、iOS7の発表を機に改めて整理して書き連ねてみました。スマートデバイスにはフラットデザインが親和性が高いというのは、わりと僕の主観的な考え方かもしれませんが、どうでしょう。
めまぐるしく変わっていくデザインや技術のトレンドに置いていかれないよう新しい情報をキャッチアップしつつ、理想を言えば、常に一歩未来を見据えながらデザインを作っていきたいものです。

さあ。次は3DにおけるWebデザイン表現についてでも、考えてみましょうか。

Trackback

http://writing-mode.com/20130615/flatdesign/trackback/