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. 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

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


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

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

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

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

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

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


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

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


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

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


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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


    5
 2007 スキューモーフィズム 2014 フラットデザイン マテリアルデザイン 2020 ニューモーフィズム 2021 グラスモーフィズム 2022 クレイモーフィズム
  18. 6.まとめ
 • 色
 ◦ モノクローム, グラデーション
 • 文字
 ◦ タイトルは大きく太めの文字


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