2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ

サイト構築 -制作

Post on:2017年1月24日

2017年、Webデザインのトレンド

まずはWebデザインのトレンドを広い視点で捉えたものから。デザイナーやデベロッパーだけでなく、プロジェクトに関係するすべての人が知っておいて損はないでしょう。

18 web design trends for 2017

コンテンツを魅力的に見せるレイアウト
一見当たり前のことですが、忘れがちなのが、人々はコンテンツを見るためにWebサイトを訪れます。デザインの究極の役割はビジターにとって直感的で、効率的で、快適な方法でコンテンツを見せることです。
デザイナー同士、デザイナーとデベロッパー間のよりよいコラボレーション
デザインがよりビジネスに影響力を与えるにつれ、コラボレーションがますます注目されています。プロジェクトのスケジュール、デザインの共有、テンプレートの共有など、多くの協力と良いコミュニケーションが必要です。
参考: UXデザイナーが備えておきたいツール・サービスのまとめ
デザインから実装までのフローを改善
プロトタイプは静的でしたが、最近ではアニメーションを使ったダイナミックなものがクライアントと良いコミュニケーションを構築できます。
フォントを大胆に、大きく使う
重要なプロダクトやサービスなどを印象深く見せるのに効果的です。
デザインの原則に基づく複雑なレイアウト
FlexboxやCSS Grid Layoutなど、Webでは表現力に富んだレイアウトが可能です。
SVGの活用
SVGはJPGやPNGやGIFなどとは異なり、ベクターで拡大縮小可能なフォーマットです。あらゆるデバイスのスクリーンで美しくグラフィックを表示します。
制約に基づくデザインツール
レスポンシブデザインはわたし達の制作方法を大きく変えました。しかしレスポンシブに対応したデザインツールが少ないのが現状です。
カラーは明るめが好まれる
ミニマリズムやブルータリズムのトレンドは2016年あたりから、他と差別化するための方法が模索されてきました。一つの答えとして、大胆な明るいカラーを取り入れる方法があります。
アニメーションはさらに注目
アニメーションはUIにおいて重要な役割を担っています。単に楽しませるだけでなく、操作を助ける視覚的手段にもなっています。
ユニークなレイアウト
ボックスを単に並べるだけでのレイアウトにデザイナーは必要ありません。視覚的に楽しませ、コンテンツにあったレイアウトをするデザイナーが必要とされています。
Flexbox
もしまだFlexboxを使っていないなら、これからその楽しさを体験できるチャンスです。すべての最新のブラウザがFlexboxをサポートする状態で、使わない理由はありません。
参考: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
CSS Grid Layout
Flexboxに続くさらに新しいレイアウトモジュールが、CSS Grid Layoutです。Flexboxより難しいですが、さまざまなレイアウトの問題を簡単に解決します。
参考: CSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル
コンテンツ配信、パーソナライゼーション、コンバージョンに重点をおいてデザインする
コンテンツを届ける手段として、3つに重点をおいてデザインするのが効果的です。
特にコンバージョンには重点をおく
コンバージョンは人間のみだけでなく、botにも注目してください。
誤報に注意
Webは社会的に非常に大きな影響を与えます。米大統領選挙でも現実に大きな影響を与えました。
デザイン（とコンテンツ）をしっかり見る
気に入ったデザインのサイトはそのデザインを見るだけでなく、コンテンツにも注目してください。
デザイナーの新たな成果物「コード」を新しい方法で作成
コーディング作業は将来劇的に変わります、実際デザイナーとデベロッパーの境界線はもはや存在しないかもしれません。
Web上のバーチャル・リアリティ
VRが2017年、Webに影響を与えることは否定できません。たとえブラウザがサポートする準備ができないとしてもです。Web VRについて情報をチェックするようにしたほうがよいでしょう。

Bauhaus-Archiv
ユニークなレイアウトの事例

2016年に人気が高かったインターフェイスのデザイントレンド

2016年はUIデザインの分野ではクリエイティブな模索と実験の年でしたが、そのほとんどは使いやすさに焦点が当てられていました。2017年はこれらのトレンドにさらに磨きがかかるでしょう。

フラットデザイン
会話型のUI
ミニマリズム
オリジナリティーがあるカスタムグラフィック
アニメーションするマイクロインタラクション
スクロールをトリガーにしたアニメーション
アニメーションで表現するチュートリアル
ランディングページの多様性
ブルータリズム
元は建築形式で、美しい対称性とハーモニー、複雑なレイアウト、視覚的パフォーマンスのアクセントを備えた洗練されたデザインのこと。
カスタムグリッド
大きくて太字のタイポグラフィ
大きな打ち出し画像
手書きの文字
ダミーテキストの代わりに本当のコンテンツ
プロダクトやサービスをを説明する動画
鮮やかなダーク系のカラーパレット

Contact List Concept
ブルータリズムの例

2017年、Adobe社のデザイン予測

Adobeからも2017年のデザイン予測が！ PhotoshopやXDなどに、機能として反映されるかもしれませんね。

10 Design Predictions for 2017

ミニマリズムデザインの進化
UIよりコンテンツにフォーカスし、明確なビジュアルコミュニケーションを通じてユーザーの問題を解決します。
マイクロインタラクションの進化
UXデザインで極めて重要な役割を果たしているのが、繊細なアニメーションです。特定のエリアに注意を引きつけるだけでなく、完了したアクションのフィードバックを提供したりなど、忘れ難い経験を与えることができます。
動画は王様
視覚が人間の感覚の中でもっとも強いと言われています。写真は1000の言葉を描き、動画はさらにその10倍の力があります。
豊かなカラーと印象的なタイポグラフィ
豊かなカラーはUIを鮮やかにし、インターフェイスをより明るくします。タイポグラフィはプロダクトやサービスのパーソナリティを表現する人気が高い手段です。ただ読むためだけでなく、メッセージを伝えるためです。
オリジナルのイラスト
写真を使うより個性があるため、イラストも人気が高い選択肢となっています。ブランドを伝える視覚的言語を作り出します。
長いスクロールとパララックス
縦長ページや無限スクロールの長いスクロールはWebのスタンダードになるでしょう。特にモバイルで好まれており、よく機能します。ただしナビゲーションはまだ進化の余地があります。
カードはもっと大きくなる
カードは一つのトピックについて情報を整理することができます。直感的なので、操作も簡単です。またスクリーンのサイズに限定されずに広い用途でUIを作成できます。
会話型インターフェイス
Chatbotはわたし達の間でもホットな用語の一つです。会話型のインターフェイスはますます多くのジャンルで見ることになるでしょう。
AR/VR
拡張リアリティ・バーチャルリアルティのためにUIをデザインすることは、新しいチャレンジと言えます。2Dで身につけた知識を3Dに移す必要があるかもしれません。
プロトタイピングのブーム
デザインプロセスの一部にプロトタイピングが含まれると、デザインをする時にユーザーについてより多くの時間をかけて考えられるようになり、ワークフローが改善されます。プロトタイプの新しいツールは指をぱぱっと動かすだけで、簡単に多くのプロトタイプを生産することが可能です。
参考: UXデザイナーが備えておきたいツール・サービスのまとめ

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

的確な予測に定評のあるsitepointの2017年のWeb制作業界の全体の流れ。

10 Web Predictions for 2017

モバイルは引き続きデスクトップの使用率を上回る
2016年12月ついにデスクトップとモバイルの使用率は50:50になりました。特にアジアやアフリカ圏内ではスマホの使用率が非常に高いです。
モバイルファーストからモバイルオンリーに
あなたのユーザーの大多数がモバイルでアクセスするのであれば、デスクトップのデザインは必要ですか？
CSS Grid Layout
皮肉なことに複雑なデスクトップ用のデザインを採用するサイトが少なくなる頃に、CSS Grid Layoutが広くサポートされるようになります。
プログレッシブWebアプリの登場
2017年に何か一つ新しいことを学ぶのであれば、プログレッシブWebアプリをチェックしてみてください。
参考: Progressive Web Apps
ネイティブアプリの崩壊
多くの会社がOSに限定されたネイティブアプリから、Webアプリに移行するでしょう。
バーチャルリアリティはニッチな技術になる
VRは面白く、確かにホットな話題です。ゲーム業界は大きく変わります、特に成人向けのゲームは多くが採用するでしょう。WebVRはサイトを見るためにヘッドセットをつけるか厳しいところです。
拡張リアリティの方がより良い
ARも非常にエキサイティングで、2017年にさまざまなプロダクトで利用可能になります。特にスマホで情報をオーバーレイさせることは、旅行者やポケモンGOのプレイヤーにとって不可欠になっています。
ブラウザのシェアに大きな変化はない
ブラウザ戦争はChromeが勝ちました。Firefoxは10%ちょいで、IEはその下です。SafariはiOSで伸びるかもしれませんが、それほど確かではありません。
フレームワーク
2015年にAngular、2016年にReactがそれぞれ注目され、2017年はVue.jsとSvelteの人気が高いです。どのフレームワークを使用するにしても、寿命が限られていることを認識しておいてください。
暗号化
暗号に対する重要が増えてきました。ブラウザはhttpサイトに対して警告を与え、多くのユーザーがパスワードマネージャーを使用し、多くのサービスが2段階認証やパスワードレス認証を採用し、クラウドのデータは暗号化されています。

2017年、注目されているデザイナー・デベロッパーのツール

デザインのトレンドを確認しておくことも大切ですが、便利なソフトウェアやオンラインツールも数多くリリースされています。あなたのワークフローを改善する助けになるかもしれませんね。

The state of design tools in 2017

デザイナーのツール

Photoshop, Illustratorは長きに渡り定番ツールで、Sketch, Figma, Invisionといったツールもここ数年でシェアが増えてきました。

デベロッパーのツール

HTML, CSS, JavaScriptはもちろん定番ですが、HTML5に、CSS3, Sass, Lessに、jQuery, Angular, Reactにとそれぞれ移行されてきました。

アイデア: Dribbble, Behance, Muzli(In)
ビジュアルデザイン: Sketch, Photoshop, Illustrator, Figma
プロトタイプ: Craft, Invision, Proto.io, Adobe XDなど
ワークフロー: GitHub, Lingo
ハンドオフ: Zeplin, Avocode, Inspect(In)など

2017年、WebデザインのUIにおけるトレンド

最後もWebデザインのトレンドですが、上で紹介したものと取り上げられているポイントが異なり、UIデザインについて解説されています。

2017 Web Design Trends

グリッドにとらわれないレイアウト
特にクリエイティブな会社やプロダクトのサイトでは、要素を重ねたり、スペースを巧みに利用しています。
多面的な打ち出しエリア
スライダーやカルーセルを使うサイトは少なくなりました。最近ではグリッドを活かしたユニークなレイアウトで見せています。
縦方向に分割されたレイアウト
スライダーやカルーセルを見なくなった後にもう一つ登場したのが、この縦に分割されたレイアウトです。カラーやイメージが異なる2つのコンテンツに役立ちます。
アンビエントな動画
これは2015年あたりから増えてきたもので、動画のストーリーテリングが移るにつれて、サイトの雰囲気やコンテンツを伝えることができます。
SVGを使ったレイアウト
ユニークな形をつくるにはSVGが簡単で、適しています。曲線や鋭角など今まで見たことがない形を作り出すことができます。
繊細なアニメーション
これは増える傾向にあります。単に楽しませるだけでなく、アクションを予期させることもできます。
テクスチャの復活
フラットなUIが増えた反動もあり、質感を求め、テクスチャの人気が高まっています。
美しいグラデーション
これは一昔前のスキュアモーフィックで使われていたものとは異なります。フラットなデザインに深みやパンチを与える、モノクロパレットで微妙なグラデーションです。
カードはあらゆるところに
2015年あたりから多くのサイトで見かけるようになりました。レスポンシブとの相性の良さ、コンテンツの分かりやすさが人気の要因でしょう。
多すぎるメニューはさようなら
アイテム数が多いメニューは直感的ではありません。その代わりに、メガナビゲーションや没入型ナビゲーションに移行されてきました。