ユーザー インターフェイス用のワイヤーフレーム図を作成する

ユーザー インターフェイス用のワイヤーフレーム図を作成する

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

ワイヤー フレーム テンプレートは、ソフトウェア アプリケーションの中程度の再現性のモデルを作成する設計されています。さまざまな Windows では、インターネット、およびモバイル デバイス用のアプリケーションなどのソフトウェアの種類のテンプレートを使用できます。

  1. まず、[ダイアログ] ステンシルをクリックして、アプリケーション フォームまたはダイアログ ボックス フォームをページへドラッグします。次に、このステンシルから他の図形を追加して、UI の基本構造を作成します。

  2. [ツール バー] ステンシルをクリックして、メニューやその他のアプリケーション アイコンを追加します。

  3. 他の 4 つの既定のステンシル ([コントロール]、[カーソル]、[共通アイコン]、および [Web およびメディアのアイコン]) から UI に図形を追加して、アプリケーションの機能を表現します。

一部のワイヤーフレーム図形には、カスタマイズできるプロパティがあります。ここでは、これらの図形を使用するためのヒントを示します。

目的に合ったトピックをクリックしてください

ダイアログ ボックスを作成します。

ツールバーを作成します。

フォームにコントロールを追加します。

ダイアログ ボックスを作成します。

図形

ヒント

アプリケーション フォーム

アプリケーション全体を格納するコンテナーです。右上隅の接続ポイントには、Windows のボタンの図形が配置されます。

ダイアログ ボックス フォーム

ダイアログ ボックスのアイコン、コントロール、およびテキストを格納するコンテナーです。右上隅の接続ポイントには、Windows のボタンの図形が配置されます。

Windows のボタン

この図形を使用して、表示するボタンを選択します。選択できるボタンは、[閉じる]、[最大化]、[最小化]、または [元に戻す] (通常アプリケーションやダイアログ フォームの右上隅にあるボタン) です。表示するボタンは、この図形をフォーム上にドロップするときに選択できます。また、図形をフォームに追加した後でも、図形を右クリックして [ボタンの種類] をクリックすると、ボタンを変更できます。

ボタンの網掛け表示を変更するには、図形を右クリックして、[有効を表示] をクリックします。

ステータス バー

ステータス バー項目、アイコン、および分割線のコンテナーです。ステータス バー項目は、中程度の長さのバーで、ダブルクリックするとテキストを追加できます。また、このバーの中央には接続ポイントがあり、ここにアイコン、進行状況バー、スライダーなどの図形を追加できます。ステータス バー アイコンは、中央に接続ポイントがある短いバーで、[共通アイコン] または [Web およびメディアのアイコン] からアイコンをドロップできます。ステータス バー分割線は、他の図形との間にドロップして、境界をわかりやすくするために使用します。

スクロール バー

スクロール バーを右クリックすると、スクロール バーの方向 (垂直または水平) や、スライダーの長さ (ボックスのサイズ) を設定できます。スクロール バーの長さに沿ってスライダーを移動するには、黄色のコントロール ハンドルを使用します。

サイズ変更グラバー

スクロール バーとステータス バーでのみ使用できます。サイズ変更グラバーをページ上にドロップすると、種類を設定するためのダイアログ ボックスが表示されます。

タブ バー

タブ項目のコンテナーです。上部タブ項目または下部タブ項目を追加した後に、さらにタブ項目を追加するには、タブ項目を右クリックするか、タブの隅をポイントしたときに表示される青色の挿入矢印 (オレンジ色のハイライト付き) をクリックします。

タブの網掛け表示を変更するには、図形を右クリックして [アクティブ タブを設定] をクリックします。

タブ バーの選択時には、[コンテナー ツール] の [書式] タブを使用して、タブ バーのスタイルを変更できます。

ページの先頭へ

ツールバーを作成します。

図形

ヒント

メニュー バー

メニュー バー項目のコンテナーです。メニュー バー項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など)、種類 (通常のメニュー項目かドロップダウン メニュー項目か)、およびアイコン用の領域を追加するかどうかを設定できます。また、別のメニュー バー項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。

ドロップダウン メニュー

メニュー項目のコンテナーです。メニュー項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など)、種類 (通常の項目かオプションか)、およびその項目の幅をメニューの幅に合わせるかどうかなどを設定できます。また、別のメニュー項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。

ドロップダウン メニューをメニュー バー項目に接続することにより、クリックして開く形式のメニューを表示できます。メニュー バー項目の下隅には接続ポイントがあり、ドロップダウン メニューの上隅と接続できます。

ページの先頭へ

フォームにコントロールを追加します。

図形

ヒント

ハイパーリンク

ハイパーリンク図形をページ上にドロップすると、[ハイパーリンク] ダイアログ ボックスが表示され、リンク先を設定できるようになります。

ボタン

ボタン図形を右クリックすると、そのボタンの状態、つまり外観 (有効/無効の状態、選択状態など) を設定できます。

リスト ボックス

リスト ボックス項目のコンテナーです。リスト ボックスを右クリックすると、一覧の表示方向 (上から下、左から右など) を設定できます。リスト ボックス項目を追加して右クリックすると、その項目の状態 (有効/無効の状態、選択状態など) や、その項目に追加の領域 (アイコンを追加する場所など) が必要な場合にプレースホルダーを設定することができます。また、別のリスト ボックス項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。

リスト ボックスの選択時には、[書式] タブの [コンテナー ツール] でリスト ボックスのスタイルを変更できます。

チェック ボックス

チェック ボックスを右クリックすると、[選択] (たとえば、[選択済み] または [選択なし])、および [状態] ([有効]、[ポイント時] など) を設定できます。

ツリー コントロール

ツリー コントロール項目のコンテナーです。ツリー コントロール項目を追加して右クリックすると、インデントの制御や、ツリーの各種プロパティ (展開/折りたたみの状態、プレースホルダーの領域など) の設定を行うことができます。

また、別のツリー コントロール項目を追加するには、ショートカット メニューを使用するか、青色の挿入矢印をクリックします。

ツリー コントロールの選択時には、[書式] タブの [コンテナー ツール] を使用して、ツリー コントロールのスタイルを変更できます。

スライダー

スライダーを右クリックすると、目盛りの数や位置などのプロパティを設定できます。スライダーを移動するには、黄色のコントロール ハンドルを使用します。

進行状況バー

進行状況インジケーターを移動するには、黄色のコントロール ハンドルを使用します。

カレンダー

カレンダーをページ上にドロップすると、月と年を設定するためのダイアログ ボックスが表示されます。後で設定を変更する場合は、図形を右クリックして [構成] をクリックします。

ページの先頭へ

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×