UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう！
Post on:2018年6月5日
sponsors
Webデザイナーやデベロッパーの実際に作業しているファイルを元に、UIデザインの作業状況を調査したレポートを紹介します。
UIデザインに使用しているツール、ファイル、シンボル、レイヤー、ベクターグラフィックなど、どのようなワークフローが実践されているか垣間見ることができます。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 2017年、UIデザインの作業状況に関するレポート
- 1. Webデザイナーが使用しているツール
- 2. ファイルの容量
- 3. デザインのコンポーネント化
- 4. レイヤー管理
- 5. テキストのレイヤー
- 6. ベクターグラフィック
- レポートのダウンロード
2017年、UIデザインの作業状況に関するレポート
本レポートは、デザイナーとデベロッパーのコラボツール「Avocode」で利用された世界164カ国、PhotoshopとSketchで作成された2,024,815のファイルに基づき、2017年のデータとしてまとめたものです。
作業状況やワークフローの変化を知り、良い物はどんどん取り入れていきましょう。
参考として、去年までのデータは下記をご覧ください。
- 2016年の調査結果: プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなど
- 2015年の調査結果: 角丸と矩形はどっち？ ベタ塗りとストロークとシャドウは？ やっぱりHelveticaなの？
1. Webデザイナーが使用しているツール
引き続き、Sketchのユーザーが伸び続けています。
- 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番目に多く書き出された画像フォーマットです。高解像度のデジタルプロダクトは画像のエクスポートに移行をもたらし、画像アセットの最適化に対する需要が高まっています。
画像を軽量に、そしてスケラーブルにする理由は何だと思いますか？
レポートのダウンロード
これら資料のデータは、無料でダウンロードできます。
「Download」をクリックすると、ダイアログが開きます。メールアドレスを入力すると、PDFがダウンロードできます。
ダウンロードできるレポートのPDFは、こんな感じです。
レポートのPDF（一部）
sponsors
