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デザイントレンド総まとめ

    今年絶対チェックしたいデザインはコレ!


    View full-size slide

  2. 目次

    1. はじめに

    2. 流行りの”色”を大解剖

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

    4. 私らしさは”動き”から

    5. 見逃せない!”〇〇イズム”

    6. まとめ

    7. 諸連絡


    View full-size slide

  3. 1.はじめに

    目標

    ● “Web”について知ろう!

    ○ まずは見た目から


    ● 日々の暮らしに彩りを🧡💛💚💙💜

    ○ 日常から楽しさを感じる

    1
 2
 3
 4
 5
 6
 7


    View full-size slide

  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


    View full-size slide

  5. 2.流行りの”色”を大解剖

    Webデザインの

    流行りの色とは!?

    1
 2
 3
 4
 5
 6
 7

    ファッションだとパープルが流行りだとか

    View full-size slide

  6. 2.流行りの”色”を大解剖
 1
 2
 3
 4
 5
 6
 7

    2


    View full-size slide

  7. 2.流行りの”色”を大解剖

    理由

    ● 企業・製品・サービスに紐づく色は、ほぼ固定

    ○ ブランドカラー、コーポレートカラー

    ● Webデザインの色は↑に合った色を使用

    ● 事例

    ○ コカ・コーラ

    1
 2
 3
 4
 5
 6
 7

    3


    View full-size slide

  8. 2.流行りの”色”を大解剖

    まとめ

    ● Webデザインの流行りの色なし!

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

  9. 2.流行りの”色”を大解剖

    まとめ

    ● Webデザインの流行りの色なし!

    1
 2
 3
 4
 5
 6
 7

    とはいえ

    ● “色”単体の流行りはないが、色の使い方の流行りは有

    2
 3


    View full-size slide

  10. 2.流行りの”色”を大解剖

    色の使い方

    1. モノクローム

    2. グラデーション

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

  11. 2.流行りの”色”を大解剖

    モノクローム (monochrome)

    ● 白と黒のこと

    ● シンプルな印象

    ● 万能性◎

    ○ ブランドカラー、コーポレートカラー

    ○ お堅めのモノ、カジュアルなモノ

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

  12. 2.流行りの”色”を大解剖

    モノクローム (monochrome)

    ● ダークモード(ダークテーマ)

    ■ 黒を基調とした

    暗い画面

    ■ 目に優しい?

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

  13. 2.流行りの”色”を大解剖

    モノクローム (monochrome)

    ● 事例

    ● 多摩美術大学 総合デザイン学科

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

  14. 2.流行りの”色”を大解剖

    グラデーション(gradation)

    ● 色相※1
    、明度※2
    、彩度※3
    を徐々に変化させる表現

    ● 個性◎

    ● 立体感◎(色の濃い、薄い部分)

    1
 2
 3
 4
 5
 6
 7

    ※1 赤、青、黃などの色の違い。光の波長で変わる
    ※2 色の明るさ。高いほど白く、低いほど黒い
    ※3 色の鮮やかさ。高いほど色がはっきり、低いほどモノクロ
    2
 3


    View full-size slide

  15. 2.流行りの”色”を大解剖

    グラデーション(gradation)

    ● 事例

    ● Instagramアイコン※1

    ● M-ZEC

    1
 2
 3
 4
 5
 6
 7

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


    View full-size slide

  16. 2.流行りの”色”を大解剖

    まとめ

    ● Webデザインでは色使いの流行りがある

    ● モノクローム

    ○ 白黒

    ● グラデーション

    ○ 色の種類や明るさなどをだんだんと変える表現

    1
 2
 3
 4
 5
 6
 7

    2
 3


    View full-size slide

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

    Webデザインにおける文字

    ● タイポグラフィ(Typography)

    ○ 文字のサイズ、色、フォント、太さ

    ● Web Design is 95% Typography

    ○ 文字こそ最重要

    ○ 文字から情報を得ているから

    1
 2
 3
 4
 5
 6
 7


    View full-size slide

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

    「定番、決まっちゃいました」?

    ● 複数のパターンなし

    ● どのWebサイトも大概これ!

    1
 2
 3
 4
 5
 6
 7

    3


    View full-size slide

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

    「定番、決まっちゃいました」?

    1
 2
 3
 4
 5
 6
 7

    3

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


    View full-size slide

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

    タイトルはサイズ大きめ、太めの文字

    ● 現代人、忙しすぎ問題

    ● ぱっと見で印象的なキーワードがなければ

    ユーザーはサイトを離脱

    1
 2
 3
 4
 5
 6
 7

    ※ 1ページ前のものは悪い例です
    3


    View full-size slide

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

    タイトルはサイズ大きめ、太めの文字

    ● サイトを開いた時に、一番伝えたいことが

    視界に飛び込んでくる

    ● 第一印象※1
    でインパクト※2
    👊

    1
 2
 3
 4
 5
 6
 7

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


    View full-size slide

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

    タイトルはサイズ大きめ、太めの文字

    ● 事例

    ● BAKE

    1
 2
 3
 4
 5
 6
 7

    3


    View full-size slide

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

    まとめ

    ● タイトル、キャッチコピーなどの文章では

    文字を大きく太く

    ● ユーザーの記憶に残るようにする

    1
 2
 3
 4
 5
 6
 7

    3


    View full-size slide

  24. 4.私らしさは”動き”から

    Webデザインでの”動き”

    1. ページの動き 

    a. アニメーション

    b. インタラクティブ

    2. ユーザーの動き

    1
 2
 3
 4
 5
 6
 7


    View full-size slide

  25. 4.私らしさは”動き”から

    ページの動き

    ● アニメーション(animation)

    ○ ロゴ、イラスト、文字、画面全体などの動き

    ○ 動画の埋め込み

    ○ 動きによって表現が豊かに

    ■ 遊び心、イメージの醸成、メッセージ性など


    1
 2
 3
 4
 5
 6
 7

    ※ Web自体の技術の進化や PC, スマホの性能UPのおかげで動かせるようになった
    4


    View full-size slide

  26. 4.私らしさは”動き”から

    教科書的サイト

    ● 動くWebデザイン

    アイデア帳


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  27. 4.私らしさは”動き”から

    少しのアニメーション

    ● 事例

    ● カービィカフェ


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  28. 4.私らしさは”動き”から

    スクロールアニメーション

    ● 事例

    ● Pokemon LEGENDS アルセウス


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  29. 4.私らしさは”動き”から

    ストーリーテリング※1

    ● 事例

    ● AirPods Pro


    1
 2
 3
 4
 5
 6
 7

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


    View full-size slide

  30. 4.私らしさは”動き”から

    ページの動き

    ● インタラクティブ(interactive)

    ○ 対話、双方向

    ○ ユーザーの操作に合わせていろいろ動く


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  31. 4.私らしさは”動き”から

    自分の好きな方向へ移動

    ● 事例

    ● 東映リクルートサイト


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  32. 4.私らしさは”動き”から

    マウスカーソルも個性的

    ● 事例

    ● HUG


    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  33. 4.私らしさは”動き”から

    ユーザーの動き

    ● ユーザーの動きとは?

    ○ デザインによって、ユーザーの操作、感情、

    行動をコントロール※1

    ○ 認知心理学※2
    に基づく

    1
 2
 3
 4
 5
 6
 7

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


    View full-size slide

  34. 4.私らしさは”動き”から

    ユーザーの動き

    ● メンタルモデル

    ○ ○○が起きたら、××になるんだろうなぁ

    ○ ↑ユーザーの思い込み、信じているモノのこと


    ● 現実の例

    ○ ドアノブ -> 回して引くか押せば、ドアが開くだろう

    ○ 引き手(縦) -> 横にスライドすれば、ドアが開くだろう

    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  35. 4.私らしさは”動き”から

    ユーザーの動き

    ● アフォーダンス

    ○ 対象のモノがそれの使い方を説明

    ○ そのためユーザーは無意識に行動


    ● 現実の例

    ○ ドアノブ -> つかんで回してください!

    ○ 引き手(縦) -> 手をかけて引いてください!

    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  36. 4.私らしさは”動き”から

    ユーザーの動き

    ● Webデザインでの例

    ○ ボタン

    ■ 背景より出っ張っていて、明るい色になっていれば押せる
    モノ

    ● と、みんな思っている

    ● と、ボタン自身が説明している

    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  37. 4.私らしさは”動き”から

    まとめ

    ● アニメーションを使ってインタラクティブにすると

    表現力UP⤴⤴


    ● 認知心理学の理論をデザインに取り入れ

    ユーザーをコントロール

    1
 2
 3
 4
 5
 6
 7

    4


    View full-size slide

  38. 5.見逃せない!”〇〇イズム”

    そもそも・・・


    “○○イズム” is nani?

    1
 2
 3
 4
 5
 6
 7


    View full-size slide

  39. 5.見逃せない!”〇〇イズム”

    イズムとは

    (-ism)

    [1] 〘語素〙 おもに固有名詞の下につけて、…主義、…説、

    …教、の意を表わす。

    また、ふざけて、「ガッチリズム」「チャッカリズム」

    「ガンバリズム」などと使われることもある。

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  40. 5.見逃せない!”〇〇イズム”

    Webデザインでのイズム


    ● …主義、…説、…教

        ↓

    ● デザインの統一感、方針、雰囲気

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  41. 5.見逃せない!”〇〇イズム”

    近年流行、3大”○○イズム”


    1. ニューモーフィズム

    2. グラスモーフィズム

    3. クレイモーフィズム

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  42. 5.見逃せない!”〇〇イズム”

    ニューモーフィズム(Neumorphism)

    ● 影を使って凹凸を表現

    ● 質感があるのにシンプル

    ● 過去に流行ったもののいいとこ取り

    (スキューモーフィズム※1
    + フラットデザイン※2
    )

    1
 2
 3
 4
 5
 6
 7

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


    View full-size slide

  43. 5.見逃せない!”〇〇イズム”

    ニューモーフィズム(Neumorphism)

    ● 事例

    ● 博報堂


    ● 部品例

    ● その1

    ● その2

    ● その3

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  44. 5.見逃せない!”〇〇イズム”

    ニューモーフィズム(Neumorphism)

    ● 👍🙆

    ○ キレイ!カッコいい!スタイリッシュ!

    ○ 最小限、かつ効果的に魅了するデザイン


    ● 👎🙅

    ○ 視認性の悪さと紙一重

    ○ アクセシビリティ×

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  45. 5.見逃せない!”〇〇イズム”

    グラスモーフィズム(Glassmorphism)

    ● グラス = ガラス(すりガラス)

    ● 半透明 + ぼかした図形にテキストやボタン

    ● 透明度で階層(奥行き)を表現

    1
 2
 3
 4
 5
 6
 7

    ※ニューモーフィズムの生みの親が同じく発案
    5


    View full-size slide

  46. 5.見逃せない!”〇〇イズム”

    グラスモーフィズム(Glassmorphism)

    ● 事例

    ● ピュール


    ● 部品例

    ● その1

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  47. 5.見逃せない!”〇〇イズム”

    グラスモーフィズム(Glassmorphism)

    ● 👍🙆

    ○ キレイ!カッコいい!エレガント!

    ○ 階層がわかりやすく、没入感⤴⤴


    ● 👎🙅

    ○ 重ねすぎるとかっこわるい

    ○ 背景の重なり具合で視認性が悪くなる場合も

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  48. 5.見逃せない!”〇〇イズム”

    クレイモーフィズム(Claymorphism)

    ● クレイ = 粘土

    ● 3D風

    ○ メタバース※1
    、NFT※2
    などの相性バツグン

    ● 丸っこい質感 + 階層を同時に表現

    1
 2
 3
 4
 5
 6
 7

    ※1 現実世界を模したオンライン上の空間やそのプロジェクトのことなど
    ※2 世界で1つ(あるいは複数)だけしか存在しないことが保証されたデジタルファイルのこと
    5


    View full-size slide

  49. 5.見逃せない!”〇〇イズム”

    クレイモーフィズム(Claymorphism)

    ● 例(新しすぎて参考サイト発見できず...)

    ● 8 CSS Snippets That Bring Claymorphism to Life


    ● 参考

    ● Claymorphism in

    User Interfaces

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  50. 5.見逃せない!”〇〇イズム”

    クレイモーフィズム(Claymorphism)

    ● 👍🙆

    ○ kawaii!近未来的!フレンドリー!

    ○ 視認性ヨシ

    ○ イラスト、文字、ボタンなどいろいろなものに適用可

    ● 👎🙅

    ○ ポップすぎる

    ○ シンプルさ△

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  51. 5.見逃せない!”〇〇イズム”

    “イズム”トレンド年表


    1
 2
 3
 4
 5
 6
 7

    5

    2007
    スキューモーフィズム
    2014
    フラットデザイン
    マテリアルデザイン
    2020
    ニューモーフィズム
    2021
    グラスモーフィズム
    2022
    クレイモーフィズム

    View full-size slide

  52. 5.見逃せない!”〇〇イズム”

    まとめ

    1. ニューモーフィズム

    ○ 影で凹凸

    2. グラスモーフィズム

    ○ すりガラス

    3. クレイモーフィズム

    ○ 3D風

    1
 2
 3
 4
 5
 6
 7

    5


    View full-size slide

  53. 6.まとめ

    ● 色

    ○ モノクローム, グラデーション

    ● 文字

    ○ タイトルは大きく太めの文字

    ● 動き

    ○ 個性的な動きでブランドを表現

    ○ ユーザーの心を動かす

    ● イズム

    ○ ニューモーフィズム, グラスモーフィズム, クレイモーフィズム

    1
 2
 3
 4
 5
 6
 7


    View full-size slide