Axure RP を使ったフローチャート自動作成方法

Axure RP は、モバイルアプリやウェブサービス向けにインタラクティブなプロトタイプ、ワイヤフレーム、画面推移図、仕様書を作成することができます。その中でも、今回は、画面推移図の作成方法について紹介いたします。Axure RP は、モバイルアプリやウェブサービス向けにインタラクティブなプロトタイプ、ワイヤフレーム、画面推移図、仕様書を作成することができます。その中でも、今回は、画面推移図の作成方法について紹介いたします。

Axure RP は、自動で画面推移図を生成する便利な機能 (Auto-Generated flow diagram) を提供します。

フローチャートの自動生成

auto-generated flow diagram を使用することで、画面推移図を簡単に作成することができます。新しいプロジェクトを Axure RP 上で開きます。プロジェクト内のページ上で、右クリックし、[Generate Flow Diagram] を選択します。ダイアグラム上で、画面推移図をどのように表示するかを選択することができます。

Animation showing how to create an auto-generated flow diagram in Axure RP

フローチャートのカスタマイズ

一度、画面推移図を自動生成したあとは、ウィジェットを移動したり、形を変更したりし、カスタマイズすることができます。

Animation showing creating an auto-generated flow diagram from a large sitemap in Axure RP

主な編集機能:

  1. ウィジェットとウィジェットをつなぐ Connector Points を追加、移動、削除することができます。これにより、Connector Points を、好きなだけ、好きな場所に追加することができます。さらに、[Connector Points] を使用することにより、ウィジェットとウィジェットをつなぐ点をクリックした場所に追加し、他のウィジェットとつなげることができます。
  2. 29 種類の Connector Line を提供しています。[Arrow Style] より、ラインを選択することができます。以下が、Connector Lines になります。
    こちらのビデオより動作方法を簡単に確認することができます。
    [youtube https://www.youtube.com/watch?v=Cm5TxM8jB28]

リンクページの追加

また、画面推移図上のウェジェットに対して、Reference を追加することができます。ウィジェット上にあるテキストは、ページ名が反映されています。そのため、ページ名を変更すると、こちらのウィジェット上のテキストも変更されます。また、このウェジェットに、ページをリンク付することができます。これにより、HTML 上でウィジェットをクリックした際に、リンク先に飛ぶことができます。

ページをウィジェットにリンクするには、ウィジェットを選択し、[Inspector’s Properties Tab] を開きます。そして、[Reference Page] コントロールをクリックし、ページを選択し、ウィジェットにリンク付します。

Axure RP の他の機能は、こちらから参照ください。

30 日間無償体験版を提供しております。是非、こちらよりお試しください。

 

タイトルとURLをコピーしました