ハイファイvs ローファイ〜プロトタイピングの比較〜

プロトタイピングは、デザイナーが最終製品にコミットする前に、デザインのアイデアやユーザーフローをテストすることを可能にするUXデザインのプロセスにおいて不可欠な要素です。

プロトタイプは、何が有効かを検証するのに役立つだけでなく、不足している要素や機能を明らかにすることもできます。プロトタイピングの段階がなければ、企業は最終製品のために貴重なリソースを浪費してしまうでしょう。

ローファイプロトタイプでは、情報アーキテクチャとユーザーフローをテストし、ハイファイプロトタイプでは、UI要素とユーザーが最終デザインにどのように関わるかを明らかにすることができます。

この記事では、ローファイプロトタイプとハイファイプロトタイプについて、どちらをどのような場面で使うべきかをご紹介します。

プロトタイプとは？

プロトタイプは、ワイヤーフレームやモックアップをクリック可能な要素で使用し、インタラクションやユーザーフローをシミュレートするものです。
（多くの人は、プロトタイプを静的なワイヤーフレームやモックアップと混同しています。）

UXチームは、初期の設計段階で忠実度の低いペーパープロトタイプを作成し、ユーザーが製品内をどのようにナビゲートするかを示すこともあります。

ローファイプロトタイピング

UXデザイナーが紙とデジタルのどちらのワイヤーフレームを使うにせよ、ローファイプロトタイピングはデザインのアイデアとユーザーフローをテストする最初のステップとなります。

ローファイプロトタイプは、手描きまたは色やコンテンツのない基本的なデジタルワイヤーフレームのどちらかです。これらのローテクデザインにより、UXチームは各スクリーンのレイアウトを視覚化し、ナビゲーションをテストし、ユーザーフローを体験することができます。

デジタルローファイプロトタイプの好例は、典型的なeコマースのチェックアウトフロー（お会計）です。ワイヤーフレームやローファイモックアップを作成した後、UXデザイナーはボタンやリンクを使って各画面をつなげ、チェックアウトフローを作成します。

【チェックアウトフローのイメージ】
ホームページ＞商品ページ＞カート＞支払い／チェックアウト＞確認＞ありがとうございました。

ローファイプロトタイプを使用することで、UXデザイナーはチェックアウトフローを体験し、各画面が正しい要素を持ち、ユーザーがフロー全体にわたって前後に移動できることを確認できます。

ローファイプロトタイプの種類

ペーパープロトタイプは、チームがユーザーフローを作成し、インタラクションを想像するための最も速い方法であり、フローやイテレーションを開発する時間が限られているデザインスプリントで特に有効です。机の上やホワイトボードの上に紙の「画面」を並べ、チームでフローを視覚化することで、効果的なコラボレーションとアイデアの共有が可能になります。どの要素もクリックすることはできませんが、ペーパープロトタイプによって画面レイアウトやフローを設計することができ、最初のデジタルワイヤーフレームの作成に必要な時間を短縮することができます。
クリック可能なワイヤーフレームは、画面や流れを忠実度の低いデジタルで表現したものです。各フレームは通常、シンプルな線と図形で構成され、ナビゲーションのためのCTAが目立つようになります。UXPinのような最新のUXツールは、コメント付きの効果的なコラボレーションを可能にし、紙のプロトタイピングセッションを再現することができます。

ローファイプロトタイピングの長所

• 速さ：デザイナーはテストやミーティング中での変更を即座に完結でき、フレッシュなアイデアを視覚化することができます。
• 安価：チームは低コストで複数のバリエーションやイテレーションをテストすることができます。
• アクセシブル：シンプルな線と形しか使わないので、誰でも作成することができ、デザインチーム以外のメンバーも積極的に参加する事ができます。

ローファイプロトタイプの短所

• 不十分なユーザビリティテスト：基本的なレイアウトと機能のため、テスト時に正確な結果が得られません。また、ステークホルダーが最終製品をイメージしづらく、フィードバックが得られなかったり、混乱が生じたりする可能性があります。
  更に色やインタラクション、トランジション、アニメーションがない場合、退屈で物足りなく感じられるかもしれません。
  

ハイファイプロトタイピング

ハイファイプロトタイピングは、デジタル製品が具体的に動き出す場です。
カラーとコンテンツを含むモックアップを使用し、最終製品に近い外観と機能を持ちます。
さらに、インタラクションやトランジション、アニメーションを追加して、没入感のあるユーザーエクスペリエンスを実現することができます。

再びeコマースの例にみると、デザイナーは商品画像や色のついたCTAを入れることで、ユーザーを特定のフローに誘導することができます（チェックアウトを完了させるなど）。

UXデザイナーは、新しい商品を追加するときに、ユーザーのカートをオーバーレイで表示するなどのインタラクションを追加することもできます。また、チェックアウトフローにおけるユーザーの動きを示すために、画面遷移を追加することもできます。

ハイファイプロトタイピングの長所

• 最終製品に近いリアリティを再現：関係者に最終製品の正確な表現（インタラクション、アニメーション、トランジション）を提供し、ユーザビリティ調査において有意義なフィードバックを得る事ができる。
• 資金調達に役立つ：新興企業が初期段階の資金を獲得したり、製品コンセプトをクライアントに売り込んだりするのに役立ちます。

UXPin Mergeのプロトタイプを使用する研究チームは、ユーザビリティ調査やテストからより良い結果を得て、市場投入までの時間を短縮することができます。

ハイファイプロトタイプの短所

• 高コスト：詳細な変更を加えるために多くの時間を費やすため。
• かえって制作時間がかかる：明確な目標がない場合、プロトタイプの作成中に「完璧な」インタラクション、アニメーション、トランジションにすることに気を取られることがあり、不必要な遅れにつながる可能性があります。

どのプロトタイプを、いつ使うか？

ハイファイプロトタイピングとローファイプロトタイピングの基礎が固まったところで、次に、使用シーンについて考えていきましょう。

ローファイプロトタイプを使用するタイミング

デザインプロセスの初期段階に最適です。ローテクなペーパーデザインは、コラボレーションにも最適で、デザインスプリントに最適なスピードで多くのアイデアを検討することができます。
デジタルのローファイプロトタイプは、モックアップを作成する前に、UXチームが情報アーキテクチャとユーザーフローを整理するのに役立ちます。

ローファイプロトタイプが適さないタイミング

基本的なユーザーフローをテストするのであれば、忠実度の低いプロトタイプは、ユーザビリティ調査において意味のあるフィードバックを提供しません。ユーザーは、製品の不慣れさに気を取られ、間違った要素に集中してしまう可能性があります。

ハイファイプロトタイプを使用するタイミング

エンジニアリングに渡す前のデザインプロセスの最終段階での使用に最適です。。
UXチームがローファイプロトタイピングからハイファイプロトタイピングに移行するのは、デザイナーがモックアップを完成させて、少なくとも1つのテスト用ユーザーフローを完成させた後でなければなりません。このモックアップには、クリック可能なリンクや要素、色、コンテンツを含める必要がありますが、ユーザビリティ調査の第一ラウンドでは、インタラクション、アニメーション、トランジションは必要ない場合があります。

ハイファイプロトタイプは、レイアウトのテストや、ページの遷移やスクロールがコンテンツや要素にどのように影響するかをテストするのに役立ちます。また、UXデザイナーは、インタラクション、アニメーション、トランジションがユーザーエクスペリエンスにどのような影響を与えるかをテストすることもできます。

ハイファイプロトタイプが適さないタイミング

UXデザイナーは、研究者がローファイプロトタイプを徹底的にテストし、コンテンツや色を含むモックアップを作成する前に、ハイファイプロトタイプを作成してはいけません。
仮にチームがデザインコンセプトを迅速にテストしたい場合でも、ハイファイプロトタイプを作成・編集することは、プロジェクトの前進を大きく妨げることになります。

UXPin – 最高のプロトタイピングツール

UXPinは、デザインプロセスのあらゆる段階でプロトタイプを作成するための強力なツールです。

UXPinのローファイプロトタイピング

ボタン、入力フィールド、ドロップダウン、ラジオ、チェックボックス、アイコンなどをわずか数クリックで作成できます。

ワイヤーフレームが完成したら、タップ/クリックのインタラクションでページ間の基本的なローファイナビゲーションを作ることができます。ワンクリックで縦スクロールや横スクロールを実現できます。

ローファイプロトタイプが完成したら、ブラウザでデザインをプレビューしたり、UXPin Mirrorを使用してあらゆるデバイスでテストできます。

コメント機能を使用して、デザイナーにフィードバックを提供したり、変更箇所を割り当てたりできます。デザイナーは自分用のプライベートノートを作成し、完了したら[解決]をクリックできます。

UXPinでのハイファイプロトタイピング

ローファイプロトタイピングが完了したら、UXチームはUXPinでハイファイプロトタイピングを開始することができます。

Figma、Adobe XD、その他の一般的なデザインツールを使用したことがある方なら、UXPinの追加機能を気に入るでしょう。

再利用可能なコンポーネントを作成して一貫性を維持し、ページレイアウトをすばやく構築できます。変更が必要な場合は、マスターを編集するだけで、すべてのより小さいコンポーネントに変更がコピーされます。

UXPinの変数機能により、ユーザー入力のデータを保存し、提供されたデータに基づいてアクションを実行することができます。たとえば、サインアップのページで、ユーザーは自分の名前を入力します。次のページでは、その名前 (仮にジョンとします) を使って、「UXPinへようこそ、ジョン！」という体験をパーソナライズすることができます。

また、チェックアウト時にどのようにクレジットカード情報を取得し、表示するかをユーザーがより明確に感じられるように、ダミーのクレジットカード情報を保存しておくこともできます。

UXPin Mergeを使用すると、DesignOpsはプロトタイピングを次のレベルに進めることができます。GitリポジトリにあるReactコンポーネントやStorybookのコンポーネントを使用して、忠実度の高いプロトタイプをデザインできます。

プロダクションコードから生成された機能的かつインタラクティブな要素を作成し、ユーザビリティ担当者、利害関係者、および顧客に、他のデザインツールでは得られない「最終製品の体験」を提供します。

今すぐUXPinでプロトタイピングを始める

14日間無料トライアルで、プロトタイピングの無限の可能性を体験してみてください。