海外デザイン
はやりのデザイン
VR
Web Design Gallery
2015〜2016年のWebデザイントレンドまとめ
UIデザインにおける12のトレンド
Web Design Trend 2016 by Oshimamasara
Hero アイキャッチ
世界トップクラスのブロガーサイトを見ていると、アイキャッチのレイアウトに新たなトレンドを巻き起こしていることが分かります。
従来アイキャッチ画像は、記事リストと該当記事のトップ（body や ContentInner 内など）に配置されるのが常ですが、こちらのアイキャッチは投稿内に大きく表示もしくは背景画像として表示させる手法を採用しています。
Heroイメージを意識したアイキャッチ・デザイン、カッコいいですね。
PC など大画面で見る場合は、こちらのデザインの方が、記事がキレイに見えます。上記サイト以外にこちらのサイトのデザインも参考になります。
ストーリーテリング
ストーリー性のあるコンテンツを表現する方法に『ストーリーテリング（Storytelling）』があります。
ストーリーテリングは、近頃 web デザイン・トレンドして注目されており、スッキリとしたデザインが特徴的です。紹介したいストーリーに最大限焦点を合わせて、他の表示物を一切削除しています。
サンプルでご紹介させて頂いています NEGO® さんと中田ヒデさんの対談レポは、まるで取材現場にいるような迫力を感じることができます。動画ではなく、静止画像ならではの 迫力が特徴的な web デザインです 。
他には、こちらのサイトも参考になると思います。
Gif アニメ
デバイスレスにスムーズな動きを表現ができる方法として、Gif 画像を用いた web デザインが流行っています。
用途としては、商品紹介をするページでのシステム説明画像やキャンペーン・ページでのユーザー滞在時間充実化など使い方は様々です。
ビデオや CSS アニメーションなどとうまく組み合わせて Gif デザインを楽しみたいですね。
動画デザイン
ハイセンスなweb サイトに、YouTube という文字や余計なアイコンは不要ですよね。
近頃は、YouTube API を活用したシームレスな動画デザインが流行っています。こちらのサイトは凄くハイセンスで、オートループの動画を流しつつ、クリックされると用意しておいた YouTubeが再生されます。
見せたい動画と web ページの読み込み速度、デザイン性を両立したデザイン方法になります。
動きのあるゴーストボタン
2015年ごろからよく使われるようになったゴーストボタンに、アニメーションを加えるデザインがトレンドとなりつつあります。特にシングルページなど長いページでボタンが見過ごされそうな web デザインに有効ですね。
ローディング・アイコン
国内の web サイトでローディング・アイコンはあまり見かけませんが、海外のサイトではよく見かけます。特に最近では、SVG アニメや画像に gif を重ねるような複雑なアニメ・デザインなど、ハイテク化してきています。
ローディング・アイコンは、デザイン性を高めるだけでなく、ユーザーの直帰率減少にも効果が期待できるなど、SEO 的にも期待できる重要なデザイン要素ですね。
- Gif を使ったローディング・アニメ／http://www.insideasiatours.com/step-inside/
- 複雑なイメージ画像を使ったローディング・アニメ／http://www.beyondprison.us/
チョットアニメーション
AWWWARDS ハート部分
これからトレンドとなりそうな web デザインにアイコン・アニメーションがあります。通常 SNS アイコン周辺は動きのないデザインが多く、ユーザーに見過ごされがちになると思います。
しかし、サンプルページにあるようなアニメーション・アイコンがあると、ちょっとシェアしようかどうか考えさせられますよね。こちらのアニメは CSS で作成されていますので、スマホでも問題なく表示することができます。
不揃いな縦ライン
パララックス・デザインをはじめ、縦長ページの平凡なカラム・レイアウトは、ユーザーの離脱率を高めてしまいます。
今年になって増えてきているデザインに『不揃いな縦ライン』があります。
商品紹介をはじめ、ブログやニュースサイトなど様々ジャンルで増えてきています。これからパララックス・デザインを考える方は、参考にしたいですね。
こちらのポータルサイトの縦ラインも斬新です。
割り込み的なキャッチフレーズ or 引用タグ
単調になりがちな縦ラインのアクセントに『割り込みデザイン』を採用するケースが増えてきています。ユーザーが見慣れている小見出し（<h2>タグなど）に比べると、『んっ、何だろう』と思わせるきっかけになり、SEO的にも期待できるデザインの一つです。
ちょっとした CSS テクニックでできるトレンドデザインになります。
とにかく長いページ
Bloomberg Code(Size 9MB)
一つの情報を徹底的に解説する web ページが、にわかに人気を呼んでいます。
通常は1枚の HTML シートにたくさんの情報を記載するとファイルサイズが重くなって読み込み負荷を向上させますが、画像の最適化や JavaScript & CSS コードの最適化で読み込み負荷を改善してきています。
長いページは、コンテンツの充実度からリピーター率や滞在時間増加など、新たなビジネスチャンスを生もうとしています。
上記以外にも、ニューヨークタイムズ紙（Size 31.1MB）の長いページも見ごたえがあります。
コメント