WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT考える。WEBCRE8.jpによるweb制作やデザインについての考察を書き綴っていくカテゴリです。考察そんなに詳しいわけでもないんですけど、最近話題のwebデザインのトレンドについていくつかの文章を読んで非常に納得できたので、整理の意味で書いてみます。私はデザイナーとして、流行りのデザインにとても詳しいという訳ではありません。今気持ちはHTML5やwebサービスの作成等、どちらかというとテクノロジーの方に興味が強くなってしまっていて、インプットの種類もかなりそっち寄りに...デザイナーと名乗るのがちょっと恥ずかしくなってきてますwで、とはいえデザインとかデザインに関する事を考えるのはすごく好きだったりします。今回は最近読んだ記事のいくつかで、ここのところ流行りの兆しを見せているフラットデザイン、そしてその対極とされているスキュアモーフィックデザインについて色々考えていたことの理解が進み、ある程度頭の中で整理できたので、ちょっと記事にしてみようかなと思ったわけです。言葉の定義で戦うのはあんまり好きじゃなかったりしますけど、この辺りの事を頭に入れた上で話をするのは有意義なのではないかなと思ってます。解釈のおかしなところなどご指摘ありましたらどんどん下さい!ではいってみましょう。Design)について知りたければこの文章を読みましょう。8のモダンUIから注目されこうして定着したwebデザインの世界ではUI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にするドロップシャドウやベベルといった立体感を出す表現を用いない角丸を用いない。半径を非常に小さくするボーダーや罫線を用いない。非常に細く淡くする背景色の違いや余白によってエリアの境界を示すタイポグラフィを重視し、文字の大きさにメリハリをつける最低限の視覚情報で強調表現するピクトグラム風のアイコンといったUIデザインを表現する言葉として使われています。人によって解釈の差はあるでしょうけど、こうした意味で認識している人がほとんどだと思います。Design)についてはちょっと古い記事になりますが、こちらが詳しいです。スキュアモーフィック、スキュアモーフという言葉はこれまであまり見かける事のなかった言葉ですね。これはギリシャ語のskeuos(容器、実装)morph(フォーム)から来ている言葉とのこと。テキストコンテンツにおける本のページや音楽ツールでのイコライザーやボリューム、リンクの立体的なボタン等がそれにあたります。身近に感じる操作方法を想像しやすいデザインを楽しめるといったことが長所として挙げられている半面、ユーザービリティを低下させることもある現実と操作が違うとストレスを感じる技術革新を遅らせる余分である流行に応じて古くなる理解できるかどうかはユーザーの経験値次第のような事が短所として挙げられています(小見出しを抜粋)。して見るとフラットなデザインというものは上記のスキュアモーフィックなデザインの短所を全て解決しようとしているという事が良くわかりますね!実際、この記事を読んで今使っているインターフェイスの違和感で思い当たることもありますよね。私の場合、iOSにおけるトグルボタンがタップでON/OFFを切り替える操作であることに未だに違和感があります。この形だとフリックで操作できそうに見えませんかね?他にもエバーノートのページの重なりのような表現は、あたかもその見えている枚数のドキュメントがあるかのように見えますが、実際には雰囲気を作るものでしかなく、ページの枚数を表してはいません。見た目だけそれっぽくても違和感を作るだけだということですな。スキュアモーフィックデザインのようにこうした見た目のインターフェイスの話題のキーワードにシグニファイアという言葉があります。過去記事の[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきかやデザインが苦手な人も分かる「デザインは全て意味がある」6つの要素などでも解説しているので気になる人はどーぞ。スキュアモーフィックとフラットさて、この二つのデザインの潮流について以下のような記事があります。社長の矛盾メモこの記事は比較的ライトな視点で、スキュアモーフィックデザインとフラットデザインについてガッツリと語っています。文章量にしてはさらっと読めると思うので軽く読みたい人はぜひ読んでみてください。~そして上記の翻訳記事はこの記事を書くことに決めた理由の最後の1ピースでした。訳が怪しいという指摘も確かにありましたけど、その辺を知識で補完して読む分には良いんじゃないでしょうか。問題解決に対するアプローチAppleはグラフィックを可能な限りリッチにすることでリアルなスキュアモーフィックデザインのUIを作ってきました。UIで余分なものをそぎ落とし、実物と模倣の間にある違和感を作らないようオリジナルの見た目を備え、2次元のディスプレイが備えるべきインターフェースを最初から作りだすことで使いやすさを生みだそうとしました。この二つのデザインは、解決しようとしている事は同じはずなのに優先しようとしているものは真っ向から違っていて面白いです。UIはスキュアモーフィックでないデザインアプローチの一つスキュアモーフィックという言葉とフラットという言葉はそもそも別に元々対義語という訳ではありませんよね。現実のインターフェースを模倣することの反対は、ディスプレイの中のオリジナルのインターフェースを作りだすという事ではないでしょうか。UIなのだと考えます。UIは2次元のディスプレイの中でオリジナルに生み出されています。Microsoftの姿勢この項ではちょっと私見を述べます。昨今の流れを見て「まさかMicrosoftがデザインを先導する事になるとは」というような感想を聞きます。ExplorerでHTML5やCSS3の実装に及び腰ともとれるコンサバな姿勢を貫いてきました。私としてはMicrosoftはむしろ「時代の流れに関わらずずっと使えるものを慎重に作っていく」というような思想のもとに、リアルの変化に左右されないアンチスキュアモーフィックという選択をしているのではないか(結果たまたま周りも追随した)と思えます。8でこうしたインターフェースを打ち出したのはタッチデバイスのインターフェースというものに対するユーザーの認識の仕切り直しを図っているのだと考えます。ブームを作ったのに、なかなかうまくは行かないものですね。デザインだけでハードが出来るわけじゃないですし。リアリズムとミニマリズムフラットの話から離れました。前述の記事で述べられていたことに、フラットデザインぽいけどスキュアモーフィックに属するとした計算機のインターフェースというものが紹介されていました。確かにそのアプリのボタンのレイアウトは計算機を踏襲しており、リアルでなくてもスキュアモーフィックだと言えます。いったものは計算機の他にも時計、カレンダー、タコメーター等いくらでも思い出せます。リアルではないが体験の再現度は大きいビジュアルの時計ここで既にある言葉でそのインターフェースを分類するとしたら、それはミニマルなスキュアモーフィックデザインと表現できるのではないでしょうか。これは最小限の表現で計算機の体験を呼び起こそうとしたものと言えます。前述の一般的な意味でのフラットデザインというものは範囲が広く、スキュアモーフィックの対極として定義できるものではないように思います。少なくとも現在フラットデザインとして紹介されているデザインの中には実物の模倣によって使い方を認知させているものもありますよね。それはミニマルなスキュアモーフィックデザインだと言えます。フラットはミニマルであり、その対極に位置するのはリアリズムだという事になります。UIはフラットに含まれますが完全にミニマルではなく、スキュアモーフィックでもありません。段々わけがわからなくなってきたところで、スキュアモーフィズムの反対をアンチスキュアモーフィズムとして軸を作り、リアリズムとミニマリズムを第2軸としてマトリックス図を書いてみます。デザインアプローチのマトリックス図この図で、デザインをそれぞれリアルなスキュアモーフィックデザインミニマルなスキュアモーフィックデザインリアルなアンチスキュアモーフィックデザインミニマルなアンチスキュアモーフィックデザインと分類する事が出来るようになります。リアルなスキュアモーフィックが従来のAppleの路線、そして私たちのイメージするよくあるスキュアモーフィックです。Appleが今後向かおうとしていると言われているのはミニマルな(フラットな)スキュアモーフィック、つまり現在のユーザーの認知を利用する形でのミニマルデザインという事になるかと思います。UIはミニマルなアンチスキュアモーフィックデザインの筆頭という事になるでしょう。リアルなアンチスキュアモーフィックというのは前述のフラットデザインとスキュアモーフィズムの戦いで述べられた、ゲーム画面で多用される現実には存在しないけどそこにあるかのような物質感を持ったインターフェースのようなもののことを指します。して見ると、私たちが使っていたり作ってきたものがどのアプローチに属するのかがわかりますよね。フラットなデザインの流行でデザイナーの仕事は減るのかさてAppleもMicrosoftも、当然Googleもミニマルなわけですけど、美麗でリッチなグラフィックの出番はなくなるのでしょうか。普通のユーザーはわかりやすい魅力に弱いので、やはり見た目で入ります。美しいグラフィックに惹かれてツールを使いだしたり、愛着を持つ人も多いです。このユーザーの愛着とでも言えるほどのものを勝ち取れない限り、長期的には見た目が美しいものより煩わしさの少ないものに流れていきます。ビジュアルの需要も当然あるもののそれにはパワーが必要グラフィカルな美しさでブランディングに成功している人や企業でない限り、webやアプリでは使いやすいインターフェースが作れる能力が求められると思います。案件にはよるわけですけど、人が同時に学べることや経験できることの量やスピードは大きく変わることはありません。短期間でもヒットしキャッチーな見た目を作れる能力と、ずっと使ってもらえる使いやすさを作れる能力。どっちを優先して磨くことが出来るかは、選んだ職場やこれから自分がやりたいことによって変わってくるので一概には言えないですね。使いやすいUIを作れるという事はある程度必須技術になっていく最近、使いやすいUIにも詳しいエンジニアさんも増えている印象です。デザイン自体の需要はあり続けるわけですから、内容は変わりつつもデザイナーは必要とされます。ビジュアルデザインについて尖ったスキルを得るつもりでなければ、様々な環境に対応できる方向で知識や経験を持っておくことが重要だと思います。終わりに私はガッツリとしたデザインもシンプルなデザインもどちらも好きなんですけど、モバイルデバイスがwebコンテンツを楽しむメインのデバイスになりつつある以上、タッチしやすいということはもう必須になってきているのではないかと思います。した場合、フラットデザインのようなタッチに最適化しようとするアプローチは確実に必要であり、単なる流行りでなくこうしたデザインがメインストリームの一つになるのは当然の流れのようにも今は感じています。したら本当はもっとよいアプローチがあったのかも知れませんけどMicrosoftがこの道を選んだ以上、この流れが続けばフラットデザインの体験は私たちにとって利用すべきユーザーの認知の一つになるでしょう。先を読んでいると言いたいわけではないですけど、大いに活用する価値のあるものだと思っています。流行りは繰り返します。ミニマルからリアルへ、アンチスキュアモーフィックからスキュアモーフィックへ...流行りはどうあれ、両方の技術に対応する事、得意な手法を貫くこと、双方に価値があるのではないかと思います。tweethatenafacebook_likewebcre8はTwitterを使っています。豊すごく解りやすかったです。