使えるスキューモーフィックデザイン

2021年10月6日 12:08

スキューモーフィックデザインを適切に分析してみたら、使えるスキューモーフィックデザインを見つけられた！というお話です。

スキューモーフィックデザインとは

スキューモーフィックデザインを簡単に振り返っておきましょう。wikipediaには次のようにあります。

スキューモーフィズム（英: skeuomorphism）またはリッチデザイン（英: Rich Design）とは、他の物質に似せるために行うデザインや装飾を指す用語である。たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。
「スキューモーフィズム」（2021年10月5日 (火) 21:27　UTCの版）『ウィキペディア日本語版』。
https://ja.wikipedia.org/wiki/スキューモーフィズム

スキューモーフィックデザインは「他の物質に似せる」デザインであることがわかります。

また、ユーザーインターフェイスデザインにおいては、2007年のiPhone、2010年のiPadにスキューモーフィックデザインが採用され、注目を集めました。しかし、流行ってしまったものは必ず終わりがやって来ます。2013年のiOS7ではジョナサン・アイブ体制によるユーザーインターフェイスデザインの刷新が行われ、スキューモーフィックデザインはいわゆるフラットデザインに近いデザインに変更されました。

スキューモーフィックデザインが廃れた理由は正しいのか

なぜスキューモーフィックデザインは廃れたのでしょうか？
見た目の流行に過ぎなかったから、時代の流れに合わせて廃れただけなのでしょうか？
いえ、そうではありません。次のようなことが、理由として挙げられていることが多いのです。

・ユーザーがタッチ操作に慣れたから不要になった
・コンテンツを主役として見せるためにこってりした表現がじゃまになった
・現実に似せることがソフトの制約になってしまうから適用されなくなった

これらは確かにまっとうな理由でしょう。
しかし、スキューモフィックデザイン自体を適切に批判できている内容なのでしょうか？スキューモーフィックデザインの定義が曖昧な状態で部分的に批判しているにすぎない、と私は感じたのです。

使えるスキューモフィックデザイン

今回の記事の本題です。
スキューモフィックデザインは「他の物質に似せるデザイン」と定義されていますが、「他の物質への似せ方」には種類があります。
たとえば、石に似た物体を作る時を考えてみましょう。ある人はテクスチャを似せるかもしれませんが、別の人は重さを似せるかもしれません。このように、似せ方には様々な種類がありますし、似せられた物体を抽象化して定義すれば、すべて石に似た物体になってしまいます。

この話を踏まえて、ユーザーインターフェイスデザイン（特に画面デザイン）でスキューモーフィックデザインを使いやすいように分析し、3種類に再定義したものが次のものです。

質感スキューモ：見た目を似せるスキューモーフィズム
構造スキューモ：情報の構造を似せるスキューモーフィズム
操作スキューモ：対象への操作を似せるスキューモーフィズム

一つ一つの内容を抽象的に説明するよりも具体例を示す方がわかりやすいと思います。ここでは、本のデジタル化と針時計のデジタル化という具体例を二つ示します。

本のデジタル化：質的スキューモ

本の基本的な素材が紙の束であることから生まれる質感を似せるスキューモーフィズムです。

採用例
・背景に紙の質感を表現する
・ページがぺらりとめくれるアニメーションを表現する
不採用例
・背景を単色にする
・ページが機械的に真横にスライド移動するアニメーションを表現する

本のデジタル化：構造スキューモ

本の基本的な構成である表紙や目次、しおりなどの情報の構造を似せるスキューモーフィズムです。

採用例
・タイトル、著者名、イラストなどで構成された表紙を用意する
・挿絵を本文の内部に入れる
不採用例
・表紙はなく、いきなり本文が始まる。本の途中で表紙のようなページが表示される
・文と絵に区切りはなく一体となった表現である

本のデジタル化：操作スキューモ

本の基本的な構造であるページに着目し、そのページに対しての操作を似せるスキューモーフィズムです。

採用例
・ページ単位で左右に送り、情報をみる
不採用例
・ページの概念をなくし、縦横にスクロールして情報をみる

針時計のデジタル化：質的スキューモ

平面の上で針が重なり周ることから生じる質感を似せるスキューモーフィズムです。

採用例
・平面を木に、針を金属に似せた表現にする
・針が平面の上にあることを影で示す
・針が回転するアニメーションを取り入れる
不採用例
・平面と針を単色にする
・平面に針の影を落とさず、平面と針の重なりを示さない
・針はアニメーションせずに移動する

針時計のデジタル化：構造スキューモ

針時計の基本構造である針の回転による時間の示し方を似せるスキューモーフィズムです。

採用例
・針によるいわゆるアナログ時計の時間表現をそのまま再現する
不採用例
・数字によるいわゆるデジタル時計の表現にする
・一日をプログレスバーのように表現する

針時計のデジタル化：操作スキューモ

針時計における時刻の設定操作を似せるスキューモーフィズムです。（時計には主となる操作インタラクションがないため、微妙な例となっていますが、ご容赦ください...）

採用例
・針を回して操作する、針と連動が明らかな回転つまみで操作する
不採用例
・一般的なGUIコントロールを用いて操作する（テキストボックスやコンボボックスなど）