# WEB制作技術やツール
ブログ・お知らせ
ワイヤーフレーム制作ツールの比較2014
記事公開日：
最終更新日：
こんにちは。新潟ホームページ制作【マザーシップ】です。
最近、ワイヤーフレーム制作ツールを比較したので、私なりにそれぞれ気がついたことなどを書いてみたいと思います。
そもそもワイヤーフレームとは？
ホームページ制作におけるワイヤーフレームをひとことで言うと、「ホームページの設計図」です。
ホームページのどこに何を配置するかを図にしたもので、モックアップとかレイアウトとか配置図とも呼ばれます。
家を建てるときに設計図は必須と思いますが、ホームページ制作の際もいきなりデザインを描き始めるのではなく、一旦、ワイヤーフレーム上でしっかりと検討、確認しておくことで、ミスが減りスムーズでスピーディな構築が可能となります。
制作途中に夢が広がってしまい、もうすぐ完成という時期に「やっぱりこのページを増やしたい」「やっぱりこういう機能を増やしたい」などという希望が出てしまうという事故が起きないよう、クリエイター、ディレクター、お客様全員がしっかり確認しておく必要があるものです。
オフラインツールの比較
普及率の高いパワーポイント
制作会社に勤めていたころ、ワイヤーフレームの制作で一番使われていたのはマイクロソフトのPowerPointです。
その理由は普及率の高さ。最低限のITスキルがある人であれば、だれでも図表や文字やコメントを書き込みことができ、修正が容易です。
きっと、格好いいWebディレクターさんはスライドショー機能も駆使して颯爽とお客様の前でプレゼンとかしちゃうのでしょう。
パワーポイントをワイヤーフレーム制作用に改造できるツールPowerMockupも販売されています。
ただ、普及率の高さと書いておいてアレなのですが、私はオフィスソフトに関してはマイクロソフトからLibreOfficeとGoogleドキュメントに乗り換えているため、使用していません。
長所
１.みんなが使えるツールであること
短所
1.ページ別に用紙サイズを設定できない（はず）
デザイナー同士のやりとりならFireworks
デザイン制作ツールであるAdobeのFireworksもよく使われています。
デザインなどで慣れている人にとっては一番使いやすいツールなのですが、クリエイター以外でこのソフトを持っている人は少ないので、修正がちょっと不便です。
長所
１.ワイヤーフレームのファイルをそのままデザインに使用できる点
２.シンボル機能（説明省略）
短所
１.修正出来る人が限られる
オンラインツール比較
というわけで、導入および操作が簡単なワイヤーフレーム作成ツールを探しました。
条件１ 複数人で編集できること
条件２ MacでもWindowsでも使えること
条件３ 操作が簡単なこと
条件４ 月額1,000円以下
10種類近く試しましたが、決勝に残ったのは以下の4ツールです。
| ツール名 | 画像アップロード | リンクの挿入 | 複数ページの扱い | 難易度 |
|---|---|---|---|---|
| Cacoo | ○ | ？ | ○ | △ |
| Balsamiq Mockups | ○ | ○ http://～ | × | ○ |
| Mockingbird | × | × | ○ | ◎ |
| moqups | ○ | ○ ページ間リンク | ○ | ○ |
Cacoo
Cacoo
Cacoo – 図の作成 & リアルタイムコラボレーション – Chrome
メイド・イン・ジャパン！で安心安全のワイヤーフレームツールです。採用している人も多いのではないでしょうか。
Webのワイヤーフレームだけでなく、電子回路やオフィスレイアウトを描くこともできるマルチなツールです。月額490円も魅力。
ただ、機能が豊富な分使わないパーツも多く、オーバースペックな印象で、５回くらいチャレンジしていますが、どーーーーーしても慣れることができませんでした。
Balsamiq Mockups
Balsamiq Mockups
Chrome Web Store – Balsamiq Mockups Projects (Free Trial)
手書き風の可愛い仕上がりとマニュアル不要の簡単さで私の中ではかなり点数の高かったツールです。
しかし残念だったのが、１ページ１ファイルな点。
他のツールで複数ページを扱えることを覚えてしまうと、1ページずつ保存することが面倒に感じてしまいます。
Mockingbird
操作の簡単さでは優勝でした。
「テキストの中央寄せ」が簡単なのが何気なくありがたいと思いました（他のツールでは右寄せ／左寄せのみです）
「今日はなんだか15カラムのグリッドが引きたいの」という時も、あっという間に対応できます（他のツールでも960gsのグリッドを引くことが可能ですが、カラム数や幅など指定できません）
唯一残念だったのは、画像アップロードが出来ない点。
ワイヤーフレームにとってどこに何の画像があるかを示すことは重要なので、惜しくも準優勝とさせていただきます。
Moqups
Online Vector Based Mockup & Wireframing Tool · Moqups
Moqups · Mockups, Wireframes & Prototyping – Chrome
こちらもマニュアル要らずの簡単操作なツールです。
操作ではMockingbirdに劣るものの、必要な機能をほぼ完備しているため、結局こちらを優勝とし、有料プランに契約しました。
無料でも「2 active projects with at most 300 stencils each and 5 MB of storage（２プロジェクト、300パーツ、5MBの編集）」まで可能なので、共同作業者やお客様に編集してもらえます。
英語のツールでは有りますが、日本でも人気のため、検索するとたくさんの解説記事がでてきます。
いかがだったでしょうか？ホームページ制作ライフのお役に立てたら幸いです。
気になるものがあったら是非つかってみてくださいね！
