気になるWebデザインのアイデア・テクニックが使われてる！2016年になってでてきた5つのトレンド
Post on:2016年7月25日
sponsors
Webデザインのトレンドは実際に使うかどうかは別にしても、それらを見るのは非常に楽しく、インスピレーションが刺激されます。
2016年上半期、最近見かけるようになったWebデザインの5つのトレンドを紹介します。
5 Actual Web Designs Trends for 2016
以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
1. ブラウザいっぱいに表示して、スクロール無し
スクロールを必要としないサイトが、ついに勢いを増してきました。
縦長ページで次々にコンテンツを無限スクロールで表示させたり、リンクが配置されたヘッダを上部に固定表示させるのは、ほとんどのホームページで標準的な方法になりました。確かに、クリックさせて順番通りにページを見せるにはよいことかもしれません。
しかし多くのユーザーがスクロールジャックを嫌いなように、それが便利だなと思われることは実際には時々でしょう。
こういったサイトをデザインする時のポイントは、コンテンツを見せるためにスクリーンを使うということです。プロトタイプをKeynoteのようにスライドで作ってもよいでしょう。もちろん、キーボードで操作できることは標準装備です。
レスポンシブでないにもかかわらず素晴らしいサイトで、Facebookのプライバシーがどのようにサービス上で機能するか説明するコンテンツです。イラストも分かりやすい！
デザイン会社のFantasyは今年早々にサイトをリニューアルし、それは期待を裏切りませんでした。特にWork内のコンテンツをチェックしてください、すべてがブラウザいっぱいにコンテンツが表示されます。
KLMマガジンのキャンペーンサイトで、1つのスクリーンで50の旅行地を表示します。
ブラウザをスクリーンいっぱいに表示し、美しくすぎる景観をぜひ楽しんでください。操作はキーボードの矢印キーとスペースバーに対応しています。
2. 固定表示は見出しをサイドに
Webデザインの最近のトレンドを見つけるには、デザイン会社や制作会社のサイトを見るのが賢いです。現在それらのサイトで見かけるのが、見出しのテキストをサイドに固定表示しているサイトです。実際、多くの制作者がそれを採用しています。
このトレンドはデスクトップのものです。スマホ時には見出しはサイドに表示されず、見出しは通常の見出しとして機能します。
コンテンツが都市ごとにまとめられており、スクロールしている時は表示されているコンテンツの都市名がサイドに固定表示されます。
このサイトの使い方はまったく同じという訳ではありませんが、デザイン会社や制作会社のサイトではないのに利用されていることに注目です。
スクロールする時はサイドがサブナビゲーションとして機能します。
私はスウェーデン在住なので、ここでスウェーデンのサイトを紹介します。
メニューのWorkをクリックし、スクロールしてページを見るとそのコンテンツの見出しが垂直になってサイドに固定表示されます。
3. ロゴをローダーとして使う
これはかなり流行っているトレンドで、Web制作会社系のサイトイコールこれと言えるでしょう。みんなこれを使っています。
このトレンドの特長は見た目がかっこいいだけでなく、Webサイトがブランドの一部であることをビジターに伝えることができます。非常に賢い方法です。
このサイトではロゴの見せ方が少し異なります。ページのロード中とナビゲーションを開いた時だけ、ロゴを見せます。非常に勇気が必要な見せ方ですが、新しさを感じます。
このサイトはローンチしたときに大きな話題になりました。各セクションごとに異なるロゴを持ち、それぞれが非常に素敵なアニメーションです。
このサイトも非常に面白いデザインのアイデアを採用しています。ロゴではなくナビゲーションのアイコンをローダーとして使っており、ロゴは通常の配置をしています。
4. 今までは違った背景の使い方
ブラウザいっぱいに背景を表示することは特に新しくはありません。2013年のWebデザインのトレンドでもかなり人気でした。しかし、ここでの背景の使い方はまったく新しいレベルです。
大きな特長はマウスのホバーエフェクトが加えられていることで、今までの背景の使い方とは大きく異なります。
サイトにアクセスしたら、思いつくままマウスを動かして、背景がどのようになるか楽しんでみてください。
もしあなたが代理店のためにサイトをつくることになったら、Webの新しい技術があることを示すためにこれに勝る方法はないでしょう。
トップの画像も印象的ですが、このトレンドを見るには少しスクロールする必要があります。4/4の「Nos Experts」までスクロールし、彼らの写真をホバーしてみてください。彼らの上に素敵なエフェクトを見ることができます。
5. 圧倒させるアニメーション
今では技術的にも対応ブラウザとしても使用可能なったアニメーションを使わない理由はありません。正しく使われるなら、これはビジュアルとしても非常に楽しく、ビジターに面白い経験を与えることができます。
助言: 間違って使うと、以前のFlashと同じ扱いになってしまいます。でも圧倒させることを忘れずに。
この小さいデザイン会社は今年最も印象的なビジュアルを体験させてくれます。圧倒させるアニメーションを効果的に使ったサイトの好例です。
アイコンをクリックした時にさまざまなアニメーションを適用するコードをまとめたサイトです。
このサイトも圧倒的なアニメーションを効果的に使った素晴らしい仕事をしています。トップのアニメーションは非常に印象的で、クリックして何かを選択したときにもアニメーションで楽しませてくれます。
ボーナス
これらはまだ本当の意味でトレンドではなく、いくつかのサイトで使用されているだけですが、スケールを無制限にしたレスポンシブ対応サイトを構築することは大きな成功になるでしょう。つまりiMac Retinaの5Kディスプレイで見ても、1,280pxのディスプレイで見るのとまったく同じに見えるということです。それは単に大きく見えるだけです。好例として、ブラジルのOi combo TVをチェックしてみてください。
私の名前はNilsで、スウェーデンのデジタル スタジオで、デザインディレクターとして勤務しています。もし私について多くを知ることを望むなら、わたし達のサイトをチェックしてみてください。
sponsors
