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

thumb_prototype

Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです!

2016年3月16日 追記:Adobeがリリースしたプロトタイピングツールも試してみました!→ Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた

ViewFlux

viewflux1

ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン画像を用意し、どのリンクがどのページにとぶのかといった指定ができます。バージョン管理も可能!各プロジェクトで個別URLが割り当てられるので、いちいちプロジェクトメンバーに画像を添付する必要もなく、シェアするのも楽ちんです。料金は月額$9〜199ですが、ベータ期間中はどのプランも無料!この機会にぜひ登録してみてください。

viewflux2

各ページの画像を用意。ホーム画面の画像をクリックします。

viewflux3

左側のアイコンの上から3つめ「Prototype」をクリック。リンク範囲をドラッグしてリンク先を選択します。目のアイコンをクリックし、プレビュー画面を見るとちゃんとリンクされていますね。

viewflux4

画面上の任意の場所にコメントすることもできます。チーム内のやりとりがスムーズにできそう。

Marvel

Marvelは主にタッチデバイスのプロトタイプ作成に役立つツール。上記ViewFlux同様必要なページのデザイン画像を用意し、リンクの指定や、どんなアニメーションでページが切り替わるのかなどをまとめられます。Dropboxのアカウントでサインインし、ファイルを連携させるので、プロジェクト用のフォルダーを作っておくと◯。シェア用にURLが生成されます。完全無料で有料プランはありません。

marvel1

ログインしたらDropboxのフォルダーから、プロジェクトのデザイン画像を選択します。

marvel2

画像のタイトルをクリックするとプレビュー表示されるので、タップできるエリア(リンクの場所)を四角で囲みます。するとフェードやフリップなど、ページ推移のアクションを選択できます。リンク先となる次のページのデザイン画像を選択すれば完了!プレビューで見てみるとページの切り替え等がわかりやすく表現されています。

Webydo

Webydoを使えば、コードを一切かかずに簡単なWebページを作成することができます。動的なワイヤーフレーム制作がはかどりそう。動きもサクサク!無料プランの他、有料のプレミアムプランが用意されています。月額$7.90のプレミアムプランでは独自ドメインOK・ページ数無制限などのプラスオプションがあります。

webydo1

Webydoに登録するとすぐに利用可能です。テンプレートを選んでカスタマイズすることも可能ですが、今回はブランクを選んでみました。

webydo2

上にあるメニューをドラッグ&ドロップで追加していきます。「Home」タブの横のプラスマークをクリックしてページを追加できます。

webydo3

ベータ版ですがモバイル用のテンプレートあり。

Webflow

webflow1

WebflowはWebydoと同様ドラッグアンドドロップでWebページが作成できるツール。こちらもワイヤーフレームに。有料プランは3種類から選べ、月額$16〜。独自ドメインが使えるようになります。また、プランによって作成できるサイトの数やサポートが変わります。

webflow2

細かく設定すれば本格的なサイトも作成できると思います。「ドラッグアンドドロップで」という点で言うとWebydoに比べて少し手間がかかるかも。用意されているテンプレートをカスタマイズしていった方が時間短縮になりそうです。

webflow3

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

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

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)