フロー図 : レクチャー1

画面遷移図、フロー図を作る

フロー図の作り方

音声が流れますので、音量を調節して下さい。

1

フロー図の概要

フロー図は、ユースケース、ビジネスプロセスやページフローなどのさまざまなプロセスを示すために使用できます。デザインしているページ全体で達成できるタスクについて、ハイレベルの表示を提供します。

サイトマップ

フローはサイトマップの中のページで管理されます。ページをフロー図タイプに指定するには、サイトマップの中のページを右クリックして、「図のタイプ」- 「フロー 」を選択します。すると、プロトタイプとともに Axure RP の中のサイトマップの中のアイコンが変化します。ページをフロー図タイプに指定しなくても、ページ内でフロー図を作成することはできます。

ページTOP
2

フロー図の種類

フローウィジェット

フローウィジェットは、「ウィジェット」ウィンドウ枠のツールバーの「フロー」をクリックすることで「ウィジェット」ウィンドウ枠に表示されます。

プロセスの中のステップを表現するために、さまざまなウィジェットが「ウィジェット」ウィンドウ枠で使用できます。用意されていないウィジェットは、画像ウィジェットを使用して画像として組み込むことができます。

それぞれのウィジェットがフロー図で何を表すかについては規約がありますが、Axure RP では、ウィジェットの使用に制約はありません。一般に、フロー図を使う人が理解できる方法で使用することが最善です。

ページTOP
3

フロー図の作り方

ワイヤフレームウィジェットの場合と同じく、フローウィジェットは「ウィジェット」ウィンドウ枠から「ワイヤフレーム」ウィンドウ枠にドラッグ & ドロップできます。形式とプロパティは、ツールバーとコンテキストメニューを使用して編集できます。フローウィジェットの形は、右クリックして「フローウィジェットの編集」サブメニューを使用することで、変更できます。

フローウィジェット

コネクタ
フローウィジェットは、コネクタを取り付ける接続ポイントがあることが、ワイヤフレームウィジェットと異なります。

コネクタ

コネクタを追加するには、まず「ワイヤフレーム」ウィンドウ枠をコネクタモードに変更します。こうするには、ツールバーの「コネクタモード」ボタン (F11) をクリックします。「ポインタモード」ボタン (F9) をクリックすると、「ワイヤフレーム」ウィンドウ枠がポインタモードに戻ります。

コネクタ

コネクタモードになったら、「ワイヤフレーム」ウィンドウ枠でクリックしドラッグして、コネクタを描いて追加します。

2 つのフローウィジェットを接続するには、フローウィジェットの接続ポイントにマウスをあわせて、クリックしてドラッグし、目標のフローウィジェットの接続ポイント上でマウスボタンを放します。コネクタの端点をクリックしてフローウィジェットの接続ポイントにドラッグしても、コネクタをフローウィジェットに取り付けることができます。

コネクタを選択し、ツールバーの「線のパターン」および「矢印の終点・始点」ボタンを使用することで、矢印のような線の端や点線のような線のパターンをコネクタに適用できます。

ページTOP
4

ワイヤフレームのページとの対応付け

フローウィジェットに参照ページを割り当てることができます。フローウィジェットに参照ページがある場合、ウィジェットのテキストにはページの名前が反映されます。また、プロトタイプでは、フローウィジェットは自動的にページへのリンクを持ちます。

ページをサイトマップから「ワイヤフレーム」ウィンドウ枠にドラッグ & ドロップすると、そのページを参照ページとして持つフローウィジェットが作成されます。

フローウィジェットの参照ページは、ウィジェットを右クリックし、「フローウィジェットの編集」-「参照ページの編集」を選択することで、編集や消去することができます。

info 4