いざワイヤーフレームを作ろうと思っても「どのツールを使えばいいかわからない...」「アプリごとの違いがわからない...」という人も多いんじゃないでしょうか。

そこで今回はweb制作のプロが選ぶ、おすすめのワイヤーフレーム作成ツールを4つ紹介いたします。
無料でつかえるものやオンライン上で共同作業できるもの、操作が簡単なものなど、それぞれに特徴があり、目的に合ったものを選ぶのが、効率UPのためにはとても重要です。

現場でも実際に使っている人が多い、便利なツールを掲載していますので、ぜひ参考にしてみてください！

ワイヤーフレームとは

「ワイヤーフレーム」とは、webページの設計図です。

写真・テキスト・ボタンなどを置く場所が書かれていて、一目見るだけでどんなサイトを作りたいのかが、なんとなくわかるようになっています。

web制作の現場ではワイヤーと呼ばれたり、WFと書かれたりする場合が多いです。

ワイヤーフレーム作成ツールを選ぶポイント

1.無料でどこまでできるのか

まず気になる料金ですが、ワイヤーフレームツールは基本無料で使えます。
ですが完全無料で使えるものは少なく、下記にあるのが主なパターンです。

・無料お試し期間を経て有料プランに移行するもの
・一部機能を無料で使えて、有料プランで全機能を使えるもの

どちらにしても、気になるものは触ってみるのをおすすめします。
その中で「自分のやりたい作業が無料でできる」「有料でも使い続けたい」ツールを選ぶようにしましょう。

2.共有・共同編集のしやすさ

ワイヤーフレームは通常、誰かに見せるために作成します。
また、今後もHP制作を続けていく場合、複数人でワイヤーフレームを同時に作成する機会は増えていきます。

「練習のためにWF作成とコーディングを自分一人でやる」という場合以外は、共有・共同編集がしやすいに越したことはありません。

3.操作性が自分に合っているか

これは一人ひとり違う部分ですので、色々触ってみて判断しましょう。
MacやWindowsなど、使用しているPCによって操作感も大きく異なります。

4.周りの人がどのツールを使っているか

複数人で共同作業をするなら、ツールを統一する必要があります。
そのため、会社の同僚や一緒に作業する仲間が使っているものを選ぶのは、かなりおすすめできます。

例え操作がしづらくても、わからないことを聞ける・共同作業できるというメリットは大きいですよ！

ワイヤーフレーム作成ツールおすすめ4選

adobeXD

URL：https://www.adobe.com/jp/products/xd.html

adobeXDは、便利な機能やワイヤーフレーム作成のためのテンプレートが多く、デザインにこだわりたい人におすすめのツールです。
PhotoshopやIllustratorを使っている人は、XDを選んで間違いはないでしょう。

無料のままでできること

基本的な機能がほとんど無料で使えます。
一人で使用する場合は、無料のスタータープランで問題ありません。

有料オプションを使うメリット

共同編集できる編集者、共有リンク数、PDFや動画の書き出し数の制限がなくなります。
複数人で作業する場合には、有料プランでないと不便に感じてしまうかもしれません。

また、イラスト作成やロゴ作成も同時に行いたいという人は、Photoshop、Illustrator、Premiere Proなど、Adobe製品が全て使えるようになるコンプリートプランもおすすめです。

・単体プラン 月額1,298円
・コンプリートプラン 月額6,248円

Figma

URL：https://www.figma.com/

Figmaはインストール不要で、オンライン上でワイヤーフレームを作成できるツールです。
MacやWindowsなど、OS環境を気にせず、インターネット環境があればどこでも利用できるので、最も気軽に使えるツールと言ってもいいかもしれません。

無料のままでできること

基本的な機能がほとんど無料で、2人までなら共同作業もできちゃいます。
複数プロジェクトを同時に進める、チームで共同作業するという場合以外は、無料プランで問題ありません。

有料オプションを使うメリット

保存できるファイルやプロジェクト数の制限がなくなります。
チームで共同でワイヤーフレームを作成する際、必要になれば有料プランを検討してみてください。

・Professional 月額15ドル
・Organization 月額45ドル（大企業向けなので気にしなくてOK）

Cacoo

URL：https://cacoo.com/ja/

Cacooは、ワイヤーフレームだけではなく、フローチャート、プレゼン資料、マインドマップも作れるオンライン作図ツールです。
日本語対応しているため操作も分かりやすく、初心者にもおすすめのツールです。

無料のままでできること

基本的な機能をフリープランで使えるのは上記2つと同様で、共同編集も可能です。
また、無料で14日間有料プランを試せます。

有料オプションを使うメリット

有料プランになるとPNGだけではなく、SVG、PDF、PowerPointなどの書き出しに対応が可能になります。

・プロ 月額660円

Sketch

URL：https://www.sketch.com/

Sketchはmac用のワイヤーフレーム作成ツールで、直感的に操作できるのが魅力です。
テンプレートやショートカット機能が豊富で、動作も軽く、作業時間を短縮しやすくなっています。

しかしwindowsで使用できないため、開発メンバーは全員mac環境を用意しなければなりません。

無料のままでできること

30日間無料で、有料プランを試せます。

有料オプションを使うメリット

30日間の無料トライアル期間を終えても、Sketchを使い続けたい場合はライセンス登録が必要になります。

・有料プラン 99ドル (1年間アップデート保証)
※1年後からアップデートされなくなるが、現在のバージョンを使い続けられる。

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

ワイヤーフレームを作成するにあたって、気を付けるポイントは大きく3つあります。

1.見やすくする

やはり一番大事なのは見やすさです。
ワイヤーフレームは、クライアントやチームメンバーと、これから制作していくサイトの方向性を確かめ合うものですので、一目見て理解できなければ意味がありません。

2.サイトの目的を明確にする

webサイト開設にはさまざまな目的があります。

・企業を認知してもらう
・商品やサービスを認知してもらう
・商品やサービスを売る
・資料請求やお問い合わせによるリード獲得
・人材採用　etc...

それぞれ効果的なデザインも変わってきますので、目的に合ったワイヤーフレームの作成を意識しましょう。

3.サイトの使いやすさを意識する

例えば、商品を売るためのサイトなのに購入ボタンの場所がわかりにくかったら使いにくいですよね。
目的にも繋がる話ですが、お客さん目線でサイト設計をしていくのが重要です。

一番のおすすめを紹介

ここまで読んだけど、結局どれにしていいかわからないという人のために、個人的な一番のおすすめツールを紹介します。

ズバリadobeXDです！

何故かというと使いやすいからと使っている人が多いから。以上。
という感じなんですが、流石に不親切だと思うので軽く解説していきます。

1.操作がしやすく便利な機能が多い

adobeXDの操作方法はシンプルで、知識や経験がない人でもなんとなく動かせるレベルです！

「なにもわからない...」という人も【adobe 使い方】とYouTubeで調べて、15分くらいの動画を見れば一気に実践で使えるようになりますよ。

また、リピートグリッド機能、プロトタイプ機能、デザインスペック機能など、痒い所に手が届く便利な機能が多く、慣れてくるとどんどん作業スピードが上がっていきます。

まずは適当に触ってみましょう！web制作において最も重要なのは手を動かすことです。

2.使っている人が多く共同作業もしやすい

体感ですが現在デザイナーやコーダー含め使っている人が最も多いのがadobeXDなので、これを使っておけば間違いないと思っています！
何度も言いますが周りの人と同じツールを使うことは、ワイヤーフレーム作成ツール選びの肝です。

だからこそ「自分の周りはみんなfigmaを使っている」という人にはfigmaをおすすめします。

3.Adobe製品との互換性が高い

adobeXDは、他のAdobe製品であるPhotoshopやIllustratorといったデザインツールとの連携がしやすくなっています。

PhotoshopデータをXDデータに変換して作業も、Illustratorの素材をXDにコピペして再編集も、すぐに使う機会はないと思いますが、とても便利なので将来的に「adobeXD使っててよかった～」となる可能性大です！

もろもろ任せられるWEB制作会社をお探しなら

チャレンジしてみるとワイヤーフレーム作成だけでも、結構時間がかかってしまうものです。
「コンセプトメイキングから運用までWEB制作を依頼したい」という人は、ぜひ株式会社TSUNAGUにご相談ください。

「集客」「求人」「BtoB展開」など、目的に応じたコーポレートサイトを作成します。

他にもSEO対策やMEO対策、ランディングページ制作など、Web制作全般をご依頼いただけますので、興味がありましたら、ぜひお問い合わせください。

→ HP制作の詳細を見る