Visio で GUI を作成する方法

Microsoft Visio 2010 は、図、インターフェイス要素、ナビゲーション メニュー、およびその他のビジュアル オブジェクトの作成に使用できるグラフィック デザイン ツールです。グラフィカル ユーザー インターフェイス (GUI) のデザインを作成するための幅広いツールを提供します。ダイアグラムは、アプリケーションまたは Web インターフェイスが最終的な形でどのように表示されるかを示します。 Visio での GUI の開発はそれほど難しくなく、設計は PDF ファイルとしてエクスポートできます。いくつかのガイドラインに従って、Web サイト用の基本的な GUI ワイヤ フレーム モックアップを作成する方法を学びます。

ステップ 1

Microsoft Visio を開きます。空白の図面アイコンをクリックして、新しい図面を作成します。 [作成] ボタンをクリックします。

ステップ 2

画面左側の Shapes ウィンドウをクリックします。 「その他の図形」を選択します。 「基本形状の米国単位」を選択します。 [クイック シェイプ] をクリックします。

ステップ 3

長方形のボックス形状を右クリックし、その形状を作図領域にドラッグして、見出しボックスを作成します。ボックスのサイズを変更して、図面の上部領域の約 15% をカバーします。

ステップ 4

長方形のボックス形状を右クリックし、その形状をヘッダー ボックスの下にドラッグして、ナビゲーション メニュー ボックスを作成します。ボックスのサイズを変更して、高さが約 0.5 インチ、幅がヘッダー ボックスと同じになるようにします。

ステップ 5

長方形のボックス形状を右クリックし、ナビゲーション メニュー ボックスの下にドラッグして、大きな本体ボックスを作成します。ボックスのサイズを変更して、ヘッダーおよびナビゲーション メニュー ボックスと同じ幅にし、描画領域の下部を覆うようにします。

ステップ 6

長方形のボックスの形状を右クリックし、その形状を描画領域に 2 回ドラッグして、2 つの長方形のボックスを作成します。本体ボックスの半分に収まるように各ボックスのサイズを変更します。各ボックスを移動して、本体ボックス内で互いに隣接するようにします。

ステップ 7

ナビゲーション バーの上部にある [テキスト] ボタンをクリックして、ナビゲーション リンクを表すテキスト フィールドを作成します。マウスの左ボタンをクリックして、ナビゲーション ボックス内の領域を選択し、小さなテキスト フィールドを作成します。マウスを動かして、フィールドのサイズを希望の長さに変更します。 「家」というテキストを入力してください。

ステップ 8

マウスの左ボタンを使用して、さらに 4 つのテキスト フィールドを作成します。各ボックスに「メニュー項目」と入力します。 「ホーム」ボックスのサイズに合わせて各ボックスのサイズを変更します。

ステップ 9

メイン ヘッダー ボックス内の領域を選択し、「メイン ヘッダー」という説明のテキスト フィールドを作成します。

ステップ 10

図面のメイン コンテンツ ボックス領域内にある各ボックス内にテキスト ボックスを作成します。各テキスト ボックスに「コンテンツ エリア」などの説明を付けます。各テキスト ボックスのサイズを同じサイズに変更します。上部のナビゲーション メニューで [ポインター] ボタンを選択します。

ステップ 11

上部のナビゲーション メニューから [ファイル] をクリックし、[名前を付けて保存] を選択して、図面を保存します。

ヒント

Visio には GUI プロトタイプのステンシルやオブジェクトは付属していませんが、サード パーティの企業がそのようなツールをダウンロード用に提供しています。 Visio を使用して共同設計を作成する場合は、Visio 図面ファイル形式がほとんどの図面ソフトウェア パッケージと互換性がないことに注意してください。

警告

図面が複雑すぎると、変更を行った後に図面を更新するときに Visio の速度が低下する可能性があります。