Adobe CCがワイヤーフレームにできることを誰が知っていましたか？

ワイヤーフレーミングは、Webサイト、アプリケーション、ソフトウェア製品など、あらゆるユーザーインターフェイスを設計するための主要なステップです。 ビジュアル、色、タイポグラフィ、スタイル、効果の形で気を散らすことなく、コンテンツ階層とユーザーエクスペリエンスの定義に集中できます。

忠実度の低いワイヤーフレームとプロトタイプを作成すると、プロセスの早い段階でより頻繁にテストと反復を行うのに役立ちます。 忠実度の低いワイヤーフレームにより、設計者はより速く作業し、ユーザーが気に入る製品を開発できます。

野生では、さまざまなワイヤーフレーミングツールから選択できます。 どちらを選択するかは、個人の好みとワークフロースタイルによって異なります。

印刷の世界からデジタルデザインに移行した多くのデザイナーと同じように、私はIllustrator、InDesign、PhotoshopなどのAdobeアプリケーションのエキスパートです。 いつでもどこからでも効率的かつ直感的に使用できます（夜中に誰かが私を起こしてコーヒーを飲むことを拒否した場合でも）。

当然のことながら、これらの用途の広いアプリケーションは、Webおよびアプリケーションのビジュアルデザインを行うために使用するツールにもなっています。 したがって、ワークフローを最も効率的にするために、それらをワイヤーフレーミングにも使用します。

プロジェクトごとに、私は通常、紙に、またはオフィスの机の近くにいない場合はiPadやスマートフォンの画面に非常にラフなスケッチを描くことからデザインを開始します。 これらのスケッチは、選択した概念に関する私の考えに焦点を当てるためにあります。 クライアントはおそらくそれらのいずれも見ることはありません。 自分のアイデアがうまくいくと確信したら、ワイヤーフレーミングに移ります。 私は通常、Adobe IllustratorとInDesignを組み合わせて使用​​します。ほとんどのUIキット要素を作成するためにIllustratorを使用し、ワイヤーフレーミング自体のためにInDesignを使用します。

これらのツールをワイヤーフレーミングワークフローに組み込む方法については、この記事の後半で段階的に説明しますが、詳細に入る前に、InDesignを主要なワイヤーフレーミングツールとして使用することの長所と短所を示します。 。

AdobeInDesignをワイヤーフレームおよびプロトタイピングツールとして使用することの長所と短所

しばらくの間、Adobe InDesignはデスクトップパブリッシングアプリケーションであるだけでなく、デジタルパブリッシングやEPUB作成にも広く使用されてきました。 ワイヤーフレーミングにも適したツールである理由もいくつかあります。

• マスターページ–マスターページを使用して、ナビゲーション、ヘッダー、フッターなどのグローバルデザイン要素をすばやく一貫して適用できます。 必要な数のマスターページを作成でき、その上に、1つのマスターを別のマスターに基づいて作成できます。
• ソリッドグリッドのサポート–さまざまな種類のグリッドを簡単に作成して適用し、列を補完し、水平ガイドと垂直ガイドを使用してモジュールを作成し、サブグリッドを使用して複雑さと精度を高めることができます。
• 代替レイアウト–同じファイル内の複数のデバイスと方向のワイヤーフレームを有効にします。
• CCライブラリ–一般的に使用されるオブジェクト、色、文字、段落スタイルなど、さまざまな再利用可能なアセットのライブラリを生成します。 InDesign、Illustrator、Photoshop、またはAdobeCaptureモバイルアプリのいずれかを使用してアセットを作成します。
• レイヤー–ワイヤーフレーム内でオブジェクトとコンテンツを選択的に整理​​、グループ化、表示/非表示、およびロック/ロック解除する機能を提供します。 複数ページのInDesignドキュメントのすべてのページには、同じ数と順序のレイヤーがあります。 レイヤーに加えたすべての変更は、表示、積み重ね順序、削除など、すべてのページに反映されます。
• スタイルとテーブル– InDesignスタイルを使用して、テキスト、オブジェクト、およびテーブルの外観を完全に制御できます。 スタイルは相互に継承でき、ドキュメント全体で目的のフォーマットを簡単にカスケードできます。 ワイヤーフレームコンテンツ要素またはレイアウト目的のヘルパーとして使用するテーブルの作成とフォーマットは非常に簡単です。
• Typekitの統合–忠実度の高いモックアップでは、デスクトップに同期する任意のTypekitフォントを使用できます。
• インタラクティビティとアニメーション– Adob​​e InDesignに組み込まれているインタラクティビティとアニメーション機能を使用して、インタラクションプロトタイピング用のさまざまな状態のWebまたはアプリケーションデザイン要素を作成できます。 ほとんどの人は、デジタルパブリッシングソリューションや固定レイアウトのEPUBエクスポート用の雑誌を作成するときにこれらの機能を使用しますが、プロトタイピングにも適しています。
• エクスポートオプション– InDesignは、作成したワイヤーフレームとプロトタイプをさまざまな形式でエクスポートできます。 ほとんどの場合、インタラクティブPDFが最適な形式ですが、オンライン公開機能を使用して、ドキュメントをインタラクティブHTMLに変換し、最新のデスクトップおよびモバイルブラウザーで表示することもできます。 残念ながら、Publish Onlineを使用してエクスポートを制御することはできず、エクスポートされたファイルはAdobeサーバーでホストされます。 プロトタイプURLをクライアントと共有するか、サイトに埋め込むことができます。 より詳細な制御とHTML5への直接エクスポートについては、AjarProductionsのin5拡張機能を使用できます。

Adobe InDesignには、ワイヤーフレームおよびプロトタイピングツールとして使用できる多くの長所がありますが、いくつかの短所もあります。

• 事前定義されたワイヤーフレームテンプレートと要素の欠如– InDesignはワイヤーフレーミングツールを意図していないため、テンプレートとオブジェクトアセットを自分で作成して準備する必要があります。 （この手順の処理方法については、この記事の後半で説明します。）幸いなことに、この作業のほとんどは1回だけ行われ、数時間の作業の後、すぐに開始できます。 InDesignのワイヤーフレーミング。 また、インターネットからダウンロードできるアセットやワイヤーフレームキットがたくさんあるので、自分ですべてを描く必要はありません。
• インタラクティブ機能とアニメーション機能には制限があります–ページを簡単に接続し、インタラクティブ機能とアニメーションを追加できますが、プロセスに時間がかかる場合があります。 単純な対話ツールのいくつかは、あまり直感的ではありません。 InDesignのインタラクティブ機能を使用したことがない場合は、それらを効率的に適用する前に、わずかな学習曲線を克服する必要があります。
• InDesignドキュメントをレイヤードPSDファイルとして直接エクスポートすることはできません– Adob​​e Photoshopでビジュアルデザインを行い、デザインを構築するためにワイヤーフレーム要素を分離したい場合は、最初にワイヤーフレームをPDFにエクスポートする必要があります。 次に、IllustratorでPDFを開き、レイヤー化されたPSDとして再度エクスポートする必要があります。 Macで作業している人は、Rob Dayが作成した無料のスクリプトを使用して、InDesignファイルをレイヤードPSDとして保存することもできます。

適切なワイヤーフレームの準備は作業の半分です

作業環境を微調整することから始めます。 この種の作業用にIllustratorとInDesignにまだ保存されたワークスペースがない場合は、作成します。 Illustratorでは、事前定義されたWebワークスペースから始めて、好みに合わせて調整します。頻繁に使用しないパネルを閉じ、使用するパネルを必ず開いてから、作業スタイルに合わせて配置します。

完了したら、[ウィンドウ]>[ワークスペース]>[新しいワークスペース...]を選択してワークスペースを保存します。デジタルパブリッシングワークスペースをスターターとして使用して、InDesignで同じことを行います。

ワイヤーフレーム/モックアップ/プロトタイプキットの組み立て

IllustratorとInDesignを使用した効率的なワイヤーフレーミングワークフローでは、最初にユーザーインターフェイスアセットキットの作成に時間をかける必要があります。 Adobe Creative Cloudの導入以来、CCライブラリはすべてのUIキットコンポーネントを保存するための最良の方法です。

ワイヤーフレーミングとプロトタイピングの目的で1つ以上のライブラリを作成できます。 たとえば、Webサイトのワイヤーフレーミング用に1つのライブラリを作成し、iOSアプリケーション用に別のライブラリを作成し、Androidアプリケーション用に3つ目のライブラリを作成できます。

Adobe CCライブラリを作成するには、[ライブラリ]パネルを開き、パネルのハンバーガーメニューから[新しいライブラリの作成]を選択します。 ライブラリに配置したアセットは、AdobeIDを使用してログインするすべてのデバイスのさまざまなAdobeデスクトップまたはモバイルアプリで作成および使用できます。 つまり、iPadまたはiPhoneでプロジェクトを開始し、オフィスのデスクトップコンピューターで続行し、すべてのデバイスで同じアセットを使用して、自宅のラップトップで土壇場で変更を加えることができます。

大規模なチームの一員として作業している場合は、ライブラリアセットをチームメンバー間で共有できます。 ライブラリには、色、グラフィック、レイヤースタイル（Photoshopのみ）、段落および文字のスタイルを含めることができます。 それぞれの要素を選択した状態で、CCライブラリパネルの下部にある対応するボタンをクリックして、ライブラリにアセットを追加します。 グラフィックアセットをアートボードからライブラリパネルに直接ドラッグして追加することもできます。

ライブラリ内のアセットは、カテゴリ別に整理されています。 グッドプラクティスに固執し、各アセットの名前を意味のある名前に変更します。 ライブラリは検索可能であり、名前の先頭を入力してアセットを見つけると、特にライブラリにさまざまなアイテムがある場合に、後で時間を大幅に節約できます。 アセットの名前を変更するには、アセットをダブルクリックして新しいアセットを入力します。

ワイヤーフレームキットコンポーネントの作成

Adobe InDesignには、Illustratorと非常によく似た基本的な描画ツールがいくつかありますが、ワイヤーフレーム内のさまざまな要素を描画するには、Illustratorの方がはるかに優れています。 経験則として、Illustratorで基本的な幾何学的形状よりも複雑な描画を必要とするすべてのキット要素を作成します。 InDesignで、単純なボタンなど、レイアウトで変更する必要のあるテキストを含む単純な要素を作成します。

手始めに、ナビゲーション要素、画像を含むページ要素、ビデオフレーム、テキストボックス、アイコン、アバター、フォーム要素、その他すべてのインターフェイス要素など、ワイヤーフレームに必要なすべての要素のリストを作成します。 リストが完成したら、IllustratorとInDesignに移動してこれらの要素を作成できます。

ワイヤーフレームまたはモックアップキットコンポーネントの新しいドキュメントを作成することから始めます。 IllustratorのWeb/デバイスプロファイルまたは[新しいドキュメント]ダイアログボックスから[Web/デジタルパブリッシングインテント]のいずれかを選択していることを再確認します。 これにより、ピクセルが単位として使用され、カラーモードがRGBに設定されます。

ワイヤーフレームキットのアセットは、詳細になりすぎずに、表現する内容をすばやく視覚的に示す必要があるため、できるだけシンプルにします。 できれば数色のグレーの非常に限られたカラーパレットを使用する必要があります。 より重要な要素をより暗い色合いで色付けするか、より高いコントラストを与えることによって、視覚的に強調します。

忠実度の高いモックアップまたはプロトタイプの場合は、各プロジェクトのそれぞれのカラーパレットを使用するより詳細な要素を使用してUIキットを作成します。 カラーパレットに簡単にアクセスするには、CCライブラリに追加します。

CCライブラリのAdobeIllustratorアセット

Illustratorからライブラリに追加するアセットは、デフォルトでリンクされています（Adobe CC 2015以降）。 つまり、Illustratorでライブラリアセットを変更すると、使用されるすべてのインスタンスに変更が反映されます。 リンクされていないアセットをドキュメントに追加する場合は、オプション/Altキーを押しながらパネルからドラッグします。

リンクされたIllustratorアセットをInDesignで使用する場合、ドキュメントを通常モードで表示すると、左上隅に小さなクラウドアイコンが表示されます。 それらはすべてリンクパネルにも表示されます。 Illustratorでライブラリアセットを変更した場合、InDesignドキュメントの変更は自動的に行われません。 クラウドアイコンは、変更されたリンク感嘆符アイコンに置き換えられ、これらのリンクを更新する必要があります。

InDesignドキュメントに配置したInDesignアセットはリンクされていません。 つまり、元のアセットとは独立してインスタンスを編集でき、元のアセットが変更されても、それらの変更は、レイアウトに既に配置されているアセットには反映されません。

ワイヤーフレームを作成するときは、これらのプロパティを考慮してください。アセットをグローバルに変更および更新する必要があると想定する場合は、Illustratorからライブラリにアセットを追加します。個別に変更する必要がある場合は、InDesignからアセットを追加します。 Illustratorでグラフィックを作成し、それらをコピーしてInDesignに貼り付け、必要に応じて変更してから、InDesignアセットとしてライブラリに追加することもできます。

どのグラフィックアセットがどのアプリケーションによって作成されたかを忘れた場合は、[アイテムの表示]をリストとして使用しながら、[ライブラリ]パネルの各アイテムの右側を確認してください。

コンテンツとコピーによるAdobeInDesignの柔軟性

ワイヤーフレームのコピーとタイポグラフィを簡単に変更できるようにするには、InDesignでテキストコンテナを作成します。 InDesignには、テキストボックスにプレースホルダーテキストを入力するための優れた機能があります。 テキストボックスを描画するときは、それを右クリックして[プレースホルダーテキストで塗りつぶす]を選択します。

テキストボックスを他のグラフィック要素と同じようにドラッグして、Adobeライブラリに追加します。 後でこれらのテキストアセットをワイヤーフレームレイアウトの一部として使用する場合、テキストボックスとワイヤーフレーム内のコンテンツを変更できます。

InDesignでボタンUI要素を作成することも検討してください。 ボタンを作成するには、テキストフレームを作成し、テキストを入力してから、[オブジェクト]>[テキストフレームオプション]を使用して挿入間隔を定義します。 [整列]ドロップダウンメニューから目的のオプションを選択して、ボックス内のテキストの垂直方向の位置合わせを調整します。

[自動サイズ]タブに切り替えて、適切な自動サイズ設定（おそらく幅のみ）と便利な参照ポイントを選択します。 InDesignでテキストを複数行に分割したくない場合は、[改行なし]オプションをオンにします。

既存のリソースを使用する

インターネット上には、Adobe IllustratorのワイヤーフレーミングおよびプロトタイピングUIキットが多数あり、既製のソリューションが必要な場合は、無料で購入またはダウンロードすることもできます。 完成したプロジェクトから掘り下げることができる要素がすでにあるかもしれません。 それらのドキュメントを開き、必要に応じて以前に作成した要素を微調整し、それぞれのライブラリに配置します。

iOSやAndroidアプリケーションなど、特定のプラットフォーム向けに設計している場合は、ヒューマンインターフェイスガイドラインを注意深く読み、適切なアセットを使用してください。 キット内のさまざまなプラットフォームに固有のUI要素があると便利な場合があります。

実際のワイヤーフレーミングプロセスを開始する前に、ライブラリ内の将来のすべての資産または状態を説明することに集中しすぎないでください。 後でライブラリにアセットを追加して、その上に構築することができます。

InDesignワイヤーフレームテンプレートの作成

もう1つの重要な準備手順が残っています。それは、ワイヤーフレームの作成に使用するInDesignテンプレートを作成することです。 Webまたはデジタルパブリッシングを目的とした新しいドキュメントを作成することから始め、デザインする画面に適したページサイズを定義します。

ワイヤーフレーム要素のレイアウトには何らかのグリッドを使用することをお勧めします。マージンを設定し、必要な列数とガタースペースを設定して列グリッドを作成します。 これらの設定は、[レイアウト]> [余白と列]から、[ページ]パネルでそれぞれのマスターページを選択して変更できます。

水平ガイドと補完的な垂直ガイドが必要な場合は、手動で作成するか、[レイアウト]>[ガイドの作成]を使用して追加のグリッドを作成します。 グリッドを作成するときは、Gridulatorなどのオンライングリッド計算ツールの1つを使用すると便利です。

ワイヤーフレームのフレームとしてデバイスモックアップを使用して、プレゼンテーション用の追加のテンプレートを作成することもできます。 1つのInDesignドキュメントを別のドキュメントにリンクできるため、1つのInDesignドキュメントにワイヤフレームを作成し、それを別のドキュメントに配置してプレゼンテーションを行うことができます。

最初は複雑に見えるかもしれませんが、これは実際には非常にシンプルで効果的なワークフローです。 実際のワイヤーフレームを別のドキュメントに保存すると、承認されたワイヤーフレームから洗練されたビジュアルデザインへの構築を継続しやすくなります。

また、ワイヤーフレームを配置し、ラベルとコメントを追加し、クライアントに最適なソリューションを示すことができる、プレゼンテーション対応のテンプレートを作成するのも簡単です。 ワイヤーフレームファイルに変更を加えるときは、プレゼンテーションドキュメントやta-daaaの他のリンクと同じように更新してください。 すべての変更はプレゼンテーションにも含まれています。

[レイヤー]パネルでは、ユーザーインターフェイス要素、インタラクティブ機能、ジェスチャ、ラベル、メモなど、さまざまな種類のコンテンツ用に個別のレイヤーを準備できます。 特定のプロジェクトにさらにレイヤーが必要な場合は、ワイヤーフレーミングプロセス中にいつでも簡単にレイヤーを追加できます。

作成が完了したら、テンプレートをInDesign.indtテンプレートファイルとして保存します。 必要なすべてのテンプレートが保存されたら、最終的に効率的にワイヤーフレーミングを開始する準備が整います。

ワイヤーフレームの構築

まず最初に、マスターページから始めます。 プロジェクトのすべての画面で同じになるすべてのグローバル要素をライブラリからドラッグします。 Webサイトをデザインしている場合、これらは通常、ロゴ、ナビゲーション、およびフッター付きのヘッダーです。 複数のマスターページを作成でき、それらは相互に継承できるため、マスターページのネストを利用できます。

たとえば、プロジェクトに応じて、モーダルポップアップやダイアログポップアップなどの1つのUI要素のマスターページを作成し、最初のマスターに基づいて新しいマスターを作成し、異なる必要のある要素のみを変更できます。

Command / Control + Shiftキーを押しながらマスター要素をクリックしてマスターを上書きしない限り、通常のドキュメントページのマスター要素を選択、変更、または削除することはできません。 要素が上書きされたら、そのパラメータのいずれかを変更するか、レイアウトから完全に削除することができます。

要素をオーバーライドしても、変更していないパラメーターはマスターから継承されることに注意してください。 たとえば、要素の色を変更してオーバーライドした場合、要素はマスターに接続されたままなので、サイズは変更されません。 さらに、マスターページで変更すると、以前に上書きした要素でも変更されます。

ワイヤーフレーミングドキュメントに追加のページを挿入するときは、それぞれのマスターに基づいてページを作成することを忘れないでください。 すでにレイアウトにあるページのマスターを変更する必要がある場合は、ページパネルでそれらを選択し、右クリックして、[マスターをページに適用]を選択します。 ライブラリアセットを使用し、スマートガイドと整列オプションを使用してそれらを配置して、最終的なUIワイヤーフレームレイアウトを作成します。

複数の画面サイズのデザインを作成する場合は、[レイアウト]>[代替レイアウトの作成]または[ページ]パネルから代替レイアウトを作成します。 代替レイアウトを作成するときに液体レイアウトルールを使用して、あるサイズと向きから別のサイズと方向にページ要素を自動的に採用するか、手動で制御することができます。 Liquid Layoutルールを適用およびテストするには、ページツールを使用するか、[ウィンドウ]>[インタラクティブ]>[Liquidレイアウト]パネルを開きます。

双方向性の追加

Adobe InDesignには、ワイヤーフレームやプロトタイプを作成するときに利用できるインタラクティブ機能がたくさんあります。 どの機能を含めるかは、ワイヤーフレーム、プロトタイプ、またはプレゼンテーションに必要な最終的な形式によって異なります。

PDFとしてエクスポートする場合、対話性は制限されますが、少なくともハイパーリンクパネルを使用して画面間のリンクを機能させることができます。 リンクとして動作させる要素を選択し、[新しいハイパーリンク]アイコンをクリックします。 [リンク先]ドロップダウンメニューから、[ページ]を選択し、目的のページ番号を入力します。 画面間のリンクとして動作させたいすべてのアイテムに対して、このアクションを繰り返します。

マスターページにあるオブジェクトにハイパーリンクを追加することもできます。これにより、リアルタイムの節約になります。 マスターページにリンクを1回作成すると、ドキュメントのすべての画面で機能します。

任意のグラフィック、テキスト、画像、または要素のグループからボタンを作成できます。 選択したオブジェクトからボタンを作成するには、[ウィンドウ]>[インタラクティブ]>[ボタンとフォーム]パネルを使用して、[ボタンに変換]アイコンをクリックします。

ボタンには、通常、ロールオーバー、およびクリックの外観用に作成されたさまざまな状態を設定できます。 ボタンにロールオーバーまたはクリック状態を追加するには、ボタンパネルでボタンをクリックし、各状態のボタンの外観を編集します。 ボタンにアクションを追加するには、プラス記号をクリックしてリストから選択します。 SWF/EPUBでのアクションはインタラクティブPDFでは機能しないことを考慮に入れてください。

ポップアップ要素を作成するには、[ボタンとフォームの表示/非表示]を選択します。 トリガーされるまでボタンを非表示にするには、[トリガーされるまで非表示]オプションをオンにします。 マルチステートオブジェクトをインタラクティブPDFに含めることができますが、これは、最初にSWFとしてエクスポートしてから、PDFエクスポート用にInDesignレイアウトに戻す場合に限ります。 このワークフローは面倒であり、PDFはすべてのPDFリーダーで正しく表示されないため、本当に必要な場合を除いて、これを行わないようにしてください。

InDesign CC 2015のオンライン公開機能を使用してドキュメントをHTMLプロトタイプに変換する場合は、アニメーション、マルチステートオブジェクト、複数のボタンアクションなど、SWF/EPUBエクスポート用のオプションを含むさらに多くのインタラクティブオプションを使用できます。

[アニメーション]パネルを使用し、ドロップダウンメニューから組み込みのプリセットの1つを選択してそのプロパティを設定すると、簡単なアニメーションを追加できます。 1つのオブジェクトに適用できるアニメーションは1つだけですが、さらに追加する必要がある場合は、オブジェクトを空のボックスでグループ化し、新しく作成されたオブジェクトで新しいアニメーションを使用します。

さまざまな状態を表示する必要があるUI要素の場合は、マルチ状態オブジェクトを作成します。 状態ごとに個別のオブジェクトを作成します。 オブジェクトは、単一の要素（画像、テキストボックス、グラフィック）または異なる要素のグループにすることができます。 [ウィンドウ]>[インタラクティブ]>[オブジェクトの状態]パネルを開き、マルチステートオブジェクト用に作成したすべてのオブジェクトを選択して、パネルの下部にある[新規]ボタンをクリックします。

マルチステートオブジェクトを作成したら、あるオブジェクトの状態から別のオブジェクトの状態に移動するためのボタンを作成する必要があります。 [次の状態に移動]または[前の状態に移動]アクションは、[状態に移動]アクションで特定のオブジェクトの状態を明らかにします。

ワイヤーフレーム/プロトタイプにスクロール可能なフレームが必要な場合、フレームを作成する最も簡単な方法は、AjarProductionsのUniversalScrollingFrames拡張機能を使用することです。 拡張機能をダウンロードしてインストールすると、InDesignパネルとして使用できます。 スクロール可能なフレームの場合、コンテンツとコンテナ用の1つのフレームを作成する必要があります。

スクロール可能なコンテンツは、テキストフレーム、画像、またはグループ化された複数の要素にすることができます。 コンテンツとコンテナボックスの作成が終了したら、コンテンツを選択し、[編集]>[切り取り]を選択します。 次に、コンテナを選択し、[編集]>[貼り付け]を使用してコンテンツを貼り付けます。 コンテナを選択し、ユニバーサルスクロールフレームを使用して、目的のスクロール方向を調整します。

ボタン、マルチステートオブジェクト、アニメーション、およびスクロール可能なフレームを組み合わせることで、豊かなインタラクティブエクスペリエンスを実現できます。 InDesignでインタラクティブ機能をテストするには、EPUBインタラクティブ機能プレビューパネルを使用します。 単一のページまたはドキュメント全体をプレビューできます。 必要に応じてプレビューパネルを拡大します。

Adobe InDesignのインタラクティブ機能を使用したことがない場合は、最初は少し学習曲線があるので準備してください。 しかし、少しの練習といくつかの試行錯誤で、すぐにそれらを習得できます。

完成したドキュメントのエクスポート

ワイヤーフレームとプレゼンテーションファイルの作成が完了したら、残っているのは、クライアントに可能な限り最善の方法で優れたアイデアを示すことだけです。 そのためには、クライアントがプレビューできる形式でワイヤーフレームをエクスポートする必要があります。 InDesignファイルはさまざまな形式でエクスポートできますが、機能的な低忠実度または高忠実度のプロトタイプをテストする場合は、インタラクティブPDFまたはオンライン公開機能を使用する可能性があります。 インタラクティブPDFとして保存するには、[エクスポート]ダイアログボックスの[フォーマット]ドロップダウンメニューから[Adobe PDF（インタラクティブ）]を選択し、必要に応じてプロパティを調整します。 含めたいインタラクティブな要素がある場合は、フォームとメディアにチェックマークを付けることを忘れないでください。 クライアントは、無料のAdobe ReaderでPDFワイヤーフレームを表示し、すべてのコメントを同じファイルに書き込むことができます。

InDesignからエクスポートされたPDFドキュメントを使用して、InVision（またはPDFをサポートするその他のツール）のプロトタイプを作成することもできます。 標準のプロトタイピングツール（おそらくMarvel）がPDFをインポートできない場合は、InDesignワイヤーフレームページをJPEGまたはPNG画像としてエクスポートします。

さまざまなデバイスの最新のブラウザで表示できるインタラクティブなHTMLプロトタイプをエクスポートするには、[ファイル]> [オンラインで公開]に移動するか、アプリケーションバーの[オンラインで公開]ボタンをクリックします。 ドキュメントをオンラインで公開する準備をしてアップロードしたら、ドキュメントのURLをコピーして関係者と共有し、レビュープロセスを開始できます。 公開されたプロトタイプをサイトに埋め込むこともできます。

オンライン公開機能の欠点は、エクスポートを追加で制御できないことと、ファイルが常にAdobeのサーバーに保存されることです。 また、これはまだプレビュー機能であり、Adobeがどの方向に開発するのか、あるいは廃止されるかどうかはわかりません。

ワイヤーフレーム/プロトタイプがエクスポートされたら、テスト、レビュー、および反復プロセスを開始します。