スキューモーフィズム(スキューモフィック)
Skeuomorphism

UIデザインを現物の見た目や動きに似せるデザイン装飾

現実で慣れ親しんだモチーフに似せることで、初めて触る人でも直感的に操作できる装飾にすることを『スキューモーフィズム』という。
電子書籍アプリでは、ページを送るとき実際の本をめくる体験に似せたアニメーションをつけて、初めてアプリを触る人でも直感的に操作できるようにしている。

スキューモーフィズム(skeuomorphism)の語源はギリシャ語の単語 “skeuos”(器または道具)と “morphê” (形状)という単語から作られた言葉であり、スキューモフィックデザイン、リッチデザインともいわれている。

iBooksアプリでは、実際の本のページをめくるように操作することができる

iBooksアプリでは、実際の本のページをめくるように操作することができる
引用:それからデザイン

スマートフォン普及当初に多く採用された

スキューモーフィズムは、スマートフォンが普及し始めた2012〜2013年に多く採用された。代表的な例として、当時のiOS6のアプリデザインが挙げられる。

OSに組み込まれた時計アプリのアラーム設定画面では、現実のスイッチに似せたスキューモーフィズムで設計されている。同様に、電卓アプリでもボタンの順序や質感が現実の電卓をもとに設計され、現実の電卓とほぼ同じように設計している。

現実のデザインに似せて作成されている

現実のデザインに似せて作成されている
引用:SmartphoneBloggingNORI510.com

フラットデザインへの転換

スキューモーフィズムは、スマートフォンが普及し始めた当初に多く採用され、スマートフォンを使ったことがないユーザーでも操作しやすくしていた。
しかし、現実に実在していないものを開発する時に問題が発生した。スキューモーフィズムを採用してしまうと、現実のものに似せて表現できないことに加え、本来の目的とは異なる先入観を与えてしまうことだ。

2013年にAppleがiOS7のアプリデザインにフラットデザインを採用したことを皮切りに、スキューモーフィズムの採用率が大きく減少し、フラットデザインが採用されるようになった。Apple以外にフラットデザインを採用した例として、InstagramやTwitter、Airbnbなどのアプリデザインが挙げられる。

フラットデザインが採用されたAirbnbのiOSアプリのインターフェース

フラットデザインが採用されたAirbnbのiOSアプリのインターフェース

スキューモフィズムが見直されている

2020年より「サイトやアプリの世界観を鮮明に表現したい」「直感的に使用してほしい」というニーズからスキューモーフィズムが再注目されている。
新しいスキューモーフィズムは抽象的に物体を構成したデザインに加えて、陰影や3Dで立体的にすることで、部分的に現実のものに似せた表現をしている点が特徴である。
新しいMac OS “Big Sur”でも採用され、話題になった。

Safariのアイコンの遷移

Safariのアイコンの遷移
引用:1000LOGOS

適切なインターフェースデザインで設計する

スキューモーフィズムの本質は、ユーザーに対して直感的な理解を助けることであり、現実世界にも似たような物がある場合に非常に有効である。
フラットデザインが流行っているからフラットデザインを採用するという短絡的な考え方ではなく、ユーザーのコンテキストやメンタルモデルを踏まえた上で、対象のユーザの属性や状況などを総合的に考慮し、適切なインターフェースデザイン設計は何か?ということを常に考えていくべきである。

関連用語

参考サイト

blank

Tsuchida

システムエンジニアとして組み込みソフトウェアの設計・実装・評価を担当しています。ユーザーに寄り添ったシステムを作りたいという思いからUXDTに参加しました。慣れないことも多く大変ですが、楽しい日々を送っています。