KOBITブログ

10の事例で考える!2016年に流行しそうなWEBデザイン予想

この記事は約 7分 で読めます。

vivid

Webデザインはサイトやアプリの印象を大きく左右します。優れたデザインはそれだけで価値があり、多くの売り上げや高いブランド認知をもたらすのです。ファッションなどと同じようにWebデザインにも流行があります。流行のデザインは先進的な印象を与え、また、ビジネス環境に合ったユーザー体験を与えることが期待できます。2016年には、どのようなWebデザインが流行していくのでしょうか。

Webデザインには流行り廃りがある

Webデザインは様々な要素から影響を受けます。まず、技術的な制約による影響は無視できません。パソコンの画面からスマートフォンへと移った場合、限られた画面サイズをどのように使うかを検討する必要があります。最近では大画面のスマートフォンが登場したため、タッチやスワイプを行う場所にも制約が出てきました。画面の解像度、入力方式、ネットワークの転送速度など、多数の技術要素がデザインを変えていきます。

ビジネスの側面からもWebデザインを検討しなければなりません。広告を中心としたビジネスモデルであれば限られた画面の中に、どう広告を配置するかが重要です。ページビューを稼ぐために少ないコンテンツを多くのページに掲載するのが良い方法かもしれません。一方で、広告に頼らず、ライセンス購入やSaaS型のビジネスモデルの場合、サイトでの滞在時間を延ばすよう、使い勝手を向上させるデザインに向かいます。

流行のデザインを利用するメリットとしては、最新の技術・ビジネス環境に求められる要件を反映できる点が挙げられます。最新の技術によって可能になったデザインが新たなユーザー体験をもたらす可能性があるのです。また、他のサイトと似た手法を採用すると、ユーザーの学習曲線を利用できる利点もあります。社内システムと違い、一般的なWebサイトではユーザー教育を施す機会が限られます。そこで、他のサイトで見たデザインと同じ要素を利用しておけば、ユーザーは違和感なく自社サイトを使えることになります。

一方で、流行のデザインを用いる場合はリスクを認識しておく必要があります。Webデザインの有効性が明らかになっていない状況では、試してみたものの、自社のイメージや要件には合わなかったという結論に至る場合もあります。Webデザインを頻繁に変えると一貫性に欠けるとしてユーザーからの評価を下げるリスクがあります。流行のデザインを採用するメリット・デメリットを認識した上で、デザインについて検討すると良いでしょう。

流行しそうなWebデザイン10選

マテリアルデザイン

material

マテリアルは「物質」を意味し、モノの動きを模倣するのがマテリアルデザインの特徴です。例えば、アニメーションを行う場合、静止している状態から徐々に速くなり、後に、徐々に動作が遅くなり止まる、というように物体が持つ慣性の法則を使用します。ボタンやテキストを表示する際には、紙の上にモノを乗せたように上下関係を維持します。フラットデザインとは似て非なるデザイン手法です。

https://play.google.com/store/apps/details?id=com.sonymobile.xperiaweather

ビビッドカラー

vivid

鮮やかな配色はフラットデザインやマテリアルデザインと相性が良いと言われます。シンプルなレイアウトに対して、派手な色でアクセントを加えるとバランスが整えられるのです。ビビッドカラーを活用し、カラフルでポップな印象を与えるサイトが増えてくるかもしれません。

http://k-associates.com/ja/works/

ミニマルデザイン

minimal

「Less is More」はデザインの世界で良く目にする言葉です。デザイン要素が少ないほど、より効果の高い情報伝達ができることを意味します。余分なテキスト・色・装飾などを徹底的に排除し、ユーザーに明確なメッセージを伝える試みが2016年におけるミニマルデザインです。余白を十分にとり、見易さを確保しているのが特徴です。

http://www.apple.com/jp/

アイコンによる図解

icon

ミニマルデザインの影響などによりデザイン要素が少なくなるほど、シンプルなアイコンで情報を伝達する必要が増してきます。オリジナル性の高いアイコンを作成し、その図柄だけでユーザーが意味を理解できるようになるでしょう。

https://www.google.es/intl/ja/about/products/

インフォグラフィック

infographic

インフォグラフィックはデータや情報を視覚的に分かりやすく画像化したものです。地下鉄の路線図のように複雑な情報を直感的に理解できるのが利点です。良質の情報で訪問者を増やすコンテンツマーケティングの広がりと共に、意味のある情報をインフォグラフィックにまとめる動きが増してきました。統計データや財務情報の公開など、様々な用途で使用されています。

https://www.mercari.com/jp/info/20150202_infographics/

カード型デザイン

card

グリッドレイアウトやカード型デザインは写真共有サービスPinterestの普及と共に注目を集めました。画像や動画が急激に増えた2016年においても、イメージの一覧性の高いカード型デザインの有用性が評価され続けています。画面サイズの異なるモバイル端末でもパソコンと同じ体験が提供できるレスポンシブ対応のしやすさが、採用の背景として上げられるでしょう。カーソルを合わせた際のアニメーションなどの特殊効果が今後は増えていくかもしれません。

https://www.etsy.com/

ネイティブアプリ風

app

ブラウザ上のサイトデザインと、ネイティブアプリにおけるモバイル用デザインは多くの議論を呼んできました。端末の長所・短所を考慮して、それぞれに特化したデザインを作成する手法と、同じユーザー体験を与えるために似たデザインを使いまわす手法がありました。2016年には「モバイルファースト」の流れによってつくられたモバイル画面が、パソコン上のブラウザ画面へ移植される傾向が見られます。

https://chrome.google.com/webstore/detail/slack/jeogkiiogjbmhklcnbgkdcjoioegiknm

ヒーローヘッダー

hero

ヒーローヘッダーは、画面いっぱいに写真や動画を配置するレイアウトです。サイトを訪問した瞬間に強い視覚効果を与えるため、強い印象を残します。写真や動画を背景として、企業のロゴやナビゲーションメニューなどが重ねて表示されるのが特徴です。イメージが強い印象を与えるため、その他の要素は最小限に抑えられ、フォントも派手な装飾は避けられるケースが見られます。

https://www.airbnb.jp/

カルーセル

crousel

ヒーローヘッダーと同様に、大きなイメージを画面上部に配し、さらに、複数の画像を横にスライドさせて表示させるのがカルーセルという手法です。自動または手動で画像を複数表示できるため、最もユーザーの目に触れやすい場所に多くの情報を詰め込めるのが魅力と言われます。

http://www.nike.com/jp/ja_jp/

手書きスケッチ

handwriting

フォントや素材写真の数には限りがあるため、無数のオンラインコンテンツの間では、似た印象を与えてしまうケースが散見されるようになりました。より個性的な印象を与えるため、手書き風のロゴやイラストが活躍しています。親近感を与え、身近なブランドであると思わせる効果があります。

http://pu-pi.com/

まとめ

スマートフォンの普及やインターネット環境の強化により、小さい画面でも画像や動画をふんだんに使ったデザインが増えてきました。シンプルな表現でより強い印象を与えるWebデザインが好まれています。


CATEGORY:

さあ、KOBITをスタートしよう。