🌏

【デザイン】2022年のWebデザイントレンド22選

2021/12/14に公開

2022年のWebデザイントレンド22選

この記事では2022年の22個のWebデザイントレンドを紹介している「Webflow」の記事を和訳したものになります。本文や画像は以下のサイトのものになります。

https://webflow.com/blog/web-design-trends-2022

はじめに

来年の傾向として、ウェブデザインにおける遊び心の高まりを感じています。

デザイナーは、アートとしてのサイト、インタラクティブなプロジェクトとしてのサイト、そして単に遊びや喜びのために存在するサイトを作り始めています。これは、デザイナーが新しい技術を披露したり、自分の目的のためにウェブサイトを作ったりしていたウェブの初期にさかのぼります。

私たちは今、初期のウェブのルネッサンス期にいるようです。それは理にかなっています。ファッションもまた、90年代後半から80年代前半を大いに参考にしています。私たちの多くは、ウェブが出現したばかりの頃のように、何か気晴らしや刺激を求めて、家でぼんやりとネットサーフィンをして過ごしています。

ビジュアル面でも、ウェブのトレンドはその時代からヒントを得ています。デザイナーは、これまでのような写真中心のレイアウトではなく、創造性を発揮しています。その代わりに、タイポグラフィ、グリッドやライン、シンプルなナビゲーションの使い方に工夫を凝らしています。また、落ち着いた色、洗練された質感、セリフ体のフォントを多用した最新のスタイリングは、サイトがレトロになりすぎるのを防ぎます。

また、ウェブデザインは、高度なインタラクションやアニメーション、グラスモーフィズムや粒などの視覚効果など、エキサイティングな現代の技術を用いて、未来に向かって進んでいます。また、デザイナーはコードレスツールを使用することで、これまで以上に迅速かつ簡単に作業を進めることができます。

2022年のWebデザインのトレンド

ここでは、次の年に影響を与えると思われるウェブデザインのトレンドを紹介します。

1. 喜びのミニサイト

ユーモアにはさまざまな形がありますが、笑いを誘うようなウェブサイトは、作っていて楽しいものです。楽しく作ってみませんか?

ピクサーの初期には、長編映画を制作するたびに、アニメーターに短編映画を制作する時間を与えていました。この短編映画は、アニメーターが長編映画のようなプレッシャーを感じることなく、より自由で遊び心のある創作活動を行うための時間でした。また、アニメーションの分野を前進させる多くの新しい技術が生み出されました。Web開発者は、Webサイトでも同じことができると考えています。


Day&Nightは、2010年にピクサーが制作した短編作品で、「Inside Out」や「Soul」などのアニメーション手法に影響を与えました。

楽しいミニサイトを作ることで、デザイナーは創造性を発揮し、テクニックを練習したり試したりすることができ、プロの仕事でやりすぎてしまうことを心配することなく、あらゆるデザインに挑戦することができます。創作のための創作は、時にマンネリ化を解消する素晴らしい方法です。

意図的に遊び心のあるUXデザインを設定したり、意図的に期待を裏切るようなデザインをしたりと、さまざまな方法で実験を行うことができます(ただし、アクセスしやすいように構築することを忘れないでください!)。コピーや画像だけでなく、サイトのナビゲーションやメニュー、インタラクションにもユーモアを取り入れましょう。繊細に。真面目なサイトだと思わせておいて、そうでないときには真面目なサイトだと思わせる。これは、予想外の機能を持ったサイトを作るチャンスです。専門的な目的のためのイースターエッグのようなマーケティングサイトは、うまく実行すれば効果的です。

Guns2 Swordsは、80年代の「ダンジョンズ&ドラゴンズ」に、Choose Your Own Adventureのテイストを加えたミニサイト/エンタプライズです。これはMSCHFによって作られました。MSCHFはゴンゾ・アーティストとハイプ・アプリ・クリエーターの中間のようなグループで、実際にサービスを提供しています。来場者は銃を送り、世界的な鍛冶屋によって剣に鍛えられ、実に壮大です。

Blue Check Homesは、完全に合法的な「真面目な」ウェブサイトを作成するという逆のアプローチをとりました。ダニエル・バスキンがツイッターで始めたジョークは、最終的には、著名人の家に「ブルーチェック」メダリオン(ツイッターの認証アカウントのようなもの)を販売する、本物のミニビジネスになるかもしれません。

2. ウェブ上の借り物競争

Webサイトの構造は、パズルや借り物競走にとても適しています。ページを連結したり、ある部分にパスワードをかけたりして、訪問者に答えを教えたり、次のページを開くための手がかりを見つけさせたりすることができます。

また、ヒントを隠したり、明らかにしたりする方法もいろいろあります。あなたのウェブデザイン力を活かして、人を魅了するパズルを作ってみてはいかがでしょうか。

アイデアをいくつか紹介します。

  • なぞなぞやヒントに基づいて単語を提供する
  • メインサイトやスカベンジャーハントサイトに隠された単語を探す
  • ページ上に隠されたクリック可能な要素を見つける
  • 形を描く
  • 暗号を解読する

ただし、全員が最後までたどり着けるようにするには、視聴者に何らかのヒントや回避策を与えることを忘れないでください。借り物競争は、新製品の発表や新しいビデオの公開、視聴者に隠れた情報を提供するために使用することができます。

マーケティング会社のThreeSixtyEightは、会社のリトリートの場所をチームに公開するために、借り物競争を行いました。音楽を使ってミステリアスな雰囲気を演出し、カーソルの周りに不透明度を調整することで、訪問者が手がかりを探しながらページの一部を見せることができるようにしました。

3. アプリのような体験

ThreeSixtyEightの共同設立者であるJeremy Beytは、このような小規模で体験に焦点を当てたサイトがウェブデザインの未来であると強く信じています。彼はこう語ります。「フロントエンドを中心とした、デザイン的には大げさなウェブ体験は、これまでになかったまったく新しいウェブの使い方であり、アプリのような体験です。これこそが今のチャンスだと思います」。世界は、インタラクション、アニメーション、ダイナミックな体験が当たり前のアプリに慣れ親しんでいます。次のステップは、そのエネルギーをWebサイトに持ち込んで、よりユニークな体験を生み出すことだと思います。

このままでは、サイトが自己完結的で難解で好奇心旺盛な時代に戻ってしまうのではないか、と考える人もいます。しかし、ノーコードなどの新しいサイト構築ツールを使えば、ダイナミックでインタラクションを重視したデザインを簡単に構築することができます。ThreeSixtyEightでは、開発プロセスにインタラクションデザインに特化したステップを追加しました。

4. 1ページだけのウェブサイト

最も効果的なサイトは、最も複雑でないサイトであることがあります。最近では、メニューやナビゲーションを省き、シンプルなスクロールナビゲーションを採用した1ページサイトの人気が高まっています。1ページサイトは、ポートフォリオや1つのアイデアの提示など、対象が狭い場合に効果を発揮します。

チラシを持っているような、ポスターを読んでいるような、そんな感覚のサイトです。必要な情報が一箇所にまとまっているので、ナビゲーションや複数のページを検索する手間が省けます。

Jordan Hughesが制作したIndi Harrisのウェブサイトは、デジタル履歴書です。このサイトでは、対象者に注目してもらうことができます。必要な情報がすべて前面に出ているので、何気なく見た人が履歴書全体を読んでくれる可能性が高くなります。

Joshua Kaplanのポートフォリオサイトは、より複雑ですが、同様に効果的です。見る人が迷わないように一貫した構造を採用し、気を散らす要素を減らし(背景、大きな画像、動きのないもの)、ラインワークと投げやりな著作権マークのロゴで少しレトロなウェブを感じさせるサイトになっています。

5. 場所を強く意識したサイト

旅行に行けなかった分を補っているのかもしれませんが、一部のウェブサイトでは、より場所を意識したものになってきているようです。ホームページや「about」のコーナーでは、制作者が住んでいる街や自然をテーマにした写真が掲載されています。

ウェブ上では、自分が見ているサイトがどこから来たものなのかがわからないことが多いものです。そこで、「MADE WITH LOVE IN ...」のような一言を添えたり、お気に入りの場所の画像を掲載したりすることで、自分がどこにいるのかを想像してもらい、現実世界との小さなつながりを作っていくのです。もし私たちが旅行に出かける機会が減ったとしても、少なくとも世界中の人々とオンラインでつながっていることを忘れてはいけません。

グレース・ポッターは、自分の作品とは直接関係ないにもかかわらず、この美しい海の写真をランディングページに使っています。この写真は、彼女のルーツであるニュージーランドの地に根ざしたもので、サイトを訪れた人を彼女の世界に引き込んでいます。

6. アールデコのモチーフ

私たちは今、20年代に戻っているのです。アールデコのモチーフは、ここ数年トレンドになっている幾何学的なデザインによく合います。アールデコ様式というと、華やかな酒場やギャツビーをテーマにした結婚式の招待状を思い浮かべる人が多いかもしれませんが、美しくミニマルなデザインも可能なのです。

今年のトレンドは、アールデコ調のイラストや建築に見られる、きれいな曲線や反復されたグラフィックの形からインスピレーションを得ています。これらの要素は、美しいロゴ、フォント、スペーサーのモチーフ、ボーダー、イラストなどにインスピレーションを与えます。このスタイルを効果的にデザインするには、オリジナルのアールデコ運動の背後にある哲学を理解する必要があります。

アールデコは、自然界の要素と機械時代の近代性を組み合わせたもので、大胆なライン、シンメトリー、シンプルさ、変化のない要素の繰り返しが特徴です。このトンボの羽の形が、古典的なアールデコ建築であるクライスラー・ビルの規則的なパターンにどのように反映されているかをご覧ください。

BUCKが2017年にFacebookのためにデザインしたAlegriaのアートスタイルは、アールデコの人物描写から多くのヒントを得ているようです。すっきりとした曲線、楕円形の顔、縮小されたディテール、誇張されたプロポーションなど、すべてがこのアートスタイルを思い起こさせます。もしかすると、イラストレーターのロドルフォ・レイエスによるこの素晴らしい作品のような新しいタイプのモダニズムの人物デザインは、このトレンドのアップデート版かもしれません。

7. ヒーローのイメージが少ない

今年は、多くのデザイナーが、写真やイラストではなく、デザインで勝負するヒーローセクションやランディングページを作ることを選んでいます。ヒーローイメージは視覚的に大きなインパクトを与えますが、時には、派手なイメージを排除することで、スタイルやコンテンツにより焦点を当てることができます。

Humain」、「SVZ」、「Heyday」、「RADAR」の4つのウェブサイトは、それぞれ全く異なるデザインですが、レイアウト、タイポグラフィ、色、形などを駆使して、独自のブランドアイデンティティを強く打ち出しています。また、画像を使用しないことで、ちょっとしたミステリーを演出し、訪問者がヒーローセクションの先に何があるのかを知りたくなるようにしています。




8. オーバーサイズのタイポグラフィ

変わったサイズのタイポグラフィは、今年の新鮮で大胆なデザイントレンドです。ある程度の大きさになると、文字は単なるコピーの一部ではなく、グラフィックの要素としての役割を果たすようになります。これは、ミニマルなデザインでもマキシマムなデザインでも同じように効果的に使える万能なテクニックであり、さまざまなスタイルに合うものです。

このEva Habermannの映画ポートフォリオサイト(Daniel Spatzek制作)は、動く映画ポートフォリオのリールに大きなテキストを重ねています。文字が部分的に画像を遮ることで、見る人はもっと見たいと思うようになります。2色のサンセリフ・フォントを使うことで、読みづらさや圧迫感を与えずに、適度なコントラストを実現しています。

David Calleのポートフォリオサイトでは、オーバーサイズのテキストを使用して、洗練された超ミニマルなデザインを実現しています。ニュートラルな背景色とセリフ体のフォントが、スクロール時の微妙な動きと見事にマッチしています。

9. インタラクティブフォント

テキストをさらに活用するために、ユーザーのマウス操作に合わせてテキストを動かしたり、遊んだりする独創的な方法を考案しているデザイナーもいます。テキストをインタラクティブにする簡単な方法は、ボタンのようにホバーの状態を変化させることです。最近では、手書きでインタラクションを作成するよりも、ノーコードのプラットフォームを使って、より精巧な効果を簡単に作成できるようになりました。フォントにインタラクティビティを導入する際には、文字が動くと気が散ってしまう人もいるので、読みやすさにも気を配る必要があります。

Dillingerのウェブサイトでは、テキストにカーソルを合わせると重さが変わるフォントを使用しています。黒い背景の中で文字が縮小されることで、選択された文字がより見やすくなり、ユーザビリティの向上につながっています。また、カーソルの大きさを誇張することで、サイトへの没入感を高めています。デザイナーのTim Ricks氏は、このエフェクトがどのように作られたかを見たい人のために、このサイトのクローンバージョンを作ってくれました。

10. レスポンシブなモーションデザイン

インタラクティビティの話が出たところで、次はレスポンシブなモーションデザインについて話しましょう。動きはウェブデザインの魅力的な要素のひとつですが、やりすぎると乗り物酔いの原因になることがあります。乗り物酔いはよくあることで、マウスを使ったスケーリング、視差効果、平面をずらしたスクロール(スクロージャックとも呼ばれる)などのアニメーションは避けるべきです。

WebflowのシニアブランドデザイナーであるCorey Moenは、MacOSの「Reduce motion」設定を考慮しながら構築する方法について詳しく説明しています。

動きの少ないものを好む人のために

prefers-reduced-motion CSSメディアクエリを使用すると、OSの「動きを減らす」設定がオンになっている場合、アニメーションのSVGを非表示にして、イラストの完全な静的SVGを表示することができます。

サンプルコードはこちら

Corey Moen (@CoreyGMoen) 2021年10月28日

これは重要なことですが、だからといって、それを言い訳にしてモーションを多用してはいけないということでもありません。過剰なモーションは、ユーザーの混乱を招くだけでなく、多くの人にとって有害であり、単純に必要ないものなのです。

関連チュートリアル:モーションが好きな人とそうでない人のためのビルド方法

11. コラージュイラスト

コラージュスタイルのグラフィックは、サイトのイラストに手触り感を与えたり、デザイン内の余白を増やしたり、写真を中心としたデザインでなくてもイメージを取り入れることができます。コラージュでは、形やパターン、色を混ぜ合わせることが大切です。また、写真にモノクロ効果や色合い、フィルターをかけることで、デザイン全体との調和を図ることができます。

Vantaのサイトでは、ランディングページをはじめ、サイト全体にコラージュ風のイラストが使われています。写真をコラージュ風に編集することで、グラフィックを不規則に配置したり、軸がずれたりして、サイトのグリッドを崩すことができます。

12. 抽象的なイラスト

抽象的なイラストでも、より有機的な質感や人の手が感じられるものが人気を集めています。ここ数年、ウェブデザインでは、クリーンでポップなベクターグラフィックスや、人や物を描いたキュートなイラストが主流でしたが、もう少し自然で洗練された感じのものが求められているのかもしれません。

この種のイラストは、インクと紙で作成したものをスキャンしたり、イラストレーションソフトで作成したりします。大切なのは、水彩画やインク、絵の具、シルクスクリーンの効果、紙の質感など、さまざまな質感や自然の凹凸を取り入れることです。また、黒鉛やインクを使ったときの線の太さの変化を模して、線をより柔らかくすることもできます。

抽象的といっても単純なものではありません。デザイナーのAdam Hoによるブログ記事のイラストは、その典型的な例です。彼のデザインの不思議な複雑さをご覧ください。極細の線とグラフィック的な形は、特定の物を直接表現することなく、技術的な図面のようにも感じられます。

13. 粒を使ったグラデーション

グラデーションはすでに人気がありますが、粒状感が加わることで、まったく別の効果が生まれます。完璧なグラデーションは、洗練されたモダンな雰囲気を醸し出し、オブジェクトに未来的な輝きを与えたり、技術的な輝きを感じさせたりします。粒は、デザインの根拠となり、質感を与え、より自然な感じを与えます。

処理の仕方によっては、フィルムや写真、印刷媒体を模倣することもできます。細かい多色の粒はアナログフィルムのように、大きなモノクロの粒はシルクスクリーンのポスターのように見えます。粒とそれを取り入れたグラデーションは、選択的に使用することも、ページ全体に使用することも、背景全体に使用することも、特定のオブジェクトに使用することもできます。

Webflow 2021 No-Code Conferenceのウェブサイトでは、多くの粒状グラデーションを使用しています。グラデーションは、アニメーショングラフィックや背景、会議ページ全体の要素に使われていますが、印刷媒体のような効果が得られる中サイズの粒を選びました。

今年のグラデーションの使い方は、ボタンなどのボーダーの中にグラデーションを入れることです。ここでは、次のような虹色の境界線を持つボタンを作るためのチュートリアルを紹介します。

14. ラインワーク

モダンでありながら、どこか懐かしさも感じさせるトレンドが、ラインワークです。デザイナーは、セクション、ヘッダー、段落、製品ギャラリーなどを線で区切ったり、ウェブページ全体のダイナミックなグリッドを作ったりすることができます。また、ラインワークで描かれたイラスト(抽象的なものや表現的なもの)を加えることで、このスタイルをさらに進化させることができます。このタイプのデザインでは、線の太さが最終的な効果に最も大きな影響を与えることになります。

Appart Agencyのウェブサイトでは、極細の線を使用しています。その効果は、テクニカルでシャープ、そしてミニマルなものです。グラフィックデザインとオレンジ、黒、トープの色使いは、1960年代のミニマリストの芸術運動を思い起こさせます。また、スクロール時の水平線の動きも良いアクセントになっています。

Breefは細い線も使っていますが、軽い書体やイラスト的なグラフィック要素と組み合わせています。また、落ち着いたカラーパレットやマウスオーバー時の取り消し線などにより、全体的にミレニアル世代の大人っぽいカジュアルな印象を与えています。このサイトは伝えるべき情報が多く、明確なセクション分け、イラスト、淡い背景がコンテンツを際立たせています。

CPGDは、黒の太いラインで幻想的なグラフィックを表現しています。どちらかというと、若くて楽しい印象のデザインです。並んだグリッドの中の各セクションは異なる色で、コンテンツの差別化を図っており、マウスオーバーで色が変わることでユーザーを誘導しています。

15. 画面分割ウェブサイト

デザインを分断する面白い方法として、最近よく目にするようになったのが画面分割レイアウトです。デュアルレイアウトは、デザインにコントラストと視覚的な面白さを与え、コンテンツを自然に分離することができます。また、色で遊ぶ絶好の機会でもあります。

ONEIGHT7が制作したvar!-būt!のフェスティバルウェブサイトは、固定フッター、マーキースクロール、左右のスクロール方向の違いなど、このデザインに興味深い工夫を凝らしています。画面を分割することで視聴者を固定し、迷わずにたくさんの動きを取り入れることができます。

16. より多くのグラスモルフィズム

今年のゴージャスなトレンドは「グラスモーフィズム」です。透明度、ぼかし、動きを組み合わせることで、ページの構成要素をガラスのように見せることができます。このテクニックは、ロゴやイラスト、あるいはページ全体に使うことができます。Tim Ricks氏によるグラスモルフィズム効果の作り方の素晴らしいチュートリアルがあります。

このスタイルの鍵となるのは、拡散、反射、影であり、これらが目の錯覚を引き起こします。繊細な動きと組み合わせることで、ガラス効果はサイトを3Dに感じさせることができます。画像内の「すりガラス」の拡散により、視覚的にごちゃごちゃすることなく、デザインに透明感を取り入れることができます。

Tyler Galpin氏はグラスモルフィズムを用いて、動きのある魅惑的なロゴを作成しています。

Stefan Velikov氏は、この複製可能なWebflowプロジェクトでグラスモーフィズムを使用し、クレジットカードのイラストをホバーしてページから飛び出させることに成功しました。

17. ネオモーフィズムの軽減

デザインにおけるスキューモーフィズムの新しい解釈である「ニューモーフィズム」は、2020年にアプリやウェブサイトで流行し始めたミニマリストスタイルです。コントラストの低いモノクロの要素や微妙な影を使い、線やシャープな境界線を使わないことで、新しいスタイルのリモコン古いiPodを思い浮かべるような、現代のデバイスデザインを模倣しています。ここでは、Dribbleの例をご紹介します。

ニューモーフィズムが目立つのは、多くのウェブデザインとは異なるからですが、標準的な方法で作ったほうがうまくいくこともあります。私たちがトレンドとして「neumorphismを減らす」ことを選んだ理由は簡単で、このスタイルはアクセシビリティの面で最悪だからです。

コントラストと明確な区別がないため、このスタイルのサイトは弱視の人には非常に見づらく、また、影がついているため、ユーザーがどのボタンを押しているのか分かりづらいのです。CDCによると、視覚障害を持つアメリカ人の数は322万人以上と言われていますが、アクセシブルなデザインが重要なのは、障害を持つ人だけではありません。明るい環境では画面の視認性が妨げられる、ニューモルフはそのような環境では読みにくいなど、状況に応じた視覚障害に誰もがいつかは遭遇します。

米国だけでも5,300万人の方が障がいを持って生活しており、誰もが状況的な障がいを経験することになります。アクセシビリティは単なるトレンドではなく、必要不可欠なものであり、ウェブデザインの際には常に最優先で考慮すべきものです。

18. インクルーシブ・コピー

多くのウェブサイトで、インクルーシブなコンテンツや言語に配慮したデザインに移行していることに気付きました。これは当たり前のことであり、言語の影響をより普遍的に認識するための恒久的なシフトであることを願っています。インクルーシブなコピーが増えることで、ウェブはより多くの人に歓迎され、よりアクセスしやすい場所になります。

ウェブフローでは、インクルーシブな言語に関する独自のリファレンスを用意しており、すべての文書出力の指針として使用しています。また、ブランドデザインシステムページの一部として公開しています。言語ガイドラインは、企業のウェブサイトに追加すると便利な機能です。

何を言うかだけではなく、どこでどのように言うかも重要です。Altテキスト、読みやすいテキスト(フォント、サイズ、色)、画像としてのテキストを避けることは、言語や能力に関係なく、誰もがサイトの内容を読むことができるようにするための方法です。

19. ジェンダーに中立なデザイン

もうひとつのスタンダードになりつつあるアプローチは、ジェンダーに中立なWebデザインで、すでに世界中で採用されています。その第一歩は、かつてはどこにでもあった不必要にジェンダーを強調したデザインを排除することです。例えば、ピンク色のパーソナルケア製品のサイトや、キャンプ用品の火の玉とナイフをテーマにした過激なデザインなどです。女性は電動工具を購入し、男性はスキンケアを購入しますが、何も考えずに社会的な思い込みに従ってしまうことがあります。

今では、フォームやドロップダウンメニューに複数の性別の選択肢や代名詞を用意することがスタンダードになっています。アメリカ人の42%は、複数の選択肢を用意すべきだと考えています。さらに言えば、Snapchatが選択したように、ウェブサイトがこれらの選択肢を含める緊急の必要性がない場合は、両方を完全に削除することもできます。

コピーライティングの際、性別が特定されていない場合は、he or sheではなく、theyを選ぶのが新しいスタンダードです。eコマースの世界でも、多くのサイトが、性別で服を分類しないことを選択したり、複数のサイズシステムや様々な体のモデルショットを提供したりして、商品をより身近なものにしています。

あなたのウェブサイトを利用する可能性のある人々について、彼らの性別や、彼らが性別によって何に興味を持つかなどを想定することは避けましょう。このような仮定を避けることは、より敬意を表し、訪問者に喜ばれることでしょう。

20. ページスピードの優先順位

技術的な面では、今年はウェブ開発者にとってページスピードが最重要検討事項となっています。Googleの2021年のアルゴリズムアップデートにより、SEOにおいてスピードが以前よりも重要な考慮事項となりました。また、53%のユーザーが読み込みに3秒以上かかるページを放棄することから、サイトスピードのパフォーマンスに対するユーザーの期待が高まっていることも反映されています。読み込み中の画面を辛抱強く待っていた時代は終わりました。

Google PageSpeed InsightsLighthouseは、ページスピードの最適化を評価するために使用できるツールです。また、画像の最適化や画面外での画像読み込みの遅延など、開発者(またはそのプラットフォーム)がページの読み込みを速くするためにできる簡単な方法がいくつかあります。また、使用しているフォントの数を制限することも有効です。また、プラグインへの依存度が高いプラットフォームでページを開発することは、大きな影響を与える可能性があるので避けたいところです。

21. ダイナミックコンテンツの構築

ダイナミックコンテンツを使えば、デザイナーは、調整の手間を増やすことなく、より速く、より大きく、より複雑なものを作ることができます。また、データベースツールやコードレスのプラットフォームが普及したことで、ウェブデザインの経験の有無にかかわらず、より多くの人がこの方法で制作を始められるようになりました。この方法は、ウェブ制作において非常に効率的な方法であり、広く採用されるようになってきています。

ダイナミックコンテンツは、繰り返し構造にリンクしたデータベースを中心に構築されます。構造を一箇所で変更できるので、例えばブログの記事をすべて同時に変更しても、それぞれを手動で調整する必要がありません。これは、eコマース、ブログ、ポートフォリオ、レストランのメニュー、ニュースサイトなど、コンテンツが常に変化するサイトを構築している人に最適です。

静的なコンテンツは今後も利用されるでしょうが、動的なコンテンツを使った構築はウェブを席巻しつつあります。

22. より多くのチームで使われるようになったノーコード

ますます多くのチームがワークフローにノーコードを取り入れ、そのスピードと独立性の恩恵を受けています。ノーコードは、コーディングの経験がなくてもウェブを構築できる市民クリエイターのためのムーブメントに成長しています。あなたのチームも、仕事をより効率的にするために、すでに多くのノーコードツールを利用していることでしょう。

企業にとっては、より多くのチームが自社のウェブ資産を作成できることになります。人事部は、トレーニングサイト、リソースリポジトリ、企業ディレクトリなどを作成できます。デザインチームは、実用的なプロトタイプを作成したり、社内の誰もが参照できるデザインシステムを構築したりすることができます。マーケティング部門は、顧客とのコミュニケーションに使用するサイトの一部に直接貢献したり、特定のキャンペーンや地域の小規模な取り組みのためのマイクロサイトを作成したりすることができます。

ノーコードが提供する独立性は、イノベーションや実験の機会を増やし、チームがより迅速に作業できるようにします。今年は、より多くの企業が日々のワークフローにノーコードツールを取り入れ、より大きな成果を上げることを期待しています。

終わりに

2022年に向けて、これらがどのように実行されるか楽しみです。
私たちは、このリストにインスピレーションを与えてくれたサイトをナビゲートするのがとても楽しかったです。2022年は、ここ数年のトレンドから脱却し、遊び心と創造性に満ちた年になると予想しています。2022年に皆さんがウェブにどんな作品を作ってくれるのか、楽しみにしています。

また、2021年2020年2019年2018年2017年2016年のウェブデザインのトレンドをチェックして、過去にさかのぼってみてはいかがでしょうか。

Discussion