角丸と矩形はどっち？ ベタ塗りとストロークとシャドウは？ やっぱりHelveticaなの？ -2015年Webデザイナーの実情を調査

2015年、Webデザイナーが実際に多用したスタイル・エフェクト・フォント・カラーを紹介します。

PhotoshopとSketchは実際どのくらい使われているのか、ファイルを修正した際にどんな名前にするのかなど、ちょっと面白いデータもあります。

How designers worked in 2015

下記は、Avocodeチームの許可を得て画像掲載・翻訳しています。

2015年、Webデザイナーの実情

Avocodeにアップロードされた1,000以上のデザインを元に、2015年に実際にデザインされたものを見てみましょう。

40万種類のデザインから分析

40万種類のデザイン、250万枚のレイヤー、56,000万個のピクセルから探ります。

Photoshop vs. Sketch

デザイナーのツールと言えば、ひと昔前まではPhotoshopでしたが、最近ではSketchを使用するデザイナーも増えてきました。

国別でみると

Sketchユーザーは北米・中国が中心で、ヨーロッパは半々くらい。
日本では、Photoshopユーザーが多い傾向。

デザイナーが扱うデータの種類

レイヤーに配置されているデータを見ると、ベクターが圧倒的に多く、テキストが続きます。ビットマップのデータは、写真が多いと思いますが、けっこう少ないですね。

デザイナーが好むエフェクト

ベタ塗り・ストローク・ドロップシャドウが多く、フラット・ミニマル・マテリアルといったトレンドの影響でしょうか。

デザイナーに人気のフォント

Open Sans: 24%, Helvetica: 16%, Roboto: 14%

シンプルで使い勝手のよいフォントが好まれる傾向です。

文章のスタイル

左寄せが圧倒的に多く、中央寄せを少し取り入れている感じでしょうか。英語圏のデータなので、日本語とは異なりますが、順当な感じです。

角丸と矩形

角丸ボタン: 89%、矩形ボタン: 11%

角丸はまだまだ人気が高いですね。

ボーダーの位置

内側: 55%、外側: 43%、中央: 2%

僕は内側でした。

デザイナーに人気のカラー

#b30839, #df4379, #f5a623

UIデザインでよく利用されるのは白黒グレーで、それ以外で人気だったカラーです。

ファイルの名前の付け方

「new-v2.psd」とバージョンを付け、最終形に「new-v2-final.psd」とするようです。

修正が入ると「new-v2-final-final.psd」になり、本当の最終版は「new-v2-finalist-final.psd」とｗ