ワイヤーフレーム図って何？活用法と作成ツール
ワイヤーフレーム図を知っていますか？Webデザインを制作する上で最初の段階で作られるもので、重要な役割を果たしています。今回はワイヤーフレームの役割や作成ツールなどをご紹介します。どの作成ソフトが良いか迷っている人はぜひ参考にしてみてください。
Part 1: ワイヤーフレーム図とは?
ワイヤーフレーム図とは、Webサイト制作の土台となるもので設計図の役割を果たしています。線や枠組みだけでサイトのデザインを表しており、完成形をイメージしやすくしています。Webサイトを制作する上では「何をどこに置くか」「置いたものをどの様に動かすか」ということが重要です。やみくもにボタンやリンクを配置していては、ページを訪れた人にとって非常に使いづらいものとなってしまいます。まずはワイヤーフレーム図を作成することでサイト設計の基礎を作ることができ、そこから見やすく使いやすいデザインにイメージを膨らませることができるのです。
ワイヤーフレーム図のメリットは他にもあります。サイト制作をする際、複数人と共有して作業することもあるでしょう。その時に「どんなサイトを作るか」ということを全員が把握している必要があります。ワイヤーフレーム図があればそれが一目でわかるため、共同作業する時の目印となるのです。何か変更点が生じたら必ず図に書き込んで更新し、常に最新情報を共有できるようにしましょう。
Part 2: ワイヤーフレーム図を作成する ツール
1. Mockitt
Wondershare Mockittはウィジェットやテンプレートが豊富な作図ツールです。
「戻る」ボタンやページ数表示のボタンなどがかなりの種類用意されており、クリックするだけで簡単にWebページやアプリ画面を作ることができます。ブラウザで利用できるので、ソフトをダウンロードする必要もありません。社内で共有したい場合も共同編集機能を使えば楽々共有できるのが特徴です。
ワイヤーフレーム図を作成するソフトだと操作が難しい場合もありますが、マウス操作でできるものばかりなので初心者の人にもとても使いやすいです。作業メニューは1つのウインドウにまとまっているので、機能ごとにいちいちタブを選択する必要もありません。
料金プランは全部で3つあります。エンタープライズプラン、パーソナルプラン、無料プランがあり、料金はそれぞれ年間9,980円と6,980円です。チームで使う場合はエンタープライズプラン、個人で使う場合はパーソナルプランがおすすめです。用途に合わせてぜひ最適なプランを導入してみてください。
2. Cacoo
Cacooはオンライン上でワイヤーフレーム図を作成できるツールです。リアルタイムで複数人での作業ができたりビデオ通話やチャット機能が使えたりと、チームでの作業に便利な機能が充実しているのが特徴です。テンプレートも用意されているので初心者の人でも簡単にワイヤーフレーム図を作ることができます。
無料プランとプロプラン、チームプランと3つのプランがあります。プロプランでは200ユーザーまで使えますが、1人当たり年間6600円かかるため大きなチームや会社で使う場合高額になるというデメリットがあります。
3. Figma
オンラインでワイヤーフレーム図を作成できるツールです。チーム作業に役立つ機能がたくさんあり、同じファイルを複数人で共有したりコメントを付けたりできます。また、iPhoneやAndroidのフレームが用意されているのでスマホのサイト設計をするときにも便利です。
料金プランは無料・月額12ドル（約1,320円）・月額45ドル（約5,000円）の3つあります。無料プランでも無制限のクラウドストレージがあるので、個人で使う場合におすすめです。チームで作業する場合は有料プランの方がおすすめです。 デメリットとしては、説明が全て英語なので作業がしにくいことがあげられます。日本語の方が使いやすいという人には向いていないかもしれません。
出典:Figma
4. Googleスプレッドシート
こちらもオンライン上で使えるツールです。表作成や計算用に使っている人が多いのではないでしょうか。図形描画機能があり簡単な図を作ることができます。Googleアカウントがあれば誰でも無料で使えるため、手軽に導入できるのが特徴です。
デメリットとしては、作図に特化したツールではないため図の作成にやや手間がかかることです。テンプレートが無くタブから図形をクリックしてゼロから作る必要があり、初心者の人には使いづらいかもしれません。
5. Wireframe.cc
ワイヤーフレーム図作成に特化したオンラインツールです。ドラッグで簡単に図形を作ることができ、ワンクリックで色やアイコンの形などを変えることができます。フリープランとプレミアムプランがありますが、フリープランだとURLを知っている人は誰でも編集できてしまうため、情報漏洩が心配な場合は使わない方がいいかもしれません。プレミアムプランでは3ユーザーまでで月額39ドル（約4,300円）、無制限で月額99ドル（約10,900円）の2つがあります。他にも機能が追加されており、本格的に使いたい人は有料プランの方がおすすめです。
ワイヤーフレーム図について理解できましたか？土台を作っておけば後の作業がとても楽になります。Wondershare Mockittでは初心者でも簡単に作れる機能がたくさんありおすすめです。ぜひ活用してクオリティの高いWebデザインを作ってみましょう。
