Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選

ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。

ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。
プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。

そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。
ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。

参考：
新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret

ワイヤーフレーム作成の注意ポイント9個

1. アイデア出しは個人でしっかりと行う

http://mindmap.jp/000093.html

アイデア出しは初めからチームメンバーとするのではなく、まずは個人で行ってみましょう。
個人でやるべき理由の一つは、ほかの人を交えると色々な話題になりまとまりにくいためです。
マインドマップを使えば芋づる式にアイデアを絞り出すことができるので、ぜひ活用してみてください。
　　

2. サイトマップ作成は競合サイトを参考にしてみる

ホームページはリンクをたどって移動しますが、慣れないうちは構成がイマイチわからなかったりするものです。
そこで、サイトマップを作成する時は、競合サイト、類似サイトを参考にしてみてください。
似たような業界、ジャンルの場合構成も似たり寄ったりの場合が多く、参考になります。
　　

3. 目指しているホームページデザイン、UIデザインを参考にすると早い

http://muuuuu.org/category/industry/technology

ワイヤーフレームをいざ作ろうと思った時、何も参考にするものがないよりも参考にするほうが作業がスムーズです。
他社のホームページで目指しているデザインに近い物があれば参考にしてみます。
　　

4. ワイヤーフレームの時点で上手くビジュアル化までもっていく

http://websae.net/wireframe-20150303/

ワイヤーフレーム作成では全体のレイアウトを考えますが、この時点でビジュアル化までもっていければその後のデザイン作業がスムーズに進みます。
　　

5. スマホ版・PC版のワイヤーフレーム作成はわけて考える

近年ホームページといえばレスポンシブという位にスマホ対応が当たり前になっています。
しかし、ワイヤーフレームの時点でスマホ版、PC版を両方作ろうとするとコンテンツが足りなくなるなど問題が生じがちです。
ワイヤーフレームの段階では、PCとスマホは別物として作成しましょう。
　　

6. 外観確認時は、デザイン全体と詳細どちらも見れるようにする

ワイヤーフレーム作成が済み外観を確認する際には、ページをプリントアウトし、ホワイトボードに貼って、全体・詳細が両方確認できるようにします。
サイトマップの構成で貼付けるとわかりやすいです。
　　

7. チームで議論をする前に各自に意見を出してもらう

http://hatenanews.com/articles/201103/1679

全体を確認してもらったら、チームで話し出す前に、まずは各自に意見も出してもらう時間を設けましょう。
その際に、ポストイットにコメントを書いてもらい、ホワイトボードに貼付けてもらうと、その後の議論が進めやすくなります。
　　

8. 写真で撮影すれば簡単に議事録がとれる

議事録をわざわざとらずとも、会議後のホワイトボード全体を撮影すれば議事録がとれます。
必要があれば残しておきましょう。
　　

9. コーディング担当もブレストに参加するとスムーズに進む

https://someiyoshino.biz/service/html.php

ワイヤーフレーム作成時点ではコーディングは関係ないと思いがちですが、コーディングへとスムーズに移行するためにもコーディング担当もブレストに参加してみてください。
　　

ワイヤーフレーム作成の便利ツール20個

Cacoo

https://cacoo.com/lang/ja/

100種類もの豊富なテンプレートを収録した、ドローイングツールです。
ワイヤーフレーム、モックアップはもちろんグラフや表など、様々なジャンルの作図を手軽に作成することができます。
コラボレーションしやすいのが特徴で、作成したものを簡単にチーム内で編集・共有できます。
　　

UXPIN

https://www.uxpin.com/

ワイヤーフレーム、モックアップ、プロトタイプがサクッと作成できるツールです。
あらかじめ用意してあるパーツを使って、直感的に綺麗なワイヤーフレームが作れます。
　　

Justinmind Prototyper

https://www.justinmind.com/

ドラッグ＆ドロップするだけの簡単な操作で、手早くワイヤーフレームが作成できるツールです。
ウィジェット、ライブラリもたくさん収録しているため、初心者でも参考にしながら手軽に作れます。
有料ツールで使用料は月$19からですが、無料トライアルが可能です。
　　

ProtoShare

オンラインで使えるワイヤーフレーム作成ツールです。
共同編集者がコメントを残したり、フィードバックをもらうことができるため、チームメンバーと一緒に作業したい時にぴったりです。
有料ツールで使用料は月$29からですが、30日間無料トライアルができます。
　　

POP

https://marvelapp.com/pop/?popref=1

手書きでワイヤーフレームを作りたい方にぴったりのツールです。
紙に書いたワイヤーフレームをスマホで撮影して取り込み、リンクを設定することでワイヤーフレームが作成できます。
無料でも使うことができますが、FREEプランだとプロジェクト・メンバー数に限りがあります。
有料のBASICプランは月$10からです。
　　

MockFlow

https://www.mockflow.com/

多彩なテンプレートを使い、オンライン上で簡単にワイヤーフレームが作成できるツールです。
UIコンポーネントも豊富ですので、とにかく時間をかけずに本格的なワイヤーフレームが完成します。
有料プレミアムプランも月$14から提供していますが、無料でも使うことが可能です。
　　

moqups

https://moqups.com/

用意されたステンシルや手持ちの画像を使って、ワイヤーフレームを作成することができるオンラインツールです。
説明書なしでも使えるようになるほどの手軽さが魅力的です。
無料プランあり、有料プランは月$10から提供しています。

参考：
ブラウザ上で簡単にワイヤーフレームを制作できる「moqups」の使い方を解説
　　

Prott

https://prottapp.com/ja/

直感的に使える操作性が特徴のツールです。
画像を用意しアニメーションを設定するだけで、動くプロトタイプが作れます。
無料プランのほかに、5種類の有料プラン（月間契約 月1,900円から）を用意しています。
　　
参考：
スマホサイトやアプリのワイヤーデザインを簡単に作れるProttの使い方

PowerMockup

http://www.powermockup.com/

PowerMockupは、インストールすることでパワーポイントを拡張できるプラグインです。
パワーポイントを普段使っている方にはオススメです。
フリートライアル、個人向け$59.99、小規模チーム$ 269 .95の3つのプランを提供しています。
　　

mockingbird

https://gomockingbird.com/home

ドラッグ＆ドロップ、コピーペーストといった基本的な操作だけで扱えるオンラインツールです。
シンプルな操作性で、新しいツールが苦手という方にも安心です。
　　

Wireframe.cc

https://wireframe.cc/

誰にでもわかりやすい、ミニマルなインターフェイスが印象的なワイヤーフレーム作成ツールです。
作成作業も簡単な上、共有方法も独自URLを教えるだけとシンプルなのが魅力的です。
　　

Pencil Project

http://pencil.evolus.vn/

パワーポイントのような感覚で使える、Win,Mac,Liinux用ダウンロード型ツールです。
オンラインツールが苦手という方、パワーポイントの操作性が好みという方にオススメです。
　　

AXURE

http://www.axure.com/

手早くシェアし、チームメンバーで確認しながらプロジェクト進行ができるツールで、コラボレーション重視の場合にオススメです。
有料プランは$29から提供しています。
　　

balsamiq

https://balsamiq.com/

手書き風で味のあるワイヤーフレームを作成できるツールです。
たくさんのパーツも収録しており、気軽にワイヤーフレームを完成させたい方にぴったりです。
価格はmyBalsamiqで月間契約の場合、3プロジェクト月$12から提供しています。
　　

SIMPLEDIAGRAMS

http://www.simplediagrams.com/

インスピレーションにしたがって、ラフにワイヤーフレームを書きたいときにぴったりなツールです。
無料トライアルは7日間、有料では1ユーザーライセンス $39です。
　　

HotGloo

https://www.hotgloo.com/

シンプルな見た目で使い勝手のいいツールです。
ワイヤーフレームに特化しており、オンライン上で作業ができます。
プランはグループで月$13から提供しており、チームの大きさにあわせて選択することが可能です。
　　

NinjaMock

https://ninjamock.com/

ワイヤーフレーム作成に特化したツールで、ホームページはもちろんアプリのワイヤーフレームが無料で作れます。
最大限に活用したい場合には、有料プランが月$12から利用できます。
　　

invision

http://www.invisionapp.com/

ワイヤーフレーム作成からブレストまでをサポートするツールです。
作業中のワイヤーフレームを共有し、メンバーにリアルタイムでコメントをもらうことができます。
　　

Adobe Comp CC

http://www.adobe.com/jp/products/comp.html

スマホ、タブレットを使って、紙に書くようにどこででもワイヤーフレームが作れるツールです。
思いついたアイデアをすぐに形にできるため、外出先や時間が空いた時に便利です。
　　

Google Drawings

https://chrome.google.com/webstore/detail/google-drawings/mkaakpdehdafacodkgkpghoibnmamcme?hl=ja

Google Drawingsは、Googleドキュメントの図形作成ツールです。
レイアウト図、グラフ、フローチャートなどを簡単に作成することができます。
　　

まとめ

ヒアリングの段階からデザイナーが参加すれば、その後の作業がよりスムーズに進みますが、限られた時間の中では参加が難しいことも多くあります。
だからこそ、ワイヤーフレームの存在が非常に重要です。

何となくワイヤーフレームを作成するとホームページの仕上がりに大きく影響しますので、目的を理解しきちんとポイントを押さえて作成しましょう。
また、ワイヤーフレーム作成にツールを活用すればスムーズに美しく作れます。

様々なツールがありますので、使いやすいと思うものを選んでみてください。