123
79

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【2026年】UIトレンドを調べてみた

Posted at

2026年のUIデザイントレンドを知りたい

2026年のUIデザイントレンドは、何なのか!?
各サイトで言及されていたもので共通していたことをまとめました :pencil:

参考にしたサイトは、記事の最後に記載しています。
ぜひ詳しく読んでみてください :thumbsup:

不完全さ・アナログ・人間味

AI技術が進化し、洗練されたビジュアルが容易に作れるようになった反動として、人間らしさや手触り感を重視する傾向が強まっているよう :eyes:

Canvaのレポートではこれを「デザインされた不完全(Designed Imperfection)」と呼び、完璧すぎない「揺らぎ」や「個性」を取り戻す動きであるとしています。

  • DIYやコラージュ、スクラップブック風のスタイル
    • ステッカー、破れた紙のテクスチャ、手書き文字など
    • 手作り感
  • きっちり並べないレイアウト(アンチグリッド)
    • 機械的な整然さを崩す
    • 写真やテキストを少し斜めに配置したり、重ねたりする
  • 自然を感じる雰囲気や質感

:mag: Dribbbleなどで、以下のキーワードで検索すると、参考がありそうです :eyes:
UIまるまる参考にはならないかもですが、モチーフを取り入れてみるのは良さそうです!

  • Designed Imperfection

image.png

  • Collage UI

image.png

  • Handcrafted Web Design

image.png

  • Scrapbook Aesthetic

image.png

触覚的な質感・没入感

画面越しでも「触れられそう」なリアルな質感や、空間を感じさせる奥行きが重視されています。

  • ノイズ・ざらっとした質感
  • ぷっくり質感
  • スクロールアニメーションによる没入体験
    • スクロール操作に連動したり、奥行きのある3D空間を移動するような演出など

:mag: Dribbbleなどで、以下のキーワードで検索すると、参考がありそうです :eyes:

  • Tactile Maximalism

image.png

  • 3D Web Design

image.png

  • Scrollytelling

image.png

  • Claymorphism

image.png

  • Grainy Gradient

image.png

進化したニューモーフィズム・グラスモーフィズム

かつての流行スタイルが、アクセシビリティや表現力を向上させて再登場しているようです!
特に「ネオグラスモーフィズム」や「ニューモーフィズム 2.0」は注目 :eyes:

  • ニューモーフィズム 2.0
    • 初期のニューモーフィズムで課題だったコントラスト比不足を解消
    • 柔らかい影と光で「押せそう」な触覚的リアリティを表現
  • リアルなガラス・液体表現(ネオグラスモーフィズム)
    • 従来のすりガラス効果に+「光の屈折、反射、液体の揺らぎ」をリアルに再現
    • より物理的な奥行きを感じさせる
  • ソフトシャドウと浮遊感
    • 完全なフラットではなく、要素に淡い影をつけて浮遊感を持たせる

:mag: Dribbbleなどで、以下のキーワードで検索すると、参考がありそうです :eyes:

  • Neumorphism 2.0

image.png

  • Glassmorphism UI

image.png

  • Frosted Glass Effect

image.png

  • Liquid UI

image.png

ダイナミックなタイポグラフィ

文字を主役にしたデザインが増えているよう :eyes:
「見る・感じる」対象として、動きやインタラクションを伴うタイポグラフィがアツい。

  • 動く文字
    • スクロールやマウスの動きに合わせて文字が動く
      • 伸縮、波打つ、変形などのアニメーション
  • 極太・カスタムフォントの大胆な配置
    • 画面からはみ出すくらいの巨大な文字
    • 力強いメッセージ性を感じる配置
  • 空間に溶け込む文字
    • 3D空間の中にテキストを配置したり、テクスチャと融合させたりする

:mag: Dribbbleなどで、以下のキーワードで検索すると、参考がありそうです :eyes:
タイポグラフィを大胆に使うサイトは、コントラスト比が高くパキッとした配色が相性良いみたい!

  • Kinetic Typography

image.png

  • Big Bold Typography

image.png

  • Motion Type

image.png

  • Variable Fonts

image.png

レトロ×未来

過去のデザインスタイルへのノスタルジーと、現代の最新技術(3Dなど)を融合させた「レトロフューチャー」なスタイル(個人的に好き)

  • ドット絵(ピクセルアート)、原色に近いネオンカラー、初期のWindowsのようなUIパーツなど
  • レトロフューチャリズム
    • 金属の質感、サイバーパンクな色彩、グリッチノイズなど
    • 現代の3D技術で表現
  • ノスタルジーと現代的レイアウトの融合
    • 80〜90年代のポップな色使いやモチーフ×現代的なレイアウトや動き

:mag: Dribbbleなどで、以下のキーワードで検索すると、参考がありそうです :eyes:

  • Retrofuturism

image.png

  • Y2K UI

image.png

  • Pixelart website

image.png

  • 90s Nostalgia UI

image.png

  • Vaporwave UI

image.png

最後に

今回は2026年トレンドになりそうなUIデザインについて、調べてみました!

全て取り入れることは難しいですが、エッセンスを取り入れてトレンド感のあるデザインを作っていきたいです :thumbsup:

参考

123
79
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
123
79

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?