Axure-rp-user-interface
Axure RP-ユーザーインターフェイス
Axureをインストールすると、次のスクリーンショットに示すようなインターフェイスが表示されます。
この画面は、表示しないことを選択するまで、起動時に常に表示されます。
この画面では、次のオプションがあります-
- Axureで新しいファイルを開始する
- 既存のAxureプロジェクトを開きます
Axureで新しいファイルを作成しましょう。
「新規ファイル」ボタンをクリックすると、新しいプロトタイプを作成するための次の画面が表示されます。
上の図に示すように、ワークスペースは6つの部分に分かれています。
- ページ数
- 図書館
- 検査官
- アウトライン
- マスターズ
- 設計エリア
これらの部分を1つずつ見ていきましょう。
ページ数
このセクションには、作業中のページが表示されます。 これらのページは、次のようにデフォルトのツリー構造で表示されます。 ホームページには以下の子ページがあります。
Home
ページ1
2ページ
- ページ3 *
指定された構造を続行することも、必要に応じて変更することもできます。 そのためには、ページのいずれかを右クリックすると、追加、移動、削除、名前の変更、複製などのオプションが表示されます。
使用可能なさまざまなツールのほとんどと同様に、このセクションでは、プロトタイプのページを操作できます。 これを使用して、目的のプロトタイプの画面を計画できます。
ライブラリペイン
ライブラリペインでは、プロトタイプに必要なほとんどのコントロールが利用できます。 このセクションで使用できる一般的なコントロールは、ボックス、画像、プレースホルダー、ボタンなどです。 Axure RPは、アプリケーションの領域に応じて分類された豊富なUIコントロールのセットを提供します。
上の図（a）に示すように、ライブラリには、共通、フォーム、メニューとテーブル、およびマークアップというカテゴリがあります。 これらのカテゴリはすべて、アプリケーションを開くと展開されます。 便宜上、このスクリーンショットでは省略されています。
一般的なライブラリには、基本的な形状、ボタン、見出しテキスト、ホットスポット、動的パネルなどが含まれます。
Axure RPでは、すべてのプロトタイピング要件に対して、ホットスポットと呼ばれる非常に効果的なコントロールが用意されています。 このコントロールを使用すると、UIのほとんどすべてのコントロールにクリック操作を提供できます。 例は次のページで提供されます。
フォームライブラリには、名前が示すように、リストボックス、チェックボックス、ラジオボタン、テキスト領域、およびテキストフィールドコントロールが含まれています。 ユーザー入力フォームを設計するために、ライブラリの下にあるこのセクションのコントロールを使用できます。
メニューとテーブルは伝統的な構造をしています。 このような構造は、おそらく水平または垂直形式で、メニューとテーブルと呼ばれるこのライブラリの下で利用できます。
最後になりましたが、マークアップライブラリには、付箋、マーカー、矢印が含まれています。 ほとんどの場合、これはプロトタイプの注釈に使用されます。
設計エリア
これは、UXエンジニアの実際の遊び場です。 このスペースは、要件に応じてプロトタイプを作成するために使用されます。 まず、次のスクリーンショットで番号6で強調表示されている領域を参照してください。
この領域では、ライブラリから目的のコントロールをドラッグアンドドロップできます。 ライブラリを使用してクイックメニューバーを作成しましょう。
例-メニューバー
ライブラリから、[メニューとテーブル]の下にある[Classic Menu-Horizontal]コントロールをデザイン領域にドラッグします。
デザイン領域でコントロールをドラッグすると、次の画面が表示されます。
上記の画面に示されているように、Axure RPは、メニューに目的のテキストを表示するのに十分インテリジェントです。 メニューバーであると見なすと、Axure RPはコントロールのメニューとして、ファイル、編集、表示を自動的に作成しました。
矢印が指すように、インスペクターセクションにはコントロールのプロパティが表示されます。 このセクションを使用して、複雑なプロトタイプを作成するときに、一意の識別のためにコントロールの名前を作成します。
TestMenuとしてこのコントロールに名前を付けましょう。 この名前は、以降の例で使用します。
ページのプロパティ
プロトタイプを計画するときは、ユーザー、つまりプロトタイプが展示/表示されるデバイスについて明確な考えを持つことが理にかなっています。 プロトタイプとの対話の最良の経験のために、Axureはページプロパティを設定する機能を提供しています。
上の図に示すように、番号3で示される領域はページプロパティセクションです。 このセクションでは、インタラクションドロップダウンとサブセクションアダプティブを見ることができます。
これらのセクションについて詳しく説明します。
- インタラクションセクション*は、ページとの可能なインタラクション（ケース）を扱います。 ご覧のとおり、ページがロードされると、OnPageLoadの相互作用のケースがイベントを処理します。 ほとんどのプロトタイプで、UXエンジニアは第一印象を与えるためにアニメーションを配置することを好みます。 アニメーションを表示するこの特定のイベントは、通常OnPageLoadの場合にトリガーされます。
同様に、他の場合には、OnWindowResize、OnWindowScrollが含まれます。 [その他のイベント]プルダウンで、サポートされている他のケースを確認して、ページに関連するインタラクションを設定できます。
- Adaptiveセクション*により、Axure RPはレスポンシブWebデザインに入ります。 今日では、ウェブサイトのエクスペリエンスを設計するだけでは十分ではありません。これに加えて、ビジネスではモバイルサイトがウェブサイトと共存することを好みます。
異なる画面サイズとレイアウトから見た同じページは、異なる適応型ビューを構成します。 通常、アダプティブビューはモバイルとタブレット向けに設計されています。 Axureはアダプティブビューのこの機能を提供するため、UXエンジニアはプロトタイプのレスポンシブな側面を最初から把握できます。
ウィジェットのインスペクターペイン
ウィジェットの相互作用ペインは、Axureの最も重要なセクションです。 このペインは、デザイン領域のウィジェットをクリックして表示できます。
前のセクションで使用したメニュー項目の例を考えてみましょう。 TestMenuという名前のメニュー項目を選択し、次のスクリーンショットで強調表示されているセクションを確認します。
[プロパティ]タブで確認できるように、OnMove、OnShow、OnHide、OnLoadなどのさまざまな相互作用があります。 これらは、メニューコントロール全体に固有のものです。
次に、メニューコントロールの[ファイル]をクリックします。
[ウィジェットのプロパティ]ペインで、インタラクションのタイプが変更されていることがわかります。 また、このメニュー項目の名前を柔軟に指定できます。 OnClickの場合を例に取りましょう。
*OnClick* -プロトタイプを実行するときにコントロールをクリックすると、OnClickがコントロールの動作を定義します。 これにより、ページナビゲーション、メニューポップアップなどのさまざまな対話が可能になります。メモペイン-インスペクタペイン自体には、メモと呼ばれるサブセクションがあります。 メモペインでは、選択したコントロールのために、特定のポイントを追加して記憶することができます。
これらのポイントは、次の章の例に飛び込むと明らかになります。
グリッドとガイド
最高レベルの品質と精度を備えたプロトタイプの場合、UXエンジニアは、コントロールを他のコントロールと整列/配置する機能を必要とします。
たとえば、ログインポップアップを表示するとします。 このポップアップを画面の真ん中に表示する場合は、画面の全体的なサイズが必要です。 また、画面の中央に正確に配置するには、グリッドを適切に配置する必要があります。
Axureはグリッドとガイドの機能を提供するため、デザイン領域を効果的に使用できます。
利用可能なグリッドとガイドを表示するには、デザイン領域を右クリックすると、次のスクリーンショットに示すコンテキストメニューがポップアップ表示されます。
ここで、利用可能なオプションを理解しましょう。
グリッド-コンテキストメニューに表示される最初の3つのオプションは、グリッドに関連付けられています。 それらは、グリッドの表示、グリッドへのスナップ、およびグリッド設定です。
- グリッドの表示-グリッドの表示を有効にすると、次のスクリーンショットに示すように、デザイン領域にグリッドを表示できます。 これは、コントロールを画面上の他のコントロールに合わせるのに非常に便利です。
- グリッドにスナップ-グリッドにスナップを有効にすると、コントロールは周囲に存在するグリッドに従って自動的にアタッチされます。 コントロールをドラッグし、近くのグリッドにアタッチすると、この動作を確認できます。
- グリッド設定-このダイアログには、グリッドに関連するその他の設定があります。 次のスクリーンショットに示すように、グリッド間の間隔、グリッドのタイプなど。 このダイアログで利用可能になります。 都合に応じて、交差タイプのグリッドを選択できます。
ガイド-次のスクリーンショットに示されているコンテキストメニューでは、最初のセパレータの後のオプションはガイドに関連しています。
ガイドで一般的に使用されるオプションについて説明します。
- グローバルガイドを表示-これらのガイドは、デザインエリアの水平ルーラーと垂直ルーラーの両方からドラッグすると表示されます。 自分で試してみてください。
- ページガイドを表示-ガイドはページレベルでも利用できます。 これらのガイドは、垂直ルーラーと水平ルーラーからドラッグすると作成されます。 グローバルガイドよりも一般的です。 ページガイドがあると、ページレベルでの設計の柔軟性が向上します。
- アダプティブガイドを表示-さまざまなアダプティブビュー用にページを設計する場合、アダプティブガイドを配置する価値があります。 このオプションは、適応ガイドの可視性を有効にします。これは、異なる適応ビューにわたってオブジェクトを整列させるために使用されます。
- ガイドにスナップ-デザイン領域に異なる画面要素を配置するとき、この機能によりオブジェクトをガイドにスナップできます。 これは、特定のオブジェクトを画面に配置し、他のオブジェクトに対して配置するときに便利です。
