2022年のWebデザインに関する主なトレンドキーワードは
- パララックス効果
- 横スクロール（下にスクロールすると画面が横にスライド）
- 2Dイラスト、2Dアニメーション
- スマホ幅スクロール
などがありました。また、3DCGなどは今年も流行することが予想されています。
細かい部分ではスマートフォンで使われているアイコンをデザインで使用したり、新しいフォントや素材も増えています。
また、制作ツールとしてこれまでのツールに加え、2022年はFigmaの日本語対応やcanvaの利用者が大幅に増加したことにより、これまでデザインに関わらなかった方がクリエイティブ制作を始めています。
そこで、今回は先週の2023年のWebマーケティングトレンド予測に引き続き、2023年のWebデザインのトレンド予測について参考となる記事や、デザインを検討する時に参考となるWebサイトをご紹介します。
Webサイト制作担当者や今年Webデザインを学びたい方、Webサイトのリニューアルを検討している方は是非参考にしてください。
2023年のWebデザイントレンド関連記事
【2023年最新版】WEBデザインの注目すべきトレンド29選
日本デザインスクールが2022年12月31日に公開したこちらの記事では、下記の通り様々な観点から2023年に注目するべきトレンドについて解説しています。
- ビジュアルのトレンド19選
- ユーザビリティのトレンド3選
- イラストトレンド3選
- 配色トレンド3選
「アイソメタリックイラスト」「エモーショナルデザイン」など普段聞きなれないデザインについて学ぶことができ、直近のWebデザインのトレンドを網羅的に調べたい場合はこの記事を読むことでおおよその内容について把握することができます。
表現の最先端！「3D」を取り入れているWebデザイン5選！
先進的なイメージを印象付けたい商品のブランドサイトや企業のWebサイトでは、今後も3D表現のクリエイティブが増えると思われます。
この記事では3Dを取り入れているWebサイトの事例を5つ取り上げており、Panasonicの製品紹介サイトのような「デジタルショウルーム」と呼ばれる空間の中を歩く擬似体験ができるような表現が増えていることを感じています。
2022年のUI/UXデザイントレンド、 スクロールテリングとは？
「スクロールテリング（またはスクローリーテリング）」はユーザーがスマートフォンやタブレットでWebサイトをスクロールする時にコンテンツに没入することができる表現方法です。
スクロールすることによりコンテンツが動いたりページが下に遷移していくことを指し、著名な事例としてアメリカのアップル社の製品紹介ページが挙げられています。この記事ではさらに「スマートフォン・タブレットとの相性の良さ」や「世界観を作りやすい」などが導入のメリットとして解説されています。
2023年の流行色/トレンドカラーは“ビバマゼンタ”と“ルミナスイエロー”。内なる強さと優しさを表現
2023年の流行色（トレンドカラー）については、アメリカのPantone（パントン）社が毎年発表している「Color of the year」のほか、日本国内でも日本流行色協会（JAFCA）が毎年発表しています。
中でもPantone社の「Color of the year」は世界的に注目されており、2023年の色として選ばれたのは「ビバ・マゼンダ」という濃い赤色になりました。
そして日本流行色協会が発表したトレンドカラーは「ルミナスイエロー」という淡い黄色です。
どちらの色もWebサイトや商品販売で見かける機会が増えると思われます。
最新のWebデザイントレンドに対応したフリー素材3選
【2023】Webセーフできれいに表示されるフォント30選
Webサイトで表示されているフォントの中には、OSやブラウザによっては素早く最適なフォントを表示できなかったり、他のフォントに置き換わるなど作成した通りにフォントが表示されないことがあります。
WordPressでWebサイトを制作するときにも、最適なフォント表示にこだわる場合はどのOSやブラウザでも綺麗に表示できる「Webセーフ」なフォントを学び使用することで、事前にトラブルを回避できます。
【2023年版】使える厳選日本語フリーフォント【商用利用OK】
こちらの記事では商用利用も可能な最新の日本語フリーフォントが紹介されています。
角丸でスッキリした印象の「はれのそら明朝体」や手書き感がある「マメロン」など26のフォントが紹介されています。
ただし今後商用利用が不可になる可能性もあるため、ダウンロードするときは最新の利用規約を確認し、その時点でも商用利用が可能であることを確認してください。
【2022】無料で使えるフリーアイコン素材サイト21個まとめ【商用利用OK】
こちらの記事は無料かつ商用利用が可能なアイコン素材が必要となったときに参考となる記事です。
紹介されているサイトの中には絵文字風アイコンやGoogleが提供しているアイコン素材サイトなどがまとまっており、欲しいアイコンをダウンロードしてWebサイトで利用することができます。
初心者でもWebサイトのデザインができる注目ツール：Figmaとcanva
Figma（フィグマ）とは？初心者向けに使い方・できることを徹底解説！
「Figma」はWebブラウザ上でデザインを製作できるツールで、2022年7月に日本語対応されて利用者が増えており、2022年9月にはアメリカのAdobe社に買収されるなど注目を集めているサービスです。
こちらの記事ではFigmaの基本的な使い方を解説しており、無料プランと有料プランの違いやcanvaなど他のツールとの違いを解説しています。
canvaでWebサイトは作成可能？メリットやデメリットは？
「canva」はバナーなどの画像制作のために最近広く使われているクリエイティブ制作のためのツールとして人気のサービスですが、Webサイトのデザイン作成もcanvaで行なうことができます。
この記事ではcanvaでWebサイトを制作する場合のメリットやデメリットを紹介しています。
canvaでWebサイトを制作するメリットとして、無料で作成できることや日本語に対応したWebサイトのテンプレートが20,000種類以上用意されていることなどが挙げられています。逆にデバイス毎の細かい加工がしにくい、アプリが重いなどがデメリットとして挙げられています。
またFigmaやcanva以外にも、最近は「Webflow」などノーコードでWebサイトを作成できる海外のサービスも増えており、デザインの知識があれば無料のツールを利用して綺麗なWebサイトを作ることができるようになっています。
Webデザインのトレンドを知る時に参考になるWebサイト
「Webデザインギャラリーサイト」を確認することで最新の事例を確認することができます。
また、アイディアが浮かばない時や、流行のトレンドを調べたい時にも参考になります。
Webデザインに精通した企業や個人が運営しており、海外の事例も掲載しているサイトも存在しており、Web制作会社が紹介されているサイトもあります。
SANKOU! Webデザイン制作の参考になる国内のステキなサイト集
日本で製作されたWebサイトの中でデザインが優れているものを掲載しているサイトになります。
コーポレートページや採用ページだけでなく、ランディングページ（LP）のデザイン事例も掲載されており、一部のサイトでは制作会社が明記されていることが特徴です。
カテゴリ別や絞り込み検索機能、お気に入りのページを保存する機能があります。
I/O 3000
「I/O 3000」は国内だけでなく海外の事例も含んだWebデザインのギャラリーサイトになっています。
2022年12月には20以上のWebサイトが掲載されており、更新頻度が高いため最新の事例を知りたい時に参考になります。
色、分野別に加え、掲載年や特徴で絞り込むことも可能です。
AGT smartphone design gallery
「AGT smartphone design gallery」は株式会社ヒカリナが運営するスマートフォン向けWebサイトに特化したギャラリーサイトになります。
PCで閲覧している場合マウスをスマホサイトの上に重ねると自動的にスクロールされるためクリックしなくてもページ全体を見ることができ、サイトの中では基調となる色やビジネス分野別に絞り込むことが可能です。
まとめ
中小企業のWeb担当者がサイト開設やリニューアルを実施する場合、Webデザインについて最新のトレンドを常に把握することは難しいことかもしれませんが、今回ご紹介した記事をご覧いただくことでWebデザインに関する知識を深めていただけると幸いです。
Web制作会社に委託する場合、説明を受けても用語がわからない、デザインにこだわりすぎて費用が高額になってしまった、などのトラブルを避けるため、定期的にWebデザインについて考える機会があると良いでしょう。
逆にデザインにはこだわらない場合や費用を安く抑えたい場合は、WordPressで有料テーマを購入して導入することも可能です。
これまで「Web担当者のための集客ノウハウガイド」ではコーポレートサイト編、オウンドメディア編、飲食店編、美容院編など業種別に様々なおすすめテーマを紹介しておりますので、併せてご覧ください。
ディレクターバンクには100名以上のWebマーケティングに精通したディレクターが在籍しており、今年もWebサイト制作に関する様々なご相談を承っておりますので、Webサイトの制作やリニューアルを予定している場合はプロジェクトを開始する前に是非一度ご連絡ください。
Webマーケティング視点で成果を出すためのホームページを制作します
ディレクターバンク（株）のホームページ制作では、現状課題をヒアリングさせていただいた上で、ホームページのコンテンツ企画・制作から、公開後の集客運用、修正対応まで、ホームページで成果を出すための必要なサポートをワンストップで提供させていただきます。