Microsoft Visioを使用して、さまざまな種類のGUIデザインを作成できます。
Microsoft Visio 2010は、図、インターフェイス要素、ナビゲーションメニュー、およびその他のビジュアルオブジェクトを作成するために使用できるグラフィックデザインツールです。 グラフィカルユーザーインターフェイス（GUI）のデザインを作成するためのさまざまなツールを提供します。 この図は、アプリケーションまたはWebインターフェースが最終的な形でどのように表示されるかを示しています。 VisioでGUIを開発することはそれほど難しくなく、デザインをPDFファイルとしてエクスポートできます。 Webサイトの基本的なGUIワイヤーフレームモックアップを作成する方法については、いくつかのガイドラインに従ってください。
ステップ1
MicrosoftVisioを開きます。 空白の図面アイコンをクリックして、新しい図面を作成します。 「作成」ボタンをクリックします。
今日のビデオ
ステップ2
画面の左側にある[図形]ウィンドウをクリックします。 [その他の形状]を選択します。 「BasicShapesUSunits」を選択します。 「クイックシェイプ」をクリックします。
ステップ3
長方形のボックスの図形を右クリックし、図形を描画領域にドラッグして、見出しボックスを作成します。 図面の上部領域の約15％をカバーするように、ボックスのサイズを変更します。
ステップ4
長方形のボックスの形状を右クリックし、ヘッダーボックスの下に形状をドラッグして、ナビゲーションメニューボックスを作成します。 ボックスのサイズを変更して、高さが約0.5インチ、幅がヘッダーボックスと同じになるようにします。
ステップ5
長方形のボックスの形状を右クリックし、ナビゲーションメニューボックスの下にドラッグして、大きな本体ボックスを作成します。 ボックスのサイズを変更して、ヘッダーおよびナビゲーションメニューボックスと同じ幅にし、描画領域の下部をカバーします。
ステップ6
長方形ボックスの形状を右クリックし、その形状を作図領域に2回ドラッグして、2つの長方形ボックスを作成します。 本体ボックスの半分に合うように各ボックスのサイズを変更します。 本体ボックス内で隣接するように各ボックスを移動します。
ステップ7
ナビゲーションバーの上部にある[テキスト]ボタンをクリックして、ナビゲーションリンクを表すテキストフィールドを作成します。 マウスの左ボタンをクリックして、ナビゲーションボックス内の領域を選択し、小さなテキストフィールドを作成します。 マウスを動かして、フィールドのサイズを目的の長さに変更します。 テキストを入力して「ホーム」と言います。
ステップ8
マウスの左ボタンを使用して、さらに4つのテキストフィールドを作成します。 各ボックスに「メニュー項目」と入力します。 「ホーム」ボックスのサイズに一致するように各ボックスのサイズを変更します。
ステップ9
メインヘッダーボックス内の領域を選択し、「メインヘッダー」という説明のテキストフィールドを作成します。
ステップ10
図面のメインコンテンツボックス領域内にある各ボックス内にテキストボックスを作成します。 各テキストボックスに「コンテンツ領域」などの説明を付けます。 各テキストボックスのサイズを同じサイズに変更します。 上部のナビゲーションメニューで[ポインタ]ボタンを選択します。
ステップ11
上部のナビゲーションメニューから[ファイル]をクリックし、[名前を付けて保存]を選択して、図面を保存します。
ヒント
VisioにはGUIプロトタイプステンシルまたはオブジェクトは付属していませんが、サードパーティ企業はそのようなツールをダウンロード用に提供しています。 Visioを使用して共同デザインを作成する場合は、Visioの図面ファイル形式がほとんどの図面ソフトウェアパッケージと互換性がないことに注意してください。
警告
図面が複雑すぎると、変更を加えた後、Visioの図面の更新が遅くなる可能性があります。
