こんにちは、佐藤です。
ウイズコロナで引きこもり生活が続く中、私もいろんなものを整理したり、再構成したりしながら、見直しを計っております。
最近、意識しているのがキータイピングをきちんとできるようになりたいな～と感じながら、タイピングの位置などけっこう意識しております。
今までは、我流でしたので、とても非効率でした。
何十年もやってきたわけですから、簡単には直りませんが、多分きちんと矯正すれば、そのうち投資効果が出てくるだろうと考えております。
Webデザイン、これからどうなるの？
同様に、ウェブデザインのあり方についても勉強しております。
こちらも今までは、他のデザインを見てそれを参考にしたり、真似たりする中でそれっぽい感じにしてきましたが、きちんと基礎理論を学ぶことで、より良いデザインや、UI/UXができるんじゃないかということで時間を取っております。
ちなみにUI/UXとは、ユーザー・インターフェイス、ユーザー・エクスペリエンスの略称です。
参考図書は、Webデザイン、これからどうなるの？
https://www.amazon.co.jp/dp/B078MC3KG8/
です。
2018年1月に発売された書籍ですが、今でもとても参考になります。
最近は、YouTubeで海外のウェブデザイナーの動画をよく見ているのですが、動画で語られているキーワードを理解することができず、Webで検索すると調べることはできるのですが、きちんと勉強をしておいたほうが良いだろうということで、上記を購入しました。
その勉強の成果は、ブログで紹介していこうと思います。
今日紹介していく内容が、スキューモーフィズムとフラットデザイン、マテリアルデザインです。
2010年代、ウェブデザインの主流は、スキューモーフィズムから、フラットデザイン、そしてマテリアルデザインへと流れています。
このブログの最後では、2020年代にこれから来そうな、ニューモーフィズムについてもちょっとだけ紹介します。
スキューモーフィズム
iOS6の頃に全盛だったデザインスタイルです。
スキューモーフィズム（skeuomorphism）とは、他の物質的要素に似せるために行うデザインや装飾のことでユーザに馴染みのないものを、馴染みのあるものにすることにより理解を促進するために使われる。
個人的な解釈では、立体的で、現実の物理的存在を比喩的に使うデザインのことだと思います。
iOSのインターフェイスが参考になると思います。
しかしiOS6からiOS7への移行の際に、スキューモーフィズムという概念からフラットデザインという概念に置き換えられます。
iOSのインターフェイスは、スキューモーフィズムからフラットデザインに変更になるわけです。
フラットデザイン
フラットデザインとは、要素から立体感を取り除き、すべてのオブジェクトが一つの平面上に存在しているように感じさせるデザインのことです。
シンプルさを追求するミニマリズムの影響を受けているとされています。
スタイリッシュであったり、リソースが少なくて済むため効率的であるとされています。
iOS7が出たのが、2013年なのですが、この時のUI/UXの変化には衝撃を受けました。
スティーブジョブスがNEXTを作っていた頃の立体的なUI/UXがクールだ～と感じて世代なので、今後もこの方向で美しさを追求していくと思っていたので、この方向転換はショックでした。
ただ、それと同時にフラットデザインのスタイリッシュさにも魅せられました。
iOS7以降のインターフェースで象徴的に表現されています。
このブログのアイキャッチの画像もフラットデザインですね。
マテリアルデザイン
そして最近主流になってきているが、Googleが提唱して、シンプルなフラットデザインに、スキューモーフィズムの立体的な演出を加えた手法、マテリアルデザインです。
マテリアルというのは、物質という意味ですから、現実の世界の立体的な効果を参考にしているということですが、Googleの提唱するマテリアルデザインは、マルチデバイス、レスポンシブ・デザインに応用できる、汎用性の高いデザインだということが言えると思います。
マテリアルデザインの大きなポイントは、
その1. 現実の物理法則を取り込む
その2. 印刷物向けデザインの基本要素を取り込む
その3. 連続性のある動き
その4. 厳密なルール
とされており、Googleが提唱する理論と、ガイドラインに沿っていないといけないようです。
Googleのガイドラインは、以下のサイトで説明されているので、興味がある方は、一度覗いていみると良いかと思います。
ガイドラインが厳格なので、クオリティーは担保されますが、自由度が低いために斬新さを感じることができないようです。
2014年6月にGoogleによって発表されたマテリアルデザインは、今もGoogleのサービスでは適用されているようです。
日本語できちんと説明してくれるサイトが無いんだよね…
スキューモーフィズムの復活・ニューモーフィズム
このような流れで、スキューモーフィズム→フラットデザイン→マテリアルデザイン
と進んできましたが、2020年以降は、スキューモーフィズムのリニューアル版とも呼べそうな、ニューモーフィズム（Neumorphism）が人気になるかも知れません。
ニューモーフィズムに関しては、また別の機会にお話できたらと思っています。
札幌のホームページ制作会社ディーエーオーの佐藤が書きました。
人気ブログランキングにも参加しています。
