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

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

サイトのキャプチャ

Design Tools Survey

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

ブレーンストーミング

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

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

  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」も重宝しています。

top of page

©2017 coliss