ブログ

プロダクトのクリック可能なプロトタイプが異なる理由と、それを作成するために使用するツール

Serhiy Khvashchuk 著 · · コメントなし

紙やホワイトボードにアイデアを書き出すことは、新しい製品を作成するときや再設計を行う際の重要な最初のステップです。アイデアをスケッチすることで、チームメンバーと他のステークホルダーは製品がどのように見えるかの早期視覚的イメージを得ることができますが、スケッチにはいくつかの制限があります。

ワイヤーフレーム – スケッチの次の段階 – でも、流れ、相互作用、アニメーションなどの動的な要素を捉えることはできません。製品マネージャー、デザイナー、開発者は静止画像でステークホルダーにユーザーエクスペリエンスを説明することはできません。そのため、 クリック可能なプロトタイプ は製品開発において非常に重要な役割を果たします。

まず、プロトタイプとは何かを明確にしておきます。

ワイヤーフレームはクリック可能なプロトタイプではありません。ビジュアルモックアップでもありません。静的なものはすべてプロトタイプではありません。同時に、クリック可能なプロトタイプは最終製品ではありません。最終製品のように見えません。例えば、高忠実度を持たず、素晴らしいように見えません。

製品の設計と開発は、概念化から最終的な納品までの複雑な反復プロセスです。特にLean原則を適用している場合、ユーザーのテストなしには不可能です。したがって、高レベルの相互作用を可能にする製品バージョンなしに効果的なテストは行えません。それがクリック可能なプロトタイプの目的です。

クリック可能なプロトタイプとは何ですか?

プロトタイプは製品シミュレーションであり、ユーザーが製品のさまざまな機能を通るインタラクティブなモックアップです。必ずしも美しく見える必要はありません – それには時間がかかるからです – しかし、流れ、製品を通じたユーザー体験がスムーズで一貫性があり、ナビゲーションが簡単であるかをテストする必要があります。

クリック可能なプロトタイプはテストとUXの観点から貴重なものであるだけでなく、早期段階のプロトタイプのユーザー体験によって製品開発や機能に影響を与える発見が生まれることもあります。

スケッチとワイヤーフレームを作成する

ワイヤーフレームは製品を通るユーザーの旅を再現することはできませんが、プロトコルソフトウェアを使用してロードおよび接続された高忠実度のワイヤーフレーム図をクリック可能なプロトタイプで使用できます。

これでプロトタイプとは何か – そして何ではないか – を明確にしました。それでは市場で最も人気のあるいくつかのプロトタイピングツールを見てみましょう。

クリック可能なプロトタイプを作成するためのツール

#1: InVision

200万人以上のデザイナーと数十の企業規模ブランドを顧客として抱える、Salesforce、Evernote、Nike、Sonyなど、 InVision は最も人気のあるプロトタイピングツールの一つです。料金は1つのプロトタイプで無料から始まり、月額25ドルから無制限のプロトタイプが利用可能です。

InVisionプロトタイピング
Invisionアプリインターフェース

InVisionはクリーンで使いやすいインターフェースを持ち、複雑すぎず、シンプルすぎません。3つの事前ロードされたデモ(および動画)があり、InVisionの使用方法を理解するのに役立ちます。コラボレーションは簡単で、タブが設計されており、同僚やクライアントとデザインを共有するのが簡単です。

#2: Webflow

Webflowプロトタイプ

Webflow は、プロトタイプ用のCMSをリリースして以来、従来のプロトタイピングツールから離れており、開発者がそれをWordPressより好むようにしています。ボタンを押すだけで、デザインを本番準備完了サイトに変換できます。

プロトタイプをクリーンで意味のあるコードに変換することも簡単で、レスポンシブ機能と、Google DriveやSlackなど400以上のサービスと接続するのに簡単な機能があります。無料トライアルがあり、基本ホスティングは月額15ドルから始まります。

#3: Proto.io

Proto.ioでのプロトタイピング

テンプレートを組み込みで設計し、 Proto.io は40万人以上の専門家と熱心な個人によって使用されています。SketchやPhotoshopからデザインを直接インポートし、プロトタイプを作成し、プレビューし、テストできます。これは複数の一般的なテストプラットフォームでライブユーザーのテストを含むことができます。

15日間の無料トライアルから始めて、$24/月(1アカウント、5プロジェクト)から始まる有料プランに移行し、最大10ユーザーと30アクティブプロジェクトの企業アカウントまで、$160で利用可能です。

#4: Justinmind

Justinmindプロトタイプ

Justinmind は使いやすく、期待を裏切らないです。アカウントを作成するには約10秒かかり、その後、他の人と共有し、フィードバックを得られるインタラクティブなワイヤーフレーム製品を作成できます。

残念ながら、永久無料トライアルは多少制限があります。しかし、複数のプロトタイプを作成する予定がある場合は、$19/月(年払い、または月額29ドル)から始まる価格プランにアップグレードすることを検討してください。

#5: Origami Studio

Origami Studio

Facebookが内部のデザインおよびビルドプロセスの一環として作成した Origami Studio はApple開発者向けに無料でリリースされました。他のプロトタイピングツールと比べてダウンロード、インストール、使用にはより多くの作業が必要ですが、一度起動すればOrigami Liveを使用してAndroidデバイス上の他の人とデザインを共有できます。

Origamiはインタラクティブなプロトタイプをテストする最も現実的な方法の一つで、Sketchデザイン用のアップロード機能があります。

製品のアイデアを現実にするのは長いプロセスです。有用なフィードバックを得て、人々が愛する製品を設計するために必要な反復処理を行うのに時間を有効に使うことができます。しかし、適切なツールとプロセスがないとそれが起こることはできません。つまり、スケッチからクリック可能なプロトタイプの基盤となるワイヤーフレームやマックアップへと変換する必要があります。プロトタイプがないと、ユーザーは製品機能とフローをテストできず、将来のコストのかかる失敗を回避するために次のデザインおよび開発フェーズに情報を提供することはできません。

スタートアップの夢を現実に変える。アイデアからプロトタイプまで48時間、そして市場準備完了アプリまで2週間のみで。30分以内に見積もりを取得してください、 KFG International.