注目のWebデザイントレンド10選【2023】

注目のWebデザイントレンド10選【2023】

Miya

Miya

新年度も始まったということで、去年に引き続き注目トレンドのWebサイトをいっぱい見漁ってきました。

徐々に緩和されつつありますが、移動や外出が制限されていたこともあり、より刺激的な体験をインターネットに求める傾向がありました。また、社外だけではなく社内のコミュニケーションもオンラインが当たり前になっていることから、より効率的なコミュニケーションが模索されてきています。

AIを使ったサービスが爆発的に認知を広げていたりとさまざまな変化があるなかで、Webサイトはどう進化していくのでしょうか。妄想を膨らませながら見ていきましょう。

※今回こちらの記事を参考にしています。

こんなサイトをいつか作ってみたい!なら…
Webデザインについて効率的に学びたい誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。

01. Webアクセシビリティの向上

昨年インクルーシブデザインの話を取り扱いましたが、あらゆるユーザーへの均一的な体験の提供は引き続き求められています。

デジタル庁がウェブアクセシビリティ導入ガイドブックを公開したりと、ガイドラインへの準拠が徐々に当たり前になってくるのかもしれません。

アクセシビリティのガイドラインは「WCAG 2.0」と「JIS X 8341-3:2016」の2種類があり、いずれも国際基準として定められています。デジタル庁のものは「JIS X 8341-3:2016」に従ってわかりやすくまとめられているため、内容を把握しておく必要はあると思います。

特別な対応が必要というよりは、通常Webサイトを制作するにあたって当たり前に考慮すべきことの方が多いです。

South 40 SnacksSouth 40 Snacks
 

02. Y2K

Y2Kというのは今から20年前の2000年代初頭に流行した、または主流だったトレンドを現代に取り入れたスタイルになります。Webに限らず、ファッションなどの他の分野でも盛り上がりを見せており、トレンドの循環を感じている方も多いのではないでしょうか?

インターネット黎明期のようなデザインは、ノスタルジックながらも鮮烈な印象を残し、UXが成熟している現代のデザインとはまた違った良さを醸し出します。

Breaking The Code BarrierBreaking The Code Barrier
 

Holiday Marketing Strategy RebootHoliday Marketing Strategy Reboot
 

Now Playing on Poolsuite FM:  Close (Feat. Gavin Turek) by TuxedoNow Playing on Poolsuite FM: Close (Feat. Gavin Turek) by Tuxedo
※いきなりエモい音楽が流れる場合があります
 

FREAK MAG.FREAK MAG.
 

INTERNET ARCHIVEには2000年時点のWebサイトが記録されています。有名企業のWebサイトでは今の原型を感じられたりと、けっこう面白いのでおすすめです。

Apple(2000年2月)
Yahoo!Japan(2000年10月)
Google(2000年12月)

03. 没入型の3Dワールド

ゲームや専用施設で体験できていたようなコンテンツが、技術と表現力と通信強度が進化した結果、Web上でも体験ができるようになってきました。

はじめて訪れた場所やテーマパークのように知的好奇心が刺激され、あれもこれもと次々見てみたくなる衝動に駆られます。世界観がわかりやすくなり、ユーザーもテーマを理解しやすい表現方法だと感じました。

SHIFTBRAIN 20thSHIFTBRAIN 20th
 

Quai Network | Scaling Without CompromiseQuai Network | Scaling Without Compromise
 

Martech Trendbook | TOP-10 technology trends in marketingMartech Trendbook | TOP-10 technology trends in marketing
 

ZERO - Distribute the FutureZERO – Distribute the Future
 

kaonavi Town|3DCGによる未来の街を体験kaonavi Town|3DCGによる未来の街を体験
 

CyberBrokers | CyberBrokersCyberBrokers | CyberBrokers
 

04. オーバーラップするテキスト

大きく配置したテキストが他の要素に重なったり干渉したりと、一見自由に配置されているようなレイアウトが多くなりました。

「Webデザインは長い間グリッドの人質にされてきた」っていう参考元の言い回しが好きなんですが、均一に揃っていることは美しさに繋がるため仕方がないことだとは思います。ただ、個性をなくしてしまう要因でもあるため、こういったズラす手法が出てきたのだと思いました。

Tore S. Bentsen — PortfolioTore S. Bentsen — Portfolio
 

D.A.Consortium RECRUIT SITED.A.Consortium RECRUIT SITE
 

フロンティア株式会社 採用サイト | 色づけ、わたし。フロンティア株式会社 採用サイト | 色づけ、わたし。
 

Patta x TommyPatta x Tommy
 

CHIMJUNCHIMJUN
 

TO2KYO2TO2KYO2
 

05. パララックスズームスクロール

メインコンテンツとそれ以外でスクロール速度に差を設けて視差効果による奥行き感を感じさせるパララックス。今まではY軸方向(上下方向)での変化でしたが、Z軸方向(前後方向)での変化を取り入れた表現が出てきました。

前に進んでいるような感覚になるため、より没入感を演出でき、ひとつの映像作品を見ているようなリッチさも感じることができます。単純に直線で進むだけではなく、ジェットコースターのように進むものもあって個性の出し方にもいろいろ工夫ができそうです。

食文化ミュージアム食文化ミュージアム
 

LVMH PRIZELVMH PRIZE
 

DeSo - The Decentralized Social BlockchainDeSo – The Decentralized Social Blockchain
 

Give A Hand — AIGive A Hand — AI
※スタートを押すと音声が流れます
 

METACRAFTERSMETACRAFTERS
 

KPR | StoryKPR | Story
 

06. 人工知能

デザインのトレンドとはちょっと違う話ですが、AIがもたらすものが今後のトレンドを左右しそうだなと感じています。

今までは視聴履歴からのレコメンドだったり、チャットボットだったりと想像できる範囲内でのことが多かったですが、最近ではとんでもなくいろんなことができるようになっていました。

デザイナーの仕事をサポートする例でいえば、ブレストをしてくれたり、ペルソナを作ってくれたり、制作したコンポーネントから繰り返し部分を作ってくれたり、仕様書を自動で作ってくれたりと、本当にさまざまな活用方法が誕生しています。

学習させた内容とプロンプトによりますが、発想次第でいろいろなビジネスも誕生しそうでワクワクしますね。

Introducing ChatGPTIntroducing ChatGPT
 

Genius by DiagramGenius by Diagram
 

07. モバイルフレンドリーなデザイン

これは海外ではあまり見ない日本のWebサイトに多い表現方法だと思います。

トレンドとかじゃなくモバイルフレンドリーの需要は常に高いのですが、スマートフォンでの体験をPCにも移植したようなサイトを多く見かけるようになりました。中高生などはPC自体を持っていないという場合も多いため、ターゲットによってはとても有効な表現方法だと思います。

的外れだったらごめんなさいなんですが、実装自体も考慮することが絞れるので表現の方に時間を使えるんじゃないかと思っています。

美しいを髪からはじめよう。|SALONIA(サロニア)公式サイト美しいを髪からはじめよう。|SALONIA(サロニア)公式サイト
 

大竹栄養専門学校 | 栄養士に、まっすぐ。大竹栄養専門学校 | 栄養士に、まっすぐ。
 

2024年度定期採用|フェリシモ2024年度定期採用|フェリシモ
 

STYLERS(スタイラーズ)|inborn公式通販サイトSTYLERS(スタイラーズ)|inborn公式通販サイト
 

マイネオプランメーカー|格安スマホ・SIM【mineo(マイネオ)】
 

08. ユニークなカーソル

とくに指定しない場合、Webサイトではカーソルはブラウザの仕様に準拠しますが、カスタマイズをすることもできます。カーソルの画像を入れ替えて表現の一つとしたり、インタラクションに紐づけてUIの示唆として利用したりできます。

1つ目の参考にも挙げていますが、カラーがいつもと違うだけでもけっこう印象変わりますね。

TFTLTFTL
 

Pedro Matos Chaves · DesignPedro Matos Chaves · Design
 

おぱんちゅうさぎ | OPANCHU USAGI Officialおぱんちゅうさぎ | OPANCHU USAGI Official
 

TechFlag | ゲーム・ソフトウェア開発の自動化・効率化TechFlag | ゲーム・ソフトウェア開発の自動化・効率化
 

Premium Content Marketing for Digitally Native Brands | ParadamPremium Content Marketing for Digitally Native Brands | Paradam
 

09. カスタムされた書体

単一のフォントでタイポグラフィを構成するのではなく、複数フォントや文字の向き配色を組み合わせてオリジナリティの高いデザインに仕上げる手法です。

バランス感覚はかなり必要ですが、テキストがグラフィックの役割も担うため、要素を増やすことなくリッチな表現をすることができます。組み合わせ次第で無限にパターンを生み出せそうです。

USSR Design AlmanacUSSR Design Almanac
 

2022 Readymag Round-up. Streamlined collaboration
 

Segurado — Illustrator, Designer, and AnimatorSegurado — Illustrator, Designer, and Animator
 

Segurado — Illustrator, Designer, and AnimatorSegurado — Illustrator, Designer, and Animator
 

10. クレイモーフィズム

デフォルメされていたり、少し柔らかく優しい質感の3Dオブジェクトを使用したクリエイティブです。

Blenderなど無料で高品質なソフトのおかげで使用するクリエイターが増えたことも、トレンドに影響していると思います。

メインのオブジェクトとして利用されることが多いですが、ワンポイントとしての利用も個性が出て、印象に残るクリエイティブになります。

WanderJauntWanderJaunt
 

コクヨのヨコク | KOKUYOコクヨのヨコク | KOKUYO
 

IKEA Family CommunityIKEA Family Community
 

Panasonic ConnectPanasonic Connect
 

Echo Street CapitalEcho Street Capital
 

ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリーブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー
 

まとめ

去年はなかった技術が誕生していたり、Webの仕様もアップデートされていたりと、去年のトレンド記事から多くのことが変わっていますね。

革新的な技術と既存の技術が合わさることでのクリエイティブや、数十年前のトレンドが再解釈されて目新しい表現となっていたり、できることの広がりにとてもワクワクしています。

常にアンテナを張るのは大変ですが、関係なさそうな技術でも思わぬ発想に繋がることもありますので、がんばって追っていきましょう。

 

Webデザイナーを目指しませんか?

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」がおすすめです。弊社のスクールでは、Webデザインの基本からサイト制作のやり方まで、実践的なカリキュラムを採用。少しでも気になる方は、ぜひ公式サイトをご覧ください!

▼公式サイトはこちらから

▼スクールの概要がまとまっている資料のご請求はこちらから!

デジタルハリウッドSTUDIO by LIG

 
また、LIGではWebサイト制作をおこなっています。

上記で紹介しているサイトのなかにもいくつか弊社で制作したものがあり、トレンドをおさえたWebサイトはもちろん、何より貴社の課題を解決するサイトを本気で作成させていただきます。

ぜひ、お気軽にお問い合わせください。
Web制作の実績・料金を見てみる

この記事のシェア数

ITベンチャーにてWebサイト制作やECサイト運用などを経験後、LIGに転職。コーポレートサイトや採用サイトをメインに、多くの企業のWebサイト制作にデザイナー・アートディレクターとして従事。

このメンバーの記事をもっと読む
【テーマ別】Webデザインの参考アイデア集 | 10 articles