Webサイト制作の場で「プロトタイプ」の重要度が増しています。元々はゲームやソフトウェアなどの開発現場や、製品の製造現場で作成され、動作確認として活用されてきました。

プロトタイプを作成することで、初期段階で問題点や改善点を確認できるようになります。UIやUXデザインの重要度が増している今、活用しない手はありません。

本記事では、プロトタイプの作成方法やおすすめツールを紹介します。

プロトタイプとは、試作品のこと

プロトタイプとは、Webサイト制作の場において「試作品」という意味です。構想中のアイデアの具現化に用いられ、機能性や操作性のテスト目的で使用されます。

プロトタイプを作成しない場合、思いついたビジネスアイディアをすべて実装して製品やサービスを作ってしまうことになり、莫大なコストが発生するおそれがあります。しかしプロトタイプがあれば、実装前に必要な機能を議論でき、時間もコストも抑えることが可能です。

このように、プロトタイプは実際に動作するかどうかを確認することができるため、製品やサービスの問題点や課題点の早期発見につながります。結果的に、最終製品やサービスの品質を向上させることができ、UI／UX向上が期待できるでしょう。

ワイヤーフレームやモックアップとの違い

Webサイト制作でプロトタイプと混同しやすいものとして、ワイヤーフレームとモックアップがありますが、これらは制作順序と制作意図が明確に異なります。

まず制作順序としては、ワイヤーフレーム→モックアップ→プロトタイプの順番です。

ワイヤーフレームは、Webサイトのレイアウトを決めるための設計図です。どこに何をどう配置するのか、情報設計を行う部分になります。

このワイヤーフレームに配色や色、フォント、画像などデザイン部分を追加したものがモックアップです。主にデザインを機能実装前に議論するために、必要な工程となります。

そしてプロトタイプは、モックアップに操作性や機能面など動的な部分を追加した完成品を想定したものです。試作品の時点で、使いにくい部分やイメージと違う部分を検証することで、完成後の修正を減らすことを目的にしています。

Webデザインにおけるプロトタイプの種類2つ

Webデザインにおけるプロトタイプを2つ紹介します。

・ペーパープロトタイプ
・デザインプロトタイプ

1. ペーパープロトタイプ

イメージしたデザインを紙で制作するのがペーパープロトタイプです。ワイヤーフレームを設計する前に作成します。

用意するのは紙とペンのみ。まずはざっくりとしたレイアウトを書いていきます。続いて画面の画像、アイコン、ボタンなど表示内容を書き込みます。色はつけず、作り込みすぎないことがポイントです。

素早く作成でき、色々なアイディアを書き出して柔軟にプロトタイプの形を変えられます。専門的なスキルがなくても制作できるため、制作チーム以外の人に参加してもらい、フィードバックを得ることもできるでしょう。本格的に制作に入る前に使い勝手や必要な機能を検証できるため、仕様の決定に役立ちます。

2. デザインプロトタイプ

モックアップ作成後に用意するのがデザインプロトタイプです。ワイヤーフレームで整理した情報設計にデザインをつけたのがモックアップで、そこに機能面をつけて作成したものがデザインプロトタイプになります。

ツールを使って作成することでリアリティが実現できます。ほぼ完成形と同等のため、画面遷移やアニメーションなど、動きを伴うイメージを確認でき、ユーザー使用時の体験が再現できます。デザインプロトタイプはFigma、Sketchなどのプロトタイピングツールを使って作成することが多いです。

プロトタイプを作成する3つのメリット

プロトタイプ作成には手間がかかるため、作成するかどうかを悩む方もいるでしょう。ここでは作成するメリットを3つ紹介します。

・Webサイトの方向性のすり合わせができる
・Webサイトの質を高めることができる
・修正リスクを低減できる

1. Webサイトの方向性のすり合わせができる

プロトタイプは具体的な機能性を共有できるため、クライアントや制作関係者との方向性のすり合わせに役立ちます。結果として、コミュニケーションも円滑になり、必要な機能やデザインなどを洗い出して修正・改良をしていくことがスムーズになるでしょう。また完成形とほぼ同じのため、実際サイトを見て使い勝手は良いかなど、ユーザー視点での検証をすることも可能です。

プロトタイプを作成しない場合、「ボタンを追加して欲しい」など、言葉で伝えることになります。追加したものの位置がイメージと違うなど、クライアントと制作会社側の認識が完全一致することは困難でしょう。こうしたイメージもプロトタイプがあれば、正確に伝えることができます。

2. Webサイトの質を高めることができる

プロトタイプがあることで、導線はおかしくないか、遷移先の画面は問題ないかなど、操作性の確認ができます。遷移時のアニメーション表示速度が遅いなど、動作に難があればユーザーの離脱につながるため、プロトタイプの時点でトラブルを浮き彫りにすることは重要です。

プロトタイプを用いて検証と改善を重ねていけば、使いやすいサイトへブラッシュアップした状態でリリースできるでしょう。

3. 修正リスクを低減できる

関係者で共通の感性を持っているとは限りません。完成イメージを文字で伝えることは難しく、認識違いも起こるでしょう。共通認識がなく、曖昧なイメージのまま制作政策を進めてしまうと、不要な機能を実装してしまったり、リリースのタイミングが押してしまったりするおそれもあります。

しかしプロトタイプがあれば、完成形のイメージが具現化できるため、言葉では伝えきれない部分まで共有できます。

結果として問題点の早期発見と改善ができ、最終段階になってからの大幅修正を回避することにもつながるでしょう。

プロトタイプを作成する際の注意点3つ

プロトタイプはあくまでも試作品であり、完成品ではありません。ここではプロトタイプを作成する際の注意点を3つ紹介します。

・詳細を作り込まない
・担当者の負担が大きくなる場合がある
・評価者を増やしすぎない

1. 詳細を作り込まない

プロトタイプ作成には終わりがなく、作り込もうと思えば、いくらでも作りこめてしまいます。結果として、人的コストがかかりすぎてしまったり、スケジュールが遅延してしまったりするリスクもあるため、詳細を作り込まないように意識しましょう。

「なにをテストするために試作品を作るのか」という目的意識を忘れず、スピード感を持って行うことが重要です。

2. 担当者の負担が大きくなる場合がある

プロトタイプは、試作→評価→改善のサイクルを繰り返すことになります。

担当者がプロトタイプの専属であれば問題ありませんが、社内でWebサイト制作を行う場合は、兼任していることも多いため、担当者の負担が大きくなるおそれもあります。

担当者の負担を減らすために、プロトタイプによる試作期間や試作回数を決めておくことが有効です。

また、プロトタイプ作成が得意なWebデザイナーやエンジニアに業務委託などで依頼する方法も有効でしょう。

3. 評価者を増やしすぎない

プロトタイプは、クライアントや制作関係者に評価をしてもらって改善を繰り返します。このとき評価者が多くなってしまうと、確認時間が長くなってしまったり、フィードバックが多くて混乱してしまったりすることがあるため、注意が必要です。

ある程度評価者を絞ったうえで、改善を進めるほうが混乱せず、スムーズに改善することができるでしょう。

プロトタイピングツールの種類3つ

プロトタイピングツールは3種類に分類することができます。

・トランジション型
・インタラクション型
・複合型

順に解説していきます。

1. トランジション型

画面遷移が可能なツールです。

Webサイトやアプリの画面の操作フローの確認に用います。全体像を掴めるため、課題把握がしやすくなります。不要な画面の削除など、情報設計の最適化にもつながります。

2. インタラクション型

一つの画面内でアニメーションや動きの確認ができるツールです。制作する難易度はトランジション型よりも高く、習得にも時間がかかりますが、コーディング不要のサービスも存在します。より実装イメージに近い状態で再現し、検証することができます。

3. 複合型

トランジション型とインタラクション型の両方の機能を有したツールです。機能が豊富なため、コストがかかる傾向にありますが、画面遷移とアニメーション両方を確認したい方におすすめです。

おすすめのプロトタイプタイピングツール10選

ここではおすすめのプロトタイピングツールを10個紹介します。簡単に作れるものから本格的なものまでさまざまです。

・Figma
・Sketch
・Adobe XD
・Flinto
・Prott
・InVision
・UX pin
・Framer
・Pixso
・ProtoPie

1. Figma

▲出典：FigmaFigmaはブラウザで作業することも、Figmaをダウンロードしてオフラインでデスクトップで作業することも可能なツールです。利便性が高く、URLを共有すれば複数の編集者と同時に作業することができます。スタータープランは共同編集者が最大2人など多少の制限はあるものの、無料で使うこともできます。

画面遷移前と後の画面を直感的につなぐだけで、画面遷移が設定できます。操作が難しくなく、デザイン要素を保存することができます。作業の効率化にも役立つため、クライアントとの確認も素早く行うことができるでしょう。

同時編集で効率よく作業したい方におすすめです。

2. Sketch

▲出典：SketchSketchはMac専用のデザインツールです。UIデザインに特化した機能のほか、豊富なプラグインが魅力です。ファイルもツールの中では軽量の部類に入るので、大規模なサービスをデザインする時に重宝します。ドラッグ＆ドロップで操作が可能ですが、非デザイナーでも使いやすいFigmaに対し、Sketchは少し難易度が上がります。

関係者全員で共有しながらプロトタイプを作成したい方におすすめのツールです。同じドキュメントをチームでリアルタイムに共有しながら作成できます。また、フィードバックと改善をツール内でチェックできるため、迅速に開発者に共有することも可能です。

3. Adobe XD

▲出典：Adobe XD

Adobe XDは、Adobeが開発・提供しているUI/UXデザインツールです。最大の特徴はAdobeのツール連携がスムーズにできることです。小規模のデザインであれば無料プランでも十分作成できます。コーディングなどの知識不要で簡単にプロトタイプの作成が可能です。

細かいレイアウト調整に対応しており、実際のレイアウトを確認しながら編集が可能です。Adobe XDで使えるボタンやアイコンなどの種類を複数揃えたキットもあり、テンプレートも多数あります。

普段からAdobe製品を使っていて、手軽に本格的なプロトタイプを作成したい人におすすめです。特に使い方を覚えることなく、使いこなすことができます。

4. Flinto

▲出典：FlintoFlintoはインタラクションに特化したツールです。画面遷移はトランジション型のように直感的にできます。アニメーションで3D表現が実現できることが大きな特徴です。コードを書かずに直感的に操作できるため、初心者やノンプログラミングで制作したい場合おすすめです。

Sketchプラグインを出しているので、Sketchで作成した図形やテキストのアニメーション化をFlintoを行うなど、連携することもできます。マルチプレイヤー編集・簡単な共有などチームで作業するのに適した多数の機能を有しています。

5. Prott

▲出典：ProttGoodpatchが提供している、コード不要で本格的なプロトタイプが作成できるツールです。プロトタイピングツールは海外ツールが多いため、日本語でサポートが欲しい方におすすめです。

1. 画像を取り込み
2. つなぎ合わせ
3. アニメーションを指定する

だけの3ステップでプロトタイプが作成できます。作成したデザインはプレビュー機能により実機で触れることもできます。ユーザー体験を検証するだけでなく、ユーザーテストにも使用できます。

また、作成したデザインはメール、URL、QRコードで共有可能。シェアしたあとはPrott上でフィードバックを手軽に行うこともできます。

6. InVision

▲出典：InVisionアイディア、コンセプト作りからデザイン、開発までの設計が行えるツールです。ワークフローを一元化することができ、制作からフィードバック、改善など、ツール内で迅速に対応することができます。全世界ユーザー数400万人超のグローバルに使われているトランジション型ツールであり、英語のみの対応となりますが、操作自体は難しくありません。コード不要で簡単に作成ができます。

LIVE SHAREという機能があり、リアルタイムでコメントを残したり、音声通話をすることもできます。検証の際、チームのメンバーでInVisionに集合し、リアルタイムでフィードバックを行うことで効率化にもつながるでしょう。また、Sketchを連携することにより、デザインの変更やアニメーションを簡単に反映することができます。

7. UX pin

▲出典：UX pinUXデザインに必要な機能を備えたツールです。ツール内でやりとりができるため、同じプロトタイプ内に誰がいて何の作業をしているのかが確認できます。フィードバックはプロトタイプ上に直接コメントできるため、リアルタイムでのフィードバックに役立ちます。画面共有機能によりイメージの簡単もお手軽にできるため、クライアントのイメージのすり合わせもスムーズに行えるでしょう。

SketchやPhotoshopからダイレクトに素材の読み込みが可能なうえ、パソコン、iPhone、androidアプリに対応した各種素材やインタラクションが利用可能です。非デザイナーでもワイヤーフレームを作成できる機能やプロセス管理できる機能も備わっており、プロトタイプ作成に必要な作業をUX pin単体で遂行可能です。

8. Framer

▲出典：FramerFramerは元々はコードベースで動作するツールでしたが、近年デザイン作成機能の追加などもあり、デザインの作成とプロトタイプの作成が並行して行えるツールとなっています。

SketchやPhotoshop、Figma、After Effectsからデザインをインポートして、Framerでプロトタイプを作ることも可能です。

Framerは複合型のプロトタイピングツールのため、単なる画面遷移だけではなく、アニメーションのような「動き」を細かく作り込むことができます。数時間でアニメーションを作成し、追加できるのも大きな特徴です。

9. Pixso

▲出典：PixsoPixsoは、使い方が直感的に分かるシンプルな作りが魅力のツールです。日本語のサポートも標準で搭載しているので、初めてツールを触る人にも使いやすいのが特徴です。デモンストレーションで仕上がりを視覚化、大量のプロトタイピングテンプレート、自動レイアウトツールなど、豊富な機能を有していて、簡単にプロトタイプに取り掛かることができます。

プロジェクトに参加するデザイナーとクラウド上で共同作業が可能なため、リアルタイムで確認しながらの作業が可能です。クラウド上で一括管理できるため、ワンストップでプロジェクトを進めることもできます。

10. ProtoPie

▲出典：ProtoPieProtoPieは、トラジション型のような画面遷移と、インタラクション型のようなアニメーション、両方再現できる複合型ツールです。Figma、Adobe XD、Sketchで制作したデザインをインポートして編集することもできるなど、様々なデザインツールとの連携が可能です。

複雑なアニメーション、タップ・クリック時の細かな動きまで、様々な動きを伴うプロトタイプの作成が可能です。実際のプロダクトに限りなく近いプロトタイプを作れますが、コードが不要のため使用難易度は低く、直感的に操作できます。

ProtoPieで作成したプロトタイプはURLで共有・公開が可能です。世界中のクリエイターがサンプルを公開しているので、ダウンロードしてサンプルファイルとして触ることで、ヒントを得ることもできるでしょう。

プロトタイプを含めたWebデザインを依頼するならクロスデザイナーがおすすめ！

プロトタイプの種類やツール、メリットについてお伝えしてきました。プロトタイプを作成することで、Webサイトの問題点や課題点の早期発見に役立つでしょう。

自社のWebサイト制作において、検証したいことを明確にしてからツールを選定することも重要です。ツールは無料トライアルが準備されていることも多いため、まずは操作感や機能を実際に使ってみてから有料版を検討しましょう。

なお、プロトタイプを含めたWebデザインを依頼するならクロスデザイナーがおすすめです。

クロスデザイナーは、国内最大規模のデザイナー登録者から、厳正したデザイナーを最適なタイミングでご提案するフリーランスデザイナー専門のエージェントサービスです。現在、7,000人以上のデザイナーが在籍しています。

登録しているデザイナーとの合意があれば正社員採用も可能です。また、スカウトや人材紹介機能もあるため、採用難易度の高い、即戦力デザイナーの採用機会を最大限サポートしています。

エージェントに相談いただければ、最短3営業日でのアサインも可能です。また、週2〜3日の柔軟な依頼も可能なので、自社の作業量に応じて効率的に外注することができます。

以下では、クロスデザイナーのサービス資料を無料でダウンロードできます。ぜひ貴社の採用活動にお役立てください。

クロスデザイナー｜法人・クライアント向けサービス資料|フリーランスデザイナー・業務委託採用｜クロスデザイナー

xdesigner.jp