スキューモーフィズム

IDIA.JP > レポート > スキューモーフィズム
スキューモーフィズム

実物に似た外観や質感の再現を目指したデザイン手法である「スキューモーフィズム」についてまとめた。さらにフラットデザインと比較することで、今後のスキューモーフィズムについて考えた。

スキューモーフィズムとは

スキューモーフィズム(skeuomorphism)とは、別の素材に似せるためにデザインや装飾を行うことである。近年では主に、コンピューターシステムのUI(ユーザーインターフェース)において、実物に似た外観や質感の再現を目指したデザイン手法を指す。

skeuomorph(スキューモーフ)+ism(状態、行為、主義など)=skeuomorphism(名詞)
skeuomorph(スキューモーフ)+ic(〜に関する)=skeuomorphic(形容詞)

スキューモーフィズムの例

スキューモーフと重なる概念

メタファー
暗喩、類推させること。
ミメーシス
真似る事、似せる事。自然の模倣、価値のある物の模倣。
アーキタイプ
原型、雛形、普遍的な型を持つイメージの形式。そのエミュレートはスキューモーフである。

2つのスキューモーフ

スキューモーフは大きく2つに分けることができる。

  • フィジカルスキューモーフ
  • デジタルスキューモーフ

フィジカルスキューモーフの例

建築
洋風な生活スタイルが浸透する過程で、フローリングの代替品としてビニル製などのフローリングシートが普及した。また、レンガ風のデザインを施した家の外壁や、瓦の形状をした金属製の屋根材などはよく用いられる。
ITガジェット
現在販売されているパソコンやスマートフォンはアルミニウムやマグネシウム合金などの金属性の筐体を採用しているものがあるが、以前はプラスチックに金属調の塗装を施しているものが多かった。
自動車
車のボディの一部を木目調とするデザインが流行した。また内装を木目調にするデザインは現在も積極的に行われている。
ファッション
ベークライトは初期のプラスティック樹脂であり、ファッションの分野では貝や琥珀の代替品として用いられた。
めっき
広義にはめっきの技術もフィジカルスキューモーフとして扱うことができる。
フィジカルスキューモーフの例

デジタルスキューモーフの例

PCのGUI
「デスクトップ」「フォルダ」など、デスクワークで使う道具を模した概念をコンピューター上に導入し、コマンド入力による操作を不要にした。
スマートフォンのGUI
PCでは画面解像度や性能の向上に伴いアイコンの精細化やリアル化が進んだが、スマートフォンではかなり早い段階からリアル志向のUIデザインが用いられた。これは大きく3つの理由があると考えられる。ひとつはスマートフォンが登場した時点での性能がそれらを表現するのに十分な性能を持っていたため、またスマートフォンはこれまでの携帯電話やPCとは異なる操作方法(タップやスワイプなど)が必要であり、そのハードルを少しでも低くするために、さらに若年層やこれまでデジタルガジェットに触れていなかった層にまで利用者層が一気に拡大したためと考えられる。
デジタルスキューモーフの例

スキューモーフのメリットとデメリット

フィジカルスキューモーフのメリット

制作費用が安くなる
本来の素材で作るよりも安く製造する事ができる。フィジカルスキューモーフを用いる最も大きな理由の一つであると考えられる。
丈夫になる
本来の素材よりも丈夫にすることができる。たとえば金は比較的柔らかい金属のため、変形などの心配があるが、金めっきではその固さが地金の強度に拠るため、強度の高さと美しさとを同時に実現することができる。
感情を引き起こす
性能の良い新素材や新技術が魅力に欠けることは多い。フィジカルスキューモーフにより既知の素材に似せることで、懐古的魅力や親しみを生み出すことができる。
資源の節約
毛皮や貴金属など、希少な資源を節約したり保護したりできる。

フィジカルスキューモーフのデメリット

手間がかかる事がある
フィジカルスキューモーフを実現するに当たり、その手間や費用が本物よりもかかることがある。これは製造技術の熟練や体系化、大量生産などによって解消できることが多い。
粗悪品やコピー品の氾濫
前述したように、制作費用を抑える目的でフィジカルスキューモーフを用いることが多い。これが過度に進むと質が悪いものが市場にあふれることになる。また悪意を持ってその技術を利用すると、コピー品の氾濫を引き起こすこともある。

デジタルスキューモーフのメリット

親しみを覚える
とかく冷たく難しい印象があるデジタル機器に親近感を感じさせる事ができる。
これまでの経験を活かせる
初心者やITリテラシーの低いユーザーには、これまでの知識を活かして操作できることは重要である。アナログからデジタルへ、キーボードからマウスへ、PCからスマートフォンへなど、技術の移行期や転換期には欠かせないユーザーインターフェースのテクニックであるといえる。
感情を引き起こす
「親しみを覚える」こととほぼ同義だが、使い始めたユーザーがよりよい体験をするためにデジタルスキューモーフが役立つ。

デジタルスキューモーフのデメリット

手間がかかる
リアルを追求すればするほど制作に時間がかかる。特にスピードが重要となるビジネスや開発の現場ではこれが足枷になることも多い。
データが重くなる
精緻なヴィジュアル表現はデータ容量が大きくなる事が多い。デバイスの性能や通信速度が向上したとはいえ、データは軽い方が良い。
飽きやすい
導入時にはすばらしい能力を発揮するデジタルスキューモーフだが、本質的な体験を提供できなければそのインターフェースに飽きてしまうのも早い。
文化によって認識の差が生じる
国や地域、文化によってモノに対する認識や意味合いが違うことがある。たとえば途上国での利用を前提にした場合、アイコンに機械を模したモノを用いるべきかどうかはよく検討する必要がある。TVゲーム「ドラゴンクエスト」では、海外向けにリメイクされる際、教会を示す十字のアイコンが変更されたこともある。
操作方法の種類に限界がある
スマートフォンなどタッチパネル式のデバイスでは、操作方法に制限がある、そのため小さなつまみを「ひねる」操作や、レバーを「引き出す」操作など再現することができないものがある。

スキューモーフィズムとフラットデザイン

2012年にはWindows8が、2013年にはiOS7が「フラットデザイン」を採用し話題となった。フラットデザインはこれまで説明してきたスキューモーフィズムなデザインの対極にあたるものである。

スキューモーフィズムとフラットデザイン

スキューモーフィズムとフラットデザインとの比較

スキューモーフィズムフラットデザイン
一言で言うとリッチで装飾的なデザインシンプルで本質的なデザイン
模倣によるデザイン多いほとんどない
立体感多いほとんどない
グラデーションありなし
光沢や反射ありなし
罫線、枠線多い少ない
余白少ない多い
フォントとくに制限がない可能であれば1種類
グリッドレイアウト任意多用
アイコンの使用多い少ない
画面の使用範囲一部を使う全部を使う
デザインの考え方足し算引き算
データサイズ大きい小さい
デザインへの誘目性高い低い
コンテンツへの誘目性低い高い
情報構造さまざまレイヤー構造
制作時間のかかる工程グラフィックデザインUIデザイン、UXデザイン

スキューモーフィズム、メタファーは悪か?

これまでスキューモーフィズムを牽引してきたAppleがフラットデザインを採用したことにより、スキューモーフィズムに対して懐疑的な見方もある。しかし上記の比較表からわかるように、それぞれ目的や特徴が異なるデザインであるため、新しいからフラットデザインが良いわけでも、古いからスキューモーフィズムが悪いわけでもない。

これからのスキューモーフィズム

フラットデザインは制作に必要な時間が短い?

フラットデザインはそのシンプルさ故に、短時間での制作に向いているとされる。しかし実際に制作してみると、フラットデザインもスキューモーフィズム以上に制作に時間がかかることがわかる。これはフラットデザインがシンプルすぎる余り、ユーザーに不親切になってしまうことが多く、それを補う工夫が必要であるからだ。フラットデザインではUIデザインやUXデザインにより多くの時間を充てなければならない。

スキューモーフィズムの強み

UIデザイン、UXデザインの考え方や手法は、いまだ十分に普及しているとは言いがたい状況だ。同時にそれに習熟したデザイナーやディレクターの数も十分ではない。案件の納期やチームのメンバーによっては、現場で十分な経験値のあるスキューモーフィズムを使ったデザインの方が最適解である場合もあるだろう。

PCのみで表示することを前提にした場合などは、通信速度の制限や画面サイズの制限も少ないため、スキューモーフィズムを用いても大きな問題は発生しないはずだ。またスマートフォンやタブレットを想定した場合でも、Webサイトやアプリケーションの魅力を引き上げるために、デザインのあしらいとしてスキューモーフィズムを用いるのは依然として高い効果が期待できる。

本質的なデザインを

フラットデザインが市民権を得たことは、デザインの本質について改めて考えるよいきっかけとなった。デザインは本来、どう機能するかを示したり、目的の達成をサポートするものであり、それ自身がコンテンツに勝ることはない。これからのデザインでは、ターゲットとなるユーザーの経験値やリテラシーをしっかりと理解し、より綿密で文脈的な設計が重要となる。

参考

記事のデータ

公開日2013年11月2日
カテゴリー
タグ
関連する記事

記事を共有する