この記事の目次
2022年のWeb制作のトレンドは「シンプル」というキーワードに尽きるでしょう。
シンプルを極めたデザインにミニマリズムというものがあります。
サイトの構成要素をできる限り減らし、色使いも最小限に留めて余白を効果的に使い、すっきりとしたデザインテイストに仕上げます。
オブジェクトを立体に見せずフラットに仕上げるのもミニマリズムの一つです。
シンプルなWebサイトは、ユーザーにとって見やすく理解しやすいというのが利点です。
伝えたいメッセージにフォーカスできることが、ミニマリズムの最大の特長といえます。
ユーザーの視線を妨げ、惑わせる要素がないために、伝えたいメッセージをより明確に示すことができるのです。
ミニマルなWebサイトはシンプルな構成のため、表示速度が速いという実用的な側面もあり、今後ますます採用されるに違いありません。
モノクロとは単色のことですが、とくに白と黒を基調としたものを指します。
近年このモノクロ配色のWebサイトが増えてきました。
シンプルという点でモノクロデザインの右に出るものはなく、前述したミニマリズムの代表といえます。
カラフルなWebサイトが多い中で、逆にモノクロデザインはユーザーに強い印象を残すことができます。
サイト全体をモノクロで統一しながらも、色を一つだけ加えるのも人気の技法です。
モノクロデザインの中に配置したカラーの写真や文字は、そのコントラスト差から強いアクセントとなります。
それが商品画像であれば、よりその商品を際立たせる洗練されたデザイン効果が期待できるのです。
またマウスオーバーで色がつく仕掛けを施せば、伝えたい部分をインタラクティブに強調し、強く印象づけることもできます。
文字でデザインをすることをタイポグラフィーといいます。
近年このタイポグラフィーを利用したWebサイトが増えてきました。
中でも大きなサイズの文字を配置した、ファッション雑誌のような大胆なデザインがトレンドです。
標準的な大きさの文字は、文字本来の機能しか持ち得ません。
しかしある大きさ以上になると、文字でありながらグラフィックとしての役割も担うようになります。
その結果、文字としてメッセージを伝えると同時に、写真やイラストのようにイメージを伝えることもできるのです。
タイポグラフィーはインパクトが強く、単なるグラフィックから受ける印象より鮮烈に記憶に残るといえます。
このため、Webサイトのファーストビューに用意するヒーローイメージも、文字だけで構成されたものも登場してきました。
コーポレートサイトであれば、明確に伝えたいメッセージがあるはずですが、これをタイポグラフィーで伝えようとするものです。
メッセージでありながらデザインでもあるタイポグラフィー。
文字の形、太さ、大きさ、色にこだわることで、よりメッセージ性を高める効果があります。
ユーザーの操作に応じてフォントが大きさやウェイトを変えるインタラクティブフォントもトレンドといえます。
とくに前述した大きなタイポグラフィーと組み合わせることで、最も伝えたいメッセージをさらに強く印象づけることができます。
インフォグラフィックスとは、テキストだけでは伝わりづらい情報をイラスト・チャートなどで分かりやすく表現したものです。
Webサイトの他、標識や地図、ビジネスレポート、プレゼンテーションなどにも広く用いられるデザイン技法です。
ひと目で内容を理解しやすいため、伝えたい情報を的確にターゲットに届けることができます。
またビジュアルデザインは、テキスト以上に印象や記憶に強く残るため、広く使われるようになりました。
コンパクトな図表に情報がシンプルに配置されて分かりやすいため、閲覧者がSNSで拡散してくれるという利点もあります。
ブルータリズムとは、1950年代にヨーロッパで見られた打ち放しコンクリートなどの建築様式のことです。
Web制作におけるブルータリズムとは、まさに生コンクリートのように素材そのものの特徴を引き出したデザインを指します。
Webにおけるブルータリズムを提唱したエンジニアのコープランドによって
全ての合理的な画面とデバイスでコンテンツを読むことができる
クリックに反応するのはハイパーリンクとボタンだけ
ハイパーリンクには下線が引かれ、ボタンはボタンのように見える
戻るボタンは期待通りに動作する
コンテンツはスクロールして表示される
必要な時に装飾を施し、関係のないコンテンツは表示しない
サイトの表示速度（パフォーマンス）は機能である
（出典：Guidelines for Brutalist Web Design）
という7点のガイドラインが示されていて、よけいな演出を削ぎ落とした、シンプルかつシャープなデザインが特徴です。
このためWebデザインのトレンドから逸脱し、90年代の基本デザインを彷彿とさせるようなイメージすら感じさせます。
ダークモードとは、ディスプレイの背景を黒または濃紺といったダークカラーに切り替えるモードのことをいいます。
PCやスマートフォンのOSの機能として用意されているほか、一部のモバイルアプリにもその機能を持つものが出てきました。
画面が暗いため目が疲れにくく、モバイルデバイスのバッテリー消費を抑制できるという利点があります。
このようなダークモードに対応したWebデザインが少しずつ広がってきました。
とはいえダークモードの広がりは、目に優しいなどの実用面からだけではありません。
トーンが抑えられるため高級感を感じられる、という理由でダークモードを愛用するユーザーも増えているのです。
デバイスのダークモード設定にあわせて、CSSで自動的にWebサイトもダークモードで表示することができるようになりました。
今後は、ユーザーの好みによって自由にダークモードとライトモードを切り替えられるようにもなっていくと考えられます。
ニューモーフィズムとは、シンプルなフラットデザインにリアルな質感を加えたものです。
ボタンなどのUI要素に、質感や立体感を与えることができる新しいデザイン技法です。
シンプルで洗練された印象を与えるだけでなく、UIを表現するために必要な色数が抑えられるという利点があります。
ダークモードとライトモードを切り替えて画面の色が変わっても、UIは質感で表現されているため戸惑うこともありません。
トレンドになっているダークモードとの親和性が高いことは、これからの伸びしろを示すものといえます。
ただ、色ではなく質感だけでUIを表現するというのは、ユーザーによっては見づらい場合もあるため注意が必要です。
その他のトレンドも、直接的にはシンプルなデザインとはいえないものの、過剰な演出が施された過去のトレンドを今風にシンプルにアレンジし直したものが目立ちます。
背景にグラデーションを用いるデザインがトレンドになっています。
といっても線形あるいは円形に色が変化していく単純なものでなく、近年のグラデーションは複雑な変化を見せるようになっています。
さらにアニメーションを組み合わせたり、フィルターをかけて質感を持たせたりと、デザイン上の工夫がなされています。
また背景に用いられるだけでなく、CSSで文字色に変化を持たせる例もあります。
イラストなどにも活用することで背景との奥行き感が強調され、より洗練され記憶に残りやすいデザインにもなります。
グラスモーフィズムとは、半透明のぼかし要素を用い、磨りガラスを通して見るようなデザインのことです。
背景をぼかして見せることで透明感や奥行き感を演出し、手前にあるオブジェクトをより強調するデザインです。
デザイン上、オブジェクトやテキストを重ねることはよくありますが、そのために背景は少なからず損なわれてしまいます。
しかしグラスモーフィズムでは背景を完全には損なわず、かえってぼんやり見せることでイマジネーションを掻きたてる効果があります。
視認性に優れ、圧迫感なく階層構造を伝えることができるデザインといえます。
近年、Webサイトに立体的な3D要素がふんだんに採り入れられるようになりました。
私たちは3Dのリアルな世界に住んでいます。
このため、表現できるのであれば3Dで表現した方がサイトの理解が容易になるのはいうまでもありません。
オブジェクトに奥行きがあり、光による明暗や陰影があることで、デザインに躍動感が生まれます。
Web黎明期には、リアルな世界をWeb上に持ち込むデスクトップメタファーのようなものが流行したこともあります。
それらは多くの場合、ちゃちな3Dデザインで表現され、逆にユーザーの失望を買うものでしかありませんでした。
ところが近年のGL（グラフィックライブラリー）の充実や、3Dデザインツールの高性能化によって覆りつつあるのです。
また新型コロナによるステイホームで、出かけずともその場にいるようなリアリティを追求する動きも出てきました。
たとえば美術館や博物館のオンライン鑑賞や、工場や企業のオンライン見学など、3Dデザインの需要は高まる一方です。
これらの追い風を受け、Webデザインは長い歴史を経てついに3Dを駆使して没入感を高める次元に達しつつあるといえます。
回転する3Dキャラクターやアニメーションとの組み合わせ、3Dで表現した人物イラストなどがトレンドになっています。
2Dアニメーションと比べて臨場感に富み、情報量も桁違いに多く、またはるかに印象に残りやすいからです。
また、フラットな2Dデザインに奥行き感などの3D要素を加えて構成したデザインも注目の新しいスタイルです。
パララックスとはもともと写真用語で、ファインダーとレンズの視点のズレ、つまり視差を意味する言葉です。
Webサイトにおいては、スクロールによってオブジェクトを異なるスピードで動かし、奥行きや立体感を演出する視覚効果を指します。
手前にあるべきオブジェクトは速く、奥にあるべきオブジェクトは遅く動かすことで立体を表現しようというものです。
画面スクロールにあわせて新しい画像が出たり、立体的に動いたりするため、ユーザーの興味を引き立てるデザインといえます。
一時期、熱狂的に受け入れられ、パララックスアニメーションのないWebサイトがないほどまでになりました。
しかし次第に演出が過剰となって、ページ表示の速度が著しく低下するなどの弊害が指摘され、いったん廃れていました。
その後、マシンスペックや通信技術の向上などにより、パララックスが再び注目されるようになっています。
トレンドのパララックスは過剰な演出を廃したシンプルなもので、限定されたポイントにのみ用いてユーザーの注意を引くものです。
ユーザーは自らのスクロールで物語が進むような感覚にとらわれ、より能動的に閲覧しようという動機になります。
アイソメトリックとは、アイソメトリックプロジェクションの略で、立体の対象物を平面に描く等角投影法のことです。
対象物の縦・横・奥行きの3軸の角度がそれぞれ120°になるように描き、対象物を斜め上から見下ろした図になります。
Webデザインではイラストとしてフロアマップや俯瞰図に使われることが多く、立体感や奥行きを表現します。
グラデーションに頼ることなくシンプルに立体物を表現できるのが特長です。
未来的なイメージを表現できるため、町の将来像を俯瞰図として表現する例をよく見かけます。
その他、Webサイトの世界観を伝えるために用いられる例もあります。
ブロークングリッドレイアウトとは、あえてレイアウトを崩すデザイン技法のことです。
コンテンツ同士を重ねたり、はみ出させたりするレイアウトで、非対称レイアウトとも呼ばれています。
Webサイトは規則正しく美しく配置するグリッドレイアウトが基本とされてきました。
しかし、それではなかなかオリジナリティを表現することができません。
注目を集めたいメッセージの周りのレイアウトをあえて非対称すれば、そこにユーザーの視線が注がれます。
崩れたレイアウトに感じる違和感を利用する技法です。
Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。
LIGブログに掲載されました
