2016年のWebデザインのトレンドまとめ
現在のWeb制作は、フロントエンド技術やブラウザの機能が充実してきたことで、少し前までは難しかったリッチな表現が取り入れやすくなりました。
一方、高解像度モニタからスマートフォン、スマートウォッチなど、多種多様なスクリーンに合わせて表示する要素を精査し、画面を設計する必要もでてきています。
私自身は広告サイト制作よりもCGMサイト制作の比重が大きいため、基本的に地味なUIパーツやUXの設計、改善に関わる内容を中心に情報を集めています。
その中で個人的に気になった技術、海外の記事やWebデザインのショーケースサイトでよく見る傾向、最低限抑えておきたい考え方などを5つほどまとめました。
クライアントサイドでの画像加工
デザイナーが加工したデータをアップしたり、サーバーサイドで処理することなく、クライアントサイドで画像を加工する技術を目にする機会が増えてきました。実装方法としてはCSS、SVG、Canvasがあり、サポート状況やライブラリの充実度は様々ですが、フィルターやブレンドモードを使った面白い表現が今年はもっと出てくるのではないかと思います。
Photoshopなどの画像エディタを使わず、直接DeveloperToolsで画像の編集を行う人もいるようです。この動画のUnaさんはCSSgramという、InstagramのフィルタをCSSでエミュレートしたライブラリを作成しています。
CGMサービスやブログなど、更新性の高いサイトで活躍しそうですね。Spotifyの2015年まとめ特設サイトはCanvasを使っているようです。この演出をエミュレートしたCSSのフィルターもあります。
UNMADEというサイトの服は、ユーザーが操作して色を変えたり、マウスで模様を変形させたりできて、それが買えます(残念ながら記事執筆時点の2016年2月時点では日本からは買えません)。
スニーカーのカスタマイズなどは既にありますが、あくまで組み合わせを変えられるのみでした。このように模様を生成するためのパラメーターを変化させられるようになると、誰かと全く同じものが作られる可能性は劇的に低くなります。
個人的にはデフォルトを受け入れるタイプなので、スマートフォンの壁紙は変えないし、ラーメン屋でも麺の硬さやニンニクの量などは「普通」で頼みます。
大画面向けのレイアウト
最近ではどうしてもスマートフォンが優先されがちなので、大画面で見た場合にがっかりすサイトが意外と多いです。
しかし、リッチな環境のユーザーには、きちんとリッチな体験を提供することがビジネス的にも重要です。そういった課題に答える例をいくつか挙げます。
中央分割は、横長の画面と縦長の画面に対応するのに有効なレイアウトです。幅が狭い画面の場合、そのまま縦に並べてしまえば良いですね。
グリッドを駆使したり、カード型のモジュールを組み合わせる手法もよく見かけます。
クックパッドは画面を広くすると、最近見たレシピの履歴が表示されます(ログインユーザーのみ)。
ユーザーが求めている内容に応じて、画像を大きくするのか、数を増やすのか、別の情報を提示するのかを考えましょう。
データ駆動のデザイン
D3.jsやTableauなど、データビジュアライゼーションのためのツールは複数あります。ビジネス寄りの記事でも「ビッグデータ」や「見える化」という言葉をよく目にしますし、デザイナーへの要求も高まっています。アクセス解析や売上のレポートなど、大まかな情報を直感的に把握するには非常に有効な手法です。
しかし、適切なグラフの形式や色の選択など、きちんとした「情報の」デザインがまだまだ不足しているように感じます。dribbbleなどで見かけるダッシュボードのモックデザインは、視覚的には美しいですが、情報のヒエラルキーが正しくつけられていなかったり、過剰な装飾を加えていて実際には機能しそうにないものがあります。
これらのツールには、平面の構成や配色についてデザイナーの知識が活かせる機能が用意されています。正しく活用できるよう、どういったことができるのかを知っておきたいです。
UIスタックを意識したデザイン
UIスタックについての詳しい解説はこちらのリンクをご参照いただきたいのですが、
簡単に引用しておくと
- エンプティステート(Blank State)
- ロードステート(Loading State)
- パーシャルステート(Partial State)
- エラーステート(Error State)
- 理想ステート(Ideal State)
の5つの状態が定義されています。2016年は、どのサービスもこれらの状態をきちんとサポートしておいて欲しい！特にCGMサービスにおいて、初期はどうしても投稿がなかったり(エンプティステート)、ユーザーのプロフィールに空白(パーシャルステート)が目立つことが多くなりがちです。ここを意識せずに全てが埋まっている状態(理想ステート)だけを想定してデザインを進めると、実際のデータが入った時に要素が存在せずレイアウトのバランスが崩れたり、最悪の場合はユーザーが次にどのような行動を取ればよいのか分からなくなってしまいます。ECサイトであればかなりの機会損失です。
逆に考えると、こういったところもひとつのタッチポイントなので、サービスやブランドのトーンをユーザーに伝えるコミュニケーションのチャンネルです。例えばGmailだとゴミ箱を空にした時に「こんなにストレージ残ってるのに消す必要なくない？」と言ってきます。
様々なサービスやアプリケーションのエンプティステートを集めているサイトもあるので、参考にしてみてください。
postd
会話型のインターフェース
冒頭にも述べた通り、ここ最近のWeb制作では多種多様なスクリーンや環境に合わせて情報を出し分けています。ユーザーのタイプやリテラシーも様々で、膨大な数の画像や動画、CSSやJavaScriptを管理しなければならなくなってしまいました。
そういった状況を根底から覆すのが会話型のインターフェース(カンバセーショナル・インターフェース)です。
音声認識と自然言語処理の発達により、既にスマートフォンなどの音声操作はかなりの精度になっています。沢山のボタンが並ぶコックピット型のインターフェース(GUI)から、命令を実行するコマンド型のインターフェース(CUI)への回帰とも言えます。
2016年はカンバセーショナル・コマースの年だそうです。チャットやメッセージなど自然言語を使用して買い物をするということですね。すぐに全てがこの形に置き換わるとは思いませんが、こういった動きも意識しておくと、次にデザイナーに求められるスキルやアイディアが浮かびやすいと思います。
おわりに
リッチな表現が可能になった一方で、管理しなければならないデータが増えたり、サポートしなければならないユーザー体験についての知見が蓄積されてきたことにより、良いWebサイトを作るための負荷は確実に高まってきています。
2016年は、見た目や演出をどうするかという問題だけでなく、そもそもそのサイトが何のためにあるのかという、ネットワークにつながったサービスとしてのあり方を考え直す時期なんじゃないかなと思っています。