2022年Webデザイントレンド総まとめ(社内勉強会)

概要

タイトルの内容で社内勉強会を以前開いたので、そのレポートを残します。
2022年と言いつつ一昔前の内容や時代に左右されないことについても触れています。
要は直近のWebデザインの傾向をまとめたものです。
ちなみに私自身はwebデザイナーでもなんでもないです。

参考資料

• 22 inspiring web design trends for 2022
• Top Web Design and UI Trends for 2022
• 6 standout web design trends set to make waves in 2022
• 10 web design trends you need to know in 2022

参考資料からわかる通り、「2022 web design trend」とかその辺りのキーワードでググって出てきた記事を読んで、それをまとめた感じの内容です。

全1回、60分の構成で実施しました。
リアルタイム参加者は20名前後です。

目的

Webサービスを提供するお仕事をしている身として、「Web」に関する知識は身につけておいたほうがよいというところが出発点です。
その中でもWebデザインについてもある程度は知っておきたいというところから開催しました。

• 「Web」といっても技術的な内容を学ぼうとするとなかなかとっつきにくいところもあるので、まずは見た目のことからなら目に見えるのでイメージも湧きやすいはず。
• 普段、業務以外でもWebのサービスを使ったりやページを見たりす機会が多い（はず）なので、意匠を知ることでより楽しくWebサービスを使うことができるようになるのでは？
• Webデザインに限らず、この世にあるありとあらゆるものがどうしてそういう形、見た目、色なのかを想像できるようになると、日常生活も楽しくなりそう。
• 社内でデザインに関する知識を共有するチャットの部屋があったけど、最近全然活発じゃないからもっと活動してくれ😡😡

というところでWebデザインの勉強会を開きました。

内容

目次

メインとなるトピックのタイトルは、ファッション雑誌の見出しをオマージュしてみました。
デザインというのは色や見た目だけでなく、文章にも当てはまるということを伝えたかったためです。
それとちょっとした遊び心ですねｗ

• 「流行り」というキーワードは頻出。ファッション以外のジャンルでも雑誌の見出しではよく使われています。
• 「決まっちゃいました」という決めつけ。これで対象のものがマストであるかのように煽る目的で使われます。
• かといって流行や定番だけをプッシュしても画一的で個性がなくなります。「私らしさ」とか「自己流」とかで個性を出すための秘訣を教えようとします。
• 「見逃せない」みたいなキーワードから限定感が出ます。みんな限定モノには弱いです。

上記のような意図で「それっぽさ」を表現してみました。

流行りの”色”を大解剖

Webデザインの色にまつわるお話をしました。
ファッション界隈だとパープルが流行りらしいですが、Webデザイン界隈だとどうなのか？

答えは「流行りはない」です。

例えばその年の流行りが青色だったからといって、コカ・コーラが青色を積極的に押し出すかというと多分そうはならないでしょう。
ペプシのイメージになっちゃいますからね。
企業やサービスにはそれに紐づく色があり、それをころころと変えてしまうことは稀というわけです。

ただ、色使いについては流行りがあるというところです。
最近の流行りはモノクロームとグラデーションです。

細かい説明はスライドの通りです。

“文字”の定番、決まっちゃいました

Webデザインの文字にまつわるお話をしました。

Web Design is 95% Typographyでは文字こそが最重要だと指摘しています。
いかに写真や図形などが効果的に配置されていたとしても、人が情報を得る際は文字を読むからです。

そんな重要な文字=タイポグラフィですが、最近はタイトルを大きく太字にするという傾向が強いです。
パっと見で印象的なキーワードが表示されることで、ユーザーの興味を引きサイトの離脱を防ぐということですね。

私らしさは”動き”から

Webデザインの動きにまつわるお話をしました。

動きの種類はページの動きとユーザーの動きの2種類です。
勉強会では尺の都合でページの動きしか紹介しきれませんでした。

ページの動きとはつまりアニメーションのことです。
最近はソフトとハードともに技術的に進化していますので、10年前とは比べようものないほどいろいろ動いて表現の幅が広がっています。

事例の紹介として以下のようなものをあげました。

• 動くWebデザインアイデア帳には教科書的にいろいろなアニメーションが紹介されています。
• カービィカフェのサイトでは、「ページのトップに戻るボタン」が用意されています。
  • こちらをクリックするとページのリロードだったり単純にスクロールしたりということではなく、カービィがワープスターに乗って上に昇っていき、それに合わせて画面がスクロールします。
  • 遊び心とカービィというブランドがうまく表現されたアニメーションです。
• Pokemon LEGENDS アルセウスのサイトでは、画面のスクロールが途中から横スクロールに変化します。
  • 和風な舞台設定であることから、どこか巻物っぽい印象を与えてくれます。
  • ゲームのイメージに合わせたアニメーションということですね。
• AirPods Proのサイトでは、スクロールしていくと画面の下に移動していくのではなく、映像が流れていくような作りになっています。
  • 製品の特徴を物語仕立てで展開していく表現です。
  • 最後までスクロールしてみてみたいと思わせる作りですね。
• 東映リクルートサイトは全方向に動かすことができる作りになっています。
  • まるで一枚の大きなチラシを開いて見ているかのような印象を与えてくれます。
  • 自由度があるので情報を探し出す楽しさも湧いてきそうですね。
• HUGのサイトでは、マウスカーソルが絵文字になっていて、時間で切り替わっていきます。
  • 画面上でクリックすると絵文字に合わせたメッセージが出てきて面白いです。
  • 内容に合わせてカーソルの絵文字が変わるところもあり、イメージがより湧きやすいデザインです。

続いてユーザーの動きについてです。
デザインによってユーザーの動きをコントロールすることができるというお話です。
認知心理学の知識をWebデザインに落とし込むことで、上記のようなことを実現させようとしています。

代表的なものとしてメンタルモデルとアフォーダンスをあげています。
これはWebデザインに限らない内容ですね。
細かい内容はスライド参照。

見逃せない！”〇〇イズム”

Webデザインのイズムにまつわるお話をしました。

イズム＝デザインの統一感とか雰囲気という意味ですね（ざっくり）
最近ではニューモーフィズム、グラスモーフィズム、クレイモーフィズムの三種類があげられます。
それぞれメリット・デメリットがあり、一概にどれが優れているとは言えません。
ただ、ニューモーフィズムはアクセシビリティの観点から最近は敬遠されがちらしいです。

クレイモーフィズムは流行っているというより、流行りそうといったところですね。
メタバースが流行れば…ってところだと思います。

その他

尺的に説明しきれなかった内容もあります。

例えば色や形については、ユニセックスな傾向があります。
男性でもピンク色や柔らかい形が好きでもいいし、女性でも濃い青色やドクロとか炎とかの形が好きでもいい。
ターゲットが男性or女性のどちらかに絞っていたとしても、今までのステレオタイプな色や形を使うことは必ずしも望ましくないということですね。

アクセシビリティもかなり重要な要素になってきています。
色覚異常者向けに色を変えられるオプションを用意するといった、バリアフリーが求められることもあります。
また、事例としてビヨンセの公式サイトが全盲のファンから訴えられるということも起きています。
今後はよりいろいろな人に対して「優しい」デザインが必要になる世界になっていくのかもしれません。
「ハーモニー」の世界が現実味を帯びてきているのかも？

抽象的な形も最近の流行りですね。
グラデーションとの相性もよく、おしゃれさやスタイリッシュさの演出に向いています。

反省

アンケートで気になった意見を以下にピックアップします。
それに対する回答も記載します。

• スライドにアニメーションを取り入れてみては？
  • 面倒なので入れていませんｗ
  • アニメーションも入れようとすると、スライドを作る時間がさらに増えるので入れたくないのが正直なところです。
• 勉強会のKPIにもよるが、時間を短く回数を増やしてみるのはどうか
  • 一理あります。
  • ネタが思いつけばもっと開催したいところです。
  • 今回のデザインの内容を複数回に分けるという方法も取れますが、シリーズっぽくなってしまうと1回参加できないと次はいいかという感じになってしまうので、そこが悩みどころです。
  • ライトニングトークで開催するのも検討したいです。
• わかりやすい事例が多かった、実際のサイトの具体例がたのしかったなど。
  • 実例を探すのにも結構時間がかかりました。
  • 楽しんでもらえたようでなによりでした。
• 知らずに触れているものがたくさんあることがわかった、デザインはあまり興味がないカテゴリーだったが興味付ができたなど。
  • 興味を持つきっかけとなったようで嬉しい限りです。

今回も英文記事元ネタですね。
1つだけだと内容が偏るので、いくつかから参照しました。
その結果、1時間で収めるには内容過多な感じになってしまいました。
相変わらずタイムマネジメントが課題といったところです。

以上、社内勉強会のレポートでした。