流行を知っておきたい！2017年1月のWebデザイントレンド
本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、ライターのCarrie Cousins氏によって投稿されました。
新年の新しいデザイントレンドをお届けします。Webデザインの最も素晴らしいことの1つは、それが常に進化していることです。デザイントレンドやその兆候は、急に人気が高まっている新しいデザインのアイデアに注目することで発見できます。
そして、2017年1月のデザイントレンドは、余白を活かしたデザインのWebサイト、新しいオンラインショッピング体験、パステルカラーのカラーパレットなど興味深いものが多くあります。
目次
1. 余白を強調したデザイン
余白を適度に使えるかどうかはデザインの運命を左右します。ホワイトスペース、背景色、テキスト、画像など、余白に何を使うとしても「空の」余白は大きな意味を持ちます。
余白を強調したデザインはトレンドの1つであり、ユーザーの視線を誘導したり、ユーザーにWebサイトやアプリの使い方を示すのに効果的です。
広々とした余白を活かしたデザインは、近年人気のあるミニマルデザインの延長上にあるスタイルといえますが大きく異なる点が1つあります。
それはミニマルデザインのように余白を均一に使った左右対称なデザインというよりも、画像・テキストと余白のバランスを考えた左右非対称なデザインを特徴としている点です。
ユーザーの視点からこのデザインを考えてみましょう。ユーザーは意識的あるいは無意識的に、最初にデザインの余白に視線が向かいます。次にデザインの中心的な部分に視線が向かいます。
この2段階のプロセスによって、ユーザーの注意を引いて視線を誘導することができるのです。
余白とデザインの中心的な部分のバランスを図ることによって、強いインパクトを生み出します。次にいくつか例を見てみましょう。
VERAWANG：左の余白によって、ユーザーの視線をモデルの服に誘導できます。ファッションデザイナーにとって完璧なデザインです。
Big Youth：テキストの周辺の余白によって、ユーザーの視線を見出しに集めます。見出しはサイトのトップページでユーザーに最初に見てもらいたいものの1つです。
David Robert：余白によってユーザーの視線は最初に人物、次にその人物の経歴に向かいます。明暗のコントラストを際立たせていることで、効果が一層高まっています。右から左に読むように誘導しているのもクリエイティブです。まさにデザイナーに求められる技量です。
2. 新しいショッピング体験
オンラインショッピングの体験は、大きくは2つのカテゴリーに分けられます。
1つはAmazonに代表される大型ショッピングモールが提供するスムーズで完璧なショッピング体験。
もう1つは小さなオンラインショップなどでの決済するまでのクリック回数が多過ぎるショッピング体験です。
しかし、これらの中間のショッピング体験も必要ではないでしょうか。
ますます多くの小売業の会社が、優れたビジュアルや経験デザイン（エクスペリエンスデザイン）をオンラインストアのデザインに取り入れています。このトレンドは少数の商品を扱う会社にとって最も効果的であるように思えるかもしれませんが、ユーザーエクスペリエンスの本質を備えています。
次の例は、いずれも高級商品を扱うショップのWebサイトです。最初に大きなナビゲーションメニューや数多くのオプションが表示されることはありません。
商品の美しさや個性、そしてその背景にある誕生物語を焦点にしています。ユーザーがスクロールやホバーした時に初めて購入の表示が現われます。
優れたビジュアル、Instagramに使われるような画像、クリックを促す効果のあるカード型要素を使ったインターフェースが特徴のデザインです。商品はそのまま注文できるようになっていて、オプションメニューは表示されません。
もっともこうしたデザインは、大規模な在庫を管理し、複雑なオプションメニューやカスタマイズを必要とするショップには向かないかもしれません。
どちらかというと小売業のショップが、高級感のあるデザインによって商品の雰囲気を演出するときに効果的です。
これらの例は、素晴らしいホバーエフェクトを使うことによって、ユーザーが財布の中身と相談するより先に購買意欲を高めることができるようなデザインを実現しています。
また、スクロールするまで価格が表示されないという点も共通しています。ユーザーの購買意欲を高めるために、サイトのトップページは製品の誕生物語のみを表示するようにデザインされています。
3. パステルカラーのカラーパレット
ソフトカラーが再流行する兆しです。近年は大胆で明るい色のカラーパレットがトレンドでしたが、それも変化しつつあります。
しかし使用目的は以前と変わりません。パステルカラーの色相は、フラットデザインやマテリアルデザインのプロジェクトにおいて、これらのデザインスタイルに新しい変化を生み出すために使われているようです。
パステルカラーは背景色として使うのが最適だと思うかもしれませんが、常にそうであるとは限りません。パステルカラーの背景色は使い勝手が良いですが、例えばパステルカラーを背景色にすると、多くのスタイルのテキストは濃い色であれば非常に読みやすくなります。
パステルカラーの見出しと画像を組み合わせたデザインも人気です。多くのデザイナーは、パステルカラーの画像からパステルカラーのカラーパレットを生成しているように思われます。
次のThe Bridal Plannerの例のように、パステルカラーのカラーパレットとその色に基調を合わせた画像は良い組合わせです。
The Infinity Foodsも同様のテクニックを使っている例で、同じカラーテーマの中間色のパステルカラーと画像を組み合わせていています。
このトレンドの例として、彩度の低いパステルカラーを使ったデザインもありますが人によっては過剰に感じられるかもしれません。
例として、以下のRentberryのサイトは、パステルカラーのカラーパレットとマテリアルデザインを組み合わせています。このデザインがポップな雰囲気に仕上がっているのは期待通りかもしれませんが、この色使いを見る人は驚いて二度見することでしょう。
こうした小さなサプライズを演出すれば、ユーザーに小さな楽しみを与えることができるはずです。
結論
トレンドは時代の流れを瞬間的に捉えたものであり、全てのトレンドが長く続くわけではありません。
特に新しいショッピング体験の今後の進化は非常に興味深く、高級商品を販売する保有在庫の少ないショップにとって、潜在的な可能性を秘めています。
TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。
