角丸と矩形はどっち? ベタ塗りとストロークとシャドウは? やっぱりHelveticaなの? -2015年Webデザイナーの実情を調査
Post on:2016年2月10日
2015年、Webデザイナーが実際に多用したスタイル・エフェクト・フォント・カラーを紹介します。
PhotoshopとSketchは実際どのくらい使われているのか、ファイルを修正した際にどんな名前にするのかなど、ちょっと面白いデータもあります。
![How designers worked in 2015](http://coliss.com/wp-content/uploads-201601/2016021010.png)
下記は、Avocodeチームの許可を得て画像掲載・翻訳しています。
![2015年、Webデザイナーの実情](http://coliss.com/wp-content/uploads-201601/2016021011-00.png)
- 2015年、Webデザイナーの実情
- Avocodeにアップロードされた1,000以上のデザインを元に、2015年に実際にデザインされたものを見てみましょう。
![40万種類のデザインから分析](http://coliss.com/wp-content/uploads-201601/2016021011-01.png)
- 40万種類のデザインから分析
- 40万種類のデザイン、250万枚のレイヤー、56,000万個のピクセルから探ります。
![Photoshop vs. Sketch](http://coliss.com/wp-content/uploads-201601/2016021011-02.png)
- Photoshop vs. Sketch
- デザイナーのツールと言えば、ひと昔前まではPhotoshopでしたが、最近ではSketchを使用するデザイナーも増えてきました。
![デザインツール国別](http://coliss.com/wp-content/uploads-201601/2016021011-03.png)
- 国別でみると
- Sketchユーザーは北米・中国が中心で、ヨーロッパは半々くらい。
日本では、Photoshopユーザーが多い傾向。
![レイヤースタイル](http://coliss.com/wp-content/uploads-201601/2016021011-04.png)
- デザイナーが扱うデータの種類
- レイヤーに配置されているデータを見ると、ベクターが圧倒的に多く、テキストが続きます。ビットマップのデータは、写真が多いと思いますが、けっこう少ないですね。
![レイヤーエフェクト](http://coliss.com/wp-content/uploads-201601/2016021011-05.png)
- デザイナーが好むエフェクト
- ベタ塗り・ストローク・ドロップシャドウが多く、フラット・ミニマル・マテリアルといったトレンドの影響でしょうか。
![フォント](http://coliss.com/wp-content/uploads-201601/2016021011-06.png)
- デザイナーに人気のフォント
- Open Sans: 24%, Helvetica: 16%, Roboto: 14%
- シンプルで使い勝手のよいフォントが好まれる傾向です。
![パラグラフのスタイル](http://coliss.com/wp-content/uploads-201601/2016021011-07.png)
- 文章のスタイル
- 左寄せが圧倒的に多く、中央寄せを少し取り入れている感じでしょうか。英語圏のデータなので、日本語とは異なりますが、順当な感じです。
![角](http://coliss.com/wp-content/uploads-201601/2016021011-08.png)
- 角丸と矩形
- 角丸ボタン: 89%、矩形ボタン: 11%
- 角丸はまだまだ人気が高いですね。
![ストローク](http://coliss.com/wp-content/uploads-201601/2016021011-11.png)
- ボーダーの位置
- 内側: 55%、外側: 43%、中央: 2%
- 僕は内側でした。
![aaaaa](http://coliss.com/wp-content/uploads-201601/2016021011-09.png)
- デザイナーに人気のカラー
- #b30839, #df4379, #f5a623
- UIデザインでよく利用されるのは白黒グレーで、それ以外で人気だったカラーです。
![ファイルの名前](http://coliss.com/wp-content/uploads-201601/2016021011-10.png)
- ファイルの名前の付け方
- 「new-v2.psd」とバージョンを付け、最終形に「new-v2-final.psd」とするようです。
- 修正が入ると「new-v2-final-final.psd」になり、本当の最終版は「new-v2-finalist-final.psd」とw
sponsors