Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2022年Webデザイントレンド総まとめ

kei3524848
July 24, 2022

 2022年Webデザイントレンド総まとめ

社内勉強会で作った資料です。
Webサービスを提供するお仕事をしている身として、Webデザインについてもある程度は知っておきたいというところから開催しました。
2022年と言いつつ一昔前の内容や時代に左右されないことについても触れています。
要は直近のWebデザインの傾向をまとめたものです。
以下参考資料。
https://webflow.com/blog/web-design-trends-2022
https://designmodo.com/web-design-trends-2022/
https://www.creativebloq.com/features/web-design-trends-for-2022
https://www.edgeoftheweb.co.uk/blog/web-design-trends

kei3524848

July 24, 2022
Tweet

More Decks by kei3524848

Other Decks in Design

Transcript

  1. 2022年
 Webデザイントレンド総まとめ
 今年絶対チェックしたいデザインはコレ!


  2. 目次
 1. はじめに
 2. 流行りの”色”を大解剖
 3. “文字”の定番、決まっちゃいました
 4. 私らしさは”動き”から
 5.

    見逃せない!”〇〇イズム”
 6. まとめ
 7. 諸連絡

  3. 1.はじめに
 目標
 • “Web”について知ろう!
 ◦ まずは見た目から
 
 • 日々の暮らしに彩りを🧡💛💚💙💜
 ◦

    日常から楽しさを感じる
 1
 2
 3
 4
 5
 6
 7

  4. 1.はじめに
 参考
 • 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
 • 他いろいろ
 1
 2
 3
 4
 5
 6
 7

  5. 2.流行りの”色”を大解剖
 Webデザインの
 流行りの色とは!?
 1
 2
 3
 4
 5
 6
 7


    ファッションだとパープルが流行りだとか
  6. 2.流行りの”色”を大解剖
 1
 2
 3
 4
 5
 6
 7
 2


  7. 2.流行りの”色”を大解剖
 理由
 • 企業・製品・サービスに紐づく色は、ほぼ固定
 ◦ ブランドカラー、コーポレートカラー
 • Webデザインの色は↑に合った色を使用
 • 事例


    ◦ コカ・コーラ
 1
 2
 3
 4
 5
 6
 7
 3

  8. 2.流行りの”色”を大解剖
 まとめ
 • Webデザインの流行りの色なし!
 1
 2
 3
 4
 5
 6


    7
 2
 3

  9. 2.流行りの”色”を大解剖
 まとめ
 • Webデザインの流行りの色なし!
 1
 2
 3
 4
 5
 6


    7
 とはいえ
 • “色”単体の流行りはないが、色の使い方の流行りは有
 2
 3

  10. 2.流行りの”色”を大解剖
 色の使い方
 1. モノクローム
 2. グラデーション
 1
 2
 3
 4


    5
 6
 7
 2
 3

  11. 2.流行りの”色”を大解剖
 モノクローム (monochrome)
 • 白と黒のこと
 • シンプルな印象
 • 万能性◎
 ◦

    ブランドカラー、コーポレートカラー
 ◦ お堅めのモノ、カジュアルなモノ
 1
 2
 3
 4
 5
 6
 7
 2
 3

  12. 2.流行りの”色”を大解剖
 モノクローム (monochrome)
 • ダークモード(ダークテーマ)
 ▪ 黒を基調とした
 暗い画面
 ▪ 目に優しい?


    1
 2
 3
 4
 5
 6
 7
 2
 3

  13. 2.流行りの”色”を大解剖
 モノクローム (monochrome)
 • 事例
 • 多摩美術大学 総合デザイン学科
 1
 2


    3
 4
 5
 6
 7
 2
 3

  14. 2.流行りの”色”を大解剖
 グラデーション(gradation)
 • 色相※1 、明度※2 、彩度※3 を徐々に変化させる表現
 • 個性◎
 •

    立体感◎(色の濃い、薄い部分)
 1
 2
 3
 4
 5
 6
 7
 ※1 赤、青、黃などの色の違い。光の波長で変わる ※2 色の明るさ。高いほど白く、低いほど黒い ※3 色の鮮やかさ。高いほど色がはっきり、低いほどモノクロ 2
 3

  15. 2.流行りの”色”を大解剖
 グラデーション(gradation)
 • 事例
 • Instagramアイコン※1 
 • M-ZEC
 1


    2
 3
 4
 5
 6
 7
 ※1 インスタがゲームチェンジャーらしい、それ以前はダサいとされていた 2
 3

  16. 2.流行りの”色”を大解剖
 まとめ
 • Webデザインでは色使いの流行りがある
 • モノクローム
 ◦ 白黒
 • グラデーション


    ◦ 色の種類や明るさなどをだんだんと変える表現
 1
 2
 3
 4
 5
 6
 7
 2
 3

  17. 3.“文字”の定番、決まっちゃいました
 Webデザインにおける文字
 • タイポグラフィ(Typography)
 ◦ 文字のサイズ、色、フォント、太さ
 • Web Design is

    95% Typography
 ◦ 文字こそ最重要
 ◦ 文字から情報を得ているから
 1
 2
 3
 4
 5
 6
 7

  18. 3.“文字”の定番、決まっちゃいました
 「定番、決まっちゃいました」?
 • 複数のパターンなし
 • どのWebサイトも大概これ!
 1
 2
 3
 4


    5
 6
 7
 3

  19. 3.“文字”の定番、決まっちゃいました
 「定番、決まっちゃいました」?
 1
 2
 3
 4
 5
 6
 7
 3


    とにかくサイズが 大きくて太めの文 字を使う!!

  20. 3.“文字”の定番、決まっちゃいました
 タイトルはサイズ大きめ、太めの文字
 • 現代人、忙しすぎ問題
 • ぱっと見で印象的なキーワードがなければ
 ユーザーはサイトを離脱
 1
 2
 3


    4
 5
 6
 7
 ※ 1ページ前のものは悪い例です 3

  21. 3.“文字”の定番、決まっちゃいました
 タイトルはサイズ大きめ、太めの文字
 • サイトを開いた時に、一番伝えたいことが
 視界に飛び込んでくる
 • 第一印象※1 でインパクト※2 👊
 1


    2
 3
 4
 5
 6
 7
 ※1 アンカーバイアス。最初の情報を他のものより重要視する ※2 太めでなくても、特徴的なフォントでインパクトを与えるケースも有 3

  22. 3.“文字”の定番、決まっちゃいました
 タイトルはサイズ大きめ、太めの文字
 • 事例
 • BAKE
 1
 2
 3
 4


    5
 6
 7
 3

  23. 3.“文字”の定番、決まっちゃいました
 まとめ
 • タイトル、キャッチコピーなどの文章では
 文字を大きく太く
 • ユーザーの記憶に残るようにする
 1
 2
 3


    4
 5
 6
 7
 3

  24. 4.私らしさは”動き”から
 Webデザインでの”動き”
 1. ページの動き 
 a. アニメーション
 b. インタラクティブ
 2.

    ユーザーの動き
 1
 2
 3
 4
 5
 6
 7

  25. 4.私らしさは”動き”から
 ページの動き
 • アニメーション(animation)
 ◦ ロゴ、イラスト、文字、画面全体などの動き
 ◦ 動画の埋め込み
 ◦ 動きによって表現が豊かに


    ▪ 遊び心、イメージの醸成、メッセージ性など
 
 1
 2
 3
 4
 5
 6
 7
 ※ Web自体の技術の進化や PC, スマホの性能UPのおかげで動かせるようになった 4

  26. 4.私らしさは”動き”から
 教科書的サイト
 • 動くWebデザイン
 アイデア帳
 
 1
 2
 3
 4


    5
 6
 7
 4

  27. 4.私らしさは”動き”から
 少しのアニメーション
 • 事例
 • カービィカフェ
 
 1
 2
 3


    4
 5
 6
 7
 4

  28. 4.私らしさは”動き”から
 スクロールアニメーション
 • 事例
 • Pokemon LEGENDS アルセウス
 
 1


    2
 3
 4
 5
 6
 7
 4

  29. 4.私らしさは”動き”から
 ストーリーテリング※1 
 • 事例
 • AirPods Pro
 
 1


    2
 3
 4
 5
 6
 7
 ※ Webサイト1ページが1つの物語のようになっている 4

  30. 4.私らしさは”動き”から
 ページの動き
 • インタラクティブ(interactive)
 ◦ 対話、双方向
 ◦ ユーザーの操作に合わせていろいろ動く
 
 1


    2
 3
 4
 5
 6
 7
 4

  31. 4.私らしさは”動き”から
 自分の好きな方向へ移動
 • 事例
 • 東映リクルートサイト
 
 1
 2
 3


    4
 5
 6
 7
 4

  32. 4.私らしさは”動き”から
 マウスカーソルも個性的
 • 事例
 • HUG
 
 1
 2
 3


    4
 5
 6
 7
 4

  33. 4.私らしさは”動き”から
 ユーザーの動き
 • ユーザーの動きとは?
 ◦ デザインによって、ユーザーの操作、感情、
 行動をコントロール※1 
 ◦ 認知心理学※2

    に基づく
 1
 2
 3
 4
 5
 6
 7
 ※1 UX(ユーザーエクスペリエンス )に関連。ユーザーがサイトを通して得られる体験 ※2 たくさんあるので、今回は代表的なモノを 2つ紹介 4

  34. 4.私らしさは”動き”から
 ユーザーの動き
 • メンタルモデル
 ◦ ◦◦が起きたら、××になるんだろうなぁ
 ◦ ↑ユーザーの思い込み、信じているモノのこと
 
 •

    現実の例
 ◦ ドアノブ -> 回して引くか押せば、ドアが開くだろう
 ◦ 引き手(縦) -> 横にスライドすれば、ドアが開くだろう
 1
 2
 3
 4
 5
 6
 7
 4

  35. 4.私らしさは”動き”から
 ユーザーの動き
 • アフォーダンス
 ◦ 対象のモノがそれの使い方を説明
 ◦ そのためユーザーは無意識に行動
 
 •

    現実の例
 ◦ ドアノブ -> つかんで回してください!
 ◦ 引き手(縦) -> 手をかけて引いてください!
 1
 2
 3
 4
 5
 6
 7
 4

  36. 4.私らしさは”動き”から
 ユーザーの動き
 • Webデザインでの例
 ◦ ボタン
 ▪ 背景より出っ張っていて、明るい色になっていれば押せる モノ
 •

    と、みんな思っている
 • と、ボタン自身が説明している
 1
 2
 3
 4
 5
 6
 7
 4

  37. 4.私らしさは”動き”から
 まとめ
 • アニメーションを使ってインタラクティブにすると
 表現力UP⤴⤴
 
 • 認知心理学の理論をデザインに取り入れ
 ユーザーをコントロール
 1


    2
 3
 4
 5
 6
 7
 4

  38. 5.見逃せない!”〇〇イズム”
 そもそも・・・
 
 “◦◦イズム” is nani?
 1
 2
 3
 4


    5
 6
 7

  39. 5.見逃せない!”〇〇イズム”
 イズムとは
 (-ism)
 [1] 〘語素〙 おもに固有名詞の下につけて、…主義、…説、
 …教、の意を表わす。
 また、ふざけて、「ガッチリズム」「チャッカリズム」
 「ガンバリズム」などと使われることもある。
 1


    2
 3
 4
 5
 6
 7
 5

  40. 5.見逃せない!”〇〇イズム”
 Webデザインでのイズム
 
 • …主義、…説、…教
     ↓
 • デザインの統一感、方針、雰囲気
 1
 2


    3
 4
 5
 6
 7
 5

  41. 5.見逃せない!”〇〇イズム”
 近年流行、3大”◦◦イズム”
 
 1. ニューモーフィズム
 2. グラスモーフィズム
 3. クレイモーフィズム
 1


    2
 3
 4
 5
 6
 7
 5

  42. 5.見逃せない!”〇〇イズム”
 ニューモーフィズム(Neumorphism)
 • 影を使って凹凸を表現
 • 質感があるのにシンプル
 • 過去に流行ったもののいいとこ取り
 (スキューモーフィズム※1 +

    フラットデザイン※2 )
 1
 2
 3
 4
 5
 6
 7
 ※1 現実のものに寄せたデザイン , 最初期のiPhoneのアイコンとか ※2 立体感を省きわかりやすさ重視 , Windows8のタイルとか 5

  43. 5.見逃せない!”〇〇イズム”
 ニューモーフィズム(Neumorphism)
 • 事例
 • 博報堂
 
 • 部品例
 •

    その1
 • その2
 • その3
 1
 2
 3
 4
 5
 6
 7
 5

  44. 5.見逃せない!”〇〇イズム”
 ニューモーフィズム(Neumorphism)
 • 👍🙆
 ◦ キレイ!カッコいい!スタイリッシュ!
 ◦ 最小限、かつ効果的に魅了するデザイン
 
 •

    👎🙅
 ◦ 視認性の悪さと紙一重
 ◦ アクセシビリティ×
 1
 2
 3
 4
 5
 6
 7
 5

  45. 5.見逃せない!”〇〇イズム”
 グラスモーフィズム(Glassmorphism)
 • グラス = ガラス(すりガラス)
 • 半透明 + ぼかした図形にテキストやボタン


    • 透明度で階層(奥行き)を表現
 1
 2
 3
 4
 5
 6
 7
 ※ニューモーフィズムの生みの親が同じく発案 5

  46. 5.見逃せない!”〇〇イズム”
 グラスモーフィズム(Glassmorphism)
 • 事例
 • ピュール
 
 • 部品例
 •

    その1
 1
 2
 3
 4
 5
 6
 7
 5

  47. 5.見逃せない!”〇〇イズム”
 グラスモーフィズム(Glassmorphism)
 • 👍🙆
 ◦ キレイ!カッコいい!エレガント!
 ◦ 階層がわかりやすく、没入感⤴⤴
 
 •

    👎🙅
 ◦ 重ねすぎるとかっこわるい
 ◦ 背景の重なり具合で視認性が悪くなる場合も
 1
 2
 3
 4
 5
 6
 7
 5

  48. 5.見逃せない!”〇〇イズム”
 クレイモーフィズム(Claymorphism)
 • クレイ = 粘土
 • 3D風
 ◦ メタバース※1

    、NFT※2 などの相性バツグン
 • 丸っこい質感 + 階層を同時に表現
 1
 2
 3
 4
 5
 6
 7
 ※1 現実世界を模したオンライン上の空間やそのプロジェクトのことなど ※2 世界で1つ(あるいは複数)だけしか存在しないことが保証されたデジタルファイルのこと 5

  49. 5.見逃せない!”〇〇イズム”
 クレイモーフィズム(Claymorphism)
 • 例(新しすぎて参考サイト発見できず...)
 • 8 CSS Snippets That Bring

    Claymorphism to Life
 
 • 参考
 • Claymorphism in
 User Interfaces
 1
 2
 3
 4
 5
 6
 7
 5

  50. 5.見逃せない!”〇〇イズム”
 クレイモーフィズム(Claymorphism)
 • 👍🙆
 ◦ kawaii!近未来的!フレンドリー!
 ◦ 視認性ヨシ
 ◦ イラスト、文字、ボタンなどいろいろなものに適用可


    • 👎🙅
 ◦ ポップすぎる
 ◦ シンプルさ△
 1
 2
 3
 4
 5
 6
 7
 5

  51. 5.見逃せない!”〇〇イズム”
 “イズム”トレンド年表
 
 1
 2
 3
 4
 5
 6
 7


    5
 2007 スキューモーフィズム 2014 フラットデザイン マテリアルデザイン 2020 ニューモーフィズム 2021 グラスモーフィズム 2022 クレイモーフィズム
  52. 5.見逃せない!”〇〇イズム”
 まとめ
 1. ニューモーフィズム
 ◦ 影で凹凸
 2. グラスモーフィズム
 ◦ すりガラス


    3. クレイモーフィズム
 ◦ 3D風
 1
 2
 3
 4
 5
 6
 7
 5

  53. 6.まとめ
 • 色
 ◦ モノクローム, グラデーション
 • 文字
 ◦ タイトルは大きく太めの文字


    • 動き
 ◦ 個性的な動きでブランドを表現
 ◦ ユーザーの心を動かす
 • イズム
 ◦ ニューモーフィズム, グラスモーフィズム, クレイモーフィズム
 1
 2
 3
 4
 5
 6
 7