Visio Professional と Visio プラン 2のワイヤフレーム テンプレートは、ソフトウェア アプリケーションの中忠実度モックアップを作成するために設計されています。 このテンプレートは、Windows、インターネット、モバイル デバイス用のアプリケーションなど、さまざまな種類のソフトウェアに使用できます。
-
まず、[ダイアログ] ステンシルをクリックして、アプリケーション フォームまたはダイアログ ボックス フォームをページへドラッグします。 次に、このステンシルから他の図形を追加して、UI の基本構造を作成します。
-
[ツール バー] ステンシルをクリックして、メニューやその他のアプリケーション アイコンを追加します。
-
他の 4 つの既定のステンシル ([コントロール]、[カーソル]、[共通アイコン]、および [Web およびメディアのアイコン]) から UI に図形を追加して、アプリケーションの機能を表現します。
一部のワイヤーフレーム図形には、カスタマイズできるプロパティがあります。 ここでは、これらの図形を使用するためのヒントを示します。
目的に合ったトピックをクリックしてください
ダイアログの作成
|
図形 |
ヒント |
|---|---|
|
アプリケーション フォーム |
アプリケーション全体を格納するコンテナーです。 右上隅の接続ポイントには、Windows のボタンの図形が配置されます。 |
|
ダイアログ ボックス フォーム |
ダイアログ ボックスのアイコン、コントロール、およびテキストを格納するコンテナーです。 右上隅の接続ポイントには、Windows のボタンの図形が配置されます。 |
|
Windows のボタン |
[閉じる]、[最大化]、[最小化]、または [復元] (通常はアプリケーションとダイアログ フォームの右上隅にあるボタン) を使用して、表すボタンを選択します。 フォームに図形をドロップするときに必要なボタンを選択し、図形を右クリックして [ ボタンの種類 ] をクリックして後で変更することもできます。 ボタンの網掛け表示を変更するには、図形を右クリックして、[有効を表示] をクリックします。 |
|
ステータス バー |
ステータス バー項目、アイコン、および分割線のコンテナーです。 ステータス バー項目は、中程度の長さのバーで、ダブルクリックするとテキストを追加できます。 また、このバーの中央には接続ポイントがあり、ここにアイコン、進行状況バー、スライダーなどの図形を追加できます。 ステータス バー アイコンは、中央に接続ポイントがある短いバーで、[共通アイコン] または [Web およびメディアのアイコン] からアイコンをドロップできます。 ステータス バー分割線は、他の図形との間にドロップして、境界をわかりやすくするために使用します。 |
|
スクロール バー |
スクロール バーを右クリックすると、スクロール バーの方向 (垂直または水平) や、スライダーの長さ (ボックスのサイズ) を設定できます。 スクロール バーの長さに沿ってスライダーを移動するには、黄色のコントロール ハンドルを使用します。 |
|
サイズ変更グラバー |
スクロール バーとステータス バーでのみ使用できます。 サイズ変更グラバーをページ上にドロップすると、種類を設定するためのダイアログ ボックスが表示されます。 |
|
タブ バー |
タブ項目のコンテナーです。 上部タブ項目または下部タブ項目を追加した後に、さらにタブ項目を追加するには、タブ項目を右クリックするか、タブの隅をポイントしたときに表示される青色の挿入矢印 (オレンジ色のハイライト付き) をクリックします。 タブの網掛け表示を変更するには、図形を右クリックして [アクティブ タブを設定] をクリックします。 タブ バーの選択時には、[コンテナー ツール] の [書式] タブを使用して、タブ バーのスタイルを変更できます。 |
ツール バーを作成する
|
図形 |
ヒント |
|---|---|
|
メニュー バー |
メニュー バー項目のコンテナーです。 メニュー バー項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など)、種類 (通常のメニュー項目かドロップダウン メニュー項目か)、およびアイコン用の領域を追加するかどうかを設定できます。 また、別のメニュー バー項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。 |
|
ドロップダウン メニュー |
メニュー項目のコンテナーです。 メニュー項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など)、種類 (通常の項目かオプションか)、およびその項目の幅をメニューの幅に合わせるかどうかなどを設定できます。 また、別のメニュー項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。 ドロップダウン メニューをメニュー バー項目に接続することにより、クリックして開く形式のメニューを表示できます。 メニュー バー項目の下隅には接続ポイントがあり、ドロップダウン メニューの上隅と接続できます。 |
フォームにコントロールを追加する
|
図形 |
ヒント |
|---|---|
|
ハイパーリンク |
ハイパーリンク図形をページ上にドロップすると、[ハイパーリンク] ダイアログ ボックスが表示され、リンク先を設定できるようになります。 |
|
ボタン |
ボタン図形を右クリックすると、そのボタンの状態、つまり外観 (有効/無効の状態、選択状態など) を設定できます。 |
|
リスト ボックス |
リスト ボックス項目のコンテナーです。 リスト ボックスを右クリックすると、一覧の表示方向 (上から下、左から右など) を設定できます。 リスト ボックス項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など) や、その項目に追加の領域 (アイコンを追加する場所など) が必要な場合にプレースホルダーを設定することができます。 また、別のリスト ボックス項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。 リスト ボックスの選択時には、[書式] タブの [コンテナー ツール] でリスト ボックスのスタイルを変更できます。 |
|
チェック ボックス |
チェック ボックスを右クリックすると、[選択] (たとえば、[選択済み] または [選択なし])、および [状態] ([有効]、[ポイント時] など) を設定できます。 |
|
ツリー コントロール |
ツリー コントロール項目のコンテナーです。 ツリー コントロール項目を追加して右クリックすると、インデントの制御や、ツリーの各種プロパティ (展開/折りたたみの状態、プレースホルダーの領域など) の設定を行うことができます。 また、別のツリー コントロール項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。 ツリー コントロールの選択時には、[書式] タブの [コンテナー ツール] を使用して、ツリー コントロールのスタイルを変更できます。 |
|
スライダー |
スライダーを右クリックすると、目盛りの数や位置などのプロパティを設定できます。 スライダーを移動するには、黄色のコントロール ハンドルを使用します。 |
|
進行状況バー |
進行状況インジケーターを移動するには、黄色のコントロール ハンドルを使用します。 |
|
カレンダー |
カレンダーをページ上にドロップすると、月と年を設定するためのダイアログ ボックスが表示されます。 後で設定を変更する場合は、図形を右クリックして [構成] をクリックします。 |
