気になるWebデザインのアイデア・テクニックが使われてる!2016年になってでてきた5つのトレンド

Webデザインのトレンドは実際に使うかどうかは別にしても、それらを見るのは非常に楽しく、インスピレーションが刺激されます。

2016年上半期、最近見かけるようになったWebデザインの5つのトレンドを紹介します。

2016年上半期、Webデザインの5つのトレンド

5 Actual Web Designs Trends for 2016

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

1. ブラウザいっぱいに表示して、スクロール無し

スクロールを必要としないサイトが、ついに勢いを増してきました。
縦長ページで次々にコンテンツを無限スクロールで表示させたり、リンクが配置されたヘッダを上部に固定表示させるのは、ほとんどのホームページで標準的な方法になりました。確かに、クリックさせて順番通りにページを見せるにはよいことかもしれません。

しかし多くのユーザーがスクロールジャックを嫌いなように、それが便利だなと思われることは実際には時々でしょう。

こういったサイトをデザインする時のポイントは、コンテンツを見せるためにスクリーンを使うということです。プロトタイプをKeynoteのようにスライドで作ってもよいでしょう。もちろん、キーボードで操作できることは標準装備です。

サイトのキャプチャ

Facebookプライバシー基本ガイド

レスポンシブでないにもかかわらず素晴らしいサイトで、Facebookのプライバシーがどのようにサービス上で機能するか説明するコンテンツです。イラストも分かりやすい!

サイトのキャプチャ

Work -Fantasy

デザイン会社のFantasyは今年早々にサイトをリニューアルし、それは期待を裏切りませんでした。特にWork内のコンテンツをチェックしてください、すべてがブラウザいっぱいにコンテンツが表示されます。

サイトのキャプチャ

KLM 50 Travels

KLMマガジンのキャンペーンサイトで、1つのスクリーンで50の旅行地を表示します。
ブラウザをスクリーンいっぱいに表示し、美しくすぎる景観をぜひ楽しんでください。操作はキーボードの矢印キーとスペースバーに対応しています。

2. 固定表示は見出しをサイドに

Webデザインの最近のトレンドを見つけるには、デザイン会社や制作会社のサイトを見るのが賢いです。現在それらのサイトで見かけるのが、見出しのテキストをサイドに固定表示しているサイトです。実際、多くの制作者がそれを採用しています。

このトレンドはデスクトップのものです。スマホ時には見出しはサイドに表示されず、見出しは通常の見出しとして機能します。

サイトのキャプチャ

Code and Theory

コンテンツが都市ごとにまとめられており、スクロールしている時は表示されているコンテンツの都市名がサイドに固定表示されます。

サイトのキャプチャ

Stack Overflow

このサイトの使い方はまったく同じという訳ではありませんが、デザイン会社や制作会社のサイトではないのに利用されていることに注目です。
スクロールする時はサイドがサブナビゲーションとして機能します。

サイトのキャプチャ

DDB Sthlm

私はスウェーデン在住なので、ここでスウェーデンのサイトを紹介します。
メニューのWorkをクリックし、スクロールしてページを見るとそのコンテンツの見出しが垂直になってサイドに固定表示されます。

3. ロゴをローダーとして使う

これはかなり流行っているトレンドで、Web制作会社系のサイトイコールこれと言えるでしょう。みんなこれを使っています。

このトレンドの特長は見た目がかっこいいだけでなく、Webサイトがブランドの一部であることをビジターに伝えることができます。非常に賢い方法です。

サイトのキャプチャ

Instrument

このサイトではロゴの見せ方が少し異なります。ページのロード中とナビゲーションを開いた時だけ、ロゴを見せます。非常に勇気が必要な見せ方ですが、新しさを感じます。

サイトのキャプチャ

Fubiz

このサイトはローンチしたときに大きな話題になりました。各セクションごとに異なるロゴを持ち、それぞれが非常に素敵なアニメーションです。

サイトのキャプチャ

This Also

このサイトも非常に面白いデザインのアイデアを採用しています。ロゴではなくナビゲーションのアイコンをローダーとして使っており、ロゴは通常の配置をしています。

4. 今までは違った背景の使い方

ブラウザいっぱいに背景を表示することは特に新しくはありません。2013年のWebデザインのトレンドでもかなり人気でした。しかし、ここでの背景の使い方はまったく新しいレベルです。

大きな特長はマウスのホバーエフェクトが加えられていることで、今までの背景の使い方とは大きく異なります。

サイトのキャプチャ

Make me pulse 

サイトにアクセスしたら、思いつくままマウスを動かして、背景がどのようになるか楽しんでみてください。

サイトのキャプチャ

Active Theory

もしあなたが代理店のためにサイトをつくることになったら、Webの新しい技術があることを示すためにこれに勝る方法はないでしょう。

サイトのキャプチャ

Details

トップの画像も印象的ですが、このトレンドを見るには少しスクロールする必要があります。4/4の「Nos Experts」までスクロールし、彼らの写真をホバーしてみてください。彼らの上に素敵なエフェクトを見ることができます。

5. 圧倒させるアニメーション

今では技術的にも対応ブラウザとしても使用可能なったアニメーションを使わない理由はありません。正しく使われるなら、これはビジュアルとしても非常に楽しく、ビジターに面白い経験を与えることができます。

助言: 間違って使うと、以前のFlashと同じ扱いになってしまいます。でも圧倒させることを忘れずに。

サイトのキャプチャ

Waaark

この小さいデザイン会社は今年最も印象的なビジュアルを体験させてくれます。圧倒させるアニメーションを効果的に使ったサイトの好例です。

サイトのキャプチャ

Animocons

アイコンをクリックした時にさまざまなアニメーションを適用するコードをまとめたサイトです。

サイトのキャプチャ

Rally Interactive Beta

このサイトも圧倒的なアニメーションを効果的に使った素晴らしい仕事をしています。トップのアニメーションは非常に印象的で、クリックして何かを選択したときにもアニメーションで楽しませてくれます。

ボーナス

これらはまだ本当の意味でトレンドではなく、いくつかのサイトで使用されているだけですが、スケールを無制限にしたレスポンシブ対応サイトを構築することは大きな成功になるでしょう。つまりiMac Retinaの5Kディスプレイで見ても、1,280pxのディスプレイで見るのとまったく同じに見えるということです。それは単に大きく見えるだけです。好例として、ブラジルのOi combo TVをチェックしてみてください。

私の名前はNilsで、スウェーデンのデジタル スタジオで、デザインディレクターとして勤務しています。もし私について多くを知ることを望むなら、わたし達のサイトをチェックしてみてください。

top of page

©2017 coliss