Webサイトのプロトタイプ制作に使える無料オンラインツール

Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです!
2016年3月16日 追記:Adobeがリリースしたプロトタイピングツールも試してみました!→ Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた
ViewFlux
ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン画像を用意し、どのリンクがどのページにとぶのかといった指定ができます。バージョン管理も可能!各プロジェクトで個別URLが割り当てられるので、いちいちプロジェクトメンバーに画像を添付する必要もなく、シェアするのも楽ちんです。料金は月額$9〜199ですが、ベータ期間中はどのプランも無料!この機会にぜひ登録してみてください。
各ページの画像を用意。ホーム画面の画像をクリックします。
左側のアイコンの上から3つめ「Prototype」をクリック。リンク範囲をドラッグしてリンク先を選択します。目のアイコンをクリックし、プレビュー画面を見るとちゃんとリンクされていますね。
画面上の任意の場所にコメントすることもできます。チーム内のやりとりがスムーズにできそう。
Marvel
Marvelは主にタッチデバイスのプロトタイプ作成に役立つツール。上記ViewFlux同様必要なページのデザイン画像を用意し、リンクの指定や、どんなアニメーションでページが切り替わるのかなどをまとめられます。Dropboxのアカウントでサインインし、ファイルを連携させるので、プロジェクト用のフォルダーを作っておくと◯。シェア用にURLが生成されます。完全無料で有料プランはありません。
ログインしたらDropboxのフォルダーから、プロジェクトのデザイン画像を選択します。
画像のタイトルをクリックするとプレビュー表示されるので、タップできるエリア(リンクの場所)を四角で囲みます。するとフェードやフリップなど、ページ推移のアクションを選択できます。リンク先となる次のページのデザイン画像を選択すれば完了!プレビューで見てみるとページの切り替え等がわかりやすく表現されています。
Webydo
Webydoを使えば、コードを一切かかずに簡単なWebページを作成することができます。動的なワイヤーフレーム制作がはかどりそう。動きもサクサク!無料プランの他、有料のプレミアムプランが用意されています。月額$7.90のプレミアムプランでは独自ドメインOK・ページ数無制限などのプラスオプションがあります。
Webydoに登録するとすぐに利用可能です。テンプレートを選んでカスタマイズすることも可能ですが、今回はブランクを選んでみました。
上にあるメニューをドラッグ&ドロップで追加していきます。「Home」タブの横のプラスマークをクリックしてページを追加できます。
ベータ版ですがモバイル用のテンプレートあり。
Webflow
WebflowはWebydoと同様ドラッグアンドドロップでWebページが作成できるツール。こちらもワイヤーフレームに。有料プランは3種類から選べ、月額$16〜。独自ドメインが使えるようになります。また、プランによって作成できるサイトの数やサポートが変わります。
細かく設定すれば本格的なサイトも作成できると思います。「ドラッグアンドドロップで」という点で言うとWebydoに比べて少し手間がかかるかも。用意されているテンプレートをカスタマイズしていった方が時間短縮になりそうです。
レスポンシブ対応!これは嬉しい!
他にも同様のサービスは増えてきていますが、今回は特に最近見かけたものを中心に紹介しました。レスポンシブ対応のワイヤーフレーム作成ツールがもっと増えれば助かるなあ…というのが本音。皆さんはどんなツールを使っていますか?