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に比べて少し手間がかかるかも。用意されているテンプレートをカスタマイズしていった方が時間短縮になりそうです。

レスポンシブ対応！これは嬉しい！

他にも同様のサービスは増えてきていますが、今回は特に最近見かけたものを中心に紹介しました。レスポンシブ対応のワイヤーフレーム作成ツールがもっと増えれば助かるなあ…というのが本音。皆さんはどんなツールを使っていますか？