ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ

10wireframetool

 

新しいウェブデザインのプロジェクトを始めるときは、枠組み(ワイヤーフレーム)のスケッチから開始する方も多いのではと思います。

ワイヤーフレームを使うことで、どのようなウェブデザインを作成していくのか計画を練ることができます。

またヘッダーやコンテンツ部分、フッターなどの主要パーツをどのようにレイアウトするのか一目で分かり、時間の節約にもつながります。

 

今回はWeb Design Ledgerで、そんなワイヤーフレームをオンライン上で簡単に作成することができるツール10個をまとめた「10 Excellent Tools for Creating Web Design Wireframes」をご紹介します。

 

複数の人でリアルタイムに編集を加えることができるユニークなサービスなどを、それぞれのオンラインツールが備えているので、自分に合ったツールを見つけて見てはいかがでしょうか。。

 

 

詳細は以下から。

 

 

ウェブデザインのワイヤーフレーム用オンラインツールまとめ


 

MockFlow

リアルタイムに複数同時編集が可能なオンラインツールのひとつ。

あらかじめ大量のアイコンやパーツを備えているので、直感的な操作感となります。

チャット機能を合わせて使うことで一緒に作業をしている感覚になりますよ。

wireframe_tools_1

 

こちらがサンプル用動画となります。

Real-Time Design Collaboration from Produle on Vimeo.

 

 

Axure

こちらのアプリケーションはクライアントとのやり取りを円滑に進めるための工夫がされたオンラインツールのひとつ。

ワイヤーフレームを簡単に作成することができるのはもちろん、完成したワイヤーフレームを使ったプロトタイプをパスワードと一緒に管理することができます。

またコンセプトをまとめた仕様書もボタンひとつで印刷することができます。

個人的に使ってみたいツールのひとつです。

wireframe_tools_6

 

 

Balsamiq Mockups

手書き感覚でモックアップを仕上げていくことができるオンラインツール。

とりあえず頭の中のアイデアを他の人と共有したいときなんかにサクッと使うことができるのではないでしょうか。

wireframe_tools_7

 

 

Pencil Project

こちらのツールは主要ブラウザのひとつFirefoxのアドオンに対応しており、ワイヤーフレームのほかに簡単なチャートなども描くことができます。

wireframe_tools_2

 

 

HotGloo

すっきりとしたシンプルなインターフェースも魅力的なのですが、ほとんどの作業をドラッッグ&ドロップで行うことができる簡単な作業方法も人気のひとつです。

全ての作業をオンライン上で行うため、インターネット環境さえあればどこでも作業を続けることができます。

wireframe_tools_3

 

 

Caccoo

ラフなモックアップを仕上げたいときに使えるツールのひとつですが、このツールの最大の特徴は日本語に対応している点ではないでしょうか。

サンプル用のデモ動画なども全て日本語で紹介されているので、操作方法などに迷うことなくサポートも万全です。

またリアルタイム同時編集も可能となっているので、個人的にオススメのツールですよ。

wireframe_tools_5

 

 

ProtoShare

こちらのツールは複数でひとつのプロジェクトを進めるときに活躍しそうですよ。

作成したプロトタイプに他の共同編集者はレビューを残すことができ、リアルタイムでフィードバックやアドバイスを残すことができるコミュニケーション型オンラインツールです。

wireframe_tools_8

 

 

OmniGraffle

こちらはMac OS専用アプリケーションなのですが、シンプルでオシャレな操作環境に加え、ボタンなどのたくさんのデザインパーツを標準装備しています。

ワイヤーフレーム作成も直感的に行うことができるので、ウェブデザイナーさんにもオススメしたいツールのひとつです。

wireframe_tools_10

 

 

オンライン上でワイヤーフレームを作成することで、他の共同編集者とリアルタイムなコミュニケーションが取れ、作業もはかどりそうです。

しかしもっとアナログに鉛筆を使って直接紙にデザインしたいという方は、以下の各種PDFペーパーを印刷するとよいかもしれませんよ。

 

印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ

printpdf1

 

参照元サイトにはこの他にも今回紹介していないオンラインツールがいくつかまとめられていますので、よろしかったらこちらも合わせてどうぞ。

 

[参照元 : 10 Excellent Tools for Creating Web Design Wireframes – WebDesignLedger]