HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ

Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。

Design Tools Survey

「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用しているツールをまとめたものです。
日本人100%とは当然異なると思いますが、興味深いデータとなっています。

• ブレーンストーミング
• ワイヤーフレーム
• UIデザイン
• プロトタイプ
• プロジェクト管理
• ファイル管理・バージョン管理

ブレーンストーミング

ブレーンストーミング時に使うツール

1. 64%: 鉛筆と紙
2. 10%: Sketch
3. 7%: Illustrator
4. 7%: Photoshop
5. 6%: その他
6. 2%: Paper
7. 2%: InDesign
8. 1%: 無し

「鉛筆と紙」が圧倒的に人気ですね。僕もノートとメモ帳、ポストイットは欠かせません。SketchとかIllustratorはその場でぱぱっといけるのですかね。

ワイヤーフレーム

ワイヤーフレームの作成に使うツール

1. 27%: Sketch
2. 19%: Illustrator
3. 14%: HTML/CSS
4. 11%: その他
5. 8%: 無し
6. 7%: Balsamiq
7. 6%: Omnigraffle
8. 4%: InDesign
9. 2%: Keynote
10. 1%: UX Pin

ブレーンストーミングもそうでしたが、ここでもSketchがかなりの数を占めています。HTML/CSSでという人もけっこういるんですね。

UIデザイン

インターフェイスデザインに使うツール

1. 34%: Sketch
2. 29%: Photoshop
3. 15%: HTML/CSS
4. 12%: Illustrator
5. 4%: その他
6. 2%: 無し
7. 2%: InDesign
8. 2%: Fireworks

UIデザインは、SketchとPhotoshopの一騎打ちです。Illustratorはもうちょい多いと思っていました。

プロトタイプ

プロトタイプの作成に使うツール

1. 38%: HTML/CSS
2. 18%: InVision
3. 11%: その他
4. 9%: 無し
5. 6%: Axure
6. 5%: Framer
7. 4%: Marvel
8. 4%: Keynote
9. 3%: After Effects
10. 2%: Pixate

日本でもInVisionを導入する制作者が増えてきたように思います。
ワイヤーフレームもUIデザインもプロトタイプも全部、HTML/CSSでという人も多そうです。

プロジェクト管理

プロジェクトのマネジメントに使うツール

1. 67%: その他
2. 37%: Slack
3. 31%: Trello
4. 25%: GitHub
5. 22%: Basecamp
6. 13%: Evernote

一番多い「その他」が気になりますね。Microsoft Project, Project Server あたりだと思っていたのですが、特定の役割を果たすツールや小回りがきくツールが中心のようです。

ファイル管理・バージョン管理

ファイル管理・バージョン管理に使うツール

1. 51%: Dropbox
2. 39%: GitHub
3. 30%: Google Drive
4. 28%: その他
5. 12%: 無し
6. 11%: Bitbucket

Dropbox, GitHub, Google Driveは、御三家ですね。
僕はファイルをさくっと渡す時やデバイス間のやり取りに「Infinit」も重宝しています。