これからくるWebデザインと定番デザイン2020年9月
デザインにおいて「新しい」という印象を与えることは重要な要素の一つです。とりわけウェブデザインにおいて見る人に「新しい」と感じさせることが出来るかは、とても重要な要素になります。おそらくウェブという歴史の浅いメディアの性質上、普遍性が求められていないという事かもしれません。テクノロジーの変化によってデザインの可能性が進化するウェブでは、他の分野のデザインよりも、最新の技術や手法を活用して「今」感が表現されているか、デザイナーはシビアに向き合う必要があります。
ということで、世界中のデザイナーが「ウェブトレンド」について、記事を書いたり、検索したりして日々研鑽しています。
今回は、これから「くる」かもしれない意外(?)なデザイン手法をご紹介します。
また同時に、現在定番化したデザイントレンドもご紹介します。
１：marquee(マーキー)が戻ってくる！
2000年前後にウェブ制作をされていた方にとってはなつかしい「marquee（マーキー）」が復活の兆しを見せています。マーキーとは右から左へ文章をスクロールすることができるhtmlタグです。
一般的には「ダサい・古い」の代表格として、捉えられています。しかし、使い方によってはお洒落になるんです。ただし、あの頃とは違って太く、大きめなフォントでデザイン要素として使うのが今風にみせるポイントです。
https://webflow.com/blog/web-design-trends-for-2020#marquee
https://www.deplacemaison.com/
黄色い「DO NOT SCROLL」部分がmarqueeで右から左へ流れます。動きは同じなのに、不思議と今っぽいのは、デザインがもたらすマジックです。でも、実はこの動き<marquee></marquee>タグは使用していません。Jsで動かしています。それでも、クラス名に“marquee”が使われているのは、古き良きmarqueeへのリスペクトです。
２：パターン
上のmarqueeと同様、リバイバル系のデザイン手法です。
「今更？」と思う方も多いでしょう。しかし、ちょっと昔とは違います。昔は本当に背景（なんだか分からないように使用する）だったのですが、2020年はメインのビジュアルイメージの1つとして存在感ある扱いが目立ちます。
https://simplychocolate.dk/
チョコレートバーのウェブサイトです。
数種類のチョコレートバーがあります。スクロールで種類が切り替わり、背景色と背景の内容物を配したパターン（キャラメル、ミント、フルーツ、ナッツなど）が商品ごとに切り替わります。1スクロールで1商品ずつ切り替わるので、一目で内容がわかりやすく、美しいサイトです。パターンが飾りではく、内容物を伝えるという役目を果たしています。
パターンから話はそれますが、このサイトは、同じくスクロールでそれぞれの中身が見ることができる動きの付け方が洒落ています。さらに、この画面から実際に商品を購入できるスムーズな作りがすばらしいです。デンマークの会社ですが、キャッシュレスが進んでいる国ゆえのスマートな導線です。
３：ダークモード
iPhoneの画面設定でダークモードが設定できるのはご存知でしょうか？iOS 13からの機能で、iPhoneの「設定＞画面表示と明るさ」から選択できます。もちろんWindows10やMAC、Android、SlackやInstagramなど、採用するOSやアプリはたくさんあります。
このダークモードが流行っているのは省エネで目に優しく、文字が読みやすいという理由からです。そのダークモードの波がウェブデザインにも到来しています。
簡単にいうと、黒(っぽい)背景のデザインです。アプリのUIをイメージしてもらえばイメージしやすいですね。これも「今」感を感じる表現です。
一般的な企業のウェブサイトでは黒背景は向かないと言われてきましたが、もしかすると環境に配慮したデザインのトレンドになるかもしれません。
https://www.netflix.com/jp/
背景を暗くしているので、ポイントで使うアクセントカラーの鮮やかさが引き立ちます。
画面の大部分をダークな色が占めるので、レイアウトとアクセントカラー、写真で違いを出す必要があります。また、ダークトーンを使用する場合は、他のウェブサイトと印象がかぶらないよう注意が必要です。
４：実写とグラフィック（イラスト）のコラボレーション
まずは、例をご覧ください。
https://zhenyary.com/
文字通り、写真とグラフィックがメインのデザイン要素として共存しています。
https://www.deplacemaison.com/
このサイトは１番目のmarqueeでもご紹介しました。
写真とデザイン要素を合わせて新鮮なビジュアルをつくることに成功しています。さらにカーソルにくっついてくる「マウスストーカー」の採用など、非常にチャレンジングなところが魅力です。イタリアのシューズメーカーらしいのですが、使い勝手よりビジュアルを選ぶところにお国がらを感じます。
写真だけだとそのままのイメージしかありませんが、こうやってグラフィック要素が加わることで優しい印象になったり、遊びの要素がうまれ、オリジナリティもワンランクアップします。
次は企業のウェブサイトで多く採用されている、現在の定番デザインのご紹介です。
定番デザイン１：重なるレイヤー
https://artsdistrictkitchen.com/
https://casa-recruit.jp/
もう今では特に珍しくなくなった、レイヤーを多用したデザインです。
とはいえ、平面的だったスクリーンに奥行きを与え、複雑さを出すという手法はこれからもずっと有効なテクニックです。サイズ感や重なり感はその年のトレンドによって変わりますが、「揃える」がメインのグリッドデザインと同じくらい「重ねる」デザインも主流となりました。
定番デザイン２：白スペースを生かしたシンプルなデザイン
https://about.mercari.com/
スペースをとり、空間をデザインにする手法も、ここ数年でよくみられる手法です。
さらに、装飾という点でも、よりミニマムなものが好まれ、最後はアートになるのでは？とすら思わせます。フラットデザインの流れも相まって、まだまだこのテイストも好まれそうです。このデザインのポイントは、余白の取り方です。余白を恐れず、情報の塊を意識してデザインしてみましょう。
定番デザイン３：色違いのグラデーション
https://glassfactory-shop.jp/lp/carl-zeiss/
インスタの流行で色違いのグラデーションはウェブ、グラフィックを問わず多用されています。そして、その流れは未だ継続中で、しばらくはこのグラデーション使いが有効なテクニックとして活用されるでしょう。しかし、これだけいろいろなシーンで見かけるとなると、数年後には時代感が出ちゃう代表格になりそうです。
定番デザイン４：手書き＆縦書き&異フォント
https://www.tribalmedia.co.jp/
手書き文字はそれだけで、ウェブサイトのデザインに表情を添えることができます。
でも、テキストなのに画像にしなければならず（手書き風ウェブフォント使うなら解決）、SEO的には悩みの種にもなりがちです。とはいえ、その効果は絶大で、フォント1つで世界観をつくることも可能なのです。メインのビジュアル要素として割り切って使っていくのがベストといったところでしょう。
https://www.potel.jp/kyoto/cityguide/
ウェブサイトなら、「文字要素は横組」というのは一昔前のはなしです。確かにテキスト扱いにすると、ユーザー環境によってはうまくいかないことも多いのが悩み。しかし、縦と横、日本語には両方の文化があるのですから、縦組みだって使いたい！
デザインで効果的な要素となるなら、躊躇わず、採用することをお勧めします。
https://readycrew.jp/
「違うフォントを合わせる。」
これも、ウェブ・グラフィック問わずよく見られる手法です。明朝体+ゴシック体、普通のフォント+手書き文字。文字のサイズや色を変えてみることで、これだけでいくらでもパターンができます。
まとめ
ということで、今回は「意外にくるかも？！と思うデザイントレンド」と「定番もの」をご紹介しました。仕事柄、ウェブサイトのチェックは欠かしませんが、デザイントレンドは社会全体で起こっているものですから、メディアは関係ありません。ユーザー側にとってウェブ・グラフィックの垣根はありません。
実際、ウェブデザインを生業とする私が「このデザイン、はやっているな〜」と実感するのはテレビです。番組のロゴやテロップ、CMなどでも手書きフォントの手法やインスタ風のグラデーションはよく見かけます。テレビのようなマスで多用されるということは、多くの方が目にするということになります。結果、目にする機会が増えることでユーザーの皆さんにとって、親しみがあり、「今」感を感じられるものになるのだと思います。
もちろん、ウェブ発信のデザインもたくさんありますが、どこが起源ということよりも、どんなものが好まれているかという現象を察知すること。それはデザイナーにとって大切なことなんじゃないでしょうか。
トレンドだけではいいデザインはつくれませんが、トレンド抜きには「今」を語れないのも事実。クライアントのメッセージをトレンドにのせてお届けできれば、オリジナリティとトレンドの両立もすぐそこです。
デザインて本当に面白いですね。
WEBデザイナー ／ Y.E
