2023年ももう10日が過ぎましたが、お仕事始めは順調でしょうか？
お正月休み明けに3連休があったので、昨日からお仕事始めだった、という方も結構いらっしゃるようですね。
またも地元ネタで恐縮ですが、うちの事務所の比較的近隣にある「山田富士公園」では、お正月にもう梅が咲き始めておりまして、写真を撮って帰りました（2023年1月2日撮影）。
横浜市都筑区の横浜市営地下鉄グリーンライン「北山田」駅から徒歩4分の広々した公園ですが、日当たりが良いので梅の開花も早い様子。
新年の年明けから何だかめでたい気分が味わえたのですが、今回は新年である2023年のWebデザインの傾向と対策について書いてみたいと思います。
立体感を排除したシンプルな表現手法「フラットデザイン」
ここ10年ほどのWebサイト（つまりホームページ）のデザインの方向性といえば「フラットデザイン」。
デザイン業界の方でなくてもその名をお聞きになったことのある方は多いのではないでしょうか？
「フラットデザイン」とはその名の通り「平らなデザイン」で、立体感を排除したシンプルな表現手法です。
その流れはWebデザインの枠を飛び出して、カタログやパッケージデザインなどの印刷物にも影響しているほど。
自動車メーカーも会社のロゴ（エンブレム）を「フラットデザイン」にしているところが増えています。
MaaSやADAS、BEVなど、IT化を進める自動車業界にあっては、先進的なイメージづくりとしての「フラットデザイン」導入は必然なんだろうな、と思います。
急に衰退した？CGっぽい「スキュモーフィズム」なデザイン
話をホームページ制作の方に戻して「フラットデザイン」以前のWebデザインはどうだったのか？
というと昔の（2010年代前半くらいまでの）ホームページはボタンなどに盛り上がっているような陰影がついていたりして、いかにも「ここがボタンですよ！」という印象でした。
つまりこんな感じ↓↓↓です。
他にも背景に布目のテクスチャが敷いてあったり、金属や木目の質感を感じさせる装飾がなされていたりしていました。（立体感や質感の表現は画像で作った部品を使用）
こういうCGっぽい立体感や質感表現を使ったデザイン様式を
「スキュモーフィズム（skeuomorphism）」とか
「スキュモーフィックデザイン（skeuomorphic design）」と呼ぶのですが、最近はめっきり減少中。
（サイトの内容にもよりますが）
一時は「リッチデザイン」などとも呼ばれもてはやされたのですが、10年前あたりから急に衰退してしまいました。
「なんで？」というと「スマホ対応のため」ということになってます。
「スマホ対応」に最適だった「レスポンシブデザイン」
「スマホ対応」というと、以前は
「パソコン用のホームページ」と
「スマホ表示用のホームページ」をそれぞれ別に作って
「アクセスしてきたデバイス（機器）に合わせて振り分ける」というものもありました。
が、
最近は「一つのホームページ」でアクセスしてきたデバイスの「画面サイズに応じて表示スタイルを変える」タイプが主流。
こういうのを「レスポンシブデザイン」と呼びます。
その「レスポンシブデザイン」にするには、ボタンやら見出しやらの各要素がなるべくシンプルなものの方が扱いやすいのです。（作る側の事情ですが。。）
従来の「立体感のある画像を使用した装飾」だと実装面で難しかったり、工数が激増してしまったりと、現実的選択ではなかったので。
また、ネットを見る人も慣れてきて、いかにも「ここがボタンですよ！」という感じのボタンである必要が少なくなってきたというのもあると思います。
結果、余計な装飾を削ぎ落とした機能的な「フラットデザイン」はスッキリと洗練されたUI（ユーザーインターフェイス）の印象も獲得して、Webデザインの主流になりました。
2023年の現時点では、この流れはまだしばらくは続きそうです。
さらに進化する「フラットデザイン」は「2.0」に進化中
が、進化と変化の早いウェブの世界ですから、フラットデザインもさらに進化してきています。
主な変化としては
・新たな装飾表現の広がり
…というような点で変化しつつある状況。
フラットデザインの短所として、
「まっ平ら過ぎて文字とボタンの違いがわかりにくいことがある」
というものがあります。
そこでそれを補うように「ボタンはそれ自体はフラット」ながら「下に影がついて浮き上がっているように見える」とか、「アニメーションで変化をつける」などによってユーザビリティ（使い勝手）の向上をしようというのがここ数年の流れ。
これを「フラットデザイン2.0」と呼んだりします。
昔「Web2.0」という呼び名が盛んに言われた時期がありましたが（比較的短期間で消えましたが…）「フラットデザイン2.0」という呼称はまだ消えてない様子。
（さらに今度は「Web3（Web3.0）」というのも出てきています）
その「フラットデザイン2.0」は厳密な定義づけはないので、とりあえず真っ平らでなければ（影やグラデーションによる「立体っぽい」要素が入っていれば）「フラットデザイン2.0」と呼んでも良さそうです。
他にも最近のWebデザインのスタイルとしては、
ゴムの膜からボタンが突き出しているような「ニューモーフィズム（Neumorphism）」とか、
すりガラスを通したような「グラスモーフィズム（Glassmorphism）」、
ポップで柔らかな「クレイモーフィズム（Claymorphism）」（VRなどの3D空間での表示と相性が良いのだとか）などいろいろあります。
が、これらはデザインの「味付けの違い」のようなもので、サイトの内容や訴求したい内容に合わせて適切なものを選んで行けば宜しいのではないかと思います。
一方で、ウェブを見る人の使い勝手（ユーザビリティ）の視点という面で「ボタンその他の表現をきっちり統一化しよう」という試みがあって、こちらは「マテリアルデザイン」と呼ばれます。
Googleが提唱している「マテリアルデザイン」
Googleが提唱している「マテリアルデザイン」はフラットデザインの発展形・進化形と言えるものですが、色々と詳細な決まりがあって、これに従えば誰が作っても統一感のあるUI（操作するための画面表示）デザインとなります。
「フラットデザイン2.0」と似ていますが「厳密な規則がある」点が異なります。
フラットデザインのシンプルさは継承しつつも、現実世界の「厚さ」「奥行き」などの概念を取り入れることで、ユーザーがより直感的に、戸惑うことなく操作できるようにしようというものです。
そのためボタンに影が付いていたり、操作のメニューなどがカード状の窓の中にまとまって、少し浮いているように見えたりします。
現実世界の物理的特性をWebデザインに取り入れるという意味では「スキュモーフィズム」の再来と言えなくもなさそうですが、Googleの人に言わせると現実世界よりも人間の脳の根源的な認知システムに最適化しようとするもの、らしいです。
他にも色使いやアイコンと文字の関係など細々とした規則があります。表示の均質性・一貫性を確保することでユーザビリティを向上させようということですね。
UIとしては優れていると思いますし、デザイン的にも極めて適切な内容となっていますので、Webデザインをする人もホームページ作りを発注する人も「基礎知識」として知っておくことが望ましいと思います。
ただし「マテリアルデザイン」ではその均質性ゆえに他のサイトとの差別化はしにくくなる（何しろ厳格な規則の範囲でのデザインとなりますので）と言われています。
マテリアルデザインについては「UIの基本的手法の一つ」として認識はしつつも、サイトによりアレンジを入れていくのが「2023年現在のWebデザインの現状の最適解」であると言って宜しいかと思います。
フラットデザインの世界観との親和性が高い「アイソメトリックイラスト」
似たような傾向として、近頃は「アイソメトリックイラスト」というものが流行中。
日本語では「等角投影法」という名前の図法で、デザインや建築系の学生はみんなこれを習っていると思います。
3次元の空間表現図法として昔からあるスタイルで、特徴としてはタテ・ヨコ・斜めの線の角度がガッチリと決まっているために「消失点（vanishing point）」がない。つまり奥にあるものも手前にあるものも見た目のサイズが変化しないのです。
（「消失点」というのはこちらです↓↓↓）
実際の肉眼視では遠くにあるものは小さく見えるので、そういう意味では現実を意図的に一部すっ飛ばしているわけですが。。
その分この「アイソメトリックイラスト（等角投影法）」はモノの構造、構成、位置関係などを概念として捉えるには分かりやすい場合もあります。
また、「フラットデザイン」同様に「個性が出にくい」傾向があります。一定の規則性のもとに描くため、イラストの描き手による画風の違いが出にくいのです。
悪く言えば「没個性」ではあるのですが、表示の均質性・一貫性という面ではフラットデザインの世界観との親和性が高いようです。
そんなフラットデザインやアイソメトリックイラストですが「没個性」的だとは言いつつもこれも一つの表現手法ですので「流行は適切に取り入れつつ、どう使いこなすのかを工夫する」のが今後のWebデザイン制作のポイントかなと思います。