Smartphone スマホ

 
スマホデザイン・UI

スマホサイト設計ならコレ! おすすめツール3選

ワイヤーフレーム
PCサイトもスマホサイトも必ず必要となる工程はサイト設計(ワイヤーフレーム)。最近まで、PowerPointやExcelを使ってちくちく作成していましたが、もっと効率的に、且つ手軽できないものはないかと思い、Webで使えるツールを探してみました。
実際にツールを使ってみた感想も踏まえてオススメできる3つのツールを紹介します。

1. Cacoo

cacoo
株式会社ヌーラボが提供している「Cacoo」です。さまざまなところで紹介されているため、使用したことがある人も多いのではないでしょうか?
Cacooの特徴は、なんといってもテンプレートの多さです。ワイヤーフレームはもちろん、サイトマップやマインドマップ、フローチャートにグリーディングカードまで、幅広く用意されているため用途を選びません。
自分が作ったワイヤーフレームをテンプレート化することもできるため、ヘッダーフッターだけ作ってテンプレート化すれば効率的に作ることもできます。また、チャット機能も付いているため共同編集で作業しても問題なさそうです。
UIが日本人好みであり、Google Chromeにアプリもあるため、導入しやすいのではないでしょうか。

■作成シート数
無料版:25枚まで
有料版:無制限

■出力形式
無料版:PNG
有料版:PNG、PPT、PDF、SVG、PS

■共同編集者
無料版:1つの図につき15人まで
有料版:無制限

2. gliffy

gliffy
gliffy社が提供している「gliffy」です。会社自体が2005年に創業されたようで、比較的新しいツールになります。
テンプレート数はCacooに劣るものの、ワイヤーフレームを始めUMLチャート、フロアプランなどのテンプレートを用意しています。

海外のツールのため日本語対応はされていませんが、UIはシンプルで直感的な操作ができるため、何がどこにあって、どう使うかはすぐに理解できると思います。
また、gliffyのスナップ機能は使い勝手が良いです。シェイプを複数並べていきたいとき、グリッドにスナップされるためシェイプを揃える手間が減ります。また、微調整したいときはワンクリックでスナップをON/OFFできるため作業がスムーズに行えます。

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

残念な点としては、無料で使えるのは15日間となり試用期間が短いこと。気に入ったらぜひ有料登録してください。

■作成シート数
無制限

■出力形式
JPG、PNG、SVG

■共同編集者
無制限(アカウントの登録は必要)

3. ProtoShare

protoshare
site9社が提供している「ProtoShare」です。こちらのツールも海外製で日本語化はされていませんが、それを補って余りある機能の豊富さが魅力です! 細かな機能が多くありますので、ここでは主要な機能のみ紹介していきます。

まず、他のツールでは一枚ずつ作成してそれを組み合わせなければなりませんが、ProtoShareではディレクトリーマップが作れ、全体像を把握しながら作成することができます。また、ツール上で他ページへのリンクを設置することができたり、スライダー、タブコンテンツ、アコーディオンなどの動的要素も配置することができます。
これだけでは他のツールと変わりありませんが、PhotoShareでは、作成したワイヤーフレームをツール上で動かすことができます。つまり、実際のスライダー、アコーディオンの動きや、リンクを押して別ページへと遷移するなどデモ制作も一緒にできてしまうのが、1番の特徴ではないでしょうか。

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

■作成シート数
無料(30日間)/有料:無制限

■出力形式
無料(30日間)/有料:PNG

■共同編集者
無料(30日間)/有料:無制限

※エンタープライズでの機能となります。
※料金プランは3タイプあり、それぞれに30日間の無料トライアル期間が設けられています。

最後に

無料で使えるワイヤーフレームはいくつかありますが、その中でも使いやすかった3つを紹介しました。それぞれに特徴がありますので、まずは試用期間を利用して自分に合ったツールで作成してみてはいかがでしょうか。

この記事を書いた人


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

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事