最新Webデザイントレンド9選｜2023年版【デザイナー監修】
この記事は2021年12月22日に公開、2023年1月30日に更新しています。
個人事業主、ブログ、ネットショップなど、サイトの種類を問わずオンラインプレゼンスを効果的に確立するなら、トレンドを捉えた魅力的な Web デザインを作り込むことが大切です。新進気鋭の Web デザイナーやプロのクリエイターなど、個人や仕事でホームページを作成することがあるなら、毎年の Web デザインのトレンドはおさえておきたいですよね。
この記事では、Wix のマーケティングデザインを統括するイフタハ・コロニオ（Yiftach Koronio）の監修のもと、2023 年の Web デザイントレンドを徹底的に解説します。 これらのトレンドが生まれた背景、与える影響、そしてユーザーがそれぞれの Web デザインに応用するコツを紐解いていきましょう。
2023年注目のWebデザイントレンド
SNS や AI が社会的な影響を増す中、これらに対するユーザーの反応は世代ごとに異なります。今後はターゲットとする世代ごとに、異なる Web デザインアプローチが必要になるかもしれません。ミレニアル世代がミニマリズムを好むのに対して、Z 世代は流行に敏感で流行りのポップなデザインを好みます。最近の Web デザイントレンドは、そんな Z 世代の好みがより強く反映されています。
Wix はすべてのサイトで業界トップクラスのインフラを提供し、あらゆるサイトのパフォーマンス維持を実現していますが、それでもデザインの容量が大きすぎるとサイトの表示速度が遅くなる可能性があります。トレンドを取り入れたおしゃれなデザインに仕上げるだけでなく、機能性も両立できるように、画像や Web フォントなどメディアの最適化といった対策も行っておきましょう。
Wix のデザイナーは、ユーザーのみなさんが最新のデザイントレンドを取り入れられるように、 Wix エディタのデザイン素材を日々アップデートしています。
他にも、Wix のオンラインコースなら、Web デザイン講座から、Wix エディタの便利なデザイン機能の活用方法まで学ぶことができます。ぜひチェックしてみましょう。
しかし、一番重要なのはユーザー自身が「ブランドアイデンティティを守りつつ、常にデザイントレンド取り入れサイトをアップデートし続ける」という意識をもつことです。さぁ、Web サイトをアップデートする準備はできましたか？いよいよ今年のデザイントレンドを見ていきましょう。
800種類以上の無料テンプレートが自由に使える
目次
今回記事を監修した Web デザインのエキスパート Wix デザイナーの 3 名
アディ・フリ：Wix ビジュアルイノベーション、クリエイティブプロダクトマネージャー
イフタハ・コロイノ：SNS・ブログデザイン部門責任者
モラン・カデシ：Wix コンテンツ戦略チームリーダー
おすすめ参考記事▶︎ Web デザインとは？初心者が抑えるべき基礎とコツを解説
01. 2000年代のリバイバル：平成レトロ
Y2K（ワイツーケー：Year 2,000 ）が Web デザイン界で存在感を増しています。平成ファッションの再燃や「たまごっち」「ルーズソックス」のリバイバルなど、この流行は留まるところを知りません。
イフタハ：「ミレニアル世代に刺さる「エモさ」や、これまで感じることのできなかった楽観的な考え方が人気の引き金となりトレンドとなっています。この傾向は 2023 年も引き続き見られるでしょう」
生まれたばかりのテクノロジーへの興奮や楽観的な未来主義を表現する、印象的なデザインがリバイバルしています。したがって、今年の Web デザインのビジュアルは、鮮やかでそれぞれぶつかり合うぐらい個性的な色（ホットピンク、メタリック、パープル、イエローなど）が挑戦的に使われるでしょう。さらに、 Flash が使われていた時代のテクノロジーや平成初期のアニメ風アートなど、アナログでどこか懐かしいデザインが人気を博しそうです。 たとえば、カート・チャンピオン（Kurt Champion）さんや Aroke1 Studio のようなデザイナーは、高度なツールを駆使してこのアナログ感を見事に表現しています。Web 1.0 時代のダイヤルアップインターネットでは決して扱うことのできなかった、コントラストの強いカラーや緻密な Flash スタイルのアニメーションで、 Web サイト黎明期のサイトデザインを、少し皮肉交じりに、しかししびれるほどクールなセンスで完成させています。
Y2K のデザインを取り入れた Shiqian Pan's のデザインポートフォリオ
02. リアリスティック素材
ここ数年、デザイン界には「触覚」というテーマが再来していました。たとえば、2022 年の Web デザインのトレンドには、直接手で触れられそうなほどリアルなデザインパーツがランクインしていました。3D テクノロジーの進化と 2023 年の「More is more（多ければ多いほど良い）」の精神を踏襲し、今後はデジタルスペースにとんでもなく現実的な要素を持ち込むデザイナーが増えることでしょう。
アディ：「タイポグラフィや抽象的なデザイン、シェイプ、動画、背景など、全てのパーツでテクスチャーが重要視されるようになります」
アディによると、ここ数か月 Web デザイン業界ではメタリックで液体のようなテクスチャーや、ホログラムを加工したイメージが多く使われていますが、このトレンドは今後ますます加速するそうです。2023 年の予測としては、動物の毛皮や液状のガラス、さらには「グニャグニャ」感を意識したブランディングなどのテクスチャー技術が流行する兆しが見られます。 NFT アートとの相性もよく、今後は新技術を使った実験的なデザインが増えるでしょう。 アーティスト兼デザイナーの Yonk さんが、Wix の透過動画コレクションおよび Meta やスプライトといったブランドとのコラボレーションで利用されているような、クレイモーフィズムもトレンドになりそうです。サイト上で「触って」動かせるようなインタラクティブデザインと合わせやすいというメリットもあります。
また、ここでも先ほど紹介した Y2K の影響が色濃く現れています。クラゲのように姿を変える幻想的なラバライトや、懐かしいスライムのおもちゃ、修学旅行先で買った幸運を呼ぶという狐のキーホルダー（何ともリアルなファー仕様）など、以前話題だったユニークな素材感が、 Web デザインという形で再来する可能性も大いにあります。
YONC が作成した、Wix の背景透過ビデオ素材の例
03. マキシマリズム
デザイナーもブランドも、そしてユーザーも、静かなミニマリズムを追い求めた時期は過ぎ去ろうとしています。今では「More is More」というスローガンで「マキシマリズム」にインスパイアされた新しいスタイルと斬新なデザインの時代を迎えようとしています。
アディ：「2022 年がシンプルでクリーンなデザインの年なら、2023 年は大胆で斬新なデザインの年になるでしょう」
「マキシマリズム」はその名の通り、これでもかというくらい多くの情報を一か所に集めるのが特徴です。左右対称の画面をバランス良く分割してその上にパーツを並べていくのですが、繊細でミニマルなデザインではなく、非対称の要素、明るく快活なタイポグラフィ、力強い色、さらに強烈なテクスチャーなど、整然とした区画と相反して躍動感ある要素が取り入れられています。
アディ：「画面内の各セクション自体がテレビ番組やコンサートのような存在感を放ちます。それぞれの領域でサイケデリックな旅が始まるのです」
イフタハ：「Starface World の明るく堂々としたブランディングは、2023 年に Web デザイナーが模索すべき More is More の良いインスピレーションになると思います。Starface はカラフルな星形をしたニキビパッチ（ニキビ隠しシール）を販売するネットショップ。丸みのあるコロッとしたロゴが、サイト全体に散りばめられたネオンカラー、90 年代風のタイポグラフィ、派手な画像とうまく組み合わせられています」
このように、ここ数年の単調なデザインから一歩抜け出して、かなり刺激的な組み合わせで勝負するブランドも増えてきています。
「マキシマリズム」のデザイントレンドを意識した Starface のウェブサイト
04. アンチ・デザイン
気候や地政学的な変化、不安定な雇用など、私たちは不確実な時代に生きています。ここ数年、デザイナーはカオス（混沌）に慣れ親しむ一方で、Web デザインは混乱の中に秩序を見出そうとしてきました。
モラン：「しかし今、デザイナーはその名残を受け入れようとしています」
それが今から紹介するアンチ・デザインです。
ブルータリズムをルーツとするアンチ・デザインは、デザインの法則の破壊を目的として社会を取り巻くカオスを再現し、極めてメッセージ性の強いデザインを提唱します。この Web トレンドは、ぶつかり合うテクスチャー、要素の重ね合わせ、大きなフォント、非対称で構造化されていないレイアウトなど、重みがあり主張も強い要素が一つに詰め込まれているのが特徴です。形が崩れていたり、全体的に不釣り合いなパーツが用いられることもあります。
アンチデザインは、デザイナーのクリエイティブの限界を押し広げ、新たなオーディエンスとの繋がりを築くためには効果的です。しかし、非常に目立つスタイルがゆえに、すべての Web サイトやブランドに適しているとは限りません。
モラン：「Eコマースなど多くのオンラインビジネスは、特定のサイト構造やユーザーフローを持つことに依存しているため、アンチデザインはそもそもの性質としてその成功を制限してしまう可能性があります」
しかし、ポートフォリオや特別なプロジェクト、キャンペーン、イニシアチブなどでは、メッセージ性の強いアンチデザインが効果を発揮するかもしれません。たとえば、ニューヨーク・タイムズの記事では、アンチ・デザインをうまく使って気候変動による大災害を伝えています。
アンチ・デザインのアプローチをしている Kurt Champion のウェブサイト
05. ドーパミン全開の色使い
昨年はアースカラーが人気だったのは、ご存知のとおり。アメリカのファッションアイコンであるキム・カーダシアンが立ち上げた補正下着ブランド「SKIMS（スキムス）」も、淡いグリーン、ピンク、肌にほど近いナチュラルなベージュなどのカラーを展開していました。
しかし、今年の注目は「ドーパミンカラー」とも言われる、ネオンカラー。
アディ：「すべてが明るく、飽和状態になるぐらいの組み合わせが人気になるでしょう。見る人をくぎ付けにする、思わず熱狂してしまいそうな色使いは、デザイナーのセンスの見せどころです」
モラン：「ターコイズ、ポイズングリーン、ヴァレンティノピンクのような派手な色合いだけでなく、マキシマリズムを追求したドーパミンが爆発するようなカラーパレットに注目したいですね」
カラフルなオーバーレイ、Web サイトのグラデーション、画像などを通じてドーパミンカラーを取り入れた 2023 年の Web サイトは、ちょっとアンダーグラウンドで喧噪ある雰囲気を醸し出し、トレンドに敏感な Z 世代を惹きつけるクールなスタイルに仕上がります。
アディ：「同じページの各セクションを異なる色で装飾したり、段落テキスト、見出し、CTA にさまざまな色合いを使用するなど、複数の色を取り入れて、ポストコロナ時代の疲れも吹き飛ぶような目の覚めるサイトにしてみるのもおすすめです」
ドーパミンカラーを使用した Yonson のウェブサイト
06. 角丸デザイン
Apple が何かを変化を起こすと、たとえそれがほとんど目立たないものであってもたちまちトレンドになりますよね。Web デザイン界への影響も同様で、Apple が iPhone のユーザーインターフェースとアプリに角丸のデザインを導入したことで、この角丸デザインのトレンドが勃発したのだそうです。Wix エディタはこのデザインをいち早く取り入れており、その後小規模の EC サイトやブログにも角丸のデザインが浸透してきました。
イフタハ：「サイトの余白、ギャラリーの画像、商品など、あらゆるものが柔らかい丸みを帯びた角の中に配置されるようになりました」
モラン＆イフタハ：「このトレンドの最も優れた点は、このリストにある他のデザインと簡単に組み合わせられること」
たとえば、レトロフューチャー感溢れる Y2K のテーマと組み合わせて豪華で夢いっぱいの雰囲気に仕上げたり、ブルータリズムのハードでエッジの効いたコントラストと組み合わせてみたり。さらにはソフトな角丸パーツを取り入れて、要素がたくさん詰め込まれたマキシマリズムデザインの印象を和らげたりするといった使い方も可能です。
まるまるとしたデザインを使った Wix ユーザーの Nedavius のポートフォリオサイト
07. AI（人工知能）生成コンテンツ
2022年に AI を利用した画像作成ツールが次々と登場したとき、人々の間では懐疑的な声が上がりました。
モラン「AI が登場したとき、皆が『これがデザイナーにとって代わるのだろうか？』と思わされました。デザイナーが何日も時間をかけるものを、AI は数秒で作ることができるのですから」
しかし、AI ツールが世界中に浸透するようになると、状況はすぐに変わりました。AI は画期的な画像を一瞬で生成できますが、一番初めのビジョンは人間が与える必要があることが明らかになったのです。2023 年、人工知能はデザイナーの代わりを務めるのではなく、むしろデザイン領域で多くの新たな門戸を開くだろうと予測されています。
ただし、思い通りの結果を得るためには、デザイナーが言語スキルを磨き、AI ツールがビジョンを正確に生成できるよう訓練する必要があります。
モラン：「AI システムを訓練するために、デザイン業界全体で写真、グラフィック、Web デザインにまたがる用語を標準化する必要性があると考えています」
08. フィルターなしの「飾らない」ビジュアル
世間では AI や VR へのシフトが進んでいますが、2023 年は PC で作られたフィルターを捨て、よりリアルな画像にフォーカスする年です。特にこのトレンドは、私たちがどのようにコンテンツを作るかというよりも、オーディエンスがどのようにコンテンツを消費するかに関係しています。
アディ：「TikTok の人気が高まり、BeReal のようなアプリが登場したことで、見栄えをあまり気にせずにリアルな写真を撮ることがトレンドになってきました」
イフタハ：「最近では Instagram や Tiktok のフィードに似た Web サイトを作る人が出てきているため、SNS は Web デザインにおけるコンテンツのあり方に影響を与えていると思います」
今後は SNS、特に TikTok の率直さに触発されて、同じような方法でオーディエンスと繋がろうとする Web デザインが多く見られるようになるでしょう。TikTok の人気の理由の一つは、ユーザーが思い思いの方法でコンテンツを消費していることです。あまり手を加えず、デザインもせず、素の自分やそのままの生活の一部を公開していきます。画像は「雰囲気」を作るためではなく、より共感できるものが好まれます。このトレンドは Web デザインにおける画像の扱い方にも影響を与えています。
フィルター効果を抑えた写真を使った Lauren Z Marsau による Web サイトデザイン
09. スクロール型のアニメーション＆トリガー
2023 年は「インタラクティブ」なユーザー体験（UX）をデザインすることが重要視されると考えられます。それを Web デザインで実現する方法の一つが、スクロールアニメーションやトリガーです。
アディ：「Web デザインにおいて、遊び心は重要な価値観です。現代では、マイクロインタラクション、トリガー、その他のアニメーションなどありとあらゆる要素が存在する中で、ユーザーのコンテンツ消費にも限界が訪れています。そのため、ユーザーを疲れさせず、見た瞬間にぐっと引き込むことができるような没入感ある Web サイトがトレンドになると考えています」
Scrollytelling（スクローリーテリング）は 「スクロール」と「ストーリーテリング」を合わせた造語で、Web ページのスクロールと連動して画像や動画、アニメーションなどのグラフィック要素が表示されるようにするデザインのことです。日本語では「スクロールアニメーション」とも言われています。
アディ：「スクローリーテリングは訪問者に魅力的な体験を提供します。目的は、見る人を驚かせるような型にはまらないレイアウトを作ることなので、デザインでいうマキシマリズムの考えと繋がっています」
この魅力的な UX は、Web デザイナーが自らのデザインに新しいエフェクトやツールを導入する原動力にもなります。また、このようなインタラクションのあるデザインはユーザーがページに滞在する時間を伸ばす効果も期待できます。
アディ：「Wix は、このトレンドを次のレベルに引き上げようとしています。今年の Wix エディタで見られる新しいエフェクトには、個々のストリップやパーツに適用できるスクロールエフェクト、ループで再生される無限アニメーション、マウスの動きで機動するアニメーションインタラクションなどがあります。ぜひ楽しみにしていてください」
缶入りワインのブランド It's Mine のホームページ ページの下にはスペースキーで遊べるゲームが用意されている
まとめ
今年は Web デザイン業界にとっても大きな節目となるでしょう。しばらく続いたミニマルでシンプルなデザインと決別する準備はできましたか？2022年後半に飛躍的に成長したAI技術や、メキメキと存在感を増している Z 世代のためのデザイントレンドが、今後の Web デザインを牽引していくことでしょう。 この記事で取り上げたデザイントレンドは、始まりにすぎません。今年は１年間を通して、全く新しいデザイントレンドが生まれる可能性があります。進化し続ける Web デザイントレンドを是非自分のサイトにも取り入れてみましょう。
思い通りのデザインをノーコードで実現
編集者：Miyuki Shimose ブログ コンテンツマネージャー
