#18「2021年のデザイントレンド」

アートディレクションチームの遠藤さんをゲストにお呼びして、2021年のデザイントレンドを中心にお話ししました！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

加藤
こんにちは！
遠藤
こんにちは！
加藤
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのPodcastです。
本日はアートディレクションチームのアートディレクターである遠藤さんをゲストにお迎えしていろいろなお話をお伺いします！遠藤さんよろしくお願いいたします！
遠藤
よろしくお願いします！
加藤
早速ですが、まずは自己紹介もかねてアートディレクションチームで普段やられていることなどを教えてもらってもよいでしょうか！
遠藤
はい。私たちのチームは、お客様向けにWebサイトのデザインをご提案するというのが主な活動ですね。たとえばコーポレートサイトをリニューアルしたいとか、新サービス用のサイトを立ち上げたいとか、そういったタイミングでお声がけいただいて、それに合うデザインをご提案するという流れです。
加藤
はい、ありがとうございます。私は提案に関わったことがないのですが、競合調査とか、お客さまへのヒアリングからスタートする感じですか？
遠藤
あ、そうですね。最初はデザインを作るための材料をたくさん集めたいので、まずはいろいろ調べものをする、というところから始めますね。で、そのあとお客様にヒアリングのお時間をいただいて、整理して、また調べものして、って行ったり来たりしながらまとめていく感じですかね。
加藤
なるほど。ちなみに提案の仕方は時代によって変わったりするものなんでしょうか？
遠藤
はい、コロナの影響で最近はほとんどプレゼンもオンラインですね。やっぱり対面とは全然違って…だから、ちゃんと伝わるようにプレゼン方法を考え直したり、っていうのはありますね。
加藤
そうですよね。対面とは違うところとか、工夫されているところってなにか具体的に話せるものはあったりしますか？
遠藤
そうですね…対面であれば、お客様を見て、状況に応じて話す内容とか調整したりっていうことがしやすいんですけど、オンラインだともしお客様がプレゼン聞きながらちょっと「ん？」って思っても、こちらが気づけずにどんどん話して進めてしまって、もやもやしたままってこともあり得るんじゃないかなというのはあるので、だから話が一方通行にならないように、話すスピードとか、間の取り方なんかは対面とは変わりますね。
加藤
なるほど…いろいろ難しそうですね！
遠藤
そうなんですよ…！あとはもちろん、デザイントレンドも変わってくるので、そこはキャッチアップしつつ取り入れてという感じです。
加藤
下調べやヒアリングをしながら土台を固めつつ、最近のトレンドもとりいれているわけですね…！ちなみに、遠藤さんが最近こういうデザインよく見るなぁという表現はあったりしますか？
遠藤
あー、なんかすごい丸みのあるデザインはよく見かけますね。
加藤
丸みですか。なるほど…私はあまり感じたことがないポイントですね！これまでのいわゆるカードとか、ボタンに使用してきた角丸などの丸みとはまた違った感じですか？
遠藤
あ、そうですね、もっとしっかり丸いというか。今までのカードとかボタンの丸みってこう自然な丸みというか、たとえばタップできそうだなみたいな機能的なところから使ってる感じがするんですよね。
とはいえもちろん最近の丸いのは機能的じゃない、ということではなくて。個人的には最近のにはもうちょっと感覚的な面があるような気がしてますね。
加藤
パーツ単位で丸いというよりは、ページ全体の輪郭が丸いというか、どちらかと言えばやわらかい印象を持たせるものって感じですかね。そういうデザインが増えてきている理由って思い当たるものありますか？
遠藤
うーん…。これっていうのがあるわけじゃないんですけど、フラットデザインからの揺り戻しの流れなんですかね。フラットデザインが出てきたぐらいの時って、Windowsのタイルとか、きっちり四角でパキっとしてて、装飾も限りなく削ぎ落としてっていう方向に行ってましたよね。
加藤
たしかにそうですね！
遠藤
で、そこから先は徐々に揺り戻しが来たというか、どのサイトも似てきちゃうのを避けたいってことで、たとえばイラスト使いとか、あと、ブロークングリッドもそうかもしれないですね。で、その流れの中で丸みのある表現も出てきて、感覚的にはここ1、2年ぐらいですかね。特に目立ってきてるかなって思います。
加藤
すみません、ブロークングリッドというのはどういう表現ですか？
遠藤
はい、ざっくり言うと、縦横きちっと揃えて要素並べた感じのレイアウトとは違って、あえてどこかずらしてるような見た目のレイアウトのことですね。
加藤
あー！たしかに、よく見ますね…！実はレスポンシブでいい感じに実装するの地味に大変なんですよね笑
遠藤
ですよね…！いつもありがとうございます笑
加藤
いえいえ、とんでもないです。
遠藤
あ、あとOS側からの影響もある気がするんですよね。少し前だとmacOSのBig Surとか、直近だとWindows11とか、GoogleのMaterial Youの発表があって、すごい丸さが目立ってる感じがしましたね。
加藤
なるほど、面白いですね！たしかにWindows11もすこし透明感のある、優しい印象でしたね。
ちなみにコロナの影響がもろに受けてるなーみたいなことも感じたりしますか？
遠藤
あ、ありますね。コーポレートサイトとか採用サイトの写真選びの話なんですけど、今までと違って、オフィスにたくさん人がいて仕事してる風景って、コロナ禍でリモートワークになったお客様だと違和感出ることがあるんですよね。なので違うシーンの写真で表現したりとか、そういうことは増えましたね。
加藤
なるほど、たしかにいろいろ気を遣う必要がありそうですね…！
ほかにもトレンドっぽいものってありますか？
遠藤
えーっと…それ、トレンド？って言われてしまうかもしれないんですけど、引き続きタイポグラフィが気になってます。メッセージを立たせる見せ方がかなり増えた印象があって、たとえばサイトのメインのエリアで、写真とか動画の上に文字を重ねないで独立させて、文字が先に来るようにレイアウトしたりとか、あと言葉自体をデザインしてビジュアルのように見せているのもありますし。これまでもあったんですけど、さらに表現のバリエーションが増えたなと思いますね。
加藤
それは私も感じてますね！いろんなサイトを見ていても、テキストを大きめに見せて、段落自体は少ないページがけっこう多いですよね。
遠藤
そうですね。それに技術的な面でも、源ノ角ゴシックっていう日本語に対応した書体が最近バリアブルフォントになったんですよね。そういう流れから見ても、ますますタイポグラフィ表現の幅が広がっていくんじゃないかなと思います。
加藤
やっぱりバリアブルフォントだと表現の幅は広がるんですね。
遠藤
そうですね、細かいレベルまで太さを調整できるので、今までみたいな数パターンから選ぶのよりもっとイメージに合う表現ができるようになるかなと思います。
加藤
なるほど。開発においても今まではフォントのウェイトに応じて複数のフォントファイルを読み込む必要があったんですけど、バリアブルフォントなら1つだけで済みますし、軸を基準に簡単なアニメーションだったらCSSだけでできたり、Webフォントとしてバリアブルフォントを使う利点もけっこうありますね。
遠藤
そうなんですね。メリットが多そうなのでますますバリアブルフォントは増えていきそうですね。
加藤
そうだと思います！
遠藤
個人的には今話したような感じなんですけど、開発側から見て最近こういう表現よく見るなーっていうのあったりするんですか？
加藤
うーん、デザイナーさんとの話であまり出てこないなーというところを突っ込むなら、ダークモードとかですかね。多くのエディターのデフォルトが黒背景であることが多いのと、白背景よりも、黒背景のほうがソースコードのハイライトをしたときに見づらくなりづらいというのもあって、やっぱりGitHubのような開発者がよく使うようなサイトではダークモード対応しているサイトが多いですね！
遠藤
たしかに、エディターとサイト行き来した時に違和感なさそうですし、見慣れている見た目のほうが、親近感っていうと言い過ぎかもしれないですけどなんとなくいい印象を持てそうですよね。
加藤
そうなんですよね！
遠藤
ちなみに、デザインするってなると個人的には配色が難しくて。普段慣れてるのは明るい背景色のデザインなので、文字の色とか背景色の濃淡とか選ぶときになんか感覚的に逆な感じがして。黒い紙に白い鉛筆で絵を描くみたいな。その感覚の違いが難しいんですよね。
加藤
あー分かりやすい例えですね…！たしかに絵を書く時も黒いキャンバスより、白いキャンバスのほうが一般的ですもんね。
遠藤
そうなんですよね。
加藤
もっと一般的なところだと、チャットでお問い合わせできるUIだったり、スクロールするとコンテンツがフェードインしてくる表現はいたるところで目にしますね。
遠藤
見ますね。必要なときには便利なんですけど…正直サイト使ってて押しそうになって「あっ」て思うことはあります笑
加藤
ありますね。
遠藤
ちょっと気になっているのが、スクロールと連動するコンテンツって実装するの難しいイメージがありますけど最近はそんなことはないんですか？
加藤
いや、ちゃんと作りこもうとするとやっぱり難しいんですけど、たとえばノーコードで作ったWebサイトなんかはスクロール連動のアニメーションがついている印象はありますね。ノーコードサービスって使ったことありますか？
遠藤
Adobe Museなら少しだけ触ったことはあるんですけど、他は使ったことないですね。
加藤
Adobe Museは実は今年の3月でサポート終了してしまったらしいですよね。でもノーコードでWebサイトを作るツールの一つです。
これは個人的な感覚になってしまうんですけど、ノーコードサービスを使ってドラッグアンドドロップで作るようなページは、自然とセクションが明確に分かれるようになるので、スクロール量に応じて表示するという表現をしやすいのかなぁと思っています。あとは、ブラウザ側の進化によって、アニメーションがこれまでよりスムーズになったりとか、採用されやすくなったのかもしれないです。
遠藤
なるほど！単純に流行ってるからだけじゃなくて、いろんな要因に左右されてるんですね。
加藤
そうですね。最初に遠藤さんがOS側の影響を受けているかもとおっしゃっていましたが、その辺りはデザインも開発も似たような状況かなと思います。
最後に遠藤さんが最近この表現よく使うなぁーとか、これトレンドになりそうだなぁ～と思っているものがあれば教えてもらえますか？
遠藤
うーん…前のテックラジオで新しいレスポンシブWebデザインのお話されてたじゃないですか。その関連動画見てる中でとか、さっきちらっと触れたWindows11もそうだったりするんですけど、なんとなくコンポーネントとかパーツが目立ってるような感じがしたんですよね。使う人側のカスタマイズの考え方が強くなってる気がするんですよ。そうなると、たとえばカードっぽい見た目のなかでトレンドができたりとか、タイポグラフィもますます注目されたりするのかなーっていうのは思いますね。
加藤
なるほど、たしかに開発するときも、Webアプリケーションとかは特にコンポーネントベースで組み立てることが増えてきましたし、Web Componentsっていうモジュールを独自の要素として定義することができる技術もあるので、コンポーネントだったりパーツっていうところは今後注目していった方がいいかもしれませんね！
はい、ということで、本日はアートディレクションチームの遠藤さんとデザイントレンドを中心にお話ししました。普段開発のことばかり考えているので非常に興味深い内容でした！遠藤さんは、いかがでしたでしょうか！
遠藤
はい。開発者さんとここまでまとまってデザイントレンドの話する機会って、なかなかなかった気がしますね。なので、いろいろ聞けて楽しかったです！ありがとうございます！
加藤
こちらこそありがとうございます！またゲストとしてお呼びするかもしれないのでその時はよろしくお願いします！
遠藤
はい。よろしくお願いします！
加藤
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。 また、このPodcastはApple Podcast、 Google Podcast、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。それでは今日はこのへんで、ありがとうございました！
遠藤
ありがとうございました～！