思い出すことができるでしょうか。スワイプで開くのがデフォルトで、ボタンのデザインに光沢が施されていたころの時代の画面です。した物質的なデザインである「スキューモーフィックデザイン」と呼ばれるデザイン手法は、次第にフラットデザインに取って代わられるようになりました。今再び「スキューモーフィック」が注目されています。題して、スキューモーフィックデザインの考え方や基礎知識、なぜ再び注目されているのかを考察していきます。ちなみに、スキューモーフィックデザインという言葉自体を初めて聞いたという方も、ノンデザイナーでデザインとかかわりが薄い方も、ぜひ本記事を読み進めてみてください。「スキューモーフィックデザイン」とはスキューモーフィックデザインは、AppleがiOSの最初の頃に提唱していた「質感や特徴など現実世界のモチーフを模倣したデザイン」のことです。以前のiPhoneで採用されていた電卓アプリのデザインは、リアルな生活の中にあるような立体感やツヤのあるデザインを採用していました。同様に認識することができます。スキューモーフィックデザインは、見た目にかかわるデザインだけではありません。その一例として、カメラのシャッター音が挙げられます。人は経験的にカメラのシャッター音が聞こえると、そこで撮影がなされたことを知ることができます。そのため、多くのカメラアプリでは実際にカメラのシャッターが切られた時と同じような「カシャ」という音を採用しています。スキューモーフィックデザインは、言い換えれば機能的に必要であるかないかに関係なく、現実世界にある人工物や造形物などからコピーして物質的に存在するように見せるデザインのことです。新しいOSが採用され、タッチスクリーンの特徴を活かし、ミニマリズムやフラットデザインが流行したことで、次第にスキューモーフィックデザインが見られることは少なくなりました。スキューモーフィックへの批判の論点フラットデザインやミニマリズムの賛美は、一方でスキューモーフィックデザインへの批判につながりました。シンプルで洗練されたデザインを好むデザイナーの目には、スキューモーフィックデザインはどのように映ったのでしょうか。ここでは、その批判に対する論点を振り返ってみましょう。全てがそうだというわけではありませんが、現実に近付けようとするがゆえに、本来ならシングルタップで実現できるような挙動をマルチタップにしたり、もっと簡単にできる動作をあえて難しくしてしまうことがあるといいます。現実のものと操作性が異なる場合のストレススキューモーフィックデザインの良いところは、誰でも容易に使い方をイメージできるところです。逆にそのイメージどおりにいかない場合は、ユーザーがストレスを感じてしまうことがあります。複雑になるスキューモーフィックデザインは、できるだけ現実に存在するものに似せることで操作性を改善させようとします。機能的に必要でないものもリアルなテクスチャで表現しようとしてしまうと、かえって複雑になることがあります。余計な要素を入れてしまうとメインとなるコンテンツ部分も幅が狭まってしまいます。画面領域が少ないモバイル端末では、できるだけシンプルなデザインのほうがいいと考える方もいます。近年、フラットデザインやミニマリズムは盛り上がりを見せていますが、それらのデザインに対する「違和感」を感じているデザイナーもいます。確かに、余分な要素を削ってわかりやすくするのは大切なことですが、フラットデザインやミニマリズムがデザイン工学的なアプローチに対する最終解ではないのを、多くのデザイナーが次第に認識するようになってきました。以下が、ミニマリズムやフラットデザインに対する「違和感」をまとめたポイントです。ユーザビリティへの妥協フラットデザインやミニマリズムは、すっきりとした合理的なデザインを強調することができますが、そうした特徴に固執し過ぎて、かえってユーザビリティ低下に対して見て見ぬふりをしてしまうことがあります。画面領域が狭いモバイルサイトの場合には、こうしたリスクはさらに高まります。影が一切ないフラットデザインは、全ての要素が同一平面上にあるように見えるので、どの要素がクリック可能なのかがわかりにくいという点も挙げられます。デザインをシンプルにした反面、視界の奥行きを奪ってしまい、ユーザーが慣れているパースペクティブ(立体感)が失われてしまうのです。当初、このデザインは常にコンテンツがメインとなり、余計なグラフィックや効果がないのでかえって使いやすいのではないかと思われていました。結果的にはすぐに下火になってしまいました。ユーザビリティの低下にもつながりますが、アフォーダンスがない(どれをクリックすれば良いのかがわからない)ので、そのデザインに慣れていない方にとっては困惑してしまうものになります。演出力に欠けるフラットデザインは概してシンプルで洗練されたものですが、言い換えればどれも同じようなデザインになりがちで、インパクトに欠けてしまうことがあります。スキューモーフィックデザインは、結果的に細部まで作り込まれたデザインになることが多いので、視覚的にリッチであることに加えて「触ってみたい」「使ってみたい」といった演出感を出すことができます。「スキューモーフィック」復活の兆しこうしたデザイン嗜好の変遷を経て、スキューモーフィックデザイン復活の兆しが見えています。皮肉なことに、こうした復活はWebではないところから見られるようになりました。ここでは、現在のスキューモーフィックデザイン復活に見られるポイントをまとめましたのでご覧ください。経験的に存在感を伝えられる単にスクリーンを見るだけではなく、日常生活自体に溶け込んでいるようなIoT製品は、よりリアルなオブジェクトとして日常生活に溶け込もうとしています。Watchの文字盤のデザインの中にはデジタルで独特ものもありますが、一方で文字盤の多くが本物の「腕時計」の様相に近いデザインが施されています。Watchを上にあげた瞬間に時間を確認することができます。これは、私たちが短針と長針によって時間を確認することを経験的に知っているからです。どこを押せばいいのかが明確iOSのデザイン変更でボタンに若干の影が認められるようになったかつてはフラットデザインに挑戦したデザインも、今ではフラットなデザインのいいところを採用しながら、スキューモーフィックデザインの長所も取り入れているという方も少なくありません。各々のメリットを採用することで、より良いデザインにしようと試みています。その先陣を切っているのがAppleのiOSです。7以降、ミニマルでフラットなキーボードになりましたが、どこがボタンなのかがわかりにくいといった声も少なくありませんでした。今では、それぞれのボタンに影をつけることでわかりやすくデザインしており、どこを押せばいいのかが明確になっています。実感をフィードバックするARやVRの世界においては、スキューモーフィックデザインなしでは考えられません。私たちは、リアルな世界と同じようにAR作品やVR作品を体験したいと思っているはずです。物理法則に反したオブジェクトが登場したら、恐らく違和感しか感じないでしょう。まとめスキューモーフィックデザインは、フラットデザインの興隆とともに倦厭されるようになりました。デジタルな世界との境界線を意識しなくなるほど、より現実世界とシームレスにするためにスキューモーフィックデザインが必要になってきます。フラット過ぎて無機質なデザインになっていませんか?そう感じた方は、ぜひ少しでもスキューモーフィックデザインを取り入れてみてはいかがでしょうか。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。詳しく見るアプリアプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。詳しく見るアプリアプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。詳しく見るユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るユーザビリティユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。詳しく見るユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るユーザビリティユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。詳しく見るアフォーダンスアフォーダンスとは、環境のさまざまな要素が人間や動物に影響を与え、感情や動作が生まれることです。アメリカの知覚心理学者ジェームズ・J・ギブソンが、「与える、提供する」という意味の英単語「afford」から作った造語で、主に生態光学や生態心理学に分野で使われています。詳しく見るユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。詳しく見るデザイン会員登録するおすすめ記事ADCMS・Webサイト制作Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはCMS・Webサイト制作ADマーケティングオートメーション(MA)「Pardotユーザー会」運営リーダーが語る。国内最大級のMAユーザー会を維持・拡大する秘訣とはマーケティングオートメーション(MA)ADカスタマーサポート・カスタマーサクセスあえて初仕事で「チャットボット導入」を。今年の新人をたくましく育てる「逆説の育成術」カスタマーサポート・カスタマーサクセスBtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。涼ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。『鬼滅の刃』が大ヒットした理由ケーススタディで学ぶ。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。