- 更新日: 2017年05月22日
- 公開日: 2015年06月04日
ここが最前線！2015年WEBデザイントレンド13選
時代ごとに web デザインは変化し、いつの時代もユーザーの視線と心を釘づけにできるよう創意工夫されています。
また例え難しいデザインのテクニックが無くても、その時々のトレンドをうまく取り入れるだけで、斬新なサイトにも見えます。今流行りの web デザインを 事例を含めてご紹介します。
はじめに - 2015年 web デザイントレンドの背景
ファーストビューよりスクロールを重視するデザインに
Photo: cewdseo.com
今やフェイスブックやツイッター、LINE などの SNS は、私たちの生活に無くてはならない存在となりつつあります。日本人の5人に1人が Facebook ユーザーで、世界でもおおよそ5人に1人が Facebook を使っています。
またスマホ普及率は国内で約 50％、世界規模で約 20％ と 10年前とはユーザー環境が大きく変わってきています。その結果、画面スクロールに抵抗感が無くなり、とりあえず web サイトが表示されれば下にスクロールする人が劇的に増えてきています。こうした現象を踏まえ、 web デザインにおいては従来の「ファーストビュー（サイトトップ画面）」より「スクロールビュー」を重視する傾向になっています。
シンプルなレイアウト構成
Photo: Swwim
PC、タブレット、スマホなど多品種のデバイスに対応するために、従来のサイドバーを活用した web デザインより「シングルカラム」の web デザインが主流となってきています。
今流行りのweb デザイントレンド13選
背景にビデオ動画活用
webサイトの背景に動画を表示することで、動きのあるサイト・デザインとなります。その結果、ユーザーの興味を引き付け、当該 web サイトの内容に興味を持ってもらうことに期待できます。
2014年ごろからこの種のデザインは増えてきて、今後は他のトレンド要素も組み込んだデザインが広がると考えられます。ただし、スマホで見た場合、背景で動画が動くのではなく、動画枠内で動くようなデザインが主流となっています。
動画を導入している仕事系サイト
動画を導入している商用系サイト
カード・レイアウト（タイル・レイアウト）
フェイスブックのタイムラインに代表されるカード・デザインは、ユーザーにとって各カード毎のコンテンツ内容が分かり易く、初回ユーザーに限らず常連ユーザーでも見やすいデザインとなっています。
またレスポンシブ・デザインでもレイアウトが崩れにくく、2012年ごろから続くロングセラー・レイアウトになります。2015年はインタラクティブ機能を加えるなど、今まで以上に見やすいレイアウトへと進化していくと予想されます。
シングルページ
スマホやタブレットなど通信デバイスが多様化してきた頃から、シングルぺ―ジのデザインが増えてきました。シングルページの最大の特徴は、スクロールするだけで全部見られる！でしょう。
必要な情報が1枚のページに納まっていますので、リンク先に移動しなくても資料請求や申し込みまで完結できます。「パララックス」や「動画」「レスポンシブ・デザイン」など複数の効果と合わせて構成されるケースが目立ちます。また「ゴースト・ボタン」や「マイクロ・インタラクション」などトレンド技術と合わせてシングルページは進化していくと考えられます。
パララックス・エフェクト
2010年ぐらいから広がりを見せる「パララックス・デザイン（Parallax Design）」。従来からあるシングル・ページデザインをプラスアップする方法として人気があります。jQuory を活用することによって、画面スクロールした値によって個々のボックスを移動させて、途切れない連続性のある演出を醸し出します。
動きのある web デザインや一過性のある web デザインにむいている効果と考えられます。恐らく多くの人が気になって一番下までスクロールするのではないでしょうか。このトレンドは今後も続き、アニメーション機能などよりハイスペックな仕様となっていくことが考えられます。
パララックス・デザインを取り入れているサイト一例
アニメ化されたストーリー性
モノの流れや仕組みを視覚的に伝えることができる「ストーリー方式」。動画や写真とは違う「動画アニメーション」によって、難しい説明もシンプルに低ストレスでユーザーに伝えることができます。こちらのサンプルサイトは「SVG」と「Java Script」で構成されています。
フラットデザイン
photo: HUFF POST
Windows8 のスタート画面に代表される「フラットデザイン」は、当面 web デザインでも主流の流れとなりそうです。
シンプルなアイコン、デザイン、文字は、UI が非常に高く、Microsoft 社以外にも Apple社、Google など多くの web 業界を牽引していく会社でも採用されてます。アップルのロゴも2011年のリッチデザインから2014年にフラットデザインに変更されています。
フラット・デザインを取り入れているサイト一例
マテリアル・デザインの増加
2014年6月の Google イベントで発表された新しい UX 体系が「マテリアルデザイン」になります。マテリアル・デザインは、フラットの派生的デザインでアニメーションやカードデザインなどを併せて使い、「余白と利用スペースを活用した規格」と説明されています。
ユーザーエンドで表示内容を加工できるメリットがあります。こちらのサイトでは、マテリアル・デザインの特徴を試す事ができます。
インタラクティブ・デザイン
膨大な情報を元に、それぞれの目的を達成できるようにされたデザインが「インタラクティブ・デザイン」になります。動的な要素が強く、ユーザーは画面を閲覧するだけでなく、画面を操作し、それぞれの目的を達成するようにデザインされています。
画像のサイトでは、ビートルズのアビ―ロードを体験できます。また下記のサイトは、動きがユニークなインタラクティブ・デザインとなっています。おもしろい web デザインのひとつですが、ページ容量が 2 MB を超えるなど、ページ読み込み時間や操作性を欠くケースなどデメリットもあります。
マイクロ・インタラクション
マイクロ・インタラクションは、デザイナーの Dan Saffer さんの著作「マイクロインタラクション」で提唱された用語になります。「ひとつのシナリオに基づいて、ひとつの交信だけをこなす、最小単位のインタラクション（相互通信）」を指します。具体的には、「フェイスブック」や「Google＋」の いいね！ボタン がそれにあたります。
web デザインにおいてのマイクロ・インタラクションは、ユーザーとの信頼関係構築に有効で、商用としてのメリットが想定できます。既に多くのサイトで「マイクロ・インタラクション」は導入されてきていますが、操作性とデザイン性は進化しています。
トレンドのメニューバー
UI の観点からメニュー表示に関するデザインが多様化されています。以下に代表的なトレンド・メニュー表示をご紹介します。
- ナビゲーション・バーの変更
スクロールによってナビゲーション・バーのデザインが変わります。デザイン性と UI の両立が図れます。
- ドロワーメニュー（ポップアウト・ナビメニュー）
画面左上のナビボタンをクリックするとメニューが登場するデザインです。画面の最大限活用化と UI の両立に役立ちます。
- Fixedナビゲーション
画面トップにメニューバーが固定されています。縦スクロール系には有効なデザインのひとつです。
ゴーストボタン
web デザインのトレンド変化に伴って、「ボタン」のデザインも変わってきています。2014年ごろから「ゴーストボタン」という、背景が透けているボタンが人気を呼んでいます。フルスクリーンや動画が流れるサイトでもボタンがスッキリと画面に収まってくれます。またUI 的にもよく、これからはアニメーションなど装飾が凝ったものも登場してきます。
アニメーション効果
gif を活用したアニメーション効果は、2015年も注目のデザイン要素です。ステップアップの指南や購入手順などを簡単にユーザーに情報提供することができます。
モバイル・ファースト
ここ数年でインターネット環境も大きく変貌し、スマホ・ユーザーの存在も無視できなくなっています。パソコンは持ってないけれどスマホなら持っている、という方も多く、モバイル表示のデザインも無視できなくなっています。コンテンツをいかにコンパクトにまとめるかが、カギになってきています。
＼一流デザイナーのスキルが身に付く／
まとめ
いかがでしたでしょうか？2015年のweb デザイントレンドは、今まで以上に視聴性と UI が強化されて、ユーザーの興味と心をひきつけるデザインとなっています。
またその一方で、シングルページなどは web 制作者側の負担を軽減し、日々様変わりする情報を素早く発信することができます。これから web デザインの設計を考えている方は、2014年度の AWWARDS 受賞作品も参考になると思いますので、ご興味があれば視聴してみてください。上記で紹介したトレンド要素を複合的に取り入れており、web デザイン世界の奥深さを堪能することができますよ。
- この記事を書いた人
- オシママサラ
