私はデザイナーとして、流行りのデザインにとても詳しいという訳ではありません。今気持ちはHTML5やwebサービスの作成等、どちらかというとテクノロジーの方に興味が強くなってしまっていて、インプットの種類もかなりそっち寄りに…デザイナーと名乗るのがちょっと恥ずかしくなってきてますｗ

で、とはいえデザインとかデザインに関する事を考えるのはすごく好きだったりします。

今回は最近読んだ記事のいくつかで、ここのところ流行りの兆しを見せているフラットデザイン、そしてその対極とされているスキュアモーフィックデザインについて色々考えていたことの理解が進み、ある程度頭の中で整理できたので、ちょっと記事にしてみようかなと思ったわけです。

言葉の定義で戦うのはあんまり好きじゃなかったりしますけど、この辺りの事を頭に入れた上で話をするのは有意義なのではないかなと思ってます。解釈のおかしなところなどご指摘ありましたらどんどん下さい！ではいってみましょう。

フラットデザインについて

ソシオメディア | フラットデザインはUIを進化させるか

まずフラットデザイン(Flat Design)について知りたければこの文章を読みましょう。

フラットという言葉自体は平坦なと言った程度の意味ですが、Windows 8のモダンUIから注目されこうして定着したwebデザインの世界では

• UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする
• ドロップシャドウやベベルといった立体感を出す表現を用いない
• 角丸を用いない。あるいは半径を非常に小さくする
• ボーダーや罫線を用いない。あるいは非常に細く淡くする
• 背景色の違いや余白によってエリアの境界を示す
• タイポグラフィを重視し、文字の大きさにメリハリをつける
• 最低限の視覚情報で強調表現する
• ピクトグラム風のアイコン

といったUIデザインを表現する言葉として使われています。人によって解釈の差はあるでしょうけど、こうした意味で認識している人がほとんどだと思います。

スキュアモーフィックデザインについて

Appleが推奨するSkeuomorphic Designとそのメリットデメリット │ Design Spice

スキュアモーフィックデザイン(Sukeuomorphic Design)についてはちょっと古い記事になりますが、こちらが詳しいです。

スキュアモーフィック、スキュアモーフという言葉はこれまであまり見かける事のなかった言葉ですね。これはギリシャ語のskeuos（容器、実装）morph（フォーム）から来ている言葉とのこと。そしてスキュアモーフィックデザインとは機能的に必要であるないに関わらず、似たような人工物・工芸品・芸術品からコピーされたデザインという事だそうです。テキストコンテンツにおける本のページや音楽ツールでのイコライザーやボリューム、リンクの立体的なボタン等がそれにあたります。

スキュアモーフィックの特徴としてこの記事では

• 視覚的にリッチで魅力的
• 身近に感じる
• 操作方法を想像しやすい
• デザインを楽しめる

といったことが長所として挙げられている半面、

• ユーザービリティを低下させることもある
• 現実と操作が違うとストレスを感じる
• 技術革新を遅らせる
• 余分である
• 流行に応じて古くなる
• 理解できるかどうかはユーザーの経験値次第

のような事が短所として挙げられています(小見出しを抜粋)。

なるほど、こうして見るとフラットなデザインというものは上記のスキュアモーフィックなデザインの短所を全て解決しようとしているという事が良くわかりますね！

実際、この記事を読んで今使っているインターフェイスの違和感で思い当たることもありますよね。

例えば私の場合、iOSにおけるトグルボタンがタップでON/OFFを切り替える操作であることに未だに違和感があります。

他にもエバーノートのページの重なりのような表現は、あたかもその見えている枚数のドキュメントがあるかのように見えますが、実際には雰囲気を作るものでしかなく、ページの枚数を表してはいません。見た目だけそれっぽくても違和感を作るだけだということですな。

スキュアモーフィックとフラット

さて、この二つのデザインの潮流について以下のような記事があります。

UI源平合戦！ もしiPhoneがフラットデザインを採用したら – モフモフ社長の矛盾メモ

この記事は比較的ライトな視点で、スキュアモーフィックデザインとフラットデザインについてガッツリと語っています。文章量にしてはさらっと読めると思うので軽く読みたい人はぜひ読んでみてください。

Shunter . ［和訳］ フラットピクセルズ ~ フラットデザインとスキュアモーフィズムの戦い ~

そして上記の翻訳記事はこの記事を書くことに決めた理由の最後の1ピースでした。訳が怪しいという指摘も確かにありましたけど、その辺を知識で補完して読む分には良いんじゃないでしょうか。

問題解決に対するアプローチ

Appleはグラフィックを可能な限りリッチにすることでリアルなスキュアモーフィックデザインのUIを作ってきました。それに対しMicrosoftはModern UIで余分なものをそぎ落とし、実物と模倣の間にある違和感を作らないようオリジナルの見た目を備え、2次元のディスプレイが備えるべきインターフェースを最初から作りだすことで使いやすさを生みだそうとしました。

この二つのデザインは、解決しようとしている事は同じはずなのに優先しようとしているものは真っ向から違っていて面白いです。

Modern UIはスキュアモーフィックでないデザインアプローチの一つ

スキュアモーフィックという言葉とフラットという言葉はそもそも別に元々対義語という訳ではありませんよね。

現実のインターフェースを模倣することの反対は、ディスプレイの中のオリジナルのインターフェースを作りだすという事ではないでしょうか。…そしてその答えの一つがModern UIなのだと考えます。

リアルなスキュアモーフィックデザインが世の中に既に存在するものの見た目の親近感や使い方の認知に頼った結果、現実のもののユーザビリティーや形状の変化に合わせざるを得なくなっていることに対し、Modern UIは2次元のディスプレイの中でオリジナルに生み出されています。

Microsoftの姿勢

この項ではちょっと私見を述べます。

昨今の流れを見て「まさかMicrosoftがデザインを先導する事になるとは」というような感想を聞きます。ですがMicrosoftはこうした流れの他にもInternet ExplorerでHTML5やCSS3の実装に及び腰ともとれるコンサバな姿勢を貫いてきました。

私としてはMicrosoftはむしろ「時代の流れに関わらずずっと使えるものを慎重に作っていく」というような思想のもとに、リアルの変化に左右されないアンチスキュアモーフィックという選択をしているのではないか(結果たまたま周りも追随した)と思えます。

それがなぜこのタイミングで大きくデザインを変えたのかは当然タッチデバイスという新しい形に対応するためであり、Windows 8でこうしたインターフェースを打ち出したのはタッチデバイスのインターフェースというものに対するユーザーの認識の仕切り直しを図っているのだと考えます。

とは言っても、肝心のWindows 8自体はあまり売上が芳しくないそうですが…＞＜ せっかくブームを作ったのに、なかなかうまくは行かないものですね。デザインだけでハードが出来るわけじゃないですし。

リアリズムとミニマリズム

フラットの話から離れました。前述の記事で述べられていたことに、フラットデザインぽいけどスキュアモーフィックに属するとした計算機のインターフェースというものが紹介されていました。確かにそのアプリのボタンのレイアウトは計算機を踏襲しており、リアルでなくてもスキュアモーフィックだと言えます。そういったものは計算機の他にも時計、カレンダー、タコメーター等いくらでも思い出せます。

ここで既にある言葉でそのインターフェースを分類するとしたら、それはミニマルなスキュアモーフィックデザインと表現できるのではないでしょうか。つまり、これは最小限の表現で計算機の体験を呼び起こそうとしたものと言えます。

前述の一般的な意味でのフラットデザインというものは範囲が広く、スキュアモーフィックの対極として定義できるものではないように思います。少なくとも現在フラットデザインとして紹介されているデザインの中には実物の模倣によって使い方を認知させているものもありますよね。それはミニマルなスキュアモーフィックデザインだと言えます。

フラットはミニマルであり、その対極に位置するのはリアリズムだという事になります。Modern UIはフラットに含まれますが完全にミニマルではなく、スキュアモーフィックでもありません。

デザインアプローチのマトリックス図

段々わけがわからなくなってきたところで、スキュアモーフィズムの反対をアンチスキュアモーフィズムとして軸を作り、リアリズムとミニマリズムを第2軸としてマトリックス図を書いてみます。

この図で、デザインをそれぞれ

1. リアルなスキュアモーフィックデザイン
2. ミニマルなスキュアモーフィックデザイン
3. リアルなアンチスキュアモーフィックデザイン
4. ミニマルなアンチスキュアモーフィックデザイン

と分類する事が出来るようになります。

リアルなスキュアモーフィックが従来のAppleの路線、そして私たちのイメージするよくあるスキュアモーフィックです。Appleが今後向かおうとしていると言われているのはミニマルな(フラットな)スキュアモーフィック、つまり現在のユーザーの認知を利用する形でのミニマルデザインという事になるかと思います。

そしてModern UIはミニマルなアンチスキュアモーフィックデザインの筆頭という事になるでしょう。

リアルなアンチスキュアモーフィックというのは前述のフラットデザインとスキュアモーフィズムの戦いで述べられた、ゲーム画面で多用される現実には存在しないけどそこにあるかのような物質感を持ったインターフェースのようなもののことを指します。

こうして見ると、私たちが使っていたり作ってきたものがどのアプローチに属するのかがわかりますよね。

フラットなデザインの流行でデザイナーの仕事は減るのか

さてAppleもMicrosoftも、当然Googleもミニマルなわけですけど、美麗でリッチなグラフィックの出番はなくなるのでしょうか。

普通のユーザーはわかりやすい魅力に弱いので、やはり見た目で入ります。美しいグラフィックに惹かれてツールを使いだしたり、愛着を持つ人も多いです。しかしこのユーザーの愛着とでも言えるほどのものを勝ち取れない限り、長期的には見た目が美しいものより煩わしさの少ないものに流れていきます。

グラフィカルな美しさでブランディングに成功している人や企業でない限り、webやアプリでは使いやすいインターフェースが作れる能力が求められると思います。当然案件にはよるわけですけど、人が同時に学べることや経験できることの量やスピードは大きく変わることはありません。

短期間でもヒットしキャッチーな見た目を作れる能力と、ずっと使ってもらえる使いやすさを作れる能力。どっちを優先して磨くことが出来るかは、選んだ職場やこれから自分がやりたいことによって変わってくるので一概には言えないですね。

最近、使いやすいUIにも詳しいエンジニアさんも増えている印象です。デザイン自体の需要はあり続けるわけですから、内容は変わりつつもデザイナーは必要とされます。ビジュアルデザインについて尖ったスキルを得るつもりでなければ、様々な環境に対応できる方向で知識や経験を持っておくことが重要だと思います。

終わりに

私はガッツリとしたデザインもシンプルなデザインもどちらも好きなんですけど、モバイルデバイスがwebコンテンツを楽しむメインのデバイスになりつつある以上、タッチしやすいということはもう必須になってきているのではないかと思います。

そうした場合、フラットデザインのようなタッチに最適化しようとするアプローチは確実に必要であり、単なる流行りでなくこうしたデザインがメインストリームの一つになるのは当然の流れのようにも今は感じています。

もしかしたら本当はもっとよいアプローチがあったのかも知れませんけどMicrosoftがこの道を選んだ以上、この流れが続けばフラットデザインの体験は私たちにとって利用すべきユーザーの認知の一つになるでしょう。先を読んでいると言いたいわけではないですけど、大いに活用する価値のあるものだと思っています。

そして流行りは繰り返します。ミニマルからリアルへ、アンチスキュアモーフィックからスキュアモーフィックへ…流行りはどうあれ、両方の技術に対応する事、得意な手法を貫くこと、双方に価値があるのではないかと思います。