Design デザイン・UI

 
デザイン・UI

ワイヤーフレーム作成のおすすめツール!快適&時間短縮ができるかも!

・どんなサイトでも、必ず必要となる工程がワイヤーフレームだ。
・豊富なテンプレートが自慢のサイト、デモ制作が一緒にツールも!
・使いやすいツールを使って、スムーズな作業&時短を目指そう!

PCサイトもスマホサイトも、必ず必要となる工程はサイト設計(ワイヤーフレーム)でしょう。

最近まで、PowerPointやExcelを使ってちくちく作成していましたが、もっと効率的に、かつ手軽できないものはないかと思い、Webで使えるツールを探してみました。

実際にツールを使ってみた感想も踏まえて、オススメできる3つのツールを紹介します。

1. 豊富なテンプレートが特徴!UIも日本人が好みそう!Cacoo

さまざまなところで紹介されているため、使ったことがある人も多いのではないでしょうか?

Cacooの特徴は、なんといってもテンプレートの多さです。

ワイヤーフレームはもちろん、サイトマップやマインドマップ、フローチャートにグリーディングカードまで、幅広く用意されているため用途を選びません。

自分が作ったワイヤーフレームをテンプレート化することもできるため、ヘッダーフッターだけ作ってテンプレート化すれば、効率的に作ることもできます。

また、チャット機能も付いているため、共同編集で作業しても問題なさそうです。

UIが日本人好みであり、Google Chromeにアプリもあるため、導入しやすいのではないでしょうか。

■作成シート数
プラス版:1000枚まで
チーム版:無制限
■出力形式
PNG、PPT、PDF、SVG、PS
■共同編集者
アカウント数に応じて価格変動あり
1アカウント 月/454円から

Webデザイナーになると、今日決めた!
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

 

2. UMLチャート、フロアプランなどのテンプレートもある!gliffy

テンプレート数はCacooに劣るものの、ワイヤーフレームを始めUMLチャート、フロアプランなどのテンプレートを用意しています。

海外のツールのため日本語対応はされていませんが、UIはシンプルで直感的な操作ができるため、何がどこにあって、どう使うかはすぐに理解できると思います。

また、gliffyのスナップ機能は使い勝手が良いです。

シェイプを複数並べていきたいとき、グリッドにスナップされるためシェイプを揃える手間が減ります。

また、微調整したいときはワンクリックでスナップをON/OFFできるため、作業がスムーズに行えます。

こちらもGoogle Chrome、JIRAにプラグインがあるため導入がしやすそうです。

気に入ったらぜひ有料登録してください。

■作成シート数
無制限
■出力形式
JPG、PNG、SVG
■共同編集者
アカウント数に応じて、価格変動あり。

3. 作成したワイヤーフレームをツール上で動かせる!ProtoShare

site9社が提供している「ProtoShare」です。

こちらのツールも海外製で日本語化はされていませんが、それを補って余りある機能の豊富さが魅力です!

細かな機能が多くありますので、ここでは主要な機能のみ紹介していきます。

まず、他のツールでは一枚ずつ作成してそれを組み合わせなければなりませんが、ProtoShareではディレクトリーマップが作れ、全体像を把握しながら作成することができます。

また、ツール上で他ページへのリンクを設置することができたり、スライダー、タブコンテンツ、アコーディオンなどの、動的要素も配置することができます。

これだけでは他のツールと変わりありませんが、PhotoShareでは、作成したワイヤーフレームをツール上で動かすことができます。

つまり、実際のスライダー、アコーディオンの動きや、リンクを押して別ページへと移動できるなど、デモ制作も一緒にできてしまうのが、1番の特徴ではないでしょうか。

また、さまざまなインターフェースを用意しており、PCはもちろん、android、iPhone、Windows PhoneのUIをワイヤーフレームに組み込みことでき、よりリアルに表現することができます。

■作成シート数
無料(30日間)/有料:無制限
■出力形式
無料(30日間)/有料:PNG
■共同編集者
無料(30日間)/有料:無制限
※料金プランは3タイプあり、それぞれに30日間の無料トライアル期間が設けられています。

未経験から6ヶ月でWebデザイナーへ
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターを目指せるスクールがデジハリのスタジオ横浜です。またより一歩ステップアップを目指すフリーランスやWeb担当者にも適したコースを用意しています。

まとめ・使いやすいツールを駆使してワイヤーフレームの効率化を

無料で使えるワイヤーフレームはいくつかありますが、その中でも使いやすかった3つを紹介しました。

それぞれに特徴がありますので、まずは試用期間を利用して自分に合ったツールで作成してみてください。

作業の効率化、時間の短縮につながりますよ!

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事