2023年Webデザイントレンドを予測！ 【2023】Webデザイナー厳選！2023年のWebデザイントレンド10選
- 公開日
この記事は10分ほどで読めます
2023年がスタートしました。
去年に引き続き本記事では、シスコムの現役Webデザイナーが厳選した2023年に注目したいWebデザイントレンドをご紹介していきます。
2022年はパララックスや3D、グラデーションなどよりカラフルで魅力的なWebデザインに加え、一方でタイポグラフィやモノクロトーン要素のシンプルなWebデザインも多く見られました。
2023年のWebデザインは、既存のデザインに加えインタラクティブなデザイン、複数のトレンド要素を組み合わせたWebデザインが増えてくると予想されます。組み合わせやアイデア次第でまた違った新しいものが生み出せるのがWebデザインの面白いところです。
ちなみに、米パントン社（PANTONE）が発表している「パントン・カラー・オブ・ザ・イヤー」では、2023年は活力と力強さ脈打つようなパワフルなカラーとして「ビバ マゼンタ（Viva Magenta）」が選ばれました。暖色、寒色の両方のトーンを兼ね備えた真紅の色調のWebデザインも増えるかもしれませんのでカラーにも是非注目してみましょう。 出典：https://www.pantone.com/hk/en/color-of-the-year/2023
目次
PCなのにスマホ風Webデザイン
モバイルファーストのデザインが進む中、PCのデザイン上でもまるでスマートフォンのレイアウトのようなデザインのサイトが増えてきました。メインコンテンツはスマートフォンのように縦長でありながら、スクロールで背景のイメージが変わるなどの工夫をすることでPCで見ても違和感もなく、むしろ魅力的なサイトデザインになっています。スマホ風レイアウトのWebデザインはこれから流行するかもしれません。
LINE GAME10周年を記念した特設サイト。画面上部では数々のゲームタイトルが切り替えられ、テーマカラーとともに背景も変わり、見ている人を飽きさせません。また、スクロールしていくと動画コンテンツや横スクロールするHISTORYなどがレイアウトされており、つい「見たくなる」工夫が満載です。ロゴがモーショングラフィックスになっていたり、背景の丸がランダムに動いたり、コンテンツの中に必ず動きがあるためスマホでもPCでも違和感のないデザインになっています。
7DAYS OUTER with KIDS OUTFIT｜BEAMS
BEAMSの子供服特設コンテンツでは、冬のアウターを可愛い動画と写真で表現。スクロールするたび温度が下がっていくのが左側の数字でわかり、メインの動画にあわせて背景も切り替わるのでどんどんスクロールしたくなります。右側には気温別のおすすめアウターが次々とでてくるので、見ているだけで楽しいサイトになっています。スクロールと連動する背景はグラスモーフィズムを使用してクールな印象です。ページの下部はまるで雑誌のようにコーディネート紹介がありECサイトへの導線も自然になっています。
ボタニカルブランドらしく、落ち着いたトーンのサイトでスクロールするたびに背景の美しい写真が切り替わり、PCならではのダイナミックさを備えたWebデザインになっています。センターのコンテンツエリアの小ささが、かえって背景を引き立てる印象がありますね。
テーブルの上で絵本をめくるかのように、優しいタッチの色使いと、特徴的なイラストのWebデザインです。あえて背景はシンプルにしているため、情報をしっかり読ませる印象もあります。サイトの雰囲気、見せたいものによってWebデザインの幅が広がります。
スマホのデザインを重視するサイトが増える中、PCにもそのデザインを流用する手法は、PCとスマホの両方のデザインが必要だった手間を減らすことにも繋がります。こういったデザインにも注目したいですね。
大きなラウンドを使ったデザイン
スクエアでかっちりしたデザインとは対照的に、大きなラウンドを使ったWebデザインもここ数年、特に多く見られるようになりました。写真の切り抜きも角が丸くなるだけでやさしくポップな印象がもたせられますし、ボタンやコンテンツエリアも角丸にすることで、統一感があるサイトにすることができます。
カラフルな配色で、動きも工夫があってとてもポップな印象のWebデザインです。写真は丸や角丸でトリミングすることで全体的にやさしいタッチのWebサイトです。文房具のメーカーらしく、カラフルな色使いながらもキーカラーは「赤」を基調として統一感もあり洗練されたトーンに仕上がっています。
「紺色」が基調のため落ち着いた信頼感のあるトーンのなかで、写真やコンテンツエリアを部分的に大きなラウンドでトリミングして、固くなりすぎないWebデザインになっています。
写真がメインのインテリア雑貨のサイトです。写真を縦長にトリミングしていますが、カーソルを合わせるとラウンドの大きさも変わる遊び心もあります。あえてランダムなラウンドにしてあるのもデザインが単調にならない要素になっています。
白を基調とした柔らかい雰囲気のWebデザインです。メインビジュアルは、まるで電車の中から窓の外を眺めているような、印象的なレイアウトになっています。ボタンやバナーにもラウンドをあしらうことで全体的にやさしいトーンに仕上がっています。
角丸を使うことで、固くなりすぎずやわらかいテイストになるため、子供向けのコンテンツや女性向けのWebサイトには今までも使われていましたが、大きなラウンドを大胆に使うWebデザインは今年も主流になるはずです。
シェイプが動くデザイン
写真ではなく、シェイプが動くポップなデザインの印象的なサイトも増えています。シェイプアニメーションは線や図形に動きをつけることで印象が残りやすくインパクトを与えることができます。
メインビジュアルではシェイブが変化して動くなど遊び心のあるモーションが印象的です。企業ロゴの三角のパーツを効果的に取り入れ、前述の大きなラウンドも組み合わせてコンテンツ部分にも丸や三角をレイアウトした統一感のあるデザインになっています。
メインビジュアルの丸がつながったりのびたり、変化していく様子がみていて楽しいサイトです。カラフルでポップなシェイプがどんどん変化していく様と、サイトのコンセプトコピー「集まる、つながる、解決する」がマッチしています。
こちらは平面ではなく立体的なイメージが特徴的なサイトです。立体パズルが組み変わるような、新しいクリエイティブのイメージが沸くような楽しいモーションがサイトを魅力的に見せています。
シェイプアニメーションのように動きがあるサイトは目をひきますしインパクトがあります。サイトのコンセプトにマッチしたWebデザインにも注目していきましょう。
グラスモーフィズム
グラスモーフィズムとは、すりガラスのように半透明でぼかしたようなイメージのことです。MacOS Big SurのUIに採用されiPhoneなどのUIでも使用されているので身近なデザインになっています。スマホのOSアップデートなどでアイコンなどUIが変わった時は最新のトレンドの参考にしてみましょう。
グローバルメニューにグラスモーフィズムが使われており、追従メニューも半透明になっています。スクロールすると切り替わる背景イメージも、透けて見えるWebデザインのため、フレッシュなイメージとグラスモーフィズムの効果が瑞々しさを加えています。
透明感のあるWebデザインで、背景の青いリボンがモーションで動きながら透けて見えるのが印象的です。また、画面上でやわらかく動く水滴が文字に重なる部分もグラスモーフィズム効果で滲んだようになっているのも面白いWebデザインです。
グローバルメニューや一部コンテンツをあえてぼかすことで透明感を演出しています。コンテンツの背景をぼかす手法自体は大変シンプルですが、商品の見せ方やコンセプトにそった効果的なWebデザインにすることができます。
グラスモーフィズムは透明感や清潔感などを出すWebデザインに向いています。空間に奥行きを持たせ、レイヤー構造になっていることがわかりやすく、CSSスタイリングのみで表現できるため、今後も主流になるでしょう。グラスモーフィズムの見え方に興味がある方はCSSによる設定できるGlass Morphismなどの無料サービスもチェックしてみてください。
ウォークラプス・タイムラプス
ウォークラプス（ハイパーラプス）とは、タイムラプスに動きを加えた動画の撮影方法のことをいいます。ちなみに「タイム（時間）」と「ラプス（経過・推移）」がタイムラプス（Time lapse）の語源です。タイムラプスが固定して撮影するもの、ウォークラプスはそれを歩きながら撮影するものと覚えるとわかりやすいですね。iPhoneのカメラにもタイムラプス機能がつき、撮影はとても手軽になりました。ファーストビューを動画イメージで見せるWebデザインも増えているため、動画の表現手法の一つとして覚えておくとデザインの幅が広がります。
イベントの臨場感が伝わる動画を効果的に使用しています。メインの動画の上にチケットのイメージがモーションで浮かび上がるなど、黒と白を基調にしたシンプルでスタイリッシュなWebデザインです。
ダイナミックな映像で、コンテンツの世界観に引き込まれます。ドキュメンタリー映像のようなリアルな世界を見せられるのも、動画を使ったWebデザインの特徴といえます。
デジタル技術が発展したことで、ブレを抑えた撮影方法が可能になりタイムラプスの技法の幅も広がりました。ドローンで撮影されたかのようなリアルな動画の演出ができますので注目していきたいですね。
個性的な動きのパララックス・アニメーション
スクロールなどの動作でさまざまな要素が動いたり、アニメーションで表現したりすることでウェブサイトならではの表現や奥行きを見せることができるパララックス。そんなパララックスサイトは既にWebデザインの定番ですが、近年では「最後までスクロールしたくなる」「ストーリー性がある」「商品やサービスを魅力的に見せる」ために縦スクロールだけでなく横にスライドする動きを取り入れるなど、動きに意味を持たせよりユーザーを飽きさせない工夫が盛り込まれています。通信技術やコーディング技術が進歩して、再び注目が集まっている様です。
スクロールすると紙芝居をめくるようにページが展開していきます。アンケートの結果を魅力的に見せるために、背景のイラストと穴あきクイズのような文章でより効果的にみせる工夫がされています。
デザイナーならついチェックしたくなるappleのサイト。新しいiMacの魅力を表現するために薄さを強調したり、色鮮やかなディスプレイを演出する見せ方がシンプルながらとても上手ですね。
WIRED CONFERENCE 2022 「FUTURES/REALITIES」 | WIRED.j
ワークショップ・フェスティバル「WIRED」の特設サイト。大きなタイポグラフィと個性的なイラスト、またカテゴリごとに横にスライドが表示されるなど、雑誌を見ているような楽しさとウェブならではの表現が加わっておしゃれなWebサイトデザインになっています。
KOSANJI TEMPLE 鳥獣戯画 collaborated with niko and｜niko and …
「鳥獣戯画」とコラボしたアイテムのサイト。横にスクロールすることでまるで雑誌のようにページをめくる、もとい巻物を開いていくような楽しさがあります。ECサイトにも連携して購入もストレスフリーです。
パララックス・アニメーションは、単純に背景が動いている、画像が順番に出てくる、というインパクトを与える演出だけでなく、そのコンテンツをより訴求するために必要な演出のための手法として活用されています。紙で表現できない、インタラクティブな表現ができるのもWebならではのメリットです。Webデザインをする上で、ここはこのように動かしたい、こんな演出で表現したいという部分も、Webデザイナーの腕の見せ所です。パララックスを取り入れる上で注意したいのは、あまり複雑にしすぎると表示が遅くなったり、ユーザーがどこをクリックして良いのかわからなくなったりしてしまうので、ユーザビリティも配慮したWebデザインにすることが大切です。
スプリットレイアウト
スプリットレイアウトとは、画面を2分割したレイアウトのことをいいます。スプリット＝分割の意味で、左側を固定のデザインにして右側だけスクロールするなど、Webデザインの幅も広がります。スプリットレイアウト自体は以前からありましたが、スマホ対応などでシングルカラムのレイアウトが増えたので、あらためて注目されるかもしれません。
ani TERRACE – アニテラス｜アニコム先進医療研究所株式会社
分割した左側は写真を効果的にみせて、右側だけコンテンツエリアとしているデザインです。スマホでみると右側がメインになるため、PC、SPのデザインを統一することができます。
やわらかいクールなカラーのWebデザインで写真も大きなラウンドでトリミングされています。専攻の紹介部分のみスプリットレイアウトになっており、コンテンツの内容に合わせてレイアウトや動きが工夫されています。
既存のレイアウトでも、組み合わせ方やアイデアを盛り込むことで新鮮な印象のWebデザインにすることができます。コンテンツと相性の良い見せ方のレイアウトがこれからも増えてくるかもしれませんね。
3Dグラフィックを使ったインタラクティブWebデザイン
3Dグラフィックを取り入れたWebサイトデザインも定番です。ただ単に立体的なだけでなく、3D空間に入り込んだかのような、インタラクティブな演出ができることも魅力です。パララックスの表現と同じく、3Dで表現することのメリットを最大限生かしたWebデザインが引き続き流行するでしょう。
デンマークのチョコレートメーカーのサイトは、カラフルなパッケージが並びクリックするとパッケージを破いてチョコレートを実際に試食しているかのような、楽しい演出がされています。単純にブランディングだけでなく気に入ったらその場で購入ができる設計なのもいいですね。
「クボタが思い描く未来の地球と技術」を表現するサイトとして、キューブの中から3Dの未来が展開されていきます。ブランディングサイトはユーザーにコンセプトを伝えるためにさまざまなことを計算して作られています。
ロエベ×スタジオジブリ『千と千尋の神隠し』｜ポップアップストア in 原宿 – LOEWE
映画の世界観を大事にした、ロエベとスタジオジブリのポップアップストアのサイト。アニメの冒頭をイメージさせるような導入からファンを楽しませる演出になっており、商品の購買意欲を高める効果も担っています。
シェアモビリティのサービスサイトらしく、カラートーンも統一されていて落ち着いた雰囲気ながら先進的で未来を感じさせる3Dイラストのイメージでわかりやすく視覚的に表現されています。
近未来を感じさせる自動運転のサービスサイト。上記同様シンプルなトーンで世界観を表現して、3Dイラストを効果的に使用しています。俯瞰したり夜モードになったりするので、スクロールするのも楽しいサイトです。
TBS INNOVATION LAND｜株式会社TBSテレビ
TBSの特設サイトは街中を散策するような、ワクワクする作りのWebデザインです。3Dでありながら、ちょっとレトロな印象をあたえる世界観なのも面白いですね。実際に自分で触れてみたくなるサイトです。
3Dグラフィックを使ったWebデザインは、商品やサービスの訴求にとどまらず、ファン獲得やコンセプトブランディング、世界観を伝えられるメリットがあります。技術の向上によりよりリアルな世界が表現できるため引き続き注目したいですね。
インパクトのある大きなタイポグラフィデザイン
太字でくっきりとしたタイポグラフィをあしらったWebデザインも引き続きトレンドになると思われます。Googleフォントなどのウェブフォントが普及したことで、フォントメインのデザインも身近になり表現の幅が広がりました。
30 YEARS OF NUPTSE JACKET｜THE NORTH FACE
THE NORTH FACEのヌプシジャケット誕生30周年記念プロジェクト特設サイト。大胆なブルーのタイポグラフィが印象的で力強いWebデザインになっています。サイトのコンセプトに合わせて、フォント選びやレイアウト、配色でインパクトを与えることでより商品やサービスの訴求やブランディングにつながっていきます。
ロゴやフォントを大胆にあしらったWebデザインです。ロゴはSVGを使用していますが特徴的なフォントでインパクトのあるWebデザインになっています。
タイポグラフィをあしらったWebデザインは今後も引き続きトレンドになりそうです。太字でくっきりとしたフォント、日本語のやわらかい明朝系のフォントなどフォントの特徴を踏まえながらWebフォントを上手に活用してデザインに取り入れたいですね。
モノクロデザイン・シンプルデザイン
3DやグラデーションのWebデザインが流行する一方、あえてモノクロ・シンプルなWebデザインも変わらず人気があります。イラストも線画のみのシンプルなもので表現したり、写真以外あえてモノクロ調にしたり、色数を極端にしぼるデザインは強いインパクトを与えることができます。
シンプルなイラストと白と黒のはっきりしたコントラストでとてもインパクトのあるWebデザインです。クライアントのロゴもあえてモノクロバージョンでかっこよくまとまっています。写真のみカラーなので目をひきやすく、とても魅力的なWebサイトになっています。
完全モノクロではなくイエローとブラックがベースのWebサイトですが、色数が少ないことで写真やアイコンが際立っています。グリッドに区切られたイメージが個性的で、タイヤの特徴をさまざまなアイコンで表現して、見た目だけでは伝わりにくいタイヤの訴求をデザインでカバーしています。
要素を削ぎ落としたWebデザインは、まとまりがあっておしゃれでクールな印象にすることができます。インパクトを強くしたいところだけカラーにする、などWebサイトのコンセプトに合わせた訴求ができるので引き続き人気が出ると思われます。
2023年Webデザイントレンドは「組み合わせ」がポイント
Webデザイナー目線で、2023年のWebデザイントレンドを予測してみましたがいかがだったでしょうか。Webデザインの幅は毎年広がっており、既存のレイアウトやトレンドを組み合わせることで新たなWebデザインが生まれます。ひとことでWebデザインといっても、どのようにコンテンツを魅力的にみせたいのか、どのような動きでユーザーの興味をひきたいのかなどが考えられていますので、今後もトレンドに注目してみてはいかがでしょうか。
シスコムの制作実績はこちらこの記事のまとめ
- コンテンツをどのように見せたいか？でWebデザインの可能性が広がる
- 固定デザインだけでなくレイヤーや連動する動きに注目
- 既存のレイアウトやトレンドを組み合わせることで新たなWebデザインが生まれる
