- 更新日: 2017年3月9日
- 公開日: 2016年9月7日
【2016年版】webデザイン・トレンド10選
今年になって7,000万以上* の web サイトがリリースされ、デザインにもある種のトレンドが見られます。
ファッションやライフスタイルの移り変わり同様、webサイトの流行にも乗り遅れないようにしたいですね。
今回は、海外のサイトを中心に、最近増えてきているwebデザインをご紹介させて頂きます。
**確立されていないデザイン名は、私が独自に命名しています。ご了承ください。
Web Design Trend 2016 by Oshimamasarara
Heroアイキャッチ
世界トップクラスのブロガーサイトを見ていると、アイキャッチのレイアウトに新たなトレンドを巻き起こしていることが分かります。
従来アイキャッチ画像は、記事リストと該当記事のトップ（bodyやContent Inner内など）に配置されるのが常ですが、こちらのアイキャッチは投稿内に大きく表示もしくは背景画像として表示させる手法を採用しています。
Heroイメージを意識したアイキャッチ・デザイン、カッコいいですね。
PCなど大画面で見る場合は、こちらのデザインの方が、記事がキレイに見えます。上記サイト以外にこちらのサイトのデザインも参考になります。
ストーリーテリング
ストーリー性のあるコンテンツを表現する方法に『ストーリーテリング（Storytelling）』があります。
ストーリーテリングは、近頃webデザイン・トレンドして注目されており、スッキリとしたデザインが特徴的です。紹介したいストーリーに最大限焦点を合わせて、他の表示物を一切削除しています。
サンプルでご紹介させて頂いていますNEGOさんと中田ヒデさんの対談レポは、まるで取材現場にいるような迫力を感じることができます。動画ではなく、静止画像ならではの迫力が特徴的なwebデザインです。
他には、こちらのサイトも参考になると思います。
Gifアニメ
デバイスレスにスムーズな動きを表現ができる方法として、Gif画像を用いたwebデザインが流行っています。
用途としては、商品紹介をするページでのシステム説明画像やキャンペーン・ページでのユーザー滞在時間充実化など使い方は様々です。
ビデオやCSSアニメーションなどとうまく組み合わせてGifデザインを楽しみたいですね。
動画デザイン
ハイセンスなwebサイトに、YouTubeという文字や余計なアイコンは不要ですよね。
近頃は、YouTubeAPIを活用したシームレスな動画デザインが流行っています。こちらのサイトは凄くハイセンスで、オートループの動画を流しつつ、クリックされると用意しておいた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）の長いページも見ごたえがあります。
＼一流デザイナーのスキルが身に付く／
まとめ
いかがでしたでしょうか？2016年現在のwebデザイン・トレンドは、2015年のデザイン・トレンドを発展させたものが多く、中でも縦スクロールを意識したデザインの改良が多く見受けられます。
2017年も今のトレンドを基本的には引き継ぐと思いますので、少しずつアニメーションやCSSのテクニックを磨いておきたいですね。
うっ、CSS や HTML、Photoshopの基礎がまだ・・・ という方は、CodeCamp、ご検討下さい
- この記事を書いた人
- オシママサラ
