【2019年Webデザイントレンド】インタラクションデザインとは

Webデザインのトレンドをどれくらい意識していますか。Webデザインは単なる目新しさを狙っているものではなく、新しいデバイスの登場や、ブラウザの開発と密接に関係しているものです。

ですので新しい技術が登場してから、制作者が習得し、ブラウザの機能が追いついて、実際に企業のWebサイトに採用されるまでには若干のタイムラグが生じます。今回は、最近のWebサイトに必須となっている「インタラクションデザイン」を中心に解説します。

インタラクションデザインとは

ユーザーの行動に反応が返ってくること

インタラクションデザインとは、ユーザーの行動と呼応する関係にあり、ユーザーが自分で操作しているという感覚を強く持ってもらうためのデザインです。

たとえば５〜10年前のWebサイトではトップページにたくさんのボタンが並んでいて、次に進むにはここを押してくださいと、ボタンと文字でアピールしているデザインが普通でした。

モバイルの普及とCSSの進化がWebデザインを変えた

その後、スマートフォンやタブレットなどの小さなモバイル端末が普及してきたことによって、画面に入る要素を削ぎ落とさなければならなくなりました。

また、通信速度の制約上からデータを軽くするために画像を使わなくなり、同時にCSSが進化して、ミニマルな「フラットデザイン」が主流へと移行してきました。

しかし、フラットデザインだけではやはり使い勝手としては悪く、ベタ塗りのボタンが押せるのか押せないのかもわからなくなります。パソコンであればポインターの形が変わってわかるのですが、モバイル端末ではどうしても分かりにくくなってしまいます。

そこで新しいCSSの技術を使って奥行きや重なり、陰影がわかるような「フラットデザイン2.0」が生まれました。それがおよそ2016〜17年頃から始まって、主流になってきているのが現在の状況だといえます。

また、それと同時に「グリットデザイン」や「ボックスデザイン」が流行りました。多種類のデバイスに対応しなければならなくなった関係で、グリッドデザインだと１ソースでレスポンシブに対応しやすいという制作上のメリットがあったからでしょう。

動きのあるフラットデザイン2.0へ

しかし流行ってしまって２年もするとグリッドデザインも飽きられてきます。そこで「目を引く」というという効果を狙って、基準となるボックスからちょっとずらしたり、重なっていたり、はみ出したりといった一味加えたバリエーション「ブロークングリッド」の事例も最近は増えてきたと感じます。Web制作を行っている弊社ITRAでも最近は「ブロークングリッド」のWebサイトを多く制作しています。

インタラクションデザイン「ブロークングリッド」の例

では実際に弊社ITRAが行った実績で、ブロークングリッドを使用した例をご紹介しながら、どのようにデザインのトレンドが変わったのかを解説していきます。例えば、こちらのサイトはIBJグループの2017年採用ページです。

旧採用サイトでは、ブロークングリッドを使用しておらず、それぞれの項目を並べているタイトルと説明文で分けてシンプルに並べているというデザインでした。シンプルで非常に分かりやすいのですが、それぞれの項目が重要な項目にもかかわらずいまいち目立っていません。

そこで、重要な項目をより目立たせユーザーとのインタラクションを増やすため、トレンドであるブロークングリッドを使用するデザインを採用することにしました。

こちらがIBJグループの最新の採用ページです。実際には動きも多く取り入れているので、ぜひ下記リンクからご覧ください。
https://www.ibj.co.jp/recruit/work/

このように写真と項目を別々に重ね合わせる「ブロークングリッド」を採用しました。マウスを乗せたときにも動きをつけることで、ユーザーとのインタラクションを増やす狙いがあります。

インタラクションデザインの役割

次の行動を誘発するためのインタラクションデザイン

2018年頃からはさらに、フラットデザインにインタラクティブな動きが加わったWebサイトが次々と増えてきているという印象です。削ぎ落としたミニマルデザインに行き着いてから、洗練させたかたちで表現を少しずつ追加しているという感じです。

特にユーザーに何らかのアクションを求める要素には、最近ではほとんど何らかの動きを加えています。逆に、何も動きがないミニマルなサイトは、何をさせたいのかわからなくて気持ちが悪いという印象をユーザーに与えてしまいます。

現在はCSSで多彩なトランジション（画面の切り替え時の演出効果）を実装できるようになるなど環境が整っているので、ユーザーの次のアクションを誘発するためにも、フラットデザインのWeb サイトにはインタラクティブ性が必須だと考えます。

トランジションのかかり方などは、ユーザーが体感的に心地よく感じられるよう、きめ細かな調整をCSSでかけることが、コーダーのセンスと腕の見せどころです。またWebデザイナーの仕事がUI、 UXの観点から映像演出の領域に近づいているということもできます。

プロトタイピングツールの活用

Webデザイナーが頭の中で設計している動きを、コーダーに正確に伝えるのは難しいので、Webデザイナーはまず「プロトタイピングツール」を使い、プロトタイプを作るという工程を行います。

プロトタイピングツールのなかにはJSやCSSを自動的に書き出せるものもあるのですが、実際にはコーダーがプロトタイプの動きを見ながらコーディングを行なっていくほうが、軽くてきれいなコードが作れます。

このため、制作者間やクライアントとのコミュニケーションの道具としてまずプロトタイプを制作し、その後コーディングで本番を作ります。このように、ごく小さなインタラクティブデザインにも、想像以上の手間と時間がかかっているのです。

これからのWebデザイントレンド予想

トレンド予想①リキッド

スマートフォン重視の状況が続く以上、インタラクティブなWebデザインはこれからもしばらく続くでしょう。ここからさらに発展する傾向といえば、SVG要素でパスを動かす「水」のような、流動感のあるインタラクティブデザインが流行ってきそうな気がしています。ユーザーが思わず触ってみたくなるような、曲線的で生きているような感じのWebデザインが増していきそうです。

トレンド予想②新しいグラデーション

ミニマルデザインで要素を削ぎ落としたあとに、目を引く「オリジナリティ」を何で表現するかということに敏感になっている傾向があります。その１つの手法としてグラデーションやシャドーが再び取り入れられています。

トレンド予想③イラスト

ミニマルデザインに、オリジナルイラストを加えて雰囲気をつくるという手法も注目されています。イラストのタッチやテイストによって、Webサイトに温もり感やアナログ感を加えることができます。

ローディングアニメーションをイラストで作って、待ち時間にもユーザーを楽しませたり、サイト一面にイラストを散りばめるという事例も、最近よく見るようになっています。

トレンド予想④タイポグラフィ

タイポグラフィを効果的に使うこと重要性は、ミニマルデザインになってますます増していると思います。

トレンド予想⑤音声

SIRIやアレクサのような音声アシスタントが登場してきた今、将来的には、Webサイトも音声だけで動かせるような仕様にしなければならないか日が来るかもしれません。いつか新バージョンのブラウザが対応するようになってからの話ですが。

まとめ

流行を意識するということは、Webサイト開発に携わる人にとって大事なポイントです。
インタラクティブデザインを取り入れて、ユーザーの興味を大きく引けるWebサイトにしたいですね。

自社ページのデザインを変えたい、もっと流行にのったサイトにしたい、ユーザビリティの高いWebサイトにしたい、とお考えではありませんか？

ITRAではお客さまのご要望に沿いつつ、システム設計からデザインに至るまで高品質なWebサイト制作を行ってきました。お気軽にフォームへお問い合わせください。