UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう!

Webデザイナーやデベロッパーの実際に作業しているファイルを元に、UIデザインの作業状況を調査したレポートを紹介します。

UIデザインに使用しているツール、ファイル、シンボル、レイヤー、ベクターグラフィックなど、どのようなワークフローが実践されているか垣間見ることができます。

2017 UI Design Report

Avocode 2017 UI Design Report

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

2017年、UIデザインの作業状況に関するレポート

本レポートは、デザイナーとデベロッパーのコラボツール「Avocode」で利用された世界164カ国、PhotoshopとSketchで作成された2,024,815のファイルに基づき、2017年のデータとしてまとめたものです。
作業状況やワークフローの変化を知り、良い物はどんどん取り入れていきましょう。

サイトのキャプチャ

Avocode 2017 UI Design Report

参考として、去年までのデータは下記をご覧ください。

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

引き続き、Sketchのユーザーが伸び続けています。

Webデザイナーが使用しているツール
  • 2015年: Photoshopでデザインするが57%、Sketchでデザインするが43%。
  • 2016年: Photoshopでデザインするが41%、Sketchでデザインするが59%。
  • 2017年: Photoshopでデザインするが38%、Sketchでデザインするが62%。

2年連続で、Sketchは成長し続けています。
今年はこれにAdobe XD、Figma、inVision Studioがどのように加わるのか、非常に興味深いところです。

2. ファイルの容量

Sketchで作成されたファイルは軽量で、Photoshopより1/8のサイズ。

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

Sketchで作成されたファイルの平均的なサイズは4.76MBで、Photoshopは36.76MBでした。

PSDファイルをSketchファイルに簡単に変換できるツール「Convert PSD to Sketch」を使用すると、移行する際に便利です。PhotoshopのデータをSketchで利用できます。

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

デザイナーとデザインシステムは切り離されない関係になっています。

デザインのコンポーネント化
  • Sketchのファイルでは、シンボルの使用量は25%増加しました。
  • 2017年にはデザイン用のバージョン管理ツールが4つもリリースされ、デザインシステムが重要視されています。
    Folio, Abstract, Kactus, Plant

4. レイヤー管理

ミニマルデザインのトレンドに人気が高くなるにつれ、1デザインあたりのレイヤ数は少なくなりました。

レイヤー管理
  • Photoshopでは、327枚から148枚に、46%の減少。
  • Sketchでは、177枚から101枚に、32%の減少。

5. テキストのレイヤー

ストーリテリングの人気が高くなるにつれ、テキストのレイヤーがより多くのスペースを占めるようになりました。

サイトのキャプチャ

ストーリテリングは単なるバズワードではありません。スクリーンのデザインにとって、重要な意味を持っています。2017年には、Photoshopで25%、Sketchで10%、テキストのレイヤーが増加しました。

6. ベクターグラフィック

ビットマップの書き出しは、ベクターグラフィックの登場により失われようとしています。

ベクターグラフィック

SVGはPNGに次いで2番目に多く書き出された画像フォーマットです。高解像度のデジタルプロダクトは画像のエクスポートに移行をもたらし、画像アセットの最適化に対する需要が高まっています。
画像を軽量に、そしてスケラーブルにする理由は何だと思いますか?

レポートのダウンロード

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

サイトのキャプチャ

Avocode 2017 UI Design Report

「Download」をクリックすると、ダイアログが開きます。メールアドレスを入力すると、PDFがダウンロードできます。

ダウンロードできるレポートのPDFは、こんな感じです。

レポートのキャプチャ

レポートのPDF(一部)

sponsors

top of page

©2018 coliss