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

数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。

注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。

2015年これからのWeb制作業界の流れ、Webデザインのトレンドなどのまとめ

写真:re:splashed

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

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

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デザインでの画像の使い方
    画像や動画はそのファイルサイズや表示方法に注意して使用してください。
  • タッチスクリーンでの一般的な操作方法を取り入れる
    例えば画像を拡大する時はピンチアウトなど、スマホでの一般的な操作方法を取り入れることで、コンテンツを容易に楽しめる手助けになります。

UIの操作を独自のデザインにしてしまうのをたまに見かけますが、ユーザーが学習しないと利用できないのでハードルが高いです。

2015年、IT系で求められているスキル

最後は、IT系で求められている注目度の高いスキルです。

サイトのキャプチャ

IT job skills for 2015

  • デスクトップ サポート
    PCのセットアップや修理、Webサービスの利用まで、幅広い需要があります。
  • データベース マネジメント
    多くの企業がビッグデータに注目しています。そのデータをどのように使うかが非常に重要です。
  • セキュリティ
    この問題は切り離すことができません。
  • プロジェクト マネジメント
    プロジェクトをマネジメントできる人材は重宝されます。
  • 多才
    進化するWebテクノロジーに対応するには、幅広いスキルセットが必要になります。

データ系とリスク管理系に注目が集まっていますね。プロジェクトを円滑に進めるプロジェクトマネージャー、プロジェクトを演出するアートディレクターの存在は欠かせません。
また、深く幅広い知識をもっている人は確かに貴重な人材ですね。

sponsors

top of page

©2018 coliss