2018.04.24Web制作

ワイヤーフレームツールを使って、Web制作を快適に！無料で使えるワイヤーフレームツール14選

スマートフォンサイト

Webサイトやアプリを作る際に無くてはならない「ワイヤーフレーム」。ディレクターが作成するデザインの設計図で、制作をスムーズに進めるために必要な要素です。

ワイヤーフレームの作り方に決まりはありませんが、専用のツールを使うことで「スムーズ」かつ「分かりやすく」作成することができます。

そこで今回は、基本的な考え方から、ワイヤーフレーム作成のおすすめのツールまで、ワイヤーフレームに関する知識をご紹介いたします。

1 ワイヤーフレームとは
2 ワイヤーフレームを考える際のポイント
3 ワイヤーフレームツール
4 おわりに

ワイヤーフレームとは

ワイヤーフレームを簡単に説明すると、「どこに、なにを、どのように配置するか」が書かれた「Webサイトやアプリの設計図」のことです。家を建てる時に作る、間取りや設計図をイメージするとわかりやすいかもしれません。

ワイヤーフレームはなぜ必要?

ワイヤーフレームは、Webサイトを作成する上で「Webサイトに関わる人全員で完成イメージを共有し、作業内容を確認する」ことができます。つまり、ワイヤーフレームはWeb制作を進める上での「コミュニケーションツール」という役割があります。Webサイトの完成図が見える化されているので、複数人で作業する際も同じイメージを持って作業をすすめることができます。あいまいな共通認識のまま進めてしまうと、作業内容にずれが乗じたり、想定外の工数が発生したりします。また、担当者間で引継ぎが発生した場合でも、ワイヤーフレームを見れば状況は一目瞭然です。スムーズに業務のやり取りを進めることができます。

ワイヤーフレームの実例

初めてワイヤーフレームを作る方は、「どこからはじめればいいのだろう」と迷うかもしれません。ワイヤーフレームをまとめているサイトを紹介しますので、全体像を理解したい人は参考にしてください。

Wireframe Showcase

実際に公開されているWebサイトのワイヤーフレームが紹介されています。マウスオーバーすると実際のサイト画像が表示されるので、ワイヤーフレームに書くべき内容が具体的で分かりやすいです。

参考：Wireframe Showcase

I ♥ wireframe

たくさんのワイヤーフレームがまとめられているサイトです。webサイトだけでなく、アプリのワイヤーフレームもあります。

参考：I ♥ wireframe

ワイヤーフレームを作るには

一般的には、以下の流れでワイヤーフレームを作ります。

情報を整理する

まずは、Webサイトに掲載する情報を整理します。最初の段階では、載せようと思っている内容を全て書き出してみましょう。

その後、「電話番号と住所」「業務内容とサービス名と業務のイメージ写真」といったように、情報をグルーピングしていきます。似た情報は似た配置にするのがワイヤーフレームを作る上での基本になるので、盛り込みたい内容に漏れがないか確認しながら準備を行いましょう。

最後に、情報の重要度を決めましょう。Webサイトの目的によって、魅せるべき順番が変わってきます。例えば、コーポレートサイトであれば会社の情報がメインになりますし、コンテンツサイトであれば運営企業のロゴはメインにしなくてもいい場合もあるでしょう。また、不要な情報が多いと、見る人にとってわかりにくいサイトになりますので、しっかり情報の取捨選択をするようにしましょう。

レイアウトを決める

Webサイト全体の大まかなレイアウトを考えましょう。

ヘッダー・ナビゲーション・コンテンツエリア・フッターなどから構成されるマルチエリアタイプにするのか、ランディングページのようなシングルページにするのか、コンテンツが並んだタイルにするのか。

サイトの目的や情報量に合わせて適切なレイアウトを選択してしましょう。

ラフを考える

方向性が決まったら、ワイヤーフレームの下書きをしましょう。いきなり完成させようと思わずに、ざっくりとした配置案から詰めていくのがおすすめです。

Webサイトを見る人の視線は左上から右下へ「Z」を描くように動きます。この事を意識して、視線の動きに合わせて情報を配置すると、伝わりやすいサイトになります。

清書する

ラフが固まったら、清書しましょう。手描きのままでは、自分だけしか読めないかもしれません。ワイヤーフレーム作成に便利なツールについては、後述します。

ワイヤーフレームを考える際のポイント

ワイヤーフレームを考える際には、以下の４点に気をつけましょう。これらを意識すると、効率的にワイヤーフレームを考えられますよ。

参考にするサイトをいくつか用意する

Web作成に慣れないうちは、1からサイトデザインを考えると時間がかかってしまいます。似た目的や近い業種のWebサイトをいろいろと研究し、参考にしましょう。参考にするだけでなく、レイアウトをワイヤーフレーム化することで、自分自身のデザインの引き出しも広げることができます。

競合サイトを参考にしてみる

サイト全体の構成を考える際は、競合サイトや類似サイトもぜひチェックしてみましょう。特にサイトマップを見ると、どのような情報を網羅しているかが一目瞭然です。また、作ろうとしているサイトに盛り込んだほうがいい情報が抜けていた場合も把握することができます。

全く同じにするのはNGですが、「どうしてこの配置になっているのか？」と考えると、ワイヤーフレームを作るときに良い参考になります。

スマホとPCのワイヤーフレームは分けて考える

スマホとPCでは画面の幅も違うので、別のレイアウトを用いるのが一般的です。PC版のワイヤーフレームを考える際に、レスポンシブかどうかも視野に入れるとスムーズにスマホ対応を進めることができます。

デザインを考える必要はない

ワイヤーフレームは、あくまでサイト全体の設計図です。カラーリングやボタンの形などのデザインを決めるのは次の段階（デザイナーの仕事）です。色を付けてしまうと、細部が気になって進みません。構成の良し悪しを判断するためにも、デザイン要素は除いてシンプルな形で考えましょう。

ワイヤーフレームツール

自分のWebサイトであれば、紙とペンで手書きするのが一番早いかもしれません。しかし、社内でイメージを共有する場合や、お客さんに提案する際にはそこれではNGです。そのため、誰が見てもひと目で分かるワイヤーフレームを作成する必要があります。

PowerPointやExcel、Illustratorなど普段ビジネスで使っているツールを用いて作成することもできます。このような使い慣れているソフトを使うのも良いですが、ワイヤーフレームに最適化されているわけではないので、作成には不便さを感じるかもしれません。

そのため、最初は慣れないかもしれませんが、専用のツールを利用しましょう。以下におすすめのツールを紹介しますので、比較して一番使いやすいものを選んでください。

ブラウザ上で使えるワイヤーフレーム作成ツール

手軽にワイヤーフレームを作成する上でオススメなのが、ワイヤーフレームをブラウザ上で作成できるツールです。ソフトをインストールする必要がないので、すぐに使い始めることができます。なお、このようなツールはドラッグ＆ドロップで感覚的に作成できるツールが多くあります。

会員登録の有無や画像保存の方法、日本語対応の有無、インターフェイス等にそれぞれ特徴があるので、いくつか比較してみて使いやすいと感じるものを選びましょう。

Cacoo

参考：Cacoo

日本語対応しているので、操作が分かりやすいです。

Webサイト用の図形ツールを使えば、簡単にワイヤーフレームが作れます（ワイヤーフレーム用のテンプレートもあります）。それ以外にも、フローチャート・ネットワーク構成図・マインドマップ・ガントチャート・組織図等のテンプレートが豊富で、ビジネスで幅広く活用できます。

また、複数メンバーでの編集機能や、チャット機能もあります。

Wireframe.cc

参考：Wireframe.cc

ドラッグで範囲を作成し、ツールを配置できます。作成したツールもドラッグで移動可能。シンプルなインターフェイスが特徴で、手書き感覚でスムーズに操作できます。saveボタンをクリックすると、Web上に保存される仕組みになっています。また、URL共有でワイヤーフレームをシェアできる点も便利です。

NinjaMock

参考：NinjaMock

デバイスを設定し、それぞれに最適化したワイヤーフレームを作ることができます。Webサイトだけでなく、アプリのワイヤーフレームを考える際には便利かもしれません。要素が手書き風のフォントで構成されているので、オシャレなワイヤーフレームも作成が可能になります。

moqups

参考：moqups

登録なしでも気軽に作成できます（無料版に会員登録すれば、PNGやPDFでの出力ができるようになります）。必要な要素をドラッグするだけなので、操作も簡単です。

Prott

参考：Prott

ドラッグ＆ドロップで操作可能です。パーツも豊富（特に、スマホのパーツ）なので、初心者でも簡単に分かりやすいワイヤーフレームが作れます。また、アニメーションの設定ができ、プレビュー機能を使ってWebサイトやアプリ同様の遷移の確認もすることができます。

mockingbird

参考：mockingbird

ドラッグ＆ドロップで操作可能です。配置できるツールは、動画や地図画像、RSSなど汎用性が高いものが多いです。シンプルだからこそ、使いやすいサービスかもしれません。

MockFlow

参考：MockFlow

会員登録が必須ですが、無料で使えます。テンプレートが豊富で、想定しているレイアウトに近いものを使えば効率的に本格的なワイヤーフレームを作ることができます。

HotGloo

参考：HotGloo

シンプルで使いやすいツールです。７日間は無料でトライアルができます。ただ、海外のサービスなので日本語サイトには向かないかもしれません。

インストール型ワイヤーフレーム作成ツール

オンライン環境でワイヤーフレームを作成するのに抵抗があるという人にオススメなのが、ソフトをインストールして使うタイプのツールです。インターネット環境に左右されないので、いつでも・どこでも作成できるという強みがあります。

Justinmind Prototyper

参考：Justinmind Prototyper

最初にPC・スマホ等のデバイスと画面サイズを設定すると、キャンバスが表示されます。ワイヤーフレームに必要な要素をドラッグすれば簡単に描画できます。初心者でも手軽に作れる使いやすいソフトです。

PowerMockup

参考：PowerMockup

オフラインツールでワイヤーフレームを作りたい人におすすめのツールです。インストールすると、OfficeソフトのPowerPointを拡張できます。ワイヤーフレーム用の要素が増えるので、ドラッグ＆ドロップをするとパワポ上で簡単にワイヤーフレームを作れる仕組みになっています。普段はパワポで作業している人は、とても使いやすいと思います。

Pencil Project

参考：Pencil Project

高機能なツールではありませんが、ワイヤーフレーム作成に特化しているため、慣れればスムーズに使いこなせるツールです。

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

手描きで下書きを作成する際に役立つテンプレートや、スマホで手軽にワイヤーフレームを確認できるアプリなどを紹介します。

Paper Browse

紙に下書きする際に便利なサイトです。ブラウザの画面フレームをダウンロードできるので、これを印刷するとイメージしやすいかもしれません。

Adobe Comp CC

タブレットやスマートフォンでワイヤーフレームを作成できるツールです。紙に書くように簡単に形にできます。移動中や打ち合わせの場など、ひらめきをすぐに反映できるという便利さがあります。

POP

スマホで手描きのワイヤーフレームを撮影し、ページ遷移を設定できるアプリです。スマホサイトを作成している場合は必須のアプリかもしれません。実際に手を動かして動作を確認できるので、ユーザー目線でサイト構成をチェックすることができます。

おわりに

分かりやすいサイトを作るためには、ワイヤーフレームの段階でしっかり検討を重ねることが大切です。「なんとなく」のままサイト作成を進めては、途中で迷子になってしまって結局作り直しになるかもしれません。今回ご紹介したポイントをおさえて、ワイヤーフレームを上手に活用してください。

この記事を書いた人
最新の記事

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。

>最新記事 by digital-marketing (全て見る)

ECサイト・通販サイト・ネットショップのSEO対策で押さえておくべき7つのポイント - 2019年10月31日
WEBマーケティング最前線セミナー〜ウェブ集客からCV増加、リード育成事例を一挙公開〜 - 2019年10月30日
ファビコン（favicon）とは？作成方法と設定方法について - 2019年10月28日