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

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

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

2016 Web Design Trend Report

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

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

• Webデザイナーが使用しているツール
• デザインのコンポーネント化
• ファイルのリビジョン
• ファイルの容量
• Webデザインでもっとも人気が高いフリーフォント
• カラーのトレンド、ホワイトとグレー
• ブレンドモード
• レイヤーエフェクト
• 角丸と鋭角、どっちが人気？
• 資料のダウンロード

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

Photoshopはもはやリードしていません。
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の堅牢性よりも優れているように思われます。

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の中に入っています。

Illustrated by Turgay Mutlay

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

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

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

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

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