プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report

プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。

安定して人気のあるトレンド、変化しているトレンドをチェックできます。

2016 Web Design Trend Report

2016 Web Design Trend Report

デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。
レポート公開にあたり、私もほんの少しだけ協力しています。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Webデザイナーが使用しているツール

Photoshopはもはやリードしていません。
Sketchが(他の進歩的なツールと一緒に)、デジタルデザインの新しい時代を切り開きました。

Sketchでデザインするがリード

Illustrated by Maxime Bourgeois

  • 2015年: Photoshopでデザインするが57%、Sketchでデザインするが43%。
  • 2016年: Photoshopでデザインするが41%、Sketchでデザインするが59%。

日本だとPhotoshopの方が優位だと思うので、尋ねてみたところ、日本のみだとPhotoshopの方が優位だそうです。

デザインのコンポーネント化

シンボルがデザインのスタンダードになっています。
2016年4月、Sketchはシンボルを再導入し、デザイナーの時間をさらに節約しました。

シンボルがデザインのスタンダード

Illustrated by Benjamin Bely

  • Sketchのファイルでは、シンボルの使用量は7.6倍増加しました。
  • Adobe XdやAffinity Designerも追って、シンボルが導入されました。

ファイルのリビジョン

Sketchではデザインを反復するのが簡単で、速いです。
この手軽なワークフローは、Photoshopの堅牢性よりも優れているように思われます。

Sketchはワークフローが手軽

Illustrated by Aleksandar Savic

  • Sketchでデザインするとコーディングの前に、4.5回修正・編集されます。
  • Photoshopでデザインするとコーディングの前に、たった2回変化するだけです。

ファイルの容量

ミニマルデザインはディスクスペースを救います。
PSDの平均的なファイルサイズは3回減少しました。スマートオブジェクト、ビットマップ、エフェクトの数が減るにつれて、ファイルは小さくなり、分かりやすくなります。

ミニマルデザインはファイルサイズも軽い

Illustrated by Steve Orchosky

  • 2015年: Photoshopの平均的なファイルサイズは、24.37MBでした。
  • 2016年: Photoshopの平均的なファイルサイズは、8.62MBに減少しました。

Webデザインでもっとも人気が高いフリーフォント

Webでもっとも人気が高いフリーフォントは「Roboto」。
RobotoはGoogle Material Designで使われているフォントで、PhotoshopとSketchのデザインでもよく使用されています。
RobotoのダウンロードはGitHubから。srcの中に入っています。

Webデザインでもっとも人気が高いフリーフォント

Illustrated by Turgay Mutlay

  • Robotoは過去2年間、Sketchで最も人気のあるフォントです。
  • 2016年にPhotoshopで最も人気のあるフォント「OpenSans」を退けました。
  • Robotoは、Sketchのデザインで24%、Photoshopのデザインで19%、使用されています。

カラーのトレンド、ホワイトとグレー

Sketchでのデザインはホワイトが多く、Photoshopはグレーが多い。
Photoshopのファイルはホワイトが少なく、グレーが多い傾向です。Sketchのファイルはホワイトが多く、グレーは減少傾向でした。

Sketchはホワイト、Photoshopはグレーが多い

Illustrated by Zhivko Terziivanov

  • 2015年: ホワイトは、Sketchで33%、Photoshopで46%でした。
  • 2016年: ホワイトは、Sketchで56%、Photoshopで24%でした。

ブレンドモード

Sketchのブレンドモードは34%に増加。
Photoshopのデザイナーはブレンドモードを少なくしていますが、Sketchのデザイナーは2016年には驚くほど多くのブレンドモードを使用しています。

ブレンドモードの増加

Illustrated by Maldo Malacek

  • PSDでのブレンドモードは、4.5が平均です。
  • Sketchでのブレンドモードは、4.7から7.14に増加しました。

レイヤーエフェクト

2016年に、PhotoshopとSketchの両方のデザインでレイヤーエフェクトの使用が半減しました。

レイヤーエフェクトの使用は低下

Illustrated by Arzu Sendag

  • PSDファイルに含まれているドロップシャドウは、2015年は40%でしたが、2016年には20%以下になりました。
  • Sketchではグラデーションは、2015年は20%でしたが、2016年には10%になっています。
  • ベベルエンボスは42%に減少しました。

角丸と鋭角、どっちが人気?

角丸は鋭角より人気があります。
若干の変化はありましたが、劇的な変化はありません。鋭角は現代的に見えますが、角丸の方が人気が高いです。

角丸は鋭角より人気

Illustrated by Barbora Togel

  • PSDのシェイプは、87%が角丸です(2015年は92%)。
  • Sketchのシェイプは、84%が角丸です(2015年と同じ)。

資料のダウンロード

これら資料のデータは、無料でダウンロードできます。

PDFのキャプチャ

資料のPDF

「Download Full Report」をクリックし、メールアドレスを登録すると、PDFファイルがダウンロードできます。

sponsors

top of page

©2018 coliss