【2023年】歴史から知る「今」必要とされるWebトレンド

デザイン顧問 Mayu

こんにちは、デザイン顧問のMayuです。

2023年最初は、新年にふさわしく「今年はどんなWebサイトが流行するのか？」から始めましょう。この記事ではWebサイトの変遷を交えつつ、トレンドを取り入れることの重要性と今後おさえておきたいポイントをご紹介します。

Webサイトのリニューアルを検討されている方、トレンドの取り入れ方にお悩みの方は、ぜひお読みください。

トレンドを追う必要はある？

正直に言うと、トレンドを過剰に追う必要はありません。とはいえ、ユーザーに「遅れている」印象を与えないようにすることも大切です。では長期間使用するWebサイトを制作するにあたって、どの程度トレンドを取り入れたデザインにしておくべきでしょうか？

そこには、追うべきトレンドと追わなくていいトレンドの両方が存在しています。

追うべきは「使いやすさに直結するトレンド」です。これらはユーザーの閲覧環境とネットワークの進化によってもたらされた変化が多く、Webサイトの印象や評価に直結するからです。ここからは環境の進化に伴うWebデザインの変遷をおさらいしつつ、私たちが追うべきトレンドを紐解いていきましょう。

Webデザインの変遷

1990年代：テキストベースのWebサイトが広まる

1991年8月6日、ティム・バーナーズ＝リー博士が世界で最初のWebサイトを公開しました。世界を驚愕させたシステム「World Wide Web（www）」は、瞬く間に世界中へと広がります。ワンクリックで他のページへ遷移できる「リンク」機能を活かし、複数ページによるWebサイトが多く誕生しました。

初期のWebサイトは通信データ容量の少なさから、テキストのみの軽量なデザインが主流であり、画面を複数に仕切る「flameset」が多用されました。この時代に大切だったのは、まず情報を伝えることでした。flamesetは、それを分かりやすく確実にするための仕組みとして、多くのデザイナーが取り入れた使いやすさに直結する最初のトレンドだったのです。

flamesetのサポートは既に終了しているため、このタイプのWebサイトを見かけることはめったにありませんが、2019年の東京モーターショーでは、ヤマハ発動機株式会社が「ギガの足りない方向けの特設サイト」というコンセプトで、当時のWebデザインをオマージュしたWebサイト（※1）を発表し、話題となりました。

そして1990年代後半、Webサイトに革命が起きます。「Flash」の誕生です。

※1：ヤマハ発動機株式会社：東京モーターショー2019（特設爆速サイト）

2000年代：動きのあるコンテンツの台頭

1996年に開発された「Flash」は、サウンドやアニメーションをふんだんに取り込んだコンテンツを制作できる仕組みで、2000年代に大流行しました。HTMLだけでは不可能だった「動き」の要素を取り入れることで、表現の選択肢が格段に広がったのです。当時はTERAもFlashを使用したWebサイト（※2）を数多く制作していました。

こうして世界を席巻したFlashでしたが、セキュリティ問題やHTML5の台頭などにより徐々に衰退し2020年12月31日にサポートが終了。当時のコンテンツを閲覧することはできません。

FlashはWeb表現の世界に一時代を築きました。「独創的な表現がしたい！」そんなデザイナーの思いを叶えWebデザインを一変させたFlashは、今回のキーワードである「使いやすさに直結」とは異なりますが、忘れられないトレンドの一つです。

Webデザインの重要な要素である「CSS」への対応が進んだのもこの時代でした。さまざまな表現が可能になり、グラフィカルなWebデザインが多く生まれました。さらにSNSなどのソーシャルメディアも登場し、現在のWebマーケットの基盤が固まってきた時代です。

※2：株式会社テラ：2004年時点の企業サイト（web.archive.orgより）

2010年代：スマートフォンの一般化が進む

2007年1月9日、インターネットの世界を激変させる製品がAppleから発表されました。

そう、「iPhone」です。

その後2010年代に入ると、スマートフォンが広く使用されるようになりました。2014年にはビデオ・映画の視聴環境でスマートフォンがPCを上回り、やがて動画に限らず、多くのWebサイトにおいてもスマートフォンの閲覧数がPCを上回っていきます。「PCを持っていない」というユーザーも増えていきました。

このような流れを受け、Webデザインにも大きな変化がありました。「レスポンシブ（デザイン）」という仕組みの登場です。

これは、ひとつのURLでPC、スマートフォン、タブレットといったデバイスごとに最適な画面表示を行う仕組みで、Webサイト管理の効率化、SNSとの親和性の高さといった観点からも、現在も主流となっている手法です。

この流行を大きく後押ししたトレンドが、平面的でシンプルなボタンに代表される「フラットデザイン」です。

それまでは「直感的にわかりやすく」といった観点から、立体感のあるデザインが多く使われていましたが、画像パーツが必須となり、通信速度が限られるスマートフォンでは表示速度の低下につながっていました。対してフラットデザインはHTMLとCSSのみで描画できるため非常に軽量で、レスポンシブデザインとの相性もぴったりでした（※3）。

まさに環境がもたらした「使いやすさに直結」するトレンドであり、私たちが追うべきトレンドの方向性を示しているといえます。

そして2018年、Googleは2021年までにモバイルファーストインデックスへ移行すると発表しました。これはページ検索にモバイル版のコンテンツを使用し、モバイルユーザーが探している情報を見つけやすくするための仕様です。このため、スマートフォン表示に最適化されたWebサイトが重要となり、レスポンシブは広く普及することになりました。

※3：株式会社テラ：2010年代後半の企業サイト（web.archive.orgより）

現代のWeb制作のトレンド

ここまで見てきたように、ユーザーの閲覧環境・通信環境の変化に沿ってWebのトレンドは変化してきました。ユーザーの使いやすさには各種環境とWebデザインが密接な関係にあると言えるでしょう。

さらに、UX（ユーザー体験）が重視される近年、立体的なデザインに遅れを取っていたフラットデザインは「直感的なわかりやすさ」を補うため、シャドウを組み合わせて注目度を上げるなど、シンプルな構成のままリッチな実装が進んでいます。無限スクロールやシングルページといった、クリックを必要としないページ構成も増えてきました。

このようにWeb環境の進化は早く、新たな「使いやすさ」が当たり前になることで、それまで普通だったことが「使いにくい」となることもあります。ですから、ターゲットとなるユーザーの使いやすさを追うことはとても重要なのです。冒頭で述べた「使いやすさに直結するトレンド」は追うべきという理由は、ここにあります。