デザイナーじゃなくても知っておかないと損？ 現役デザイナーがリアルな現場で使っているツール＆技術 BEST30 - スキルの変遷から紐解くデザイナースキルのトレンド -

はじめに

こんにちは、デザイナードラフトです。
今回はデザイナーが使うデザインツールやらスキルについての内容でお届けします。

つい先日も【2018年春】今チェックしておきたいデザインツール12選というUXMILKさんの記事が話題になっていましたね。
個人的にはfigmaがイチオシなので皆さんオススメです。
ユーザーインターフェース も プロトタイピング も CSSエクスポート ももちろん出来ます。
ブラウザアプリなので、デスクトップのChromeが動く環境ならなんでもだいじょうぶ。WinでもMacでもLinuxだっていいのです。ぜひ一度使ってみてください。
つい最近発表された、figma のWeb APIなどは象徴的な機能ですね。APIを利用した デザインデータ自体の共有と公開。しかし私はfigmaの回し者ではありません。

完全に話が脇にそれました。
ところで、みなさんは実際に普段のデザイン業務ではどんなツールや技術を使用されていますか？
新しいツールや技術を、会社やチームで取り入れようと思っても、「現在の業務フローを変えられない」「学習コストがかかる」「デザイナーと連携している職種にも説明する必要がある」「便利らしいけど、実際に世間で使われているのかが分からない」などの理由から、変わらず 既存のものを使い続けている ケースも多いのではないのでしょうか。

そこで今回、ユーザーがデザイナードラフトに実際に登録してくれているレジュメ（※）から、使用されている技術やツールを集計した内容を、「現役デザイナーがリアルな現場で使っているツール＆技術ランキング 2017 presented by デザイナードラフト」として作成することにしました。
2017年のツールとスキルをランキングするだけでなく、直近5年の推移と比較 してみると、単なる集計だけでなく ここ5年のデザイナーのツールにおけるパラダイムシフト、および 現在の潮流 が見えてくる結果となりました。

前置きが長くなりましたｗ
早速いってみましょう！
まずは直近の2017年のランキングから！

※デザイナードラフトは、デザイナー、クリエイターと称される方々を対象とした競争入札型の転職サービスなのですが、デザイナードラフトでは、数百名のデザイナーが合計1000個以上にもなる実績やポートフォリオを上げてくれています。
そして、そのレジュメには「プロジェクト種類」「担当工程」「役割」「使用ツール・技術」などを登録できます。

2017年にデザイナーが選んだツール＆技術ランキング

TOP3は王者Adobeの Photoshop、Illustrator と、HTML5 でした。
ちなみに、デザイナードラフトは、Webデザイナーの登録者の方が多い ので全体的に Webやアプリの制作に関わるツール が多く登場しています。
TOP3のHTML5以外にも、4位CSS3、5位WordPress に続き、jQuery や Git など、開発や技術に関わるスキルも多く見られます。

さて、次は、2017年のツール＆技術のランキングを踏まえて、この5年間（2013〜2017年）においてのツール＆技術の変遷 に迫ってみたいと思います。

遡って比較するのは、

・これが使えなきゃデザイナーじゃない？ - 定番ツール＆技術編 -
・デザイン系ツールの変遷は時代をあらわす？ - 専門ツール編 -
・デザイナーはフロントエンドも実装できて当たり前？ - 隣接スキル編 -
・開発系ツールの変遷に見る、デザイナーの進化とは？ - エンジニア協業編 -

の4つの観点についてです。
ではまず、「これが使えなきゃデザイナーじゃない？ - 定番ツール＆技術編 -」から。

これが使えなきゃデザイナーじゃない？ - 定番ツール＆技術編 -

定番4ツールとは、上記画像の通り「Illustrator」「Photoshop」「HTML5」「CSS3」の4つです。実はこの4つのツール、技術については、2013〜2017にかけて常に TOP5に登場し続けています。
もう流行り廃り以前に、必須スキルとなっていることが伺えますね。
2017年に、ジョン・マエダ氏が「デザイナーとして最も成功するのは、コードや言葉、声といった、実体のない素材を使いこなすことができる人々」と論じていましたが、もしかしたら 世のWebデザイナーは既に当然のようにコードに触れている のかも知れませんね。

続いて、「デザイン系ツールの変遷は時代をあらわす？ - 専門ツール編 -」です。

デザイン系ツールの変遷は時代をあらわす？ - 専門ツール編 -

まず注目すべきは、FlashとFireWorksが2015年からランク外 になっていることではないでしょうか。
Flashに関しては、AdobeがAndroid 4.1搭載デバイスでのFlash Playerサポートを中止したのが2012年ことも影響しているかもしれません。
「デフォルトブラウザでFlashが動かない」ことでも話題になった iPhoneの登場は更に5年前 のことですね。
また、sketch3の登場が2014年 で、FireWorksがランク外に消えたのも2014年。
そもそもFireworksはAdobeのCreativeCloudにはふくまれていなかったのですが、機能的には1ファイルでサイト全体を管理できたり、プロトタイピングやHTML、CSSのエクスポートという機能も備え、最近のツールとの類似点も多く、何かの因果を感じずにはいられません。

それに対して、近時のツールの変遷は混戦模様 です。
2016年にはTOP3にまで食い込んだ Sketchが、2017年には13位にまで転落。それを追い抜くようにして、Adobe XDがシェアを伸ばしてきています。
Prott や InVision もTOP30には定番のツールとなってきているようで、プロトタイピングツールの勢い を感じますね。

次は、「デザイナーはフロントエンドも実装できて当たり前？ - 隣接スキル編 -」です。

デザイナーはフロントエンドも実装できて当たり前？ - 隣接スキル編 -

定番スキルにHTML/CSSが入って来たことからもわかりますが、sass/scss に関してもそれに近い存在になってきているのではないでしょうか。
2013年代は20位台ですが、2014年辺りから順位を上げて来ています。

また、2014年からタスクランナーの gulp や、2016年から Zeplin が登場しているあたり、制作・開発環境やフロントエンドエンジニアとの協業 における 状況の変化 も見て取れますね。

そして、特筆すべきは jQuery でしょうか。
最近でこそ、jQuery vs JSフレームワークでは何かと色々言われがちなjQueryですが、2013〜2017に関しては5〜7位に必ずランクイン しています。
Photoshop、Illustrator、HTML5、CSS3に次ぐ 必須スキル と言っても過言ではないのかなと思います。

ここ4、5年の JavaScriptフレームワーク の波がデザイナーにも波及しているのかとも思いましたが、集計する限り 登録しているデザイナーはそれほど多くはおらず、

2015年：AngularJS 2件、React 4件、Vue 1件
2016年：AngularJS 2件、React 2件、Vue 2件
2017年：AngularJS 3件、React 1件、Vue 1件

の登録にとどまりました。
jQueryやJavaScriptを登録しているユーザーの多さに比べるとまだまだですね。デザイナーとフロントエンドエンジニアとの境界線 はもしかしたらこの当たりに存在するのかも知れません。

最後に、「開発系ツールの変遷に見る、デザイナーの進化とは？ - エンジニア協業編 -」です。

開発系ツールの変遷に見る、デザイナーの進化とは？ - エンジニア協業編 -

この中でまず注目したいのは、WordPressの右肩上がりっぷり でしょうか。
2017年にはついにTOP5にランクイン してきています。
昨年のこちらの調査では、WordPressは 全世界のCMSの60%のシェア を有し、これは インターネット 全体のWebサイトのうち30％弱 にも相当する。との発表もありました。シェアとしては圧倒的ですね。
日本国内でも、企業のコーポレートサイトなどはWordPressで作られているケースも多いと思いますし、納得の結果ではないでしょうか。

後は Git関連のツール についてです。
ここ3,4年でGit/Githubが当然のようにランクインしてくるようになりました。それにつられるように、2015年頃からAtlassian社製のGitクライアントである SourceTree が登場し始めています。
最近はデザイナーの成果物についても、バージョン管理の波 が及んで来ています（Abstract、Kactus、Plant など）が、Gitやsvnなどを経てバージョン管理の必要性に気づき、生まれてきた文脈なのかもしれませんね。

まとめ

いかがでしたでしょうか。2017年単年で見ると単なる流行り物のランキングになってしまいがちですが、数年間で比較して見てみると、

・ 近時のデザインツールの乱立はありつつも、定番のツールや技術は健在 であること。
・デザイン系ツール の変遷では、変化の波が 2013、2014年に一度、ここ 1、2年の間にも来ていた 事と、近時は プロトタイピングの性質を持つツール がトレンドとなっていること。
・開発系ツール の変遷からは、WordPress が 必須スキル に近づいているかもしれないことと、Git関連のバージョン管理ツール がデザイナーにも波及していること。

などがそれぞれ見受けられ、興味深い内容になりました。
「次に学習するツールや技術 は何にしよう？」などで悩んでいる方の一助になれれば幸いと思います！

次のデザイナードラフトReportもお楽しみに！