スキュアモーフィズムとは何だったのか

Appleが最初のiPhone/iOSを発表した時、凹凸と質感を強調したインターフェースを採用し、それが一気に広まって2000年代中盤のUI表現の主流となった時期を覚えているでしょうか。特に、Webにおいてはコンバーション率が高いとされ、とにかくブリブリとしたボタンを作らされて正直「いやだな」と思っていました、いや、ボタンだけならともかく、全てのUI要素に質感と立体感を求められ、それを作ることにも、使うことにも、ある種のしんどさを感じていたのはほぼトラウマとなっております。

そもそも、スキュアモーフィズムは現実のメタファーを取り込むことによって、操作をより理解しやすくするような狙いがありました。新しいデバイスが生まれると、操作をより直感的にするために、現実の要素を取り込むというのはたびたびみられてきた現象です。現実をどんどん取り込むことにより、視覚的なリッチさを備えていくのですが、それがある一線を超えると「過剰なバッドテイスト」に代わり、逆にユーザーを困惑させ、デザイナーをうんざりさせてきた結果、フラットなデザインに戻りつつあるように感じます。
PCとスマートフォンには操作方法がそもそも大きく違います。PCはマウスで操作することを前提に、手の延長であるカーソルによって操作するのに対し、iPhoneは画面を直接タッチすることで操作できます。そこにあるのはデバイスとの距離の差であり、iPhoneはPCよりもはるかに距離が近いです。なんせ触れるのですから。その距離の変化により、「インターフェース」は「サーフェス」へと変化したとも言えます。タッチパネルは文字通り情報の「表面」となったのです。

デバイスの表面そのものがUIとなることにより、その距離が近まることで、視覚的にも質感を備えていることがより直感的だと判断したのではないかと思われるのですが、とにかくiPhone/iOSは立体感と奥行きのある視覚表現を伴って現れました。ただ、それをWebにすると、前述のように、しんどい。とにかくしんどいという...。考えてみてください、コンバーション率云々の理由で、巨大な立体ボタンが並ぶUIが目に飛び込んでくるのは、大きな声で怒鳴られているようなものです。
とはいえ、iOSは電話から物理ボタンをほぼ追放することに成功しました。それは電話のさらなる洗練ともいえるでしょう。さらに、シェアが上がるにつれ、Appleは突如フラットデザインに舵を切ります。「新しいiOS、あれパワポで作ったん?」とかいう声も聞こえましたが、これはまた一つの洗練ともいえますし、タッチパネルを備えたデバイスが市民権を得た、という証拠でもあると思います。質感を付与せずとも、タッチやスワイプで操作するということを、ユーザーは学んだのです。

今はフラットでカウンタースペースを巧みに使ったデザインに、ちょっとしたマイクロインタラクションを付与することによって、かつての質感重視のデザインが指向したデザインは、ほぼ代替可能だと考えています。

追伸:
この記事のヘッダのために、久々に立体ボタンを作ってみましたが、だいぶ抑えめにしたにもかかわらず、気持ち悪くなりました(笑)。当時は「黒はコンバーション悪いから赤にして」とか言われたのを思い出します。夢でうなされるレベルです。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

Webフォントサービスを片っ端から試してみたいですし、オンスクリーン組版ももっと探求していきたいです。もしサポートいただけるのでしたら、主にそのための費用とさせていただくつもりです。

どうもです!励みになります!
35

I_A

Interface Architects Inc.代表です。Web/UIデザイナー、グラフィスト créateur d'interfaces, Graphiste https://i-archi.jp/

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。