[追記] UI UX デザインに欠かせないワイヤーフレーム制作ツール 7選

ホームページを制作するには、建築物や工業製品を具現化するのと同じように設計図が必要です。ホームページ制作の場合この設計図をワイヤーフレームと呼びます。
webページ内で「何を、どこに、のように」配置するかを記述したものです。
ワイヤーフレームをデザインをする前に作成する事によってクライアントと制作者が共通の認識を合わせることが出来ます。
また、ワイヤーフレームが無いままデザインを始めると制作に関わるスタッフの認識が合わず制作過程で配置するはずのボタンが無かったりなど修正がばかり発生し、制作進行が遅れる事になります。
ワイヤーフレームは、ホームページを制作する上で非常に重要な作業になります。

2015年6月22日に書いた記事に下記の内容を追記しました。

• Adobe XD、Sketch、UXPin、Figmaを追加
• 各サービスの対応プラットフォーム、価格を追加
• 各サービスのサムネイル
• Prototyperの名称が間違っていいたのでJustinmindに修正

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

ワイヤーフレームを作成するのに基本特に決まりは無く手書きでも問題ありません。
また、ワイヤーフレームの制作ツールを使って作成する事も出来ます。

Adobe XD

• 対応：MacOS、Windows、Android、ioS
• 価格：月額1,180円～
• サイト：https://www.adobe.com/jp/products/xd.html

当時は独立したプロトタイプを作成するソフトウェア（mac専用）のSketchが一番の選択肢だった時代に発表されたAdobe XDは、MacとWindowsの両方で利用できるベクターベースのデザインツールです。
PhotoshopやIllustratorなどの他のAdobeツールやAdobe Fonts、Adobe Stockなどのサービスと完全に相互運用が可能なのが大きな特徴です。
サイトマップ、フローチャート、ストーリーボードの作成から機能的なプロトタイプの構築まで、デザイナーがワイヤーフレームをスケッチするプロセスを容易にすることに重点を置いています。
高速なワイヤーフレーム。プロトタイプ制作を実現する「リピートグリッド」、自動アニメーション、各ページのリンクツールなどがあります。
Adobe XDは無料のスタータープランがありますが、すべての機能を利用するにはCreative Cloudのサブスクリプションに加入する必要があります。

Sketch

• 対応：MacOS
• 価格：99ドル（1年間のアップデート対応）
• サイト：https://www.sketch.com/

SketchはWindowsには対応していませんが、Macユーザーであれば検討する価値は十分にあります。
買い切り対応のソフトウェアなのが特徴ですが、アップデートは1年間のみなのでアップデートが必要な場合はオプションの更新年間79ドルに加入する必要があります。
Sketchはワイヤーフレームとプロトタイピングツールの先駆けで、Sketchを使用する為にMacを使用している開発者もいました。
軽量で使いやすく、インターフェースはシンプルで直感的なので使いやすいソフトウェアです。
完全なプロトタイプを作りたい場合は、サードパーティ製のUIキットや拡張機能をダウンロードすることができるのも良いポイントです。

UXPin

• 対応：Webブラウザ
• 価格：月額19ドル～
• サイト：https://www.uxpin.com/

SketchとPhotoShopファイルを読み込んで使用できるWeベースサービスです。
直感的なインターフェース、明確なアイコン、ワイヤーフレームにドラッグ＆ドロップできるUIライブラリや、Bootstrap、iOS、Android用のコンポーネントを備えた専用のワイヤーフレームツールです。
UXPinで作成したものを即座に共有する事で、チームからフィードバックを収集し、開発者と仕様を共有したり、お客様から承認を取ったりする事も可能です。
共有機能、コメント、タスクの割り当て、承認リクエスト、通知等、便利な機能を活用する事が可能です。

Figma

• 対応：Webブラウザ
• 価格：月額12ドル～
• サイト：https://www.figma.com/

Figmaはリアルタイムのコラボレーション機能が充実しているサービスです。
一人で作業している場合でも、デザイン・チームの一員として作業している場合でも、効率的に動作するように設計されています。
自動レイアウトでレスポンシブデザインに対応していたり、プラグイン（拡張機能）を使用して作業を効率化したりする事もかのうなサービスとなっています。

Cacoo

• 対応：Webブラウザ
• 価格：月額600円～
• サイト：https://cacoo.com/ja/

日本語の利用できるワイヤーフレームの作成ツールです。
操作方法も直感的に使え、チュートリアルも細かくわかりやすいです。
作成したワイヤーフレームはPDFやPNGで出力で出来ます。

moqups

• 対応：Webブラウザ
• 価格：月額16ドル～
• サイト：https://moqups.com/

Wwb上でワイヤーフレーム作成する事ができます。
配置したいオブジェクトをドラッグして配置できます。
作成したワイヤーフレームはPDFやPNGで出力で出来ます。

Prototyper

• 対応：MacOS、Windows
• 価格：月額19ドル～
• サイト：http://www.justinmind.com/

インストールしてから利用するワイヤーフレーム作成ツールです。
こちらもオブジェクトをドラッグして配置できます。
高性能な有料版ではHTMLで出力する事も出来ます。
無料版はPDFでの保存となります。

まとめ

クラインアン、デザイナー、プロジェクト関わるスタッフに使わる事が重要で、手書きも問題ないですが、直感的にオブジェクトを配置出来たりするワイヤーフレームを使うことによって作業効率はアップする事が出来ます。
色々なツールを使って自分に合うワイヤーフレーム作成ツールを見つけてください。