2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ

サイト構築 -制作

Post on:2015年1月23日

2015年、現在のWebデザインを確認しながらこれからのトレンドを探る

UIデザイン的なトレンドは先日の記事が参考になります。

2015年、現在のWebデザインを確認しながらこれからのトレンドを探る

2015年、Web制作業界全体の流れ

近年鋭い予測をだしてきたsitepointの2015年のWeb制作業界の全体の流れ。

10 Web Predictions for 2015

レスポンシブ対応の画像テクニックが使いものになる
多くのブラウザでサポートが始まっています。
Webコンポーネントの進化
Node.jsがメインストリームになる
フレームワークの停滞
HTML, CSS, JavaScriptで何千というフレームワークがリリースされてきましたが、魅力的なアップデートを行えるものは非常に少ないのが現状です。
Googleにとって厳しい年になる
今までは信じられないほど成功をしてきましたが、今年はチャレンジの年になるでしょう。スマホの小さいスクリーンでの広告、アマゾンに遅れをとっているコマース、FacebookやTwitterに遅れをとっているソーシャル部門など。
Chromeのシェアは増える
デスクトップとスマホ上でChromeのシェアは増え、50%を超えるでしょう。
IEはFirefoxの下に
MicrosoftとMozillaはChromeの成功によって打撃を与えられました。そして、IEは更にシェアを落とし、Firefoxの下になるでしょう。
モバイルユーザーの増加
2014年、モバイルユーザーは20%から34%に増加しました。この傾向はまだ続き、デスクトップと同等になるでしょう。
2015年はパフォーマンスに注目
2014年までは各デバイスのスクリーンサイズに対応することに全力を注いできましたが、これからはユーザインタラクションや帯域幅などパフォーマンスに敏感になるべきです。
翻訳機能に注目
Skype Translatorのようなより近い自然言語翻訳は世界を変えるでしょう。

スマホをはじめとするモバイルデバイスへの対応が更に進化しそうです。また、クライアントサイドが停滞する中、Node.jsなどのサーバーサイドがより注目されてきています。

2015年にあなたが目にするWebデザインのトレンド

インターフェイスのトレンドは数多くのサイトで特集を組んでいますが、この記事は他にはないポイントを数多く取り上げており、なかなか注目の記事でした。

10 Web design trends you can expect to see in 2015

長いスクロールを伴ったサイト
ストーリーテリングとインタラクションで差をつける
大きいヘッダの背景に画像を使わない
写真画像を背景に使うサイトが2014年は増えましたが、パフォーマンスを優先して画像を使用しないのも増えてきました。
余分なデザイン要素は取り除く
必要のないデザイン要素、意味のないデザイン要素、過剰なデザイン要素は使用しないようにします。
幅中央揃えの新しいアプローチ
Michele Mazzuccoのような中央揃えのアプローチは広いビューポートでもコンテンツに集中しすることができます。
プロのカメラマンによる写真素材
フライアウト・スライドアウトのアプリのようなメニュー
メインメニューは隠す
メインメニューを小さなアイコンに置き換えるのはスマホ用のテクニックですが、デスクトップにも効果的です。Brian Hoff Designのメニューは非常に面白いアプローチです。
とっても大きなタイポグラフィ
特大サイズの見出しはユーザーの目を引きつける簡単で強力なテクニックです。
パフォーマンスとスピード

各項目でそれぞれサイトが紹介されており、よいインスピレーションがもらえます。

2015年に大きく変化するウェブデザインの10の傾向

今年実際に起こるであろうウェブデザインの10の傾向で、ちょっと過激な視点で論じています。

10 web design trends you’ll actually see in 2015

レタリング
ロゴ、見出し、コピーなど文字をしっかりデザインする傾向。
Goodbye to IE
モダンブラウザを優先的に考え、もうIE6/7のサポートは必要ないです。
マイクロデザイン
小さいディテールに気を配ったデザイン、Material Designのように繊細なアニメーションを使ったデザイン。
スマホの次のデバイス
腕時計などのウェアラブルPCや冷蔵庫などの白物家電がWebに接続できるデバイスとして有力ですが、どうなるかは分かりません。今最も良いアプローチは、プラットフォームを問わないレスポンシブなデザインです。
モバイルでのビデオ
2014年大きな成長を見せたのがビデオですが、モバイルでは少し遅れています。特に広告の分野で大きな変化があるでしょう。
フレームワークの下落
去年予想した通りjQueryの下落をみせました。今年はフレームワークで同じことが起きるでしょう。
昔からあるWebサービスの終わりの始まり
FacebookやPaypalなど従来勢力を持っていた歴史のあるサービスたちは、これからの生き残りをかけて新しいサービスに取り組むでしょう。
アートディレクションが重要になる
文字の見せ方、ブランドの伝え方など、クライアントを納得させるアートディレクションの役割が非常に重要になります。
蓄積されたデータの解析
2015年はビッグデータがより重要になり、解析を含めたビッグデータを扱う新会社が多く登場するでしょう。
SVGの普及
SVGはレスポンシブに対して完璧なフォーマットで、フラットデザインとも非常に相性がよいです。2015年はSVGがWebのデファクトのイメージ形式になるかもしれません。

ここでもフレームワークのことが取り上げられていました。進化するWebデザインにあわせてフレームワークもアップデートを行う必要がありますが、定期的にアップデートがされているものは数少ないのが現状です。

2014年のトレンドで良かったもの、ダメだったもの

多くのサイトで使われたトレンドが必ずしもいいものとは限りません。2014年に流行ったもので良かったもの、ダメだったものを取り上げています。

The Best & Worst Web Design Trends of 2014

良かったもの

ミニマルなフラットデザイン
Webフォントの改善
フルスクリーンの背景
レスポンシブデザインの進化

ダメだったもの

モーダルウインドウを使った広告
ページを開くとコンテンツを隠すように表示されるモーダルウインドウ。
ソーシャルメディアのボタンの設置が多すぎる
3, 4つくらいなら問題ないですが、かなりの数のボタンを設置しているとどれを押すべきか悩んでしまいます。
ローディングばっか
ひと昔前のFlashのスプラッシュページのように、ページがレンダリングされる前にローディングのアニメーションばかりが表示されます。このアニメーションは必要ですか？
カスタマイズされたスクロールバー
これもFlashが流行った時に見られた傾向です。ブラウザのデフォルトのスクロールバーの代わりにカスタマイズされたものが表示されます。

モーダルウインドウやローディングなど、ページが表示される時の無駄なアトラクションは不必要ですね。Flash全盛期にも似た傾向が見られました。

モバイルデザインに向けたWebデザインの7つの戦略

スマホやタブレットをターゲットとした場合、Webデザインの戦略をどのようにすべきかのポイントです。

7 Mobile Web Design Strategies That Are In Vogue

クリックよりスクロールが大切
スクロールはモバイルでの操作を楽しくし、インタラクションにします。
フラットデザインからMaterial Designへ
フラットデザインで足りなかった部分をMaterial Designは備えており、2015年は間違いなくトレンドになります。
レスポンシブデザイン
レスポンシブデザインはターゲットをモバイルに定める時の最適な解決方法です。
アプリのようなモバイル用のWebデザイン
アイコンを効果的に使う
アイコンはビジュアル的に非常に魅力があり、容易にナビゲーションを改善することができます。
モバイル用のWebデザインでの画像の使い方
画像や動画はそのファイルサイズや表示方法に注意して使用してください。
タッチスクリーンでの一般的な操作方法を取り入れる
例えば画像を拡大する時はピンチアウトなど、スマホでの一般的な操作方法を取り入れることで、コンテンツを容易に楽しめる手助けになります。