ツールとチュートリアル

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

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

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

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

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

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

アドビワイヤーフレームツール

Adobe CCの一連のデザインアプリケーションを使用して、ワイヤーフレームを効率的に作成できます。

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

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

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

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

ビジネスインテリジェンスにおける人工知能

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

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

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

新しいAdobeCCライブラリを作成します

Adobe CCライブラリを使用して、ワイヤーフレームキットを作成し、共通のアセットを格納します。

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

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

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

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

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

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

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

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

AdobeCCワイヤーフレームアセットライブラリ

Adobeワイヤーフレームキットを作成します。

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

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

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

AdobeIllustratorのAdobeCCワイヤーフレームアセットライブラリ。

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

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

InDesignスタイルガイド

AdobeInDesignのスタイルガイドとアセットライブラリ。

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

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

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

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

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

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

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

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

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

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

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

ビジネスインテリジェンスと人工知能

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

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

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

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

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

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

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

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

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

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

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

ワイヤーフレームの構築

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

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

AdobeInDesignでマスターを使用する

AdobeInDesignでマスターテンプレートを使用する。

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

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

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

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

Adobeワイヤーフレーミングのリキッドレイアウト

InDesignでのAdobeワイヤーフレーミングのリキッドレイアウト。

双方向性の追加

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

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

グラス・スティーガル法の廃止は金融危機を引き起こした

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

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

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

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

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

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

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

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

c ++ファイル拡張子

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

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

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

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

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

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

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

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

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

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