KNOWLEDGES Nov 8th, 2019

2019年-2020年 Webデザインの現在のトレンド 岡本愛美(株式会社アートリー)インタビュー

OUTLINE/ 概要

インターネットが普及するにつれ、Webサイトのデザインは絶え間なく進化しています。現在のマーケティングでWebデザインが果たす役割は非常に大きなものとなっています。今回は現在のWebデザインの主流と、今求められているWebデザインについて、様々な観点から取り上げていきます。

デザインの「動き」が生み出す視覚効果

岡本:少し前に「シネマグラフ」が流行になりましたね。静止画像の一部だけに簡単な動きを付けるという表現方法ですが、食べ物を美味しそうに見せるのにとても効果があります。淹れ立てのコーヒーから湯気が立ち上っている様子ですとか、野菜から水滴が落ちてみずみずしい感じを表現できるのです。動画を使うとページが重くなるのですが、シネマグラフなら静止画像に近い画像素材ですし、ページの要所要所だけに使えばよいので軽いページに仕上げることができます。シネマグラフの場合、ページをスクロールした時に多少の違和感が出ますが、その不自然さが逆に人目を惹きつける効果を生むという側面もあります。

最近見かけたコスメ系サイトの例で挙げますと、女性の上の方でカーテンに当たった光だけに動きがあるような感じにしたページがありましたね。こういった“雰囲気”を出すためのテクニックが流行していて、主に挿し絵部分によく使われますね。

岡本愛美
デザイナーの観点からWebデザインの流行について語る岡本愛美

「ぼかす」「にじませる」微妙な表現がトレンド

岡本:そのほかには、化粧、メイクでも、ぼかしたりにじませたりする方法が流行していますので、「ぼかす」「にじませる」ような微妙さがある表現がデザイン全体のトレンドなのかもしれませんね。スマホアプリ「SNOW」にも写真にフィルターをかけて質感をぼかして肌をきれいに見せる機能があります。にじませたりぼかしを入れたりしてソフトな感じにするのが好まれているようですね。SNSなどでトレンドが生まれては消えていく中で、大きなブームが生まれることもあります。個人の趣味や嗜好などのデータを集めて解析する手法が飛躍的に進歩していますので「こういうものが流行している」というトレンドがつかみやすくなってきていると感じています。流行している画像加工の内容からもデザインのトレンドが見えてきます。デザインを考える上で参考になりそうなサイトをいくつかチェックしても、テイストが似ていると言うのでしょうか、どれも同じような構造だったりすることも多いですね。

また、英語やアルファベットをインパクトとして使ったり、画像を大きめに配置したりなどメリハリを付ける感じが好まれているようですね。使われる画像の写真素材自体も、寄って大きめに撮影したものが多くなりました。また、以前と比べるとページに使われるフォントのサイズが、心持ち大きくなっているように感じます。Webサイトのデザイン全体の傾向としては、視覚的に訴える手法がいまだに主流として続いているという印象です。

5Gの時代だからこそJavaScriptが輝く

岡本:動きを出す「テクニック」の観点で言うなら、Webブラウザ上で動作するプログラムの「JavaScript」をページに使いやすくなってきたのがひとつのポイントかもしれないと考えています。モバイル端末などでもほとんどJavaScriptが動かせるようになってきていますからね。JavaScriptならユーザーにスクロールしてもらわなくてもページに動きを出すことができます。動きで視線を集めてサイトの特定の部分に誘導し、キーワードに注目させる方法が主流になるのではないでしょうか。ただの線でも、その線に動きがあれば自然に視線の流れを生む効果が出てきます。今のサイトでも細かい動きを付けたページが多いという印象はあります。スマートフォンをスクロールさせて魅せる工夫も、特にキャンペーンサイトで多く見かけます。例えば、スクロールしていくとモデルの服が変化していくようなデザインですね。ユーザーを狙った場所に誘導するテクニックについては、今後もどんどん追求されていくでしょうね。

私は今まで、JavaScriptを使ってゴリゴリと動かす手法はあまり使いたくないと考えていました。通信回線によっては表示に時間がかかったり、動きが途中で止まったりすることがありまして、サイトからの離脱につながる可能性が高くなるからです。しかし、2020年には5G(第5世代移動通信システム)が本格的にスタートしてモバイルの回線速度が爆速になるはずですから、状況が大きく変わるでしょうね。今後もページに「動き」を出して視覚効果を高めることは、避けては通れない要素です。5Gが普及して回線に遅延がなくなればJavaScriptが格段に使いやすくなりますから、今後はJavaScriptを使いこなしてデザインするセンスが重要になってくるのではないでしょうか。

岡本愛美
JavaScriptを用いたデザイン表現について楽しそうに話す

動画や画像でメッセージを伝える

岡本:今の若い世代はあまり文字を見ない、読まない世代だと考えられていますね。その世界観を汲み取っていくのもひとつのポイントだと思います。そういった世代に支持されているのは「TikTok」のような動画コンテンツや、画像中心の「Instagram」など、文字以外の部分が中心になるSNSが主流です。ですから、今の若い世代に向けて発信したい場合は、画像や動画を使っていかに彼らを引き込むかがポイントになると考えています。だからこそ、世界観をより分かりやすく印象付けるために、大きな写真を配置したデザインやJavaScriptなどを使った「動き」がよく使われるのだと思います。

一方、トップページでまず動画を見せる、というサイトデザインは減ってきていると感じています。というのは、ファーストビューはさほどじっくり見られないということが分かってきたからだと思います。おそらく「あ、動画だ、ふーん」と感じて多分0.5秒ぐらいで次のページへ移動するユーザーが多いのではないでしょうか。私自身、ファーストビューに動画があったとしても、よほど興味あるサイトでないと見ません。逆に、例えば人材募集のようなサイトなら動画を使うのも効果的かもしれません。職場環境は具体的に知りたい内容で、動画ならその情報を効果的に伝えることができますから。

アプリとWebサイトが融合する時代

岡本:今はモバイルファースト、スマホファーストになっていて、全体的な傾向としてPCのWebブラウザで見るWebサイトも、操作感や雰囲気がスマホのアプリに似てきていると感じます。視覚的な面で言いますと、スマホの場合はスライドしてタップするたびにアプリから動きのある反応が返ってくる感じですね。また、iPhoneの場合、例えば「Safari」を使ってWebサイトを見るわけですが、Safariという「ブラウザアプリ」で表示させている以上、Safariで見るWebサイト自体も「アプリ」の一部ではないか、こういう考え方もできます。 ですから、これからはWebサイト自体が機能面、外観の両方でアプリライクになっていくと考えています。実際に「Webプッシュ」という仕組みが徐々に増えています。プッシュ通知はもともとモバイル端末のアプリの機能として普及しましたが、最近はPC向けのWebサイトでも見かけるようになってきています。

アプリの方もWebサイトを作る技術のHTMLを使った「ハイブリッドアプリ」が増えています。今後のWebサイトはどんどんスマホアプリと区別が付かなくなると言いますが、非常に近いものになってくるのではないかと思います。

まとめ

現代のWebサイトのデザインは、視覚効果を使って注目を集める手法がますます重要になっています。特に若い世代は視覚的なインパクトを好む傾向があり、Webサイトでも視覚に訴える動きがあるコンテンツが求められています。また、スマートフォンでWebサイトを閲覧することが一般的になってきたことに伴い、今後はWebサイトもスマホアプリ的なデザインや機能に近づけたものが主流になっていくと考えられます。

岡本愛美
岡本愛美 岡本 愛美 / MANAMI OKAMOTO

株式会社アートリーのデザイナーを担当。
幼い頃から色を見ることが好きだったことからWebデザイナーになり、2018年アートリーに入社。デザイン業務の傍らMVのアートディレクションまで担当する。

SHARE

TOP