2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
Post on:2015年1月7日
Webデザインは常に進化しており、活気にあふれている世界です。現在のWebデザインの状況を確認しながら、2015年の予測されるトレンドを紹介します。
Webデザイナー・ディレクターだけでなく、Web制作に携わる人は知っておいて損はないキーワードばかりです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010707.png)
Web Design Trends That Will Rule 2015
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- 高品質なストックフォト
- 単色の背景
- 動画を使った背景
- 面白いナビゲーション
- カード・タイル型レイアウト
- 固定配置のブロック
- パララックスは繊細に
- いかにスクロールしてもらえるか
- 今までとは違うイラストの使い方
- ビッグデータ・グラフ
- プロダクトファースト
- フラットデザインは成長し続けている
- モバイルファースト
- 人間的な温かみのあるデザイン
- UXのちょっとした工夫
- ジオメトリー
- 大きくて大胆なタイポグラフィ
- Webサイトジェネレーター
- パーソナルブランド
- Material Designには注目しておくべし
- インタラクションの進化
高品質なストックフォト
2014年、高品質なストックフォトの存在は大きかったです。「Best Free Stock Photos」でまとめられているような商用でも無料で利用できる写真画像素材は、長期に渡り利用されるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-01.png)
単色の背景
背景、タイポグラフィ、イメージのオーバーレイ、ボタンなど、一つのカラーの強いアクセントを強調して使用し、カラーをブランドと結びつけることでWebサイトの印象を忘れ難いものにします。
「Website Designs based on Solid Single Colored Background」にたくさんの単色の事例があります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-02.png)
動画を使った背景
動画の背景はWebサイトの感情や目的を描く最高の表現で、どんな写真よりも多くのことを伝えます。このトレンドは2014年にかなり増えましたが、これから先更にピークを迎えるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-04.png)
面白いナビゲーション
フロートしていたり、くっついていたり、Webサイトのナビゲーションはさらにクリエイティブに進化しています。スライドダウン・アップ、ポップアップなど、アイデアにスパイスをきかせ、面白いアニメーションが素晴らしいユーザエクスペリエンスを与えるのに役立ちます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-05.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-06.png)
カード・タイル型レイアウト
カードあるいはタイルを使ったレイアウトは2015年さらに大きくなり続けるでしょう。Pinterestがこのトレンドのリーダーですが、他にも多くのコマースサイトやブログでも見るでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-07.png)
固定配置のブロック
固定配置は、例えばスティッキーバーやナビゲーションなどで見慣れていると思います。2014年に増えたのはサイドバーのような他の部分が固定配置でデザインされたものです。この固定配置のブロックはこれからもっと多くのWebサイトで見かけるようになるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-08.png)
パララックスは繊細に
パララックスは好きな人と嫌いな人に分かれます。多くのWebサイトでパララックスが採用された中、不幸にも使い勝手の悪いパララックスがあったのは事実です。最近の傾向としては、パララックスのエフェクトは繊細にし、上質な印象を加えるアニメーションが好まれています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-09.png)
いかにスクロールしてもらえるか
さまざまなインタラクションやエフェクトを備えた縦長1ページのコンテンツはスクロールすることで、ストーリーテリングを備えた素晴らしいユーザエクスペリエンスを提供します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-10.png)
今までとは違うイラストの使い方
イラストは今まではアイコンのようにWebデザインの一部を担うだけでした。しかしこれからは美しいイラストがブランドを代弁し、ビジターにメッセージを伝える重要な役割を担うWebサイトが増えるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-11.png)
ビッグデータ・グラフ
ビッグデータは技術産業と同様にWebデザインでもいっそう重要になっています。2015年のWebデザインでもっと多くのグラフ・チャートとインタラクティブデータのプロジェクションを見ることになるでしょう。洗練されていて、複雑で未知で、しかも美しくて魅力的。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-12.png)
プロダクトファースト
物理的なプロダクトを生産する多くのスタートアップ企業があります。Webでそのプロダクトの明白なフィーリングを表現することは非常に難しいことです。このプロダクトをユーザーに分かりやすく伝える方法として、3Dがあります。プロダクトをページ上で動かし、細かいディテールをチェックすることも可能です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-13.png)
フラットデザインは成長し続けている
フラットデザインは多くのWebサイトで採用され、多くのWebデザイナーがすでにデフォルトとして取り入れているでしょう。フラットデザインはまだ新しい動きがあります。2015年もまだまだ目が離せません。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-14.png)
モバイルファースト
モバイルのユーザー数は驚くほど早いペースで増えています。レスポンシブデザインはもう大きな特徴ではなく、不可欠です。デザイナーが最もよいユーザエクスペリエンスを与えるためには、モバイルユーザーありきでWebサイトをデザインする必要があります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-15.png)
人間的な温かみのあるデザイン
手書きのイラストや文字は今までに存在していました。Webサイトであらゆるフォントを利用できるようになった今、デザイナーは手書き風のフォントを使って人間的な温かみのあるルックアンドフィールを与えることができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-16.png)
UXのちょっとした工夫
ユーザーをほんの少し喜ばせる小さいディテールは大切です。フォームの入力時、クリックした後など、ユーザエクスペリエンスを豊かなものにします。今年一年も素晴らしいUXのアイデアを見ることでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-17.png)
Virgin America (Source: Little Big Details
ジオメトリー
ジオメトリー(幾何学)は数学からきます。しかしWebデザインにおけるジオメトリーは学校の数学ほど退屈ではありません。美しいジオメトリカルな形状やパターンは2015年に制作の現場で使う機会がより増えるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-18.png)
大きくて大胆なタイポグラフィ
2014年に特大サイズの見出しを見てきました、そして2015年はさらに多くを見ることになるでしょう。この特大サイズの見出しは非常にうまく機能しており、ビジターにも影響をしっかりと与えるテクニックです。簡単で、強力で、しかも効果的。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-19.png)
Webサイトジェネレーター
私たちは今までWebサイトジェネレーターがどのように人間のデザイナーとコーダーに代わるか見てきましたが、その多くはいまいちでした。2015年は高品質なジェネレーター(Generator, Squarespace, Macaw, Webflow, Froont)で作られたWebサイトを見るでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-20.png)
パーソナルブランド
パーソナルブランドは非常に重要になっています。デザイナー、エンジニア、ブロガー、企業家などオンラインでパーソナルブランドを作っています。2015年は、人にフォーカスしたWebサイトをもっと多く見ることになるでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-21.png)
Material Designには注目しておくべし
Material Designはフラットなスタイルに微妙な修正を施した非常に有望なデザインのムーブメントです。2015年は確実にこのMaterial Designが大きな上昇をみせる年です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-22.png)
インタラクションの進化
インタラクティブなデジタルエクスペリエンスはさらに多くなるでしょう。カメラやマイクを使い、ユーザーのアクションの基づいてさまざまなインタラクションを楽しむことができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015010708-23.png)
sponsors