2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
Post on:2016年1月13日
sponsors
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。
注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。
淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ
参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！
- 2016年、Webとグラフィックデザインのトレンドと今後の展望
- 2016年、Web制作業界全体の流れ
- 2016年、注目されている新しいテクニック・コンセプト
- 2015年に定義されたレスポンシブWebデザインの8つのトレンド
- 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと
- 2016年に学ぶべきプログラミング言語とフレームワーク
- 今注目の便利なソフトウェアやオンラインツール
- IT系の人が向上するためにチャレンジしてみたいこと
2016年、Webとグラフィックデザインのトレンドと今後の展望
まずはデザインのトレンド。
UIやUXデザインはユーザーありきを重視した、より使いやすいものが主流です。
2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望
各項目の詳しい説明は、元記事を翻訳した上記ページをご覧ください。
既に知っているキーワードでも、より洗練されたものに進化しています。
- ユーザーが使いやすいこと
- レスポンシブデザインの考え方
- アプリを彷彿させるWebデザイン
- ナビゲーションの進化
- モジュール式のテキスト
- モジュール式と無限スクロール
- Material Design
- フラットデザイン
- 1,000の言葉よりもビジュアルで
- インフォグラフィック
- タイポグラフィ
- モダンレトロ
- 魅力的なカラー
- グリッドとジオメトリックの図形
- ストックフォトからの卒業
- 動画とアニメーションgif
2016年、Web制作業界全体の流れ
的確な予測に定評のあるsitepointの2016年のWeb制作業界の全体の流れ。
- メジャーな企業から個人情報が漏洩する
企業はセキュリティを真剣に考えるべきです。優秀なハッカーを雇ったり、バグ報奨金などの対応を。 - スタティックなサイトが主流に。
ここ数年、静的なサイトジェネレーター（Jekyll, Middleman, Metalsmithなど）が注目されています。静的サイトの利点は、速く、強固で、安全で、簡単ということです。特に更新頻度が低いコンテンツに向いています。 - Chromeのシェアは安定
Chromeは現在54%のシェアで、最も人気が高いブラウザです。この数字は下がることはなく、年末には60%に達するでしょう。 - 新しいブラウザ「Vivaldi」に注目
VivaldiはOperaの元従業員たちが手がけた新しいブラウザです。Operaはv12でいくつかの機能をサポートしなかったため、多くのユーザーが失望しましたが、その教訓をいかしたさまざまな機能をVivaldiは備えています。 - これからはSafariが「新しいIE」と言われるかもしれない
SafariはiOSのセールスにも関わらずシェアが下がっています。webkitプレフィックスや技術上の制約などがあるため、今後Web制作者泣かせのブラウザになるかもしれません。
参考: Safari is the new IE - CSSは「Grid Layout Module」に
Grid Layout Moduleは現在、IE/Edgeのサポートですが、他の主要ブラウザの対応が始まります。Flexboxに比べてアドバンテージが多数あります。 - デザインはモバイリフィケーションに
モバイルファーストは技術的なアプローチではなくレイアウトの指針になり、モバイルでより使いやすいUIが好まれるようになります。 - ページ容量は肥大化傾向
ここ3年の間にページ容量の平均は2倍になり、現在では2.2MBを越えています。無意味な高解像度の写真、利用されていないSNS、邪魔な広告など、ユーザーの貴重な時間や帯域幅を浪費します。 - WebAssemblyの動きには注目しておくべし
2015年最も話題になったうちの一つが「WebAssembly」です。WebAssemblyはさまざまなプログラミング言語をJavaScriptエンジンで動作するようコンパイルするための新しいバイナリーフォーマットで、2016年にはC/C++、その後もRust、Go、C#を予定しています。
参考: WebAssembly Design - SEOの終焉
費用がかかる一つのサービスとしてSEOを提供する日々は終わりです。コード最適化とソーシャルメディアキャンペーンのようなSEM（サーチエンジンマーケティング）としてなら、若干需要があるかもしれません。クライアントたちは、保証のない結果や脅し戦法に気がついています。
2016年、注目されている新しいテクニック・コンセプト
最近登場した新しいテクニックから、既存のものをブラッシュアップしたものまで、注目されているテクニックやコンセプトです。
8 Web Design Predictions For 2016 – 2017
- ストーリーテリング
縦長ページのコンテンツに物語性をもたせると、スクロールする時に次はどうなるんだろうとユーザーはワクワクします。 - セミ フラット デザイン
フラットデザインに少しシャドウをつけて奥行きを与えたり、角丸をつかったり、ユーザビリティを考慮したものが増えてきました。 - カスタムメイドのイラスト
既製のアイコンやイラストは時間とお金を節約しますが、カスタムメイドされたものの魅力にはかないません。 - ユニークなグリッド
格子状にグリッドを使うだけでなく、斜めやz-indexを使ったり、ひとひねり加えたグリッドも増えてきました。 - シネマグラフ
シネマグラフは極めて強力なビジュアルです。写真や動画を検討する際は、シネマグラフも検討すべきでしょう。 - パララックスを使ったアクション
パララックスを使った面白いコンテンツは、まだまだ進化していますね。「The Boat」はその内の一つで、非常に楽しませてくれます。 - 遅延ロード
画像だけでなく、コンテンツの広範囲にわたり遅延ロードのテクニックが使われるようになりました。ページのロード時間は、SEOとコンバージョンレートに重要です。 - 中央で分割されたコンテンツ
最近増えてきたのが、このレイアウトです。中央に配置された2つのコンテンツは非常にインパクトがあります。
2015年に定義されたレスポンシブWebデザインの8つのトレンド
レスポンシブデザインは2010年に登場してから確実に進化を遂げてきました。
8 responsive web design trends that defined 2015
- ストーリーテリング
コンテンツは物語のように、次が読みたくなるくらい魅力的に重要な詳細やデータや情報のライティングに力を入れるべきです。 - Less is more
さらに少ない方がより良いです。無駄なものがデザインにないか注意しましょう。 - デザインのパターン化
確立されたパターンを使うことは、ユーザーにもよく知られており一定の満足度を与えることができますが、他のサイトと同じになってしまうという悪い面と天秤にかける必要があります。 - カード型レイアウト
レスポンシブデザインとカード型レイアウトは相性が非常によく、2016年も多くのサイトで採用されるでしょう。 - 隠されたメニュー
ドロップダウンからハンバーガーメニューへと進化した隠されたメニューは省スペースなので、レスポンシブデザイン用のナビゲーションとして人気が高いですが、アクセスされにくいという問題が一貫して残っています。 - ヘッダに大きい画像を使う、使わない
大きい画像を使うヒーローイメージを採用するサイトが増えましたが、その反対に画像を全く使わずに背景色とタイポグラフィだけで見せるサイトも増えてきました。 - 広告の再考
レスポンシブデザインにおける問題の一つは、広告の大きさと配置です。これまではその大きさと配置で販売されてきましたが、デバイスにより変化するので、まだ一定の基準がありません。広告がどのように使われるべきか再考する必要があるでしょう。 - ワークフローの改善
トレンドはビジュアルだけではありません。レスポンシブデザインでワークフローが大きく変わったのはプロトタイプの存在です。プロトタイプはUIデザインを決定する前に、適切なフィードバックを受けて重要な問題を見つけやすくできます。
現在のトレンドから見た良いこと、良くないこと、そしてダメなこと
デザインよりむしろ、マーケティング寄りの現在のトレンドから見た良いこと、良くないこと、そしてダメなことです。
12 good, bad and ugly web design trends for 2016
- Webデザインの均質化
上部に大きい写真画像とテキストを配置のように一つのトレンドが流行ると似たようなサイトが量産されます。あなたのデザインが他のと違うポイントはどこですか？ - パターン、ページではなく
ページ単位でデザインするのではなく、全体を通してのUIパターンをデザインする。 - ディズニー級のアニメーション
ごく一部のブログでディズニーのアニメーションをUIに使うと騒いでいましたが、UIはディズニー映画ではありません。
参考: Your UI isn’t a Disney Movie - Webサイトは超飽和状態
多くの人がリニューアルなどの変化を嫌悪します。 - 拡大してぼかす背景画像
小さい画像を拡大して、ガウスブラーでぼかす背景画像は、ページのロード時間に効果があります。
参考: BlurとScaleについてのテクニック
参考: Blur Upテクニックの使い方 - ローディング状態を示すちょっとした要素
「何もない」から「何かある」をつなぐローディング状態を示す要素は、ほんのちょっとでもあるだけでその価値を十分持っています。 - 80年代でも利用できるWebサイト
技術の進化は素晴らしく見えますが、使う人が立ちすくんでしまうような使えないものは意味がありません。 - プリローダー
プリローダーは、ただユーザーに待たせることを伝える存在です。このローディングのアニメーションを使うべき理由はありません。ロード時間がかかるのであれば、プリローダーで対応するのではなく、何か技術的な問題があるかもしれません。 - スクロールジャック
時々マウスが思うように動かせない気持ち悪いサイトがあります。本来のスクロール操作を奪う正当な理由は何もないので、やめましょう。 - 強制的に表示されるポップアップ
必ずユーザーに読ませたい気持ちは分かりますが、よい印象を与えず、むしろ悪い印象を与えるだけです。 - ハンバーガーメニューに変わるもの
三本線のアイコンが分かりにくい理由でハンバーガーメニューは消えようとしています。ナビゲーションを使う時だけ表示するというコンセプトは有用なので、新しい何かがでてくるかもしれません。 - 重いページはより重くなる
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
- Atomic
インタラクティブなプロトタイプをデザインするツール。 - Ceros
インフォグラフィックや見出しなど、コンテンツを作成できるソフトウェア。 - ProtoSketch
ロゴからWebサイトまで、プロトタイプを作成できるiPadアプリ。 - Floid
さまざまなデバイス用のプロトタイプを作成できるソフトウェア。 - Fuse
アプリケーションデザイナーのためのUXツールセット。 - Vectr
ブラウザとOS Xアプリで利用できるベクターグラフィックエディタ。 - Picktorial
直感的に簡単に操作できる写真編集ソフト。 - Figma
クラウドベースのインターフェイスデザインツール。 - UX Pin
UXデザインのワイヤーフレームツール。 - Gravit
ブラウザベースのコラボレーションツール。
IT系の人が向上するためにチャレンジしてみたいこと
新年を迎え、自分や会社が向上するために挑んでみたいこと、チャレンジしてみたいことのリスト。
10 resolutions for better IT in 2016
- 「聴く」スキルを磨く
IT系の人は「話された言葉」「書かれた言葉」を好みます。しかし「聴くこと」から始めるのが重要です。 - 傲慢にならない
技術的に不可能なら、非IT系の人のアイデアを却下するのは簡単です。しかしその中にキラリと光るアイデアがあるかもしれません。 - 頭字語は使わない
頭字語は明確なコミュニケーションの邪魔をします。頭字語を会話で使わないようにするのは良いアイデアです。 - 新しいテクノロジーはチェックする
すぐに使う必要はなくても、新しいテクノロジーを歓迎するクライアントはたくさんいるので、チェックしておきましょう。 - システムのメンテナンス管理は戦略的に
メンテナンス管理は大きなリソースを消費するので、戦略的に展開すべきです。 - アセットマネジメントで安全なITを
アセットマネジメントを行うことで、多くの会社が資金を蓄えることに成功しています。 - 教育係の担当者を置く
会社の発展・成長を考えるのであれば、人材を育てるスタッフが非常に重要です。 - QAにエンドユーザーを雇用する
QA（クオリティ アシュアランス）は品質を管理するセクションで、企業内で軽視されがちですが、成果物の品質保証を助けるので、ユーザー指向のチェックをできる人材を雇用するとよいでしょう。 - 障害回復報告を更新する
どのような障害をどんな方法で回復させたのか、保証する責任を報告することは非常に大切です。 - データ保有ポリシーを再考
ビッグデータはそのすべてが有用であるわけではありません。年単位でデータ保有ポリシーを再考するようにしてください。
sponsors
