日本語マニュアルダウンロード - Axure RP Pro

Axure RP Pro 7.0 日本語版
ユーザーズマニュアル
第 1.1 版
ニューソン株式会社
目次
1. はじめに ................................................................................................ 1
1.1.
Axure とは ...................................................................................... 1
1.2.
本書の想定読者................................................................................. 1
1.3.
Axure でできること ........................................................................... 1
1.4.
本書で使用する用語 ........................................................................... 2
1.5.
本書で使用されている商標について ....................................................... 2
2. Axure の導入 ........................................................................................... 3
2.1.
Axure のインストール ........................................................................ 3
2.2.
ライセンスキーの登録 ........................................................................ 3
2.3.
Axure の起動 ................................................................................... 5
2.4.
画面の見方 ...................................................................................... 6
3. プロトタイプを作成する ............................................................................ 9
3.1.
編集するページの選択 ........................................................................ 9
3.2.
ウィジェットの配置 ........................................................................... 9
3.3.
ブラウザを使ったプレビュー .............................................................. 10
4. ペイン ................................................................................................. 12
4.1.
ツールバー .................................................................................... 14
4.1.1.
4.2.
サイトマップ ................................................................................. 17
4.2.1.
4.3.
ショートカットボタン ................................................................ 14
アイコンの説明 ......................................................................... 18
ウィジェット ................................................................................. 18
4.3.1.
アイコンの説明 ......................................................................... 18
4.4.
マスタ .......................................................................................... 19
4.5.
ページ属性 .................................................................................... 19
4.6.
ウィジェットマネージャ ................................................................... 21
4.6.1.
アイコンの説明 ......................................................................... 22
4.7.
ウィジェットのプロパティとスタイル .................................................. 23
4.8.
ウィジェットのインタラクションとノート ............................................. 23
4.8.1.
インタラクションの設定 .............................................................. 23
4.8.2.
ノート .................................................................................... 27
© 2015 NEWSON Co., Ltd. All Rights Reserved
4.9.
デザインエリア............................................................................... 27
4.9.1.
ガイドの作成 ............................................................................ 28
4.9.2.
アダプティブビュー ................................................................... 30
5. プロジェクト......................................................................................... 34
5.1.
新規プロジェクトの作成 ................................................................... 34
5.2.
チームプロジェクトの作成 ................................................................ 34
5.3.
チームプロジェクトの運用 ................................................................ 36
5.4.
HTML の自動生成 ............................................................................ 37
5.4.1.
生成方法 ................................................................................. 37
5.4.2.
HTML 生成の設定項目 ................................................................ 37
5.5.
仕様書の自動生成 ............................................................................ 42
5.5.1.
仕様書の生成方法 ...................................................................... 43
5.5.2.
仕様書生成の設定項目 ................................................................ 43
5.6.
ノート .......................................................................................... 47
5.6.1.
ノートのカスタマイズ ................................................................ 48
6. ウィジェット......................................................................................... 50
6.1.
Axure に標準搭載されているウィジェット ............................................ 50
6.1.1.
Common（共通） ..................................................................... 50
6.1.2.
Forms（フォーム） ................................................................... 51
6.1.3.
Menus and Table（メニューとテーブル）....................................... 52
6.1.4.
Flow（フロー図要素） ................................................................ 53
6.1.5.
＜参考＞フロー図について ......................................................... 53
6.1.6.
＜参考＞リピータについて ......................................................... 54
6.2.
プロパティとスタイル ...................................................................... 55
6.3.
外部ライブラリ............................................................................... 61
7. テンプレート......................................................................................... 62
7.1.
マスタ .......................................................................................... 62
7.1.1.
マスタの利用 ............................................................................ 64
7.2.
ページの基本スタイル ...................................................................... 65
7.3.
ウィジェットの基本スタイル .............................................................. 67
7.4.
ジェネレータと設定の追加 ................................................................ 68
7.4.1.
CSV レポートの自動生成 ............................................................. 70
© 2015 NEWSON Co., Ltd. All Rights Reserved
7.5.
フォーマットペインター ................................................................... 72
8. インタラクション ................................................................................... 74
8.1.
イベント ....................................................................................... 74
8.2.
ケース .......................................................................................... 77
8.2.1.
条件 ....................................................................................... 77
8.2.2.
変数 ....................................................................................... 79
8.3.
アクション .................................................................................... 79
9. お問い合わせについて ............................................................................. 83
付録 A ショートカットキー一覧 ..................................................................... 84
付録 B AxShare について ............................................................................. 88
© 2015 NEWSON Co., Ltd. All Rights Reserved
1. はじめに
本書は、Axure RP Pro 日本語版（以下 Axure）の利用に関わる操作手順、操作項目などの
説明を目的とした説明書です。
1.1. Axure とは
Axure とは、Axure Software Solutions Inc.（以下 Axure 社）が提供しているプロトタイ
ピングツールです。Axure では、
「デザインする ⇒ 体験する ⇒ 共有する」といった一連
の作業をプログラミングなしで直感的に行うことができます。
Axure が持つ特徴は、次の 3 点です。
・プログラミングを必要としない高速なプロトタイピング
・ブラウザを用いた作成物の体験
・豊富な機能
Axure は、その豊富な機能によって、質素なものから高度なものまで幅広いプロトタイピ
ングを可能としています。
1.2. 本書の想定読者
本書は、初めて Axure を利用する人を読者として想定しています。本書を読むに当たり、
前提となる知識は以下の通りです。
・ Windows のパソコンを操作できること
・一般的な画面デザインの知識があること
1.3. Axure でできること
Axure を用いることによって、以下の作業を行うことができます。
・簡易なデザインとワイヤフレームの作成
・フロー図の作成
・プロトタイプの作成
・高度なプロトタイプの作成
・モバイル向けプロトタイプの作成
1
© 2015 NEWSON Co., Ltd. All Rights Reserved
・AxShare によるプロトタイプの公開
・仕様書の作成
・チームでの共同開発
1.4. 本書で使用する用語
本書では、Axure の操作説明にあたって、以下の用語を使用します。
・ウィジェット

グラフィカルユーザインタフェースを構成する部品要素、およびその集まり。
・マスタ

ウィジェットの集まりを再利用するためのテンプレート。
・ペイン

枠。パネル。Axure 画面の構成要素。
・プロジェクト

Axure のページ、マスタ、設定などの集合。ファイルの保存単位。
・サイトマップ

プロジェクト内のディレクトリやページの構造を可視化したもの。
・インタラクション

ユーザの特定の動作に対して何らかの仕掛けが働く仕組み。
1.5. 本書で使用されている商標について
・ Axure は、Axure Software Solutions Inc. の米国における登録商標です。
・ Windows は、米国 Microsoft Corporation の米国及びその他の国における登録商標で
す。
・その他の会社名、製品名は、各社の登録商標または商標です。
2
© 2015 NEWSON Co., Ltd. All Rights Reserved
2. Axure の導入
この章では、Axure のインストールからライセンス登録、起動、画面の見方までを説明し
ます。
2.1. Axure のインストール
Axure 日本語版は Windows 版のみの対応となっていますので、表 2-1 の要件に合わせた
パソコンを用意します。
表 2-1 システム要件
OS
Windows XP, 2003 Server, Vista, 7, 8
メモリ
2GB（4GB 以上推奨）
CPU
1GHz 以上
ストレージ
60MB 以上の空き容量
対応ブラウザ
IE 7.0 以降, Firefox, Safari, Chrome
オフィスソフト
Microsoft Office Word 2000, XP, 2003, 2007, 2010
.NET Framework
Microsoft .NET Framework 4.0
Axure 日本語版のサイト（http://axure.newson.co.jp/）から、インストーラをダウンロ
ードします。
AxureRP-Pro-Setup-JP.exe というファイルがダウンロードされるので、ダブルクリック
してインストールを開始します。設定項目などはすべてデフォルトのままインストールで
問題ありません。
2.2. ライセンスキーの登録
Axure が正常にインストールされると、デスクトップ上に Axure のショートカットアイコ
ンが作成されます。このアイコンをダブルクリックすることで、Axure を起動することが
できます。
Axure を起動すると、図 2-1 のようなウィンドウが開きます。ウィンドウの右上に残りの
3
© 2015 NEWSON Co., Ltd. All Rights Reserved
試用期間が表示されており、これを過ぎると Axure の全ての機能が使えなくなってしまい
ます。ライセンスを購入している場合は、ライセンスキーを登録します。
（※ライセンスキ
ーの登録には、インターネット接続環境は不要です。）
注意：ライセンスキーの管理ウィンドウから【ご購入】ボタンをクリックすると、Axure
英語版のサイトが開きます。Axure 英語版のライセンスキーは、Axure 日本語版でご利用
いただけないので、ライセンスキーの購入は Axure 日本語版のサイトから行うようにして
ください。
まず、ウィンドウ下部の【ライセンスキーを入力】をクリックします。ウィンドウが表示
されない場合は、Axure 画面上部の【ヘルプ】から【ライセンスキーの管理】を選択しま
す。
図 2-1 Axure RP Pro 7.0 へようこそ
4
© 2015 NEWSON Co., Ltd. All Rights Reserved
ライセンスキーの管理画面が表示されます（図 2-2）
。
図 2-2 ライセンスキーの管理
購入したライセンスに記載されている Licensee と Key の値を正しく入力してから、
【送信】
ボタンをクリックするとライセンスキーの登録が完了します（入力例：図 2-3）
。
図 2-3 ライセンスキーの管理（入力例）
2.3. Axure の起動
Axure を起動すると、図 2-1 のようなプロジェクトを選択するウィンドウが開くので、使
用するものを選びます。
初回の場合は、画面右側の【新規 RP ファイル】をクリックします。
5
© 2015 NEWSON Co., Ltd. All Rights Reserved
2.4. 画面の見方
プロジェクトを選択して図 2-1 のウィンドウが閉じると、図 2-4 のような画面が表示され
ます。画面は、いくつかのペインとエリアに分かれており、それぞれ以下のような役割を
持っています。
図 2-4 Axure 画面
① ツールバー
画面上部に表示されているのはツールバーです。ファイルの新規作成、保存、コピー＆ペ
ースト、やり直し、選択モードの変更など、各種機能のショートカットが並んでいます。
② サイトマップ
左上のペインはサイトマップを表示します。サイトマップ上では、プロジェクトで作成す
る Web サイトなどの構成を管理します。フォルダ構成、ページの親子関係、ページの新規
作成/削除などが管理できます。
③ ウィジェット
左真ん中のペインは Axure にインストールされたウィジェットが表示されます。デフォル
トでいくつかのウィジェットが表示されています（詳しくは 6 章を参照してください）。こ
のエリアに表示されたウィジェットをドラッグ＆ドロップでデザインエリアに貼り付け、
6
© 2015 NEWSON Co., Ltd. All Rights Reserved
デザインを作成します。
ウィジェットペインでは、インストールされたウィジェットの検索、ウィジェットライブ
ラリの読み込み、新しいウィジェットの作成、表示するライブラリのフィルタリングなど
が可能です。
④ マスタ
左下には、マスタペインがあります。フォルダ構成、マスタの親子関係、新規作成、削除、
検索などのマスタ管理ができます。ペインに表示されたマスタは、ウィジェットと同様に
ドラッグ＆ドロップでデザインエリアに貼り付けることが可能です。
⑤ ページ属性
画面下部中央のペインでは、編集中のページについて属性を設定できます。設定できる項
目は、以下の 3 つです。
・ページノート
・ページインタラクション
・ページの形式
⑥ ウィジェットマネージャ
右下のペインは、ウィジェットマネージャです。編集中のページに配置されているウィジ
ェットの管理を行うペインになっています。デフォルトでは、ダイナミックパネルだけが
表示されるようフィルタリングされていますが、
アイコンをクリックするとフィルタリ
ング設定を変更し、すべてのウィジェットを表示させることが可能です。
⑦ ウィジェットのプロパティとスタイル
右真ん中のペインは、ウィジェットのプロパティとスタイルが変更できます。詳細は 4.2.
節で解説します。
⑧ ウィジェットのインタラクションとノート
画面右上のペインは、ウィジェットのインタラクションとノートが設定できます。詳細は
6.1.節で解説します。
7
© 2015 NEWSON Co., Ltd. All Rights Reserved
⑨ デザインエリア
画面中央に表示されているのがデザインエリアです。このエリアに様々なウィジェットを
貼り付けてページをデザインします。
それぞれのペインについての詳しい操作説明などは、4 章を参照してください。
8
© 2015 NEWSON Co., Ltd. All Rights Reserved
3. プロトタイプを作成する
3.1. 編集するページの選択
Axure では、新規プロジェクトを開始すると標準で 4 つのページがサイトマップ上に表示
されます（図 3-1）
。
図 3-1 新規プロジェクトのサイトマップ
サイトマップペインから編集したいページを選んでダブルクリックすると、デザインエリ
アにタブが追加され、ページを編集することができます（図 3-2）
。
図 3-2 【ページ 1】をダブルクリックして編集開始した状態
3.2. ウィジェットの配置
画面左中央のウィジェットペインから配置したいウィジェットをドラッグし、デザインエ
リアにドロップすることでウィジェットをページに配置することができます（図 3-3）
。
9
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 3-3 ドラッグ＆ドロップでウィジェットの配置
配置されたウィジェットは、ドラッグ＆ドロップで任意の位置に移動させることができま
す。
また、配置されたウィジェットをクリックで選択した後、角の白四角をドラッグすること
で、ウィジェットの大きさを変更することもできます。
図 3-4 ウィジェットのサイズ変更
3.3. ブラウザを使ったプレビュー
作成したプロトタイプは、ブラウザを使って実際に動作させることができます。ツールバ
ーに表示されている
アイコンをクリックするか、ツールバーの【パブリッシュ】メニュ
ーから【プレビュー】を選択すると、ブラウザが起動してプロトタイプが表示されます（図
3-5、図 3-6）
。
10
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 3-5 プロトタイプのプレビュー
図 3-6 ブラウザ表示
また、ツールバーの【プレビューオプション】から、プレビュー時のブラウザについての
細かい設定が可能になっています。設定項目については、5.4.2 項を参照してください。
11
© 2015 NEWSON Co., Ltd. All Rights Reserved
4. ペイン
この章では、Axure の 9 つの画面それぞれについて操作を説明します。
それぞれの表示位置については標準のものを表記していますが、場合によっては表示され
ていないことがあります。その場合は、ツールバーの【表示】メニューから【ペイン】を
選択し、表示させたいペインを選択します。
ペインの折り畳み / 展開
ツールバーとデザインエリアを除くすべてのペインは折り畳むことができます。サイトマ
ップペインの例で言うと、図 4-1 の赤枠部分をクリックすることで、ペインを折り畳むこ
とができます。
図 4-1 ペインの折り畳み
また、画面下部のページ属性ペインについては、図 4-2 の赤枠部分をクリックすることで
ペインの折り畳みが可能です。
図 4-2 ページ属性ペインの折り畳み
12
© 2015 NEWSON Co., Ltd. All Rights Reserved
そのほか、左右のペインそれぞれについて、画面端に折り畳む機能もあります。図 4-3 で
は左側の例を表示しています。赤枠で囲まれた部分をクリックすることで、左側のサイト
マップ、ウィジェット、マスタペインは左端に折り畳まれます（図 4-3 右）。
図 4-3 左側のペインを全て折り畳む
折り畳まれたペインは、折り畳み時と同じ個所をクリックすることでもとに戻すことがで
きます（例：図 4-3 右、赤枠）
。
13
© 2015 NEWSON Co., Ltd. All Rights Reserved
ペインのポップアウト
ペインは折り畳むほかに、画面からポップアウトさせることも可能です。ペイン右上の
ボ
タンをクリックすると、ペインがポップアウトします。
もとに戻す場合は、ポップアウトしたペインの右上にある
ボタンをクリックします。
4.1. ツールバー
画面上部のツールバーです。ツールバーは、各種メニューとショートカットボタンで構成
されています。本節では、ツールバーのショートカットボタンについて、各アイコンが何
の機能を表しているのかを説明します。
4.1.1. ショートカットボタン
ツールバーのショートカットボタンは、複数のパネルで構成されています。パネルごとに
切り分けて紹介していきます。
メイン
新規プロジェクト
新しいプロジェクトを作成します。
プロジェクトを開く
既存のプロジェクトを開きます。
保存
編集中のプロジェクトを保存します。
切り取り
選択しているウィジェットまたは文字列を切り取りま
す。
コピー
選択しているウィジェットまたは文字列をコピーしま
す。
貼り付け
切り取り / コピーしたウィジェットまたは文字列を張
り付けます。
元に戻す
直前の操作を取り消します。
やり直し
直前の「元に戻す」操作を取り消します。
14
© 2015 NEWSON Co., Ltd. All Rights Reserved
エディタ
ズーム
表示サイズの倍率を変更します。
交差モードの選択
マウスのドラッグ＆ドロップでの選択
方式が交差モードになります。選択され
た領域と少しでも交差したウィジェッ
トはすべて選択状態になります。
包含モードの選択
マウスのドラッグ＆ドロップでの選択
方式が包含モードになります。選択され
た領域に全体が含まれたウィジェット
のみが選択状態になります。
コネクタモード
マウスのドラッグ＆ドロップでフロー
図のコネクタを作成します。
パブリッシュ
プレビュー
表示されているページをブラウザでプ
レビュー表示します。
Axure Share にパブ
AxShare でプロジェクトを公開しま
リッシュする
す。（詳細は付録）
パブリッシュ
パブリッシュメニューを表示します。
線の色
図形・線などの線の色を変更します。
線の幅
図形・線などの線の幅を変更します。
線のパターン
図形・線などの線のパターン（実線、点
ウィジェットの書式
線など）を変更します。
矢印の終点・始点
矢印の終点・始点について、形や向きな
どを変更します。
15
© 2015 NEWSON Co., Ltd. All Rights Reserved
背景色
ウィジェットの背景色を変更します。
外の影
ウィジェットの外側に影をつけます。影
の色、大きさ、ぼかしなどを設定します。
上詰め / 中央揃え
文字列の上下配置を設定します。
/ 下詰め
位置とサイズ
位置
ウィジェットの位置を指定します。ペー
ジの左上を原点にしてピクセルで指定
します。
サイズ
ウィジェットのサイズを変更します。
非表示
ウィジェットを非表示にします。
基本スタイル
ウィジェットの基本スタイルを変更し
テキスト書式
ます。基本スタイルについては 7.3 節を
参照してください。
ウィジェットスタイ
ウィジェットスタイルエディタを起動
ルエディタ
します。
フォーマットペイン
フォーマットペインターを起動します。
ター
フォント
フォントを変更します。
Typeface
Typeface を変更します。
文字サイズ
文字サイズを変更します。
書体
書体（太字、イタリック、下線）を変更
します。
文字揃え
文字の揃える位置を変更します。
箇条書き
テキストを箇条書きにします。
16
© 2015 NEWSON Co., Ltd. All Rights Reserved
テキストリンクを挿
選択した文字列にテキストリンクを挿
入
入します。
文字の色
文字の色を変更します。
グループ化 / 解除
複数のウィジェットを 1 つのグループ
配置
にまとめます。
最前面 / 最背面に
選択したウィジェットを最前面 / 最背
移動
面に移動させます。
前面 / 背面に移動
選択したウィジェットを 1 段階だけ前
面 / 背面に移動させます。
左 / 中央 / 右揃え
選択した複数のウィジェットについて、
ウィジェットの左端で / 中央で / 右
端で揃えて配置させます。
上 / 中央 / 下揃え
選択した複数のウィジェットについて、
ウィジェットの上端で / 中央で / 下
端で揃えて配置させます。
横方向 / 縦方向に
選択した複数のウィジェットについて、
配置
左右 / 上下のスペースが同じになるよ
うに配置させます。
位置とサイズの固定
位置とサイズを編集させないようにし
/ 解除
ます。
4.2. サイトマップ
サイトマップペインは、デフォルトでは画面左上に表示されます。サイトマップペインで
は、プロジェクト内のページについて、ディレクトリ構造・ページ間の親子構造を管理し
ます。
サイトマップペインでは、ページ / フォルダの左側にある三角形ボタンをクリックするこ
とで、下位ページの折り畳み / 展開ができます。
17
© 2015 NEWSON Co., Ltd. All Rights Reserved
ページを編集する場合には、編集したいページをダブルクリックします。
4.2.1. アイコンの説明
ページの追加
新しいページを追加します。
フォルダの追加
新しいフォルダを追加します。
上 / 下へ移動
選択したページ / フォルダを上下に移
動させます。
下位 / 上位へ
選択したページ / フォルダを、下位ま
たは上位に移動させます。
削除
選択したページ / フォルダを削除しま
す。下位のページまたはフォルダがある
場合には、すべての下位のページが同時
に削除されます。
検索
サイトマップを検索します。
4.3. ウィジェット
ウィジェットペインは、デフォルトでは画面左中央に表示されます。ウィジェットペイン
では、Axure に導入されているウィジェットのリストがアイコンで表示されます。
ページにウィジェットを配置するには、ウィジェットペインから配置するウィジェットを
ドラッグ＆ドロップでデザインエリアに配置します。
4.3.1. アイコンの説明
ライブラリの選択
表示するライブラリを選択します。デフ
ォルトでは、Default と Flow の 2 つが
選択可能です。
オプション
ウィジェットライブラリのオプション
を表示します。ライブラリの読み込み
や、ライブラリの新規作成を行うことが
できます。
18
© 2015 NEWSON Co., Ltd. All Rights Reserved
検索
ウィジェットを検索します。
4.4. マスタ
マスタペインは、デフォルトでは画面左下に表示されます。マスタペインでは、プロジェ
クト内のマスタについてディレクトリ構造、マスタ間の親子構造について管理します。
使用方法・操作方法はサイトマップペインと全く同じです。
4.5. ページ属性
ページ属性ペインは、デフォルトでは画面下部中央に表示されます。ページ属性ペインで
は、編集中のページの属性に関する設定を行います。
ページノート
編集中のページに関するノートを記述します。ノートについては 5.6 節を参照してくださ
い。
ページインタラクション
編集中のページにインタラクションを設定します。インタラクションについては 8 章を参
照してください。
ページの形式
編集中のページについてスタイルを設定します。設定項目一覧は、以下の通りです。
ページの形式
ページの形式を選択します。ページの形式については、7.2 節を
参照してください。
ページの整列
作成したプロトタイプをページのどこに表示するかを設定しま
す。ブラウザでのみ表示が反映されます。
背景色
ページの背景の色を変更します。
背景画像
ページの背景画像を選択します。画像は、gif, jpg, jpeg, png,
bmp, xbm, art 形式の画像をインポートして用います。
水平方向整列
背景画像について、水平方向の表示位置を指定します。
19
© 2015 NEWSON Co., Ltd. All Rights Reserved
垂直方向整列
背景画像について、垂直方向の表示位置を指定します。
繰り返し
背景画像の繰り返しについて選択します。選択項目は、
「画像の
繰り返し」
「水平方向に繰り返し」
「垂直方向に繰り返し」
「覆う
形で広げる」「含む形で広げる」があります。
スケッチ効果
スケッチ効果について設定します。
パネル状態のスタイル
ダイナミックパネルの状態を編集しているときに表示されます。編集中の状態についてス
タイルを設定します。設定項目については 6.2 節を参照してください。
背景色
ダイナミックパネルの背景の色を変更します。
背景画像
ダイナミックパネルの背景画像を選択します。
水宇平方向整列
ダイナミックパネルの背景画像について、水平方向の表示位置
を指定します。
垂直方向整列
ダイナミックパネルの背景画像について、垂直方向の表示位置
を指定します。
繰り返し
ダイナミックパネルの背景画像の繰り返しについて選択しま
す。
リピータデータセット
リピータアイテムを編集しているときに表示されます。リピータのデータセットを編集す
ることができます。
リピータアイテムインタラクション
リピータの要素を編集しているときに表示されます。編集しているリピータの各アイテム
に関するインタラクションを設定します。インタラクションについては 8 章を参照してく
ださい。
リピータスタイル
リピータの要素を編集しているときに表示されます。編集しているリピータのスタイルを
設定します。
20
© 2015 NEWSON Co., Ltd. All Rights Reserved
レイアウト
リピータの要素を表示していく方向を垂直方向、水平方向に指
定できます。垂直方向の場合は上から下、水平方向の場合は左
から右へ順番に表示されます。また、Wrap（Grid）にチェック
を入れることで、1 列（1 行）あたりの表示数を設定し、複数行
（複数列）にリピータを表示させることも可能です。
項目背景
リピータの各要素について背景色を指定できます。また、交互
色にチェックを付けることで、1 要素ごとに交互に別の色を表示
させることも可能です。
ページネーション
リピータのデータセット量が多い場合には、ページネーション
させることが可能です。複数ページにチェックを入れることで、
ページごとの項目数と、開始するページ番号が指定できます。
ページネーションについては 6.1.6 項を参照してください。
スペース
要素と要素の間に空白を入れることができます。行方向と列方
向のそれぞれについて、ピクセル単位で指定します。
4.6. ウィジェットマネージャ
ウィジェットマネージャペインは、デフォルトでは画面右下に表示されます。ウィジェッ
トマネージャペインでは、編集中のページに配置されたウィジェットについて管理を行い
ます。
ウィジェットマネージャペインには、デフォルトではダイナミックパネルしか表示されて
いません。ダイナミックパネル以外のウィジェットも表示させる場合には、
アイコンを
クリックして【すべてのウィジェット】を選択します。
21
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-4 ウィジェットマネージャペインのフィルタ
ウィジェットマネージャペインに表示されているウィジェットは、「ウィジェット名（ウィ
ジェットの種類）
」という形式で表示されます。ウィジェットに名前がついていない場合は、
カッコ書きでウィジェットの種類だけが表示されます。
4.6.1. アイコンの説明
状態の追加
選択しているダイナミックパネルに状態を
追加します。
状態を複製
ダイナミックパネルの選択している状態を
複製します。
上 / 下へ移動
選択しているウィジェットを上または下に
移動させます。
削除
選択しているウィジェットを編集中のペー
ジから削除します。
ウィジェットフィルタ
ウィジェットマネージャペインに表示させ
るウィジェットについて設定します。
検索
編集中のページに設置しているウィジェッ
トを検索します。
22
© 2015 NEWSON Co., Ltd. All Rights Reserved
4.7. ウィジェットのプロパティとスタイル
ウィジェットのプロパティとスタイルペインは、デフォルトでは画面右側中央に表示され
ます。このペインでは、デザインエリアで選択しているウィジェットについて、プロパテ
ィとスタイルを設定します。
プロパティ
ウィジェットのプロパティを設定します。表示内容は、選択されているウィジェットなど
によって変化します。
それぞれの設定項目については 6.2 節を参照してください。
スタイル
ウィジェットのスタイルを設定します。設定項目については、6.2 節を参照してください。
4.8. ウィジェットのインタラクションとノート
ウィジェットのインタラクションとノートペインは、デフォルトでは画面右上に表示され
ます。
ウィジェットのインタラクションとノートペインでは、選択しているウィジェットに名前
を付けることができます。ウィジェットに名前を付けることで、ウィジェットマネージャ
での表示が見やすくなるほか、インタラクションの設定時にもアクションの対象として探
しやすくなります。
4.8.1. インタラクションの設定
インタラクションタブでは、特定のイベントに対してアクションを設定することができま
す。ここでは、その方法を説明していきます。
アクションを設定したいイベントをダブルクリックし、ケースエディタを開きます（図
4-5）
。
23
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-5 ケースの追加
表示されているイベント以外のものを選択したい場合は、下部の【追加のイベント】をク
リックして選択します。
ケースエディタを開いたら、画面左側から追加したいアクションを選び、クリックします
（図 4-6）
。
図 4-6 ケースエディタ
選択したアクションについて設定を変更したら、
【OK】をクリックして完了です（図 4-7）
。
24
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-7 アクションの設定
複数のアクションを設定したい場合は、さらにアクションをクリックして追加し、設定を
加えていきます。
条件の設定
インタラクションでは、特定の条件が満たされている場合にのみアクションを起動させる
ことが可能です。ここでは、条件の設定方法を説明します。
ケースエディタ上部の【条件の作成】をクリックします（図 4-8）
。
25
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-8 条件の作成
条件作成ウィンドウが開くので、条件を設定し、
【OK】をクリックします（図 4-9）
。
図 4-9 条件の設定
条件を追加する場合には、右側の
アイコンをクリックすることで、新しい条件が作成さ
れます。設定できる条件については 8.2.1 項を参照してください。
26
© 2015 NEWSON Co., Ltd. All Rights Reserved
4.8.2. ノート
ノートタブでは、ウィジェットのノートを記述することができます。ノートについては、
5.6 節を参照してください。
4.9. デザインエリア
画面中央に表示されているのがデザインエリアです。デザインエリアでは、ページ・マス
タ・リピータアイテム・ダイナミックパネルの状態を編集します。
ルーラー
デザインエリアの上端と左端にある定規のことをルーラーと呼びます（図 4-10）。数値は
ピクセル値を表していて、大きさ・設置位置の指標に使います。
図 4-10 ルーラー
グリッドの表示
デフォルトでは、デザインエリアには何も表示されていませんが、10 ピクセル幅のグリッ
ドを表示させることができます（図 4-11）
。
27
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-11 グリッドが表示されたデザインエリア
デザインエリアを右クリックし、【グリッドとガイド】から【グリッドの表示】を選択する
と、グリッドが表示されます。
表示されたグリッドを非表示にしたい場合は、再度【グリッドとガイド】から【グリッド
の表示】を選択します。
4.9.1. ガイドの作成
Axure のデザインエリアでは、ガイド線を表示させることができます。ガイド線には、編
集中のページにしか表示されないローカルガイドと、すべてのページに表示されるグロー
バルガイドがあります。
ローカルガイドは水色、グローバルガイドは赤色で表示されます（図 4-12 ガイド線）
。
28
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-12 ガイド線
ガイド線は、ルーラーをドラッグして、デザインエリア上でドロップすることにより作成
することができます。Ctrl キーを押しながらドラッグ＆ドロップでグローバルガイド、それ
以外だとローカルガイドが作成されます。
また、ツールバーの【配置】メニューから【ガイドを作成】を選択すると、ガイド作成の
ウィンドウが出ます（図 4-13 ガイドを作成）
。
図 4-13 ガイドを作成
29
© 2015 NEWSON Co., Ltd. All Rights Reserved
このウィンドウから、列数、行数などを設定して【OK】をクリックすることで、等間隔の
ガイドを簡単に作成することができます。
図 4-13 の設定でガイドを作成すると、図 4-14 のようなガイドが作成されます。列幅、
ガター幅、余白については図 4-14 の画像を参考に数値を設定してください。
ガター
余
白
余
白
列
図 4-14 ガイド用語説明
4.9.2. アダプティブビュー
アダプティブビューとは、ブラウザの幅と高さが特定の条件下において、ブラウザに表示
するコンテンツ・レイアウトを変更する機能です。
デザインエリアの左上にある
アイコンをクリックすると（図 4-15）
、アダプティブビュ
ーウィンドウが開き、管理を行うことができます（図 4-16）。
30
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 4-15 アダプティブビューの設定
図 4-16 アダプティブビューウィンドウ
ウィンドウ左上の
ボタンをクリックして新しいビューを追加すると、ビューが切り替わ
るための条件を指定することができます。
アダプティブビューに関する設定項目は、次の通りです。
プリセット
名前、条件、幅、高さがあらかじめ決められたものです。プリセッ
トを選択することでこれらが一度に設定されます。
名前
ビューの名前を設定します。
31
© 2015 NEWSON Co., Ltd. All Rights Reserved
条件
選択しているビューが表示されるための条件を指定します。ブラウ
ザの幅・高さについて、両方が指定されている場合には、両方が同
時に満たされた時にビューが切り替わります。
幅
選択しているビューに切り替わるためのブラウザ幅を指定します。
高さ
選択しているビューに切り替わるためのブラウザの高さを指定し
ます。
継承元
スタイルの変更について影響を受けるビューを指定します。継承元
のビューで文字サイズや塗りつぶし色などのスタイル変更が行わ
れた場合、選択しているビューにも同様のスタイル変更が適用され
ます。ただし、継承元のウィジェットの位置変更は反映されません。
新しいビューに対して、初めからあるビューを「ベースビュー」と呼び、どのビューの条
件も満たしていない場合はベースビューが表示されます。
新しいビューを作成すると、デザインエリアの上部にアダプティブビューに関連するボタ
ンなどが出現します（図 4-17）
。
図 4-17 アダプティブビュー追加後
赤枠で囲まれた部分は、編集するビューを切り替えるボタンが表示されます。ベースビュ
ー以外については、条件設定で指定した幅の値が表示されます。幅の値を指定せず、高さ
のみで条件設定した場合は「any」が表示されます。
ボタンの色には意味があり、それぞれ次のような状態を示しています。
32
© 2015 NEWSON Co., Ltd. All Rights Reserved
青色
現在編集中のビューを示しています。
オレンジ色
現在編集中のビューでのスタイル変更、ウィジェット配置の影響を受けるビ
ューであることを示しています。
灰色
現在編集中のビューの影響を全く受けないビューであることを示していま
す。
緑色
「すべてのビューに影響」がチェックされ、現在編集中のビューへの変更に
よる影響を受けるビューであることを示しています。
また、
「すべてのビューに影響」にチェックを入れると、継承の有無に関係なく、変更がす
べてのビューに影響を与えます。
33
© 2015 NEWSON Co., Ltd. All Rights Reserved
5. プロジェクト
この章では、Axure におけるプロジェクトに関連した操作について説明します。
5.1. 新規プロジェクトの作成
新しいプロジェクトは、ツールバーの【ファイル】メニューから【新規（N）】を選択する
ことで作成できます。
5.2. チームプロジェクトの作成
Axure には、複数人のチームでひとつのプロジェクトファイルを編集するための機能が存
在します。複数人でプロジェクトを同時編集するためには、プロジェクトをチームプロジ
ェクトとして作成することが必要です。
チームプロジェクトの作成方法は、以下の 2 通りあります。
① 新しくチームプロジェクトを作成する
ツールバーの【ファイル】メニューから、【新規チームプロジェクト】を選択します。
② 作成済みのプロジェクトをチームプロジェクトに変更する
ツールバーの【チーム】メニューから、【チームプロジェクトを現在のファイルから作成】
を選択します。
① 、② いずれの方法でも、次の手順を行います。
・チームプロジェクト名の設定（図 5-1）
プロジェクト名を利用して、関連するファイルやディレクトリが生成されます。記号の”/”
（スラッシュ）と”\”（半角の￥マーク、またはバックスラッシュ）は利用できません。
34
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 5-1 チームプロジェクト名の設定
・チームプロジェクトディレクトリの設定（図 5-2）
チームプロジェクトのディレクトリを作成する場所を指定します。指定する場所は、ロー
カルの任意のディレクトリだけでなく、ネットワーク上のファイルサーバーを指定するこ
とも可能です。
図 5-2 チームプロジェクトディレクトリの設定
35
© 2015 NEWSON Co., Ltd. All Rights Reserved
また、チームプロジェクトのディレクトリには、SVN の URL を指定することもできます。
その際には、SVN サーバーを事前に構成しておく必要があります。
チームプロジェクトディレクトリの設定が終わったら、
【Next】をクリックします。ディレ
クトリが存在しない場合には、作成するかどうか聞かれるので【はい】を選択します。
以上で、チームディレクトリの作成は完了です。
5.3. チームプロジェクトの運用
チームプロジェクトでは、ページを編集するのに特殊な操作が必要です。
変更の取得
ページ（マスタ）を右クリックして【変更の取得】を選択すると、チームプロジェクトを
開いてから行われた変更を取得することができます。
変更の反映
ページ（マスタ）を右クリックして【変更の反映】を選択すると、編集中のプロジェクト
（ページ/マスタ）への変更をほかの人が取得できる状態になります。
チェックアウト
ページ（マスタ）を右クリックして【チェックアウト】を選択すると、編集ができるよう
になります。誰かがチェックアウトしている状態では、ほかの人はチェックアウトできな
くなります。
チェックイン
ページ（マスタ）を右クリックして【チェックイン】を選択すると、チェックアウト状態
が解除されます。チェックインすることで、ほかの人がチェックアウトして編集できるよ
うになります。
36
© 2015 NEWSON Co., Ltd. All Rights Reserved
5.4. HTML の自動生成
Axure は、作成したプロトタイプと同じ見た目・同じ動作をする HTML を自動生成する機
能を持っています。ここでは、自動生成を行う方法と設定について説明します。
5.4.1. 生成方法
HTML ファイルを生成するには、ツールバーの【パブリッシュ】メニューから、
【HTML フ
ァイルを生成】を選択します（図 5-3）
。
図 5-3 HTML ファイルを生成
すると、HTML の生成について設定するウィンドウが出てくるので、それぞれ設定をして
【生成】ボタンをクリックすると、HTML の生成完了です。設定については、5.4.2 項を参
照してください。
5.4.2. HTML 生成の設定項目
HTML を生成するときの設定項目について説明します。これらの設定項目は、プレビュー
オプションにも同様のものが適用できます。設定項目一覧は、以下の通りです。
全般
HTML ファイルの生
HTML ファイルを生成するディレクトリを指定します。デフォルト
成先フォルダ
ボタンをクリックすると、デフォルトに設定されているフォルダに
変更されます。デフォルトでは、「マイドキュメント
\Axure\HTML\プロジェクト名」が指定されます。
37
© 2015 NEWSON Co., Ltd. All Rights Reserved
ブラウザオプション
ファイル生成時にブラウザを起動するかどうか、起動する場合はそ
― ブラウザ
のブラウザを指定します。ブラウザを起動すると、生成した HTML
ファイルが開かれます。
ブラウザオプション
生成する HTML ファイルにサイトマップを表示させるかどうかを
― サイトマップ
指定します。
アダプティブ
アダプティブビューについて、どのビューを生成するか（もしくはすべて生成するか）を
指定します。
ページ
プロジェクト内のページについて、どのページの HTML を生成するかを指定します。
ページノート
記入したページノートについて、HTML に含めるかどうか、どのノートを含めるか、ノー
ト名を表示するかどうかを指定します。HTML にページノートを含めた場合は、サイトマ
ップのサイドメニューにある「Page Notes」のタブ内に表示されます。
ノートについては、5.6 節を参照してください。
ウィジェットノート
ページノート同様、HTML に含めるかどうか、どのノートを含めるかなどを指定します。
ウィジェットノートを含めた場合は、ブラウザで表示した際に図 5-4 のようにノートがつ
いていることを示すアイコンと、それをクリックすることでノートが表示されます。
38
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 5-4 ウィジェットノート
ノートについての詳しい説明は、5.6 節を参照してください。
インタラクション
ケースの設定
「ケース名を常に表示」「イベントが複数ケースを持つ場
合のみ表示」
「ケース名を表示しない（最初のケースを使
用する）
」の 3 つがあります。1 つ目は、インタラクショ
ンが設定されたウィジェットをクリックした時に、どのケ
ースが実行されるのか必ず指定させる設定です（図 5-5）
。
2 つ目は、特に条件指定のないケースが 2 個以上ある場合
のみ、上記のような指定をさせる設定です。3 つ目は、必
ず最初のケースが実行され、ケース名を表示させない設定
です。
フローウィジェットにページ
「オブジェクトクリックで参照ページを開く」
「”新しいウ
へのリンクを割り付ける
ィンドウで参照ページを開く”アイコンを表示する」の 2
つの設定項目があります。フローウィジェットにリファレ
ンスページを設定している場合は、前者の設定でウィジェ
ットをリンクにするかどうか設定できます。また、後者の
設定により、ウィジェット自体をリンクにしなくても、リ
ンクアイコンを表示させることが可能です。
39
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 5-5 ケース名を表示する
ロゴ
サイトのロゴ、キャプションを設定します。ロゴには外部からの画像をインポートによっ
て指定します。
チェックボックスにチェックすることで、サイドバーのサイトマップ上部にスペースがで
き、ロゴとキャプションが表示されます（図 5-6）
。
図 5-6 Axure のロゴを設定した状態
Web フォント
サイトに含める Web フォントの設定をします。Web フォントの設定には、CSS ファイル
を指定してそれを読み込ませる方法と、直接@font-face 文を記述する方法があります。
40
© 2015 NEWSON Co., Ltd. All Rights Reserved
アイコンをクリックして設定を追加し、
【無効】のチェックを外すと設定完了です。
フォントマッピング
フォントマッピングは、Axure 上で設定したフォントを別のフォントに置き換える機能で
す。特定のフォントを Web フォントに置き換えたり、一括で設定を変更したりするのに使
います。
アイコンをクリックして設定を追加し、マッピングの設定を入力します。画面左側に置
き換え前のフォント、右側に置き換え後のフォントの情報を設定します（図 5-7）
。
図 5-7 フォントマッピング
モバイル/デバイス
モバイルデバイス向けの各種設定をします。設定項目一覧は、以下の通りです。
ビューポートタグを含める
ビューポートタグを含めるかどうか、またビュー
ポートに関する設定を記述します。
垂直方向のページスクロールを禁止
モバイルデバイスでのスワイプによるスクロール
を禁止します。
41
© 2015 NEWSON Co., Ltd. All Rights Reserved
電話番号を検出してリンクする（iOS） iOS 版 safari に搭載されている「電話番号を検出
して発信可能なリンクとして表示する」機能を有
効にします。
ホームスクリーンアイコン
サイトへのショートカットを、スマートフォンの
ホーム画面に作成したときのアイコンを設定しま
す。
iOS のスプラッシュ画面
スプラッシュ画面に表示する画像を設定します。
ブラウザナビゲーションを非表示にす
iOS について、ホーム画面からショートカットを
る（iOS ホーム画面から起動時）
使って起動した場合、ブラウザナビゲーションを
非表示にする設定をします。
ステータスバー
iOS のステータスバーの色を指定します。default,
black, black-translucent の 3 種類のうちひとつ
を指定します。
詳細設定
その他の細かい設定をします。設定項目一覧は、以下の通りです。
フォントサイズの単位をポイント
フォントサイズの単位をピクセルからポイントに
（pt）にする
変更します。
スケッチ効果を適用しない
ページ属性ペインで設定したスケッチ効果を無効
化します。
ディスカッション
ディスカッションとは、閲覧者がブラウザ上でコメントをつけたり返信したりできる掲示
板のような機能です。これらのコメントは share.axure.com が管理しているため、
AxShare の ID が必要になります。ディスカッションを含める場合は、AxShare の ID を設
定します。AxShare については、付録 B を参照してください。
5.5. 仕様書の自動生成
Axure は、作成したプロトタイプについて仕様書を自動生成する機能を持っています。仕
様書を生成するためには、Microsoft Office Word がインストールされている必要がありま
す。ここでは、仕様書を生成する方法とその設定について説明します。
42
© 2015 NEWSON Co., Ltd. All Rights Reserved
5.5.1. 仕様書の生成方法
仕様書を生成するには、ツールバーの【パブリッシュ】メニューから、【Generate Word
Documentation】を選択します（図 5-8）
。
図 5-8 仕様書の生成
設定ウィンドウが表示されるので、それぞれ正しく設定した後、
【生成】ボタンをクリック
すると生成が開始されます。それぞれの設定については、5.5.2 項を参照してください。
5.5.2. 仕様書生成の設定項目
仕様書生成における設定項目を説明します。
全般
生成する Word ファイルのファイル名と保存場所を設定します。
ページ
ページ情報の章について設定します。設定項目一覧は、以下の通りです。
ページ部分を含める
ページの情報を仕様書に出力するかどうか設定します。
セクションヘッダ
ページ情報の章について、章タイトルを設定します。
サイトマップを含める
サイトマップを出力するかどうか設定します。
サイトマップヘッダ
サイトマップの節について節タイトルを設定します。
また、仕様書に出力するページを選択することも可能です。
43
© 2015 NEWSON Co., Ltd. All Rights Reserved
マスタ
マスタ情報の章について設定します。設定項目一覧は、以下の通りです。
マスタセクションを含める
マスタ情報の章を出力する設定をします。
セクションヘッダ
マスタ情報の章について、章タイトルを設定し
ます。
マスタ一覧を含める
マスタ一覧を作成するかどうか設定します。
マスタリストヘッダ
マスタ一覧の節タイトルを設定します。
生成されたマスタのみリスト
仕様書に出力されなかったマスタを除外して
マスタ一覧を作成します。
生成されたページで使用されているマス
ページ情報の章で出力されたページで使用さ
タのみ生成
れているマスタのみ、仕様書に出力します。
“ウィジェットとして配置”に設定されたチェックを入れると、「配置時の挙動」が「ウ
マスタを生成しない
ィジェットとして配置」に設定されているマス
タを出力しない設定にします。
ページセクションでマスタについて記録
ページ情報の章でマスタについて情報を出力
する
します。マスタ内のウィジェットにインタラク
ションや注釈が設定されている場合、ウィジェ
ットテーブルにこれらの情報が出力されます。
最初の利用のみドキュメント
同じものを複数個配置しているマスタについ
て、最初に利用したものだけをウィジェットテ
ーブルに出力します。この設定により、内容の
重複が避けられます。
マスタノートを除く
ページ情報の章にマスタノートを含めない設
定をします。
ページ情報同様、生成するマスタを選択することも可能です。
ページ属性
ページ属性に関する出力の設定を行います。設定項目一覧は、以下の通りです。
ページノートを含める
ページノートを出力します。
44
© 2015 NEWSON Co., Ltd. All Rights Reserved
ヘッダとしてページノート名を表示
ページノートのヘッダ名としてページノート
名を表示させます。チェックしない場合は何も
表示されません。
ベーシックスタイルの heading を使用
後述の MS Word 書式で指定する「見出し基本」
スタイルをページノートのヘッダに適用しま
す。チェックを入れない場合は「見出し 3」の
スタイルが適用されます。
ノートを選択して並べる
出力するノートを選択します。また、矢印ボタ
ンで出力する順番を設定します。
ページインタラクションを含める
ページインタラクションを出力します。
ページ/マスタ上で使用されているマス
使用されたマスタのリストを出力します。
タのリストを含める
マスタの使用レポートを含める（マスタ
マスタ情報の章において、どのページで使用さ
のみ）
れているかのレポートを出力します。
パネルとリピータを含める
各ダイナミックパネルとリピータについて、詳
細情報を出力します。
画面キャプチャ
ページ情報の章で表示する画面キャプチャについて設定を行います。設定項目一覧は、以
下の通りです。
画面キャプチャを含める
ページの画面キャプチャを出力します。
スクリーンショットヘッダ
ページの画面キャプチャのヘッダ名を設定し
ます。
画面キャプチャに注釈を表示
画面キャプチャにインタラクションなどの注
釈番号を表示させます。
ウィジェットテーブルにない注釈を除く
注釈番号のうち、ウィジェットテーブルに含ま
れていない注釈については表示させません。
画面キャプチャに枠線を表示
画面キャプチャにページの外枠を表示します。
注釈を画面キャプチャに合わせてスケー
画面サイズが大きくなってキャプチャが縮小
ルしない
された場合でも、注釈番号がデフォルトの大き
さになるように表示されます。
45
© 2015 NEWSON Co., Ltd. All Rights Reserved
デフォルトの OnPageLoad ケースを適デフォルトの OnPageLoad ケースが適用され
用
た状態で画面キャプチャが表示されます。
サブメニューを含める
メニューについて項を追加し、サブメニューの
内容を展開して情報を出力します。
展開されたツリーを含める
ツリーウィジェットについて項を追加し、すべ
て展開した情報を出力します。
インラインフレームにデフォルトページ
インラインフレームにリンク先ページの内容
を表示
を表示させます。
背景のスタイルを適用しない
背景のスタイルを適用していない状態の画面
キャプチャを表示します。
スケッチ効果を適用しない
スケッチ効果を適用していない状態の画面キ
ャプチャを表示します。
ページ / 列の幅のパーセンテージの最
画面キャプチャについて、幅の最大値をページ
大幅
または列の幅に対する割合で指定します。
ページの高さのパーセンテージの最大高
画面キャプチャについて、高さの最大値をペー
さ
ジの高さに対する割合で指定します。
画面キャプチャがページにまたがって分
縦長になった画面キャプチャについて、画像を
割するのを許可する（単一カラムレイア
分割して複数ページにまたがって表示させま
ウト時のみ）
す。
ウィジェットテーブル
ページ情報の章に出力するウィジェット一覧についての設定を行います。設定項目一覧は、
以下の通りです。
ウィジェットテーブルを含める
ページ情報の章にウィジェットテーブルを出
力します。
（ドロップダウンリスト）
出力する表の中から設定したい表を選択しま
す。
テーブルヘッダ
項の名前を設定します。
列を選択し順序化
表に出力する列を選択します。
注釈付きのウィジェットのみを含む
注釈がついているウィジェットのみ出力しま
す。
46
© 2015 NEWSON Co., Ltd. All Rights Reserved
注釈とラベルデータのみを持つ行を削除
注釈とラベル以外のデータがない行を出力し
ません。
（フィルタ）
それぞれの行について、条件に合う行のみを出
力します。
空の列を削除
空の列を出力しません。
列見出しラベル
それぞれの列について見出しを設定します。
ページまたぎの行を許可
表がページをまたぐことを許可します。
レイアウト
仕様書全体について、レイアウトの設定を行います。設定項目一覧は、以下の通りです。
列
2 段組の設定を行うことができます。2 段組に
する場合は、左の列の幅を割合で指定します。
Order the content that will be
ページ情報の章について、表示する情報の順番
displayed in the Documentation for
を設定します。右側の矢印ボタンで順番を変更
each Page and Master:
します。
MS Word 書式
Microsoft Word の書式について設定を行います。それぞれの見出しについて、どのスタイ
ルを適用するかを選択します。
5.6. ノート
Axure では、ウィジェットやページなどに注釈を入れることができます。Axure ではこの
注釈のことをノートと呼んでいます。
ノートは、ウィジェットのインタラクションとノートペインのノートタブ、ページ属性ペ
インのページノートタブから入力することができます。
47
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 5-9 ノートの入力
5.6.1. ノートのカスタマイズ
ページノート
ページノートは複数記入することができます。【ノートのカスタマイズ】をクリックするこ
とで、ノートの追加・削除などの管理を行うことができます。
ウィジェットノート
ウィジェットノートは複数記入することができます。【カスタマイズ】をクリックすること
で、フィールドとセットを管理することができます。
フィールド
フィールドは、ウィジェットノートの単位です。フィールドは、フィールド名とタイプを
設定できます。フィールド名は、そのままウィジェットノートのラベル名となります。フ
ィールドのタイプには、テキスト・リスト・番号・日付のうちひとつが選択できます。
セット
セットは、フィールドのフィルタです。セットは複数作ることができ、【カスタマイズ】の
横のドロップダウンリストから選択することができます。「セットのカスタマイズ」で新し
いセットを作成し、「フィールドの設定」でセットに含めるフィールドを追加します（図
48
© 2015 NEWSON Co., Ltd. All Rights Reserved
5-10）
。
図 5-10 ウィジェットノートフィールドとセット
49
© 2015 NEWSON Co., Ltd. All Rights Reserved
6. ウィジェット
Axure を使って Web ページをデザインするうえで、
ウィジェットの知識は必要不可欠です。
この章では、Axure に標準でインストールされているウィジェットの紹介と、ウィジェッ
トのプロパティ、外部ライブラリの利用方法などを説明します。
6.1. Axure に標準搭載されているウィジェット
6.1.1. Common（共通）
Common には、全部で 14 個のウィジェットが登録されています。それぞれの概要を次の
表にまとめました。
画像
画像を表示します。jpeg や png など、手持ちの画像ファ
イルを挿入することも可能です。ウィジェットをダブルク
リックすることで、挿入する画像を選択することができま
す。対応している画像フォーマットは、gif, jpg, jpeg,
png, bmp, xbm, art です。
見出し 1
見出しを作成します。サイズは H1 から H5 まであり、ウ
ィジェットを選択した時に右上に出てくる●ボタンをク
リックすることで変更が可能です。見出し 1 のサイズは
H1 です。
見出し 2
見出し 1 と同様に見出しを作成します。
サイズは H2 です。
ラベル
ラベルを表示します。短い文字列の表示などに利用できま
す。
長い文字列
長い文字列を表示します。デフォルトで Lorem ipsum か
ら始まるラテン語の文章が 55 単語分入っています。
四角形
四角形を表示します。四角形のほかにも、選択時に右上に
出てくる●ボタンから様々な図形を表示させることが可
能です。また、ダブルクリックすることで中心に文字を挿
入することができます。
代替図
画像やイラストの代替であることを示す図形です。図形同
様、ダブルクリックすることで文字列を挿入することがで
きます。
50
© 2015 NEWSON Co., Ltd. All Rights Reserved
ボタンウィジェット
ボタンを表示します。画像や図形をボタンとして表示する
ため、様々な図形のボタンを作成することが可能です。
横線
横線を表示します。デフォルトでは、水平な直線になって
います。選択して【Ctrl キー】を押しながら線の端をドラ
ッグすると、回転させることができます。
縦線
縦線を表示します。デフォルトでは、垂直な直線になって
います。横線同様、回転させることが可能です。
ホットスポット
ホットスポットを作成します。ホットスポットは、画面の
任意の箇所に設置可能な透明なボタンです。大きな画像の
一部だけをボタンのようにしたい時などに利用できます。
ダイナミックパネル
ダイナミックパネルを作成します。ダイナミックパネル
は、様々なインタラクションを駆使して画面に動きを付け
るのに利用できます。また、複数の「状態」を持ち、状態
を切り替えることでパネル内の要素を動的に切り替える
ことも可能です。
インラインフレーム
インラインフレームを作成します。フレーム内に表示する
ページは、作成中のプロジェクト内の別ページや、特定の
URL を指定することができます。
リピータ
リピータを作成します。リピータは、特定のウィジェット
の組み合わせが複数回出てくるようなレイアウトで、マス
目状に表示するのに適しています。また、ページネーショ
ンの設定も可能です。詳しくは 6.1.6 項を参照してくださ
い。
6.1.2. Forms（フォーム）
Forms には、7 個のウィジェットが登録されています。それぞれの概要を下の表にまとめ
ました。
テキストフィールド
テキストフィールドを表示します。Web ページを訪れた
ユーザに 1 行分の文字列を入力させる要素です。ダブルク
リックすることで、デフォルト文字列を編集することが可
能です。
51
© 2015 NEWSON Co., Ltd. All Rights Reserved
テキストエリア
テキストエリアを表示します。テキストフィールドとは異
なり、複数行に渡る長い文字列を入力させることができま
す。ダブルクリックすることで、デフォルト文字列を編集
することが可能です。
ドロップリスト
ドロップリストを表示します。複数の選択肢から 1 つだけ
選択するプルダウンリストになります。ダブルクリックす
ることで、リストの要素を編集することができます。要素
の追加/削除や、デフォルトで選択状態のものを指定する
ことが可能です。
リストボックス
リストボックスを表示します。ドロップリストとは違い、
2 つ以上の要素を同時に表示できる形になっています。ま
た、複数の要素を選択させることも可能です。
チェックボックス
チェックボックスを表示します。チェックボックスとラベ
ルが一緒になっています。文字列をダブルクリックするこ
とで、ラベルを編集したり、チェックボックスをクリック
すると初期状態を変更することが可能です。
ラジオボタン
ラジオボタンを表示します。ウィジェットのプロパティか
ら、ラジオグループに割り当てることで、同じグループに
属するラジオボタンの中から 1 つだけ選択させることが
可能です。
HTML ボタン
HTML のボタンを表示します。デフォルトでは Submit の
文字が入力されていますが、編集が可能です。
6.1.3. Menus and Table（メニューとテーブル）
ツリー
ツリー型のメニューを表示します。親要素のアイコンをク
リックすることで、ツリーを展開したり、折りたたんだり
することができます。
テーブル
表を表示します。セルの文字列、塗りつぶし色などを変更
できますが、エクセルのように関数を使うことはできませ
ん。
52
© 2015 NEWSON Co., Ltd. All Rights Reserved
クラシックメニュー
横置きのクラシックメニューを表示します。サブメニュー
– 横置
を追加することができ、追加されたサブメニューは、プル
ダウンで表示されます。
クラシックメニュー
縦置きのクラシックメニューを表示します。横置き同様、
– 縦置
サブメニューを追加することができます。
6.1.4. Flow（フロー図要素）
Flow には、フロー図を作成するのに用いる記号が含まれています。標準で入っているフロ
ー図用のウィジェット一覧は以下の通りです。
四角形
半円
複数四角形
三角形
角丸四角形
台形
複数角丸四角形
楕円
角を切り取った四角形
六角形
ひし形
平行四辺形
ファイル
アクター
複数ファイル
データベース
カッコ
画像
これらの要素は、すべて上下左右に×印がついており、カーソルをコネクタモードに変更す
ると、それぞれの×印同士を矢印でつなぐことが可能です。
6.1.5. ＜参考＞フロー図について
Axure では、フロー図を作成することができます。Flow ウィジェットをページに配置し、
カーソルのコネクタモードでウィジェット同士を結ぶことにより、フロー図が作成できま
す。
53
© 2015 NEWSON Co., Ltd. All Rights Reserved
Flow ウィジェットにリファレンスページ（参照ページ）を指定すると、ウィジェットテキ
ストに参照先のページ名が表示されます。この機能を用いて、サイト間の導線をフロー図
記述することが容易になります。
また、Flow ウィジェットは、サイトマップペインから任意のページをドラッグ＆ドロップ
して配置することも可能です。この方法で配置された Flow ウィジェットは、ドラッグ＆ド
ロップしたページがリファレンスページとして指定されます。
6.1.6. ＜参考＞リピータについて
リピータは、特定のウィジェットの配置を繰り返すのに用います。下記のリピータに関す
る設定は、ページに配置したリピータをダブルクリックすることで変更することができま
す。
リピータアイテム
リピータによって繰り返されるウィジェットのまとまりをリピータアイテムと呼びます。
リピータをダブルクリックすることでデザインエリアに新しいタブが開き、リピータアイ
テムの編集を行うことができます。
リピータは、設定に従ってリピータアイテムを繰り返し表示します。
データセット
リピータには、表形式のデータを持たせることができます。このデータの行数分だけ、リ
ピータアイテムが繰り返し表示されます。
ページネーション
ページネーションは、1 ページあたりの最大表示数を指定して、疑似的に複数ページ表示を
する機能です。ページ移動については「現在のページを設定する」アクションで行います。
ページネーションの有効化、およびページあたりの表示数は、リピータスタイルで設定す
ることが可能です。
54
© 2015 NEWSON Co., Ltd. All Rights Reserved
6.2. プロパティとスタイル
全てのウィジェットは、画面右側中央にあるウィジェットのプロパティとスタイルペイン
からプロパティとスタイルを変更することができます。設定可能な項目は、ウィジェット
の種類によって異なります。
以下では、Axure で設定できるプロパティについて、「何が」「どう」設定できるのか、を
説明していきます。
画像のインポート、消去
画像ウィジェットについて、外部からの画像を読み込む場合、またはデフォルトの画像に
戻す場合に使います。
インタラクションスタイル
MouseOver、MouseDown、選択状態、無効状態のそれぞれの状態について、スタイルを
変更することが可能です。MouseOver と MouseDown については、それぞれウィジェッ
トにマウスが乗っている状態、ウィジェットにマウスが乗っていない状態を指します。
画像の分割、トリミング
配置した画像を切り抜いたり、分割したりするのに使います。分割後は、それぞれ別の画
像ウィジェットになります。
選択状態、無効状態
デフォルトでのウィジェットの状態を選択状態、または無効状態にする設定を行います。
選択グループ
同じグループに属しているウィジェットは、同時に 2 つ以上が選択状態にはなれません。
ラジオボタンのように、複数のボタンから 1 つだけ選択するような場合に用いることがで
きます。
55
© 2015 NEWSON Co., Ltd. All Rights Reserved
ツールチップ
ツールチップとして表示される文字列を設定できます。
フローウィジェットの選択
ウィジェットの形を変更することができます。Common のウィジェットと、Flow のウィ
ジェットで選択できる形が異なります。
幅、高さ自動調整
ウィジェットの幅と高さを自動調整できます。自動調整後は、内部のテキストがちょうど
収まる程度の大きさになります。
内容に合わせる
これはダイナミックパネルの設定項目です。ダイナミックパネルの状態のうち、一番上の
状態について、内容がちょうどすべて表示されるようにダイナミックパネルのサイズが自
動調整されます。
スクロール
設定されたダイナミックパネルのサイズでは内容がすべて表示できない時、スクロール表
示させることが可能です。設定値は横について、縦について、縦横両方について、必要で
あれば表示する、という設定になります。
ブラウザの表示位置固定
ブラウザで表示する位置を固定すると、固定されたダイナミックパネルは画面スクロール
に関係なく常に同じ位置で表示されるようになります。表示位置の設定は、ページの端だ
けが設定可能です。
100%ワイド
ダイナミックパネルの横幅を、ブラウザの横幅と一致させます。ユーザがブラウザのサイ
ズを変更した場合にも、それに追随する形でダイナミックパネルのサイズも変更されます。
56
© 2015 NEWSON Co., Ltd. All Rights Reserved
マウスインタラクションスタイルをトリガ
MouseOver の MouseDown インタラクションスタイルについて、ダイナミックパネルに
マウスポインタが重なった時点でダイナミックパネル内の全てのウィジェットに
MouseOver イベントを送ります。逆に、ダイナミックパネルにマウスポインタが重なって
いない場合にはすべてのウィジェットに MouseDown イベントを送ります。
フレームターゲット
インラインフレームについて、内部に表示するページを指定します。指定先は、同じプロ
ジェクト内の別ページ、または外部ページの URL を指定することができます。
フレームスクロールバー
インラインフレームのスクロールバーの表示を設定することができます。デフォルトは「必
要に応じて表示」になっていますが、「常に表示」
「表示しない」も選択可能です。
枠線を非表示
インラインフレームの枠線を非表示にすることができます。
画像プレビュー
インラインフレーム内に指定のプレビュー画像を表示させることができます。ビデオ、地
図、カスタムから選択できます。これらのプレビュー画像は、Axure 上では見えますが、
実際に生成された HTML には現れません。
独立ラジオグループ
独立ラジオグループは、リピータの設定項目です。リピータの 1 要素について、ラジオボ
タンを複数設置した場合、それらについてラジオグループを設定することができます。そ
のままでは、繰り返し表示されたすべてのラジオボタンが同一のラジオグループに属して
しまいますが、独立ラジオグループを設定することで、繰り返し 1 回分でラジオグループ
が完結します。
57
© 2015 NEWSON Co., Ltd. All Rights Reserved
独立選択グループ
独立選択グループも、独立ラジオグループと同様、リピータの設定項目です。リピータの 1
要素内において、選択グループを設定した場合、リピータによって繰り返されたすべての
要素が同一グループにならないように設定します。
テキストタイプ
テキストフィールドの設定項目です。文字列の種類を「テキスト」「パスワード」「メール
アドレス」等から選択します。
ヒントテキスト
テキストフィールド、テキストエリアにおいて、ユーザが文字を入力する前に表示してお
くテキストを設定します。ヒントテキストは、文字を入力すると消え、入力文字を全て消
すと再表示されます。
ヒントスタイル
ヒントテキストのスタイルを設定します。フォント、文字サイズ、文字色などが設定でき
ます。
最大文字数
ユーザが入力できる最大文字数を設定します。この値を超えて文字を入力することはでき
ません。
読み取り専用
テキストフィールド、テキストエリアについて、読み取り専用の状態に変更します。
Submit ボタン
Form の各ウィジェットについて、Enter キーを押したときにクリックされる Submit ボタ
ンを指定します。指定先は HTML ウィジェットである必要はありません。
58
© 2015 NEWSON Co., Ltd. All Rights Reserved
リスト要素
ドロップリスト、リストボックスについて、表示されるリストの要素を管理します。要素
の追加と削除、デフォルトで選択されている要素の設定が可能です。
整列ボタン
チェックボックス、ラジオボタンについて、ボタンとラベルの配置順を設定します。デフ
ォルトでは、ボタンが左側、ラベルが右側に配置されますが、逆向きに配置することが可
能です。
ラジオグループ割り当て
複数のラジオボタンを設置した場合に、同じグループ名を割り当てることで、ラジオボタ
ンのグループを作ることができます。ラジオボタンでは、そのグループの中から 1 つだけ
を選択することができます。
展開/折り畳みアイコンの表示
ツリーの設定項目です。ツリーを展開、折り畳みするときにクリックするアイコン画像の
表示設定が可能です。デフォルトは表示の設定になっています。
展開/折り畳みアイコンの画像選択
項目名は表示されていませんが、
「アイコンの表示」項目のすぐ下の項目に当たります。展
開時、折り畳み時それぞれについてアイコンが設定でき、デフォルトではプラス/マイナス
と三角形のセットが準備されています。そのほか、画像をインポートして自由に設定する
ことも可能です。
ツリー要素のアイコンを表示
展開、折り畳みアイコンのほか、ツリーの各要素にアイコンを設定することができます。
こちらはデフォルトでは何も用意されていないので、表示したいアイコン画像を用意し、
インポートします。アイコンの設定は、すぐ下のツリーノードのプロパティから、アイコ
ンの右側にある【編集】ボタンをクリックして行います。
59
© 2015 NEWSON Co., Ltd. All Rights Reserved
メニューパディング
メニューパディングは、クラシックメニューの設定項目です。メニューのそれぞれのボタ
ンについて、パディングを設定します。デフォルト値は 0 となっており、大きくすればす
るほど、パディングも大きくなります。
リファレンスページ
リファレンスページは、フローチャート要素などをクリックした時に移動させたいページ
を指定します。リファレンスページを指定すると、ウィジェットに遷移先のページ名が表
示されます。また、フローチャート要素のほかに、リピータのデータとしてもリファレン
スページを設定することが可能です。
位置 + サイズ
ウィジェットの配置位置とウィジェットのサイズを変更します。位置指定は、ウィジェッ
トの左端と上端の座標と、幅、高さをピクセル単位で指定します。
また、Rot °の数値を変更することでウィジェットを回転させることができ、Text °の数値
を変更するとウィジェット内のテキストだけを回転させることができます。数値は度で入
力し、時計回りの方向に回転します。
Hidden のチェックボックスにチェックを入れると、選択していたウィジェットは非表示状
態に変更されます。
基本スタイル
ウィジェットの基本スタイルを選択します。ウィジェットの基本スタイルについては 7.3
節を参照してください。
フォント
ウィジェット内のテキストについて、フォントを設定します。フォントファミリー、タイ
プフェイス、文字サイズ、太字・斜体・下線、文字色、箇条書き、テキストリンクが設定
できます。
60
© 2015 NEWSON Co., Ltd. All Rights Reserved
線、塗りつぶし
ウィジェットの境界線、図形などの線、塗りつぶしを設定します。線の色、太さ、線種、
矢印の始点終点、四角形の角半径、塗りつぶし色、塗りつぶしの不透明度、ウィジェット
の外の影、内の影、文字の影が設定できます。
整列 + 余白
ウィジェット内のテキストについて、上下左右の整列、余白、行間隔が設定できます。
6.3. 外部ライブラリ
ウィジェットは、標準で準備されたものだけではありません。Axure 英語版のサイト等か
ら、ライブラリをダウンロードしてくることもできます。ダウンロードしたライブラリは、
ウィジェットペインから読み込むことができます。
アイコンをクリック＞【ライブ
ラリの読み込み】でダウンロードしたウィジェットをペインに追加することができます（図
6-1）
。
図 6-1 外部ライブラリの読み込み
また、自分で新しくライブラリを作ることも可能です。
アイコンから、
【ライブラリの
作成】を選択することで、新しいプロジェクトが開きます。ここで作成したライブラリも、
同様に読み込むことで利用することができます。
61
© 2015 NEWSON Co., Ltd. All Rights Reserved
7. テンプレート
Axure では、ウィジェットの配置や設定など、同じものを繰り返し使う場合にテンプレー
ト化して用いることができます。この章では、いくつかのテンプレートについて説明しま
す。
7.1. マスタ
複数のウィジェットの配置をテンプレートとして保存したものを「マスタ」と呼びます。
マスタの作成方法は、2 種類あります。それぞれ、手順を説明していきます。
① マスタの新規作成
マスタを新規に作成する手順を説明します。
まずは、
【マスタの追加】をクリックします（図 7-1）。
図 7-1 マスタの追加
すると、新規マスタが作成されるので、ダブルクリックして開きます。ページと同様に、
デザインエリアで自由にウィジェットを配置すればマスタの作成は完了です（図 7-2）
。
62
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-2 マスタの編集
② マスタに変換
すでにページへ配置済みのウィジェットをマスタに変換する手順を説明します。
マスタに変換したい 1 つまたは複数のウィジェットを選択します（図 7-3）
。
図 7-3 マスタに変換するウィジェットを選択する
ウィジェット選択後、
【配置】メニューから【マスタに変換】を選択します（図 7-4）
。
63
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-4 マスタに変換
新しく作られるマスタ名と、配置時の挙動について設定を求められるので、入力して【続
行】をクリックします（図 7-5）。
図 7-5 新しいマスタの設定
以上で、選択したウィジェットがマスタに変換され、マスタペインに新しく追加されます。
7.1.1. マスタの利用
作成したマスタは、左下のマスタペインから利用することができます。基本的には、ウィ
ジェットと同じようにドラッグ＆ドロップでデザインエリアに配置するだけで使うことが
できます。
64
© 2015 NEWSON Co., Ltd. All Rights Reserved
マスタ利用の注意点としては、一度マスタとして登録してしまった内容は、ページによっ
て文字列を変更したりすることができません。マスタの変更は、おおもとの内容がそのま
ま変更されてしまいますので、そのマスタを利用しているページすべてに適用されます。
また、特定のマスタが使われているページを調べることも可能です。調べたいマスタを右
クリックし、
【使用レポート】を選択します。すると、図 7-6 のようなウィンドウが出てき
て、選択したマスタがどのページで使用されているのかが表示されます。
図 7-6 マスタ使用レポート
7.2. ページの基本スタイル
ページの形式について、プロジェクト内で同じ設定を再利用したい場合に、設定をテンプ
レート化することができます。ここでは、テンプレートの作成方法を説明します。
ツールバーの【プロジェクト】メニューから【ページスタイルエディタ】を選択すると、
ページスタイルエディタのウィンドウが開きます。
アイコンをクリックし、新しいページスタイルを作成します（図 7-7）
。
65
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-7 新しいページスタイルの作成
設定したい属性にチェックを入れ、書式を設定したあと、
【OK】をクリックします（図 7-8）
。
図 7-8 新しいページスタイルの作成（2）
チェックを入れなかった書式については、デフォルトのものが適用されます。
66
© 2015 NEWSON Co., Ltd. All Rights Reserved
作成されたテンプレートは、ページ属性ペイン、ページの形式タブ、ページの形式から選
択することで適用できます。
7.3. ウィジェットの基本スタイル
ページの形式と同様に、ウィジェットのスタイルについてもテンプレートを作成すること
ができます。以下、テンプレートの作成方法について説明します。
ツールバーから、ショートカットアイコンの
（ウィジェットスタイルエディタ）をクリ
ックし、ウィジェットスタイルエディタウィンドウを開きます。
【カスタム】タブを開き、
アイコンをクリックして新しいウィジェットスタイルを作成
します（図 7-9）
。
図 7-9 新しいウィジェットスタイルの作成
設定したい属性にチェックを入れ、書式を設定したあと、
【OK】をクリックします（図 7-10）
。
67
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-10 新しいウィジェットスタイルの作成（2）
チェックを入れなかった書式については、デフォルトのものが適用されます。
作成されたテンプレートは、ウィジェットのプロパティとスタイルペイン、スタイルタブ、
基本スタイルから選択することで適用できます。
7.4. ジェネレータと設定の追加
ツールバーの【パブリッシュ】メニューから、ジェネレータと設定の追加を行うことがで
きます（図 7-11）
。
68
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-11 ジェネレータと設定の追加
ここでは、HTML と仕様書の自動生成における設定テンプレートを作成することができま
す（図 7-12）
。
図 7-12 ジェネレータの設定
ウィンドウ左上の【追加】と表示されているドロップダウンリストから、作成したいテン
プレートを選択すると、新しい設定が追加されます（図 7-13）
。
69
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-13 ジェネレータの設定を追加する
設定を選び、
【生成】ボタンをクリックすると、HTML/仕様書の生成に関する設定を行うこ
とができます。設定項目については、5.4.2 項と 5.5.2 項を参照してください。
7.4.1. CSV レポートの自動生成
ジェネレータと設定の追加では、CSV レポートを自動生成することができます（図 7-13）
。
CSV レポートは、プロジェクト内で作成したページ及びウィジェットに関するレポートを
それぞれ CSV 形式で出力します。
CSV レポート生成に関わる設定項目は、以下の通りです。
全般
ページレポート、ウィジェットレポートについて生成するかどうか、生成する場合はファ
イルの生成場所を設定します。
ページ
レポートを作成するページを選択します。
70
© 2015 NEWSON Co., Ltd. All Rights Reserved
マスタ
レポートを作成するマスタを選択します。
チェックボックスの設定に関しては、5.5.2 項を参照してください。
ページノート
ページレポートに含まれる内容を選択し、また出力する順番を設定します。設定項目一覧
は以下の通りです。
ページ／マスタ
ページとマスタどちらについての情報なのかを出力します。
ページ／マスタ名
ページ名、マスタ名を出力します。
ページ／マスタ番号
ページ番号、マスタ番号を出力します。番号は表示された順番に
割り当てられます。
マスタの性質
マスタについてのみ、配置時の挙動によって出力が変わります。
「任意の場所に配置」の場合は「Normal」
、
「場所を固定して配置」
の場合は「背景」、「ウィジェットとして配置」の場合には「カス
タムウィジェット」と出力されます。
インタラクション
インタラクションに関する情報を出力します。
ページノート
選択したページノートについて出力します。
ウィジェットノート
ウィジェットレポートに含まれる内容を選択し、また出力する順番を設定します。設定項
目一覧は以下の通りです。
ページ／マスタ名
配置されているページ名またはマスタ名を出力します。
注釈番号
ウィジェットにつけられた注釈番号を出力します。
名前
ウィジェットにつけられた名前を出力します。何も名前を付けて
いない場合は空白となります。
インタラクション
ウィジェットのインタラクションに関する情報を出力します。
ウィジェットノート
選択したウィジェットノートについて出力します。
71
© 2015 NEWSON Co., Ltd. All Rights Reserved
7.5. フォーマットペインター
フォーマットペインターは、複数のウィジェットに同じスタイルを適用させる機能です。
あらかじめ準備したものを適用させるテンプレートとは少し異なりますが、ここではフォ
ーマットペインターの使い方を説明します。
ツールバーのショートカットアイコン
（フォーマットペインター）をクリックし、フォ
ーマットペインターウィンドウを開きます。
デザインエリアでは、スタイルを適用させたいウィジェットを選択しておきます（図 7-14）
。
図 7-14 フォーマットペインターを使用する準備
フォーマットペインターウィンドウで、適用させたい属性にチェックを入れ、書式を設定
します。
【適用】ボタンをクリックすると、ウィジェットに書式を反映されます。
72
© 2015 NEWSON Co., Ltd. All Rights Reserved
図 7-15 フォーマットの適用
73
© 2015 NEWSON Co., Ltd. All Rights Reserved
8. インタラクション
Axure では、Web ページ上で様々な動きを表現するために、
「インタラクション」を用いま
す。インタラクションには、ウィジェットのインタラクションとページインタラクション
の 2 種類がありますが、どちらもこの章で説明します。
インタラクションは、
「イベント」と「ケース」、
「アクション」の 3 つで構成されています。
この章では、それぞれについて説明します。
8.1. イベント
イベントとは、画面もしくはウィジェットに対して、何らかの入力を行ったときに発生す
るものです。たとえば、クリックしたり、ドラッグしたり、ページを読み込んだりなど、
あらゆる入力や動作がイベントとして定義されています。
以下は、Axure で扱えるイベントの一覧です。
ウィジェット共通イベント
OnClick
ウィジェットがクリックされたときに発生します。
OnMouseEnter
ウィジェットの上にマウスカーソルが乗ったときに発生し
ます。
OnMouseOut
ウィジェットの上に乗っていたマウスが出て行ったときに
発生します。
OnDoubleClick
ウィジェットがダブルクリックされたときに発生します。
OnContextMenu
ウィジェットが右クリックされたときに発生します。
OnMouseDown
マウスを押したときに発生します。
OnMouseUp
マウスのボタンから指が離れたときに発生します。
OnMouseMove
ウィジェットの上でマウスカーソルが動いている間、発生
します。ウィジェットの外で動いている場合には発生しま
せん。
OnMouseHover
ウィジェットの上にマウスが 1 秒以上乗っていたときに 1
74
© 2015 NEWSON Co., Ltd. All Rights Reserved
度だけ発生します。マウスカーソルがウィジェット外に出
た後、再度ウィジェットの上に乗せると再度発生します。
OnLongClick
ウィジェットがマウスで長く押されたときに 1 度だけ発生
します。
OnKeyDown
ウィジェットにフォーカスがある場合、キーボードのボタ
ンを押したときに発生します。
OnKeyUp
ウィジェットにフォーカスがある場合、キーボードのボタ
ンから指が離れたときに発生します。
OnMove
ウィジェットが移動した時に発生するイベントです。ウィ
ンドウサイズ変更によるウィジェット移動では OnMove
は発生しません。また、実際に移動していなくても、「移
動」アクションが行われた場合には発生します。
OnShow
ウィジェットがアクションによって表示されたときに
発生します。
OnHide
ウィジェットがアクションによって非表示になったと
きに発生します。
OnFocus
ウィジェットがフォーカスされたときに発生します。
OnLostFocus
ウィジェットのフォーカスが別に移ったときに発生し
ます。
ダイナミックパネルのイベント
OnPanelStateChange ダイナミックパネルの状態が変更されたときに発生し
ます。
OnDragStart
ダイナミックパネルのドラッグが開始したときに発生
します。
OnDrag
ダイナミックパネルがドラッグされている間、発生しま
す。
OnDragDrop
ダイナミックパネルがドラッグ＆ドロップされたとき
に発生します。
OnSwipeLeft
画面が左にスワイプされたときに発生します。
75
© 2015 NEWSON Co., Ltd. All Rights Reserved
OnSwipeRight
画面が右にスワイプされたときに発生します。
OnLoad
ウィジェットが読み込まれたときに発生します。
OnSwipeUp
画面が上にスワイプされたときに発生します。
OnSwipeDown
画面が下にスワイプされたときに発生します。
OnScroll
スクロールバー付のダイナミックパネルにおいて、スク
ロールされたときに発生します。
OnResize
ダイナミックパネルのサイズが変更されたときに発生
します。実際に大きさが変わっていなくても、「サイズ
を変更する」アクションを行った場合には発生します。
特定ウィジェットのイベント
OnSelectionChange
ドロップリスト、リストボックスにおいて、選択が変更
されたときに発生します。
OnCheckedChange
チェックボックスなどのチェック状態が変更されたと
きに発生します。
OnTextChange
テキストフィールドなどの入力文字が変更されたとき
に発生します。
OnItemLoad
リピータの要素が読み込まれたときに発生します。
ページのイベント
OnPageLoad
ページが読み込まれたときに発生します。
OnWindowResize
ウィンドウの大きさが変更されたときに発生します。
OnWindowScroll
ウィンドウがスクロールされたときに発生します。
OnPageClick
ページがクリックされたときに発生します。
OnPageDoubleClick
ページがダブルクリックされたときに発生します。
OnPageContextMenu ページが右クリックされたときに発生します。
OnPageMouseMove
ページ上でマウスカーソルが動いているときに発生し
ます。
76
© 2015 NEWSON Co., Ltd. All Rights Reserved
OnPageKeyDown
キーボードのボタンを押したときに発生します。
OnPageKeyUp
キーボードのボタンから指が離れたときに発生します。
OnAdaptiveViewCha
アダプティブビューを利用している場合、アダプティブ
nge
ビューが切り替わったときに発生します。
8.2. ケース
ケースとは、「○○が△△を満たすとき、××を実行する」というように、条件分岐とアク
ションが組み合わさったものです。ケースは、それぞれのイベントに割り当て、ユーザの
操作などに対応してアクションを実行するといった使い方をします。
ケースの追加方法については、4.8.1 項を参照してください。
8.2.1. 条件
条件文は、比較する「演算」と比較される 2 つの「値」から構成され、比較演算の結果と
して「満たす」
「満たさない」などが評価されます。Axure で扱える演算と値の一覧は、以
下の通りです。
演算
次と等しい / 等しくない
等しいかどうか評価します。
次より大きい / 小さい
数値の大小を不等号（<, >）で評価します。
次より大きいか等しい / 小さいか等しい
数値の大小を等号付き不等号（≦, ≧）で評価
します。
次である / 次ではない
「数字」
「英字」
「英数字」
「以下のどれか」か
ら選択します。
「以下のどれか」を選択すると
リストを作ることができ、
「そのうちのどれか
と等しい / どれとも等しくない」で評価しま
す。
次を含む / 含まない
次の値が含まれているかどうか評価します。
次と重なる / 重ならない
ウィジェット、カーソルについて、重なって
いる状態かどうか評価します。
77
© 2015 NEWSON Co., Ltd. All Rights Reserved
次に入る / 離れる
カーソルについて、入っているか入っていな
いか評価します。
値
値
数値などを入力します。変数と関数を用いる
ことも可能です。変数については 8.2.2 項を
参照してください。
変数[値について]
選択した変数の値について比較します。
変数[値の長さについて]
選択した変数の値の長さを比較します。
ウィジェット[テキストについて]
選択したウィジェットのテキストを比較しま
す。
フォーカスされたウィジェット[テキスト]
テキストエリア、ボタンなどユーザのフォー
カスがあるウィジェットのテキストを比較し
ます。
ウィジェット[値の長さについて]
条件作成ウィンドウで選択したウィジェット
の値の長さを比較します。
ウィジェット[選択された値について]
条件作成ウィンドウで選択したドロップリス
ト、リストボックスについて、ユーザが選択
した値を比較します。
次が選択されているかどうか
条件作成ウィンドウで選択したウィジェット
について、選択状態かどうかを比較します。
パネルの状態について
ダイナミックパネルについて、現在の状態を
比較します。
ウィジェットの可視性
ウィジェットがスタイルで Hidden に設定さ
れているかどうかを比較します。
キーの押下
ユーザが押しているキーを評価します。
カーソル
ユーザのマウスカーソルの位置で評価しま
す。
ウィジェットエリア
選択したウィジェットの領域について、他の
ウィジェットと重なっているかどうか評価し
ます。
78
© 2015 NEWSON Co., Ltd. All Rights Reserved
アダプティブビュー
現在のビューがどれか評価します。
状態
ダイナミックパネルの状態を選択します。
オプション
ドロップリスト、リストボックスについて、
リストに表示された値を選択します。
8.2.2. 変数
条件で比較する値として、入力する文字や数値の他に、変数を使うことができます。
Axure で利用できる変数には、グローバル変数とローカル変数の 2 種類があります。
グローバル変数
同一プロジェクト内で共通です。別ページに遷移しても変数には同じ値
が格納されているので、ページ間で値を渡すのに利用できます。
ローカル変数
テキストの編集ウィンドウでのみ宣言可能です。ローカル変数は、何度
でも同じ変数名で宣言することができますが、それぞれのローカル変数
は必ずしも同じ値にはなりません。
8.3. アクション
アクションは、ブラウザ上で動きのある表現をするために使用します。アクションには、
ページ遷移、ウィジェットの移動、文字列の変更などがあります。
インタラクションに指定できるアクション一覧は、以下の通りです。
リンク
リンクを開く
指定したリンクを開きます。開く場所として、
「現
在のウィンドウ」「新しいウィンドウ/タブ」「ポ
ップアップウィンドウ」「親ウィンドウ」が選択
できます。開くリンク先としては、同プロジェク
ト内のページ、外部 URL またはファイル、現在
のページ（更新）、前のページから選択します。
ウィンドウを閉じる
現在のウィンドウを閉じます。
フレームでリンクを開く
選択したインラインフレーム内で指定したリン
クを開きます。
79
© 2015 NEWSON Co., Ltd. All Rights Reserved
ウィジェットにスクロールする
指定したウィジェットまでスクロールします。ス
クロールさせる方向について、縦方向のみ、横方
向のみ、縦横両方が指定できます。また、スクロ
ール時のアニメーションも指定可能です。
ウィジェット
表示 / 非表示
ウィジェットの表示状態を変更します。
文字列を変更する
ウィジェットのテキストを変更します。
画像を変更する
画像を変更します。変更後の画像についてマウス
インタラクションを指定することも可能です。
選択状態を変更する
選択状態を変更します。選択
選択されたリストオプションをセット
ドロップリスト、リストボックスについて、指定
した値が選択された状態に変更します。
有効 / 無効
選択したウィジェットを有効 / 無効にします。
Move
選択したウィジェットを移動させます。移動は、
「指定した位置へ」または「指定した値ずつ」移
動させることができます。また、移動にアニメー
ションを指定することも可能です。
前面 / 背面に持ってくる
選択したウィジェットの順序を入れ替えます。
Focus
フォーカスを移動させます。
ツリーの展開 / 折り畳み
選択したツリーについて、展開 / 折り畳みを行
います。
ダイナミックパネル
パネル状態を変更する
ダイナミックパネルの状態を別の状態に変更し
ます。変更先の状態、変更時のアニメーション、
パネルが非表示になっている場合は表示する、ウ
ィジェットの Push/Pull の設定が可能です。
パネルのサイズを変更する
変更後の幅と高さを指定してダイナミックパネ
ルのサイズを変更します。変更時のアニメーショ
ンを指定することも可能です。
80
© 2015 NEWSON Co., Ltd. All Rights Reserved
変数
変数の値を設定する
指定した変数に値をセットします。
リピータ
ソートを追加する
リピータのデータセットを並び替えるソートを
追加します。ソートの名前、並び替える基準の列、
並び替える時の比較条件（番号順、アルファベッ
ト順など）
、順序（昇順、降順）を設定します。
ソートを削除する
作成したソートを削除します。
フィルタを追加する
リピータのデータセットにフィルタを追加しま
す。フィルタの名前、ルールを指定します。
フィルタを削除する
作成したフィルタを削除します。
現在のページを設定する
ページネーションされている場合、現在のページ
を設定します。
ページごとの項目数を設定する
ページネーションについて、ページごとの項目数
を変更します。
行の追加
リピータのデータセットに行を追加します。
行をマーク
リピータのデータセットについて、行をマーク状
態にします。
行のマーク解除
リピータのデータセットについて、行のマーク状
態を解除します。
行を更新する
リピータのデータセットについて、行の値を更新
します。更新する行の選択には、指定したルール
を満たす行を更新する方法と、マークされている
行を更新する方法があります。更新後の値は、列
ごとに値を指定します。
行を削除する
リピータのデータセットについて、行を削除しま
す。削除行の選択には、指定したルールを満たす
行を削除する方法と、マーク状態になっている行
を削除する方法があります。
81
© 2015 NEWSON Co., Ltd. All Rights Reserved
その他
待機
指定した時間だけ待機します。待機中は次のアク
ションが動作しません。
その他
アクションの説明などを入力します。アクション
が実行されると、新しいウィンドウが開いて、入
力したアクションの説明が表示されます。
82
© 2015 NEWSON Co., Ltd. All Rights Reserved
9. お問い合わせについて
Axure 日本語版のサイト（http://axure.newson.co.jp）のお問い合わせフォームからお問
い合わせください。
本書の著作権は、ニューソン株式会社に帰属します。本書から引用を行う際は、必ず出典
を明記してください。許可なく本書の改変・転載・再配布を行うことはできません。
本書は予告なく記載事項が変更されることがあります。本書の利用によって生じた、いか
なる損害についても、著作権者は一切の責任を負わないものとします。
83
© 2015 NEWSON Co., Ltd. All Rights Reserved
付録A ショートカットキー一覧
一般
切り取り
CTRL + X
コピー
CTRL + C
ペースト
CTRL + V
固定されたウィジェットも貼り付け
CTRL + SHIFT + V
複製
CTRL + D
元に戻す
CTRL + Z
やり直し
CTRL + Y
すべて選択
CTRL + A
ファイルを開く
CTRL + O
新しいファイル
CTRL + N
保存
CTRL + S
名前を付けて保存
CTRL + SHIFT + S
Axure の終了
ALT + F4
印刷
CTRL + P
検索
CTRL + F
置換
CTRL + H
ヘルプ
F1
スペルチェック
F7
自動生成
プレビュー
F5
プレビューオプション
CTRL + F5
Axure Share にパブリッシュ
F6
HTML を生成
F8
現在のページを再生成
CTRL + F8
Word ファイルを生成
F9
84
© 2015 NEWSON Co., Ltd. All Rights Reserved
デザインエリア
次のページへ
CTRL + TAB
前のページへ
CTRL + SHIFT + TAB
ページを閉じる
CTRL + W
全てのタブを閉じる
CTRL + SHIFT + W
上へ大きくスクロール
PAGE UP
下へ大きくスクロール
PAGE DOWN
左へ大きくスクロール
SHIFT + PAGE UP
右へ大きくスクロール
SHIFT + PAGE DOWN
上へスクロール
マウスホイールを上に
下へスクロール
マウスホイールを下に
左へスクロール
SHIFT + マウスホイールを上に
右へスクロール
SHIFT + マウスホイールを下に
ズームイン
CTRL + +
ズームアウト
CTRL + -
ズームをリセット
CTRL + 0(zero)
ウィジェットペイン
インタラクションタブにフォーカスを移す
CTRL + 1
ノートタブにフォーカスを移す
CTRL + 2
プロパティタブにフォーカスを移す
CTRL + 3
スタイルタブにフォーカスを移す
CTRL + 4
カーソル
カーソルを交差モードに変更
F3
カーソルを包含モードに変更
CTRL + F3
カーソルをコネクタモードに変更
CTRL + SHIFT + F3
編集
グループ化
CTRL + G
85
© 2015 NEWSON Co., Ltd. All Rights Reserved
グループ解除
CTRL + SHIFT + G
前面に移動
CTRL + ]
背面に移動
CTRL + [
最前面に移動
CTRL + SHIFT + ]
最背面に移動
CTRL + SHIFT + [
左揃え
CTRL + ALT + L
中央揃え（横）
CTRL + ALT + C
右揃え
CTRL + ALT + R
上揃え
CTRL + ALT + T
中央揃え（縦）
CTRL + ALT + M
下揃え
CTRL + ALT + B
テキストを左揃え
CTRL + SHIFT + L
テキストを中央揃え
CTRL + SHIFT + C
テキストを右揃え
CTRL + SHIFT + R
横方向に配置
CTRL + SHIFT + H
縦方向に配置
CTRL + SHIFT + U
ダイナミックパネルに変換
CTRL + SHIFT + ALT + D
マスタに変換
CTRL + SHIFT + ALT + M
位置とサイズを固定
CTRL + K
位置とサイズの固定を解除
CTRL + SHIFT + K
位置とサイズの編集
CTRL + L
縦横比を維持しつつ高さ（幅）の変更
SHIFT + ENTER
画像の分割
CTRL + SHIFT + ALT + S
テキストリンクの挿入
CTRL + SHIFT + ALT + H
全ての選択されたウィジェットのコンテン
CTRL + SHIFT + ALT + C
ツをコピー
プレインテキストとして貼り付け
CTRL + SHIFT + V
固定されたウィジェットも含めて貼り付け
CTRL + ALT + V
全てのビューから削除
CTRL + DEL
脚注番号を減らす
CTRL + J
86
© 2015 NEWSON Co., Ltd. All Rights Reserved
脚注番号を増やす
CTRL + SHIFT + J
ページタブ
タブの履歴を戻る
CTRL + TAB
タブの履歴を進む
CTRL + SHIFT + TAB
タブビューで左右に移動する
CTRL + ALT + ← / →
サイトマップ / ツリー
新しいページ
CTRL + ENTER
新しいフォルダ
CTRL + SHIFT + ENTER
選択したアイテムをインデントする
TAB
選択したアイテムのインデントを戻す
SHIFT + TAB
選択したアイテムを上に移動する
CTRL + ↑
選択したアイテムを下に移動する
CTRL + ↓
検索する
検索したい文字列を入力する
検索バーから検索結果に移動する
↓
検索結果から検索バーに戻る
SHIFT + TAB
検索を終了する
ESC
87
© 2015 NEWSON Co., Ltd. All Rights Reserved
付録B AxShare について
概要
AxShare とは、Axure 社が提供している Axure プロジェクト専用のホスティングサービス
です。Axure で作成したプロジェクトをアップロードすることで、作成したプロトタイプ
を Web サイトとしてインターネットに公開することができます。
AxShare の特徴は、以下の 4 点です。
・プロジェクトをアップロードするだけで Web サイトができる
・Web サイトにパスワードをかけることができる
・無料で使うことができる
・URL を知っていれば誰でもアクセスできる
アカウントの作り方
アカウントを作るには、2 通りの方法があります。
① AxShare のサイト（http://share.axure.com）からサインアップ
② Axure からアカウント作成
Axure から直接アップロードする
AxShare へのプロジェクトのアップロードは、AxShare サイトからも行えますが、Axure
から直接アップロードすることもできます。
アップロードしたいプロジェクトを開き、ツールバーの【パブリッシュ】メニューから
【Axure Share にパブリッシュ】を選択することで、AxShare に直接アップロードができ
ます。
88
© 2015 NEWSON Co., Ltd. All Rights Reserved

Download Report