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

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

注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。

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

淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ
参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる!

2016年、Webとグラフィックデザインのトレンドと今後の展望

まずはデザインのトレンド。
UIやUXデザインはユーザーありきを重視した、より使いやすいものが主流です。

サイトのキャプチャ

2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望

各項目の詳しい説明は、元記事を翻訳した上記ページをご覧ください。
既に知っているキーワードでも、より洗練されたものに進化しています。

  1. ユーザーが使いやすいこと
  2. レスポンシブデザインの考え方
  3. アプリを彷彿させるWebデザイン
  4. ナビゲーションの進化
  5. モジュール式のテキスト
  6. モジュール式と無限スクロール
  7. Material Design
  8. フラットデザイン
  9. 1,000の言葉よりもビジュアルで
  10. インフォグラフィック
  11. タイポグラフィ
  12. モダンレトロ
  13. 魅力的なカラー
  14. グリッドとジオメトリックの図形
  15. ストックフォトからの卒業
  16. 動画とアニメーションgif

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

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

サイトのキャプチャ

10 Web Predictions for 2016

  1. メジャーな企業から個人情報が漏洩する
    企業はセキュリティを真剣に考えるべきです。優秀なハッカーを雇ったり、バグ報奨金などの対応を。
  2. スタティックなサイトが主流に。
    ここ数年、静的なサイトジェネレーター(Jekyll, Middleman, Metalsmithなど)が注目されています。静的サイトの利点は、速く、強固で、安全で、簡単ということです。特に更新頻度が低いコンテンツに向いています。
  3. Chromeのシェアは安定
    Chromeは現在54%のシェアで、最も人気が高いブラウザです。この数字は下がることはなく、年末には60%に達するでしょう。
  4. 新しいブラウザ「Vivaldi」に注目
    VivaldiはOperaの元従業員たちが手がけた新しいブラウザです。Operaはv12でいくつかの機能をサポートしなかったため、多くのユーザーが失望しましたが、その教訓をいかしたさまざまな機能をVivaldiは備えています。
  5. これからはSafariが「新しいIE」と言われるかもしれない
    SafariはiOSのセールスにも関わらずシェアが下がっています。webkitプレフィックスや技術上の制約などがあるため、今後Web制作者泣かせのブラウザになるかもしれません。
    参考: Safari is the new IE
  6. CSSは「Grid Layout Module」に
    Grid Layout Moduleは現在、IE/Edgeのサポートですが、他の主要ブラウザの対応が始まります。Flexboxに比べてアドバンテージが多数あります。
  7. デザインはモバイリフィケーションに
    モバイルファーストは技術的なアプローチではなくレイアウトの指針になり、モバイルでより使いやすいUIが好まれるようになります。
  8. ページ容量は肥大化傾向
    ここ3年の間にページ容量の平均は2倍になり、現在では2.2MBを越えています。無意味な高解像度の写真、利用されていないSNS、邪魔な広告など、ユーザーの貴重な時間や帯域幅を浪費します。
  9. WebAssemblyの動きには注目しておくべし
    2015年最も話題になったうちの一つが「WebAssembly」です。WebAssemblyはさまざまなプログラミング言語をJavaScriptエンジンで動作するようコンパイルするための新しいバイナリーフォーマットで、2016年にはC/C++、その後もRust、Go、C#を予定しています。
    参考: WebAssembly Design
  10. SEOの終焉
    費用がかかる一つのサービスとしてSEOを提供する日々は終わりです。コード最適化とソーシャルメディアキャンペーンのようなSEM(サーチエンジンマーケティング)としてなら、若干需要があるかもしれません。クライアントたちは、保証のない結果や脅し戦法に気がついています。

2016年、注目されている新しいテクニック・コンセプト

最近登場した新しいテクニックから、既存のものをブラッシュアップしたものまで、注目されているテクニックやコンセプトです。

サイトのキャプチャ

8 Web Design Predictions For 2016 – 2017

  1. ストーリーテリング
    縦長ページのコンテンツに物語性をもたせると、スクロールする時に次はどうなるんだろうとユーザーはワクワクします。
  2. セミ フラット デザイン
    フラットデザインに少しシャドウをつけて奥行きを与えたり、角丸をつかったり、ユーザビリティを考慮したものが増えてきました。
  3. カスタムメイドのイラスト
    既製のアイコンやイラストは時間とお金を節約しますが、カスタムメイドされたものの魅力にはかないません。
  4. ユニークなグリッド
    格子状にグリッドを使うだけでなく、斜めやz-indexを使ったり、ひとひねり加えたグリッドも増えてきました。
  5. シネマグラフ
    シネマグラフは極めて強力なビジュアルです。写真や動画を検討する際は、シネマグラフも検討すべきでしょう。
  6. パララックスを使ったアクション
    パララックスを使った面白いコンテンツは、まだまだ進化していますね。「The Boat」はその内の一つで、非常に楽しませてくれます。
  7. 遅延ロード
    画像だけでなく、コンテンツの広範囲にわたり遅延ロードのテクニックが使われるようになりました。ページのロード時間は、SEOとコンバージョンレートに重要です。
  8. 中央で分割されたコンテンツ
    最近増えてきたのが、このレイアウトです。中央に配置された2つのコンテンツは非常にインパクトがあります。

2015年に定義されたレスポンシブWebデザインの8つのトレンド

レスポンシブデザインは2010年に登場してから確実に進化を遂げてきました。

サイトのキャプチャ

8 responsive web design trends that defined 2015

  1. ストーリーテリング
    コンテンツは物語のように、次が読みたくなるくらい魅力的に重要な詳細やデータや情報のライティングに力を入れるべきです。
  2. Less is more
    さらに少ない方がより良いです。無駄なものがデザインにないか注意しましょう。
  3. デザインのパターン化
    確立されたパターンを使うことは、ユーザーにもよく知られており一定の満足度を与えることができますが、他のサイトと同じになってしまうという悪い面と天秤にかける必要があります。
  4. カード型レイアウト
    レスポンシブデザインとカード型レイアウトは相性が非常によく、2016年も多くのサイトで採用されるでしょう。
  5. 隠されたメニュー
    ドロップダウンからハンバーガーメニューへと進化した隠されたメニューは省スペースなので、レスポンシブデザイン用のナビゲーションとして人気が高いですが、アクセスされにくいという問題が一貫して残っています。
  6. ヘッダに大きい画像を使う、使わない
    大きい画像を使うヒーローイメージを採用するサイトが増えましたが、その反対に画像を全く使わずに背景色とタイポグラフィだけで見せるサイトも増えてきました。
  7. 広告の再考
    レスポンシブデザインにおける問題の一つは、広告の大きさと配置です。これまではその大きさと配置で販売されてきましたが、デバイスにより変化するので、まだ一定の基準がありません。広告がどのように使われるべきか再考する必要があるでしょう。
  8. ワークフローの改善
    トレンドはビジュアルだけではありません。レスポンシブデザインでワークフローが大きく変わったのはプロトタイプの存在です。プロトタイプはUIデザインを決定する前に、適切なフィードバックを受けて重要な問題を見つけやすくできます。

現在のトレンドから見た良いこと、良くないこと、そしてダメなこと

デザインよりむしろ、マーケティング寄りの現在のトレンドから見た良いこと、良くないこと、そしてダメなことです。

サイトのキャプチャ

12 good, bad and ugly web design trends for 2016

  1. Webデザインの均質化
    上部に大きい写真画像とテキストを配置のように一つのトレンドが流行ると似たようなサイトが量産されます。あなたのデザインが他のと違うポイントはどこですか?
  2. パターン、ページではなく
    ページ単位でデザインするのではなく、全体を通してのUIパターンをデザインする。
  3. ディズニー級のアニメーション
    ごく一部のブログでディズニーのアニメーションをUIに使うと騒いでいましたが、UIはディズニー映画ではありません。
    参考: Your UI isn’t a Disney Movie
  4. Webサイトは超飽和状態
    多くの人がリニューアルなどの変化を嫌悪します。
  5. 拡大してぼかす背景画像
    小さい画像を拡大して、ガウスブラーでぼかす背景画像は、ページのロード時間に効果があります。
    参考: BlurとScaleについてのテクニック
    参考: Blur Upテクニックの使い方
  6. ローディング状態を示すちょっとした要素
    「何もない」から「何かある」をつなぐローディング状態を示す要素は、ほんのちょっとでもあるだけでその価値を十分持っています。
  7. 80年代でも利用できるWebサイト
    技術の進化は素晴らしく見えますが、使う人が立ちすくんでしまうような使えないものは意味がありません。
  8. プリローダー
    プリローダーは、ただユーザーに待たせることを伝える存在です。このローディングのアニメーションを使うべき理由はありません。ロード時間がかかるのであれば、プリローダーで対応するのではなく、何か技術的な問題があるかもしれません。
  9. スクロールジャック
    時々マウスが思うように動かせない気持ち悪いサイトがあります。本来のスクロール操作を奪う正当な理由は何もないので、やめましょう。
  10. 強制的に表示されるポップアップ
    必ずユーザーに読ませたい気持ちは分かりますが、よい印象を与えず、むしろ悪い印象を与えるだけです。
  11. ハンバーガーメニューに変わるもの
    三本線のアイコンが分かりにくい理由でハンバーガーメニューは消えようとしています。ナビゲーションを使う時だけ表示するというコンセプトは有用なので、新しい何かがでてくるかもしれません。
  12. 重いページはより重くなる
    2010年ごろからページの肥大化が進み、2015年には平均値は2,2MBと5年間で3倍になりました。肥大化の原因は、画像、動画、フォント、スクリプトなどが占めています。

2016年に学ぶべきプログラミング言語とフレームワーク

フロントエンドのフレームワークが重要視される中、ここでも静的なページジェネレーターが取り上げられています。

サイトのキャプチャ

The Languages And Frameworks You Should Learn In 2016

トレンド

バックエンドからフロントエンドに移行
ここ数年はバックエンドが注目されてきましたが、最近ではフロントエンドのフレームワークが重要視されています。
短期間のブラウザのリリース
もう一つの重要な進歩が、IEの後継として2015年にリリースされたEdgeです。パフォーマンスも優れていますが、注目すべきはその素早いリリーススケジュールを採用している点です。
Flashは終了
YouTubeなどの動画コンテンツはHTML5が主流となり、Flashのプラグインも各ブラウザで採用されなくなりました。そして、2015年の暮れにはAdobeがFlashをAnimateに名称を変更するとアナウンスがあり、文字通りFlashはなくなります。

言語とプラットフォーム

JavaScript フレームワーク

フロントエンド

バックエンド

Jekyll」「Octopress」といったスタティックジェネレーターにも注目が集まっています。

CMS

今注目の便利なソフトウェアやオンラインツール

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

サイトのキャプチャ

10 Hottest Design Tools You Must Try In 2016

  1. Atomic
    インタラクティブなプロトタイプをデザインするツール。
  2. Ceros
    インフォグラフィックや見出しなど、コンテンツを作成できるソフトウェア。
  3. ProtoSketch
    ロゴからWebサイトまで、プロトタイプを作成できるiPadアプリ。
  4. Floid
    さまざまなデバイス用のプロトタイプを作成できるソフトウェア。
  5. Fuse
    アプリケーションデザイナーのためのUXツールセット。
  6. Vectr
    ブラウザとOS Xアプリで利用できるベクターグラフィックエディタ。
  7. Picktorial
    直感的に簡単に操作できる写真編集ソフト。
  8. Figma
    クラウドベースのインターフェイスデザインツール。
  9. UX Pin
    UXデザインのワイヤーフレームツール。
  10. Gravit
    ブラウザベースのコラボレーションツール。

IT系の人が向上するためにチャレンジしてみたいこと

新年を迎え、自分や会社が向上するために挑んでみたいこと、チャレンジしてみたいことのリスト。

サイトのキャプチャ

10 resolutions for better IT in 2016

  1. 「聴く」スキルを磨く
    IT系の人は「話された言葉」「書かれた言葉」を好みます。しかし「聴くこと」から始めるのが重要です。
  2. 傲慢にならない
    技術的に不可能なら、非IT系の人のアイデアを却下するのは簡単です。しかしその中にキラリと光るアイデアがあるかもしれません。
  3. 頭字語は使わない
    頭字語は明確なコミュニケーションの邪魔をします。頭字語を会話で使わないようにするのは良いアイデアです。
  4. 新しいテクノロジーはチェックする
    すぐに使う必要はなくても、新しいテクノロジーを歓迎するクライアントはたくさんいるので、チェックしておきましょう。
  5. システムのメンテナンス管理は戦略的に
    メンテナンス管理は大きなリソースを消費するので、戦略的に展開すべきです。
  6. アセットマネジメントで安全なITを
    アセットマネジメントを行うことで、多くの会社が資金を蓄えることに成功しています。
  7. 教育係の担当者を置く
    会社の発展・成長を考えるのであれば、人材を育てるスタッフが非常に重要です。
  8. QAにエンドユーザーを雇用する
    QA(クオリティ アシュアランス)は品質を管理するセクションで、企業内で軽視されがちですが、成果物の品質保証を助けるので、ユーザー指向のチェックをできる人材を雇用するとよいでしょう。
  9. 障害回復報告を更新する
    どのような障害をどんな方法で回復させたのか、保証する責任を報告することは非常に大切です。
  10. データ保有ポリシーを再考
    ビッグデータはそのすべてが有用であるわけではありません。年単位でデータ保有ポリシーを再考するようにしてください。

top of page

©2016 coliss