パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

コミュニケーションをさらに円滑にするワイヤーフレームツール

2016年08月30日

以前、パンセのタネ記事で「手書きのワイヤーフレーム・プロトタイプ作りについて」をご紹介しましたが、私も考えをまとめる際はまずは手書き派です。これまではその手書きを元にワイヤーフレームをパワポで清書、と進めることが多かったのですが、ここ数年スマホファーストになってきてパワポ内での説明では認識合わせが難しくなってきたのと、次々と便利ツールが出てきたのもあって、早めに切り替えたほうが良いなぁとprottcacooPrototyperAdobe XDなど色々試してみました。 
 
  • 主に使うのはPC&SPサイト設計用
  • Windows/Mac両対応
  • 社内だけではなくクライアントにも共有できる
この条件を元に絞り込んでみたのですが、Windows/Mac両対応というのが意外とネックでした。今はテスト的にアメリカ サンフランシスコのJustinmind社が提供しているプロトタイプオーサリングツール Prototyper有料版を使ってみていますが、そこで感じたオススメポイントと雑感をご紹介します。 
 

パスワード付き共有リンク

社内共有だけならあまり必要ないんですが、クライアントへの確認出しとなるとここはマストで欲しい機能。有料版のみの機能ですが、プロジェクトごとにも分けられますし本当便利。 手順としては下記のような感じでサクッと発行できます。 
 
 

 
prottも有料版だと可能ですね。Adobe XDは非対応ですがリンク共有方法の改善が明記されていたので今後に期待。 
 

レイヤー構造

prototyper_s01.png
Photoshopに慣れているユーザーだと抵抗なく使えるUIかと思います。要素が多くなってくると序列変更の際にもこの構造は便利。
 

インストール型

オンラインツールは誰でもどこでも作業できたりとそれはそれで良さがあるんですが、今のところノートでの作業がメインなのでサクサク感を重視するとこちらに軍配が上がるかなと。 
 

豊富なウィジェット

ワイヤー作成に必要な基本的なパーツがウィジェットとして用意されているので、あとはそれをドラッグ&ドロップで配置していけばOK。その他にも色々な種類のウィジェットが用意されていてここから追加できます。個人的にはデフォルトのもの以外だとFont Awesomeを愛用してます。 
 
 

 

動きの設定仕様

プロトタイピングツールはペーパープロトタイプの取り込みや画面遷移設計をメインに考えられているものが多いので、動きの設定も複数スクリーンを作ってそれらをつなぐ感じのものになってます。なので1つのツールでワイヤーフレームを作り、動きを設定するとなるとワイヤーフレームに修正が入った際、複数スクリーン分修正となるので結構なストレスです。その点Prototyperは一つのスクリーンの中でボタンやタブに動きの設定をしたり、メニューの固定表示設定などができるのは便利でした。また、動きの設定自体もダウンロードできるサンプルデータ数が結構あって詳細が確認できるのも助かりました。
 
例えばタブの切替については下記ヘルプが参考になりました。 
※下記からサンプルのデータがダウンロード出来ます。

英語オンリーというのはどのサービスでもネックになる方が多いようですが、メニュー周りであれば日本語化できるようです。「モックアップ作成を強力サポート!Prototyperを徹底解説」で紹介されていたので参考にしてみてください。(私は英語の勉強も兼ねてそのままにしてます) 

 
使ってみて感じる一番のメリットは、web制作において社内外のコミュニケーションがより円滑になったこと。Prototyperに限ったことではないですが、社内でのブレストでも各自がイメージしやすくなるのか議論も盛り上がるし進めやすい。クライアントにもブラウザや携帯で確認してもらえるので伝わりやすい(コーディング済みデータと勘違いされたりすることもありましたがw)というところでした。うちの社内ではAdobe XDファンもいるようなので、Windows対応したら再度検討することになりそうですが、それまではしばしPrototyperを使ってみます。
 
みなさんのベストツール選びの参考になれば幸いです。 
 
Have a good summer! 

仕事のご依頼・お問い合わせ

この記事を書いた人
yonehama

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績