Windows XP のインターフェイス要素のモックアップを作成する

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

[Windows XP ユーザー インターフェイス] テンプレートでは、Microsoft Windows XP のガイドラインに従って設計された図形を使用してユーザー インターフェイスのモデルを作成します。このテンプレートには、アプリケーション ウィンドウの土台となる空白のフォーム、ウィザード ページ、ツールバーやメニュー、コントロールなど、インターフェイスで頻繁に使用する要素の図形が含まれています。

これらの図形を使用して、簡単なメッセージ ボックスに、1 つのボタンを複雑なアプリケーション ウィンドウやタブ表示] ダイアログ ボックスのモデルからすべてのアイテムにすることができます。

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

単一のダイアログ ボックスを作成する

タブ付きダイアログ ボックスを作成する

アプリケーション ウィンドウを作成する

メニューおよびツールバーを作成する

単一のダイアログ ボックスを作成する

  1. [ウィンドウとダイアログ ボックス] ステンシルから [空白のフォーム] 図形をドラッグし、図面ページ上に配置します。

  2. 配置したフォーム図形を選択して、ダイアログ ボックスのタイトルを入力します。

  3. ステンシルから [Windows のボタン] 図形をドラッグし、タイトル バーの右端に配置して、ボタンの種類を選択します。通常は、左から右へ [ヘルプ] ボタンと [閉じる] ボタンを配置します。

  4. [OK]、[キャンセル]、[適用] などのコマンド ボタンを、空白のフォーム図形の右下隅に追加します。

    how

    1. [共通コントロール] ステンシルから [コマンド ボタン] 図形をドラッグし、空白のフォーム図形の右下隅に配置します。

    2. 各ボタンを選択して、コントロールの名前を入力します。

  5. 必要なコントロールを空白のフォーム図形上にドラッグします。そららの図形を右クリックして、適切なオプションを選択します。

    特定のコントロール図形についてのヘルプを表示するには、対象となる図形を右クリックして、[ ヘルプ] をクリックします。

    [テキスト ツール] を使用して空白のフォーム図形に独自のテキストを作成する場合は、文字の書式を MS UI Gothic 8 ポイントにします。

  6. コマンドをグループ化します。

  7. ステンシルから [グループ ボックス] 図形と [グループ ライン] 図形をドラッグして空白のフォーム図形上に配置し、グループを視覚的に識別できるようにします。

    コントロールを整列するにはガイドを使用します。

    [ファイル] メニューの [印刷] をクリックしたときに表示されるダイアログ ボックスでは、一般的な要素が多数使用されています。

ページの先頭へ

タブ付きダイアログ ボックスを作成する

  1. [ウィンドウとダイアログ ボックス] ステンシルから [空白のフォーム] 図形をドラッグし、図面ページ上に配置します。

  2. 配置したフォーム図形を選択して、ダイアログ ボックスのタイトルを入力します。

  3. ステンシルから [Windows のボタン] 図形をドラッグし、タイトル バーの右端に配置して、ボタンの種類を選択します。通常は、左から右へ [ヘルプ] ボタンと [閉じる] ボタンを配置します。

  4. [OK]、[キャンセル]、[適用] などのコマンド ボタンを、空白のフォーム図形の右下隅に追加します。

    how

    1. [共通コントロール] ステンシルから [コマンド ボタン] 図形をドラッグし、空白のフォーム図形の右下隅に配置します。

    2. 各ボタンを選択して、コントロールの名前を入力します。

  5. ステンシルから [タブ コントロール (ボディ)] 図形をドラッグして空白のフォーム図形上に配置し、フォームの大きさに合わせてサイズを調整します。このとき、タブを配置するためのスペースを残しておきます。

  6. ステンシルから [タブ コントロール (タブ)] 図形をドラッグして、[タブ コントロール (ボディ)] 図形の上端に接着します。

  7. タブ コントロール (タブ) 図形を選択して、タブの名前を入力します。

  8. 手順 6. ~ 7. を繰り返してその他のタブを追加し、タブどうしを接着します。さらに、タブ コントロール (ボディ) 図形にも接着します。

  9. 前面に表示するタブを右クリックして、[前面タブ] をクリックします。その他のタブを [背面タブ] に設定します。

  10. 必要なコントロールを空白のフォーム図形上にドラッグします。そららの図形を右クリックして、適切なオプションを選択します。

    特定のコントロール図形についてのヘルプを表示するには、対象となる図形を右クリックして、[ ヘルプ] をクリックします。

    [テキスト ツール] を使用して空白のフォーム図形に独自のテキストを作成する場合は、文字の書式を MS UI Gothic 8 ポイントにします。

  11. コマンドをグループ化します。

  12. ステンシルから [グループ ボックス] 図形と [グループ ライン] 図形をドラッグして空白のフォーム図形上に配置し、グループを視覚的に識別できるようにします。

    コントロールを整列するにはガイドを使用します。

    [ファイル] メニューの [ページ設定] をクリックしたときに表示されるダイアログ ボックスでは、一般的な要素が多数使用されています。

ページの先頭へ

アプリケーション ウィンドウを作成する

  1. [ウィンドウとダイアログ ボックス] ステンシルから [空白のフォーム] 図形をドラッグし、図面ページ上に配置します。

  2. 空白のフォーム図形を選択して、アプリケーション ウィンドウのタイトルを入力します。

  3. タイトル バーのテキストの左側にアイコンを追加するには、空白のフォーム図形を右クリックして、[アイコンの表示領域] チェック ボックスをオンにします。

  4. ステンシルから [Windows のボタン] 図形をドラッグしてタイトル バーの右端に配置し、ボタンの種類を選択します。通常は、[最小化]、[最大化] または [元のサイズに戻す]、[閉じる] の 3 つのボタンを左から右に配置します。

  5. [ツールバーとメニュー] ステンシルから [メニュー バー] 図形をドラッグして、空白のフォーム図形上に配置します。さらに、これをタイトル バーの下部に接続して、メニュー項目を追加します。

    how

    1. [最上位のメニュー項目] 図形をページ上にドラッグして、メニュー バーの左端に接続します。

      最初のメニュー項目の左側にアイコンを配置できます。

    2. メニュー項目図形を選択して、名前を入力します。メニュー項目にショートカット キーが割り当てられている場合は、該当する文字に下線を付けます。

    3. 必要に応じて、手順 1. ~ 2. を繰り返します。

      図形のヘルプを表示するには、図形を右クリックして [ヘルプ] をクリックします。

      接続ポイント ( 接続ポイントの画像 - 青い X ) を非表示にするには、[表示] メニューの [接続ポイント] をクリックします。

      同じ列に表示されるすべての項目は、最も幅の広い項目に合わせます。

    メニュー バーの左端にグリッパ ドットを表示するには、メニュー バー図形を右クリックして、[メニュー バーのロック] チェック ボックスをオフにします。

  6. [ツールバーとメニュー] ステンシルから [ツールバー] 図形をドラッグし、空白のフォーム図形上に配置します。さらに、ツールバーをメニュー バーの下部に接着し、ツールバー ボタンを追加します。

    how

    1. いずれかの [ツールバー ボタン] 図形をページにドラッグし、ツールバー図形の左端に接着します。

    2. [図形データ] ダイアログ ボックスで、ボタンの種類を選択します。ボタンを変更する場合は、図形を右クリックして [ボタンの種類を設定] をクリックし、[図形データ] ダイアログ ボックスを再び開きます。

    3. 必要に応じて [ツールバー ボタン] 図形と [ボタン セパレータ] 図形をドラッグして、互いに接着します。

      図形のヘルプを表示するには、図形を右クリックして [ヘルプ] をクリックします。

      接続ポイント ( 接続ポイントの画像 - 青い X ) を非表示にするには、[表示] メニューの [接続ポイント] をクリックします。

    ツールバーの左端にグリッパ ドットを表示するには、ツールバー図形を右クリックして、[ツールバーのロック] チェック ボックスをオフにします。

  7. 必要に応じて、[共通コントロール] ステンシルから水平スクロール バーと垂直スクロール バーをドラッグし、空白のフォーム図形の右端と下部に配置します。

  8. スクロール バーを右クリックし、[ボックスのサイズを設定] を選択して、ウィンドウがスクロールできる範囲を指定します。

    文書のごく一部が表示されていることを示すには、ボックスのサイズを小さくします。文書の大部分が表示されていることを示すには、ボックスのサイズを大きくします。

  9. [ステータス バー] 図形をアプリケーション ウィンドウの下部にドラッグして、必要に応じて形式を設定します。

    how

    1. [ステータス バーの区切り線] 図形をページ上にドラッグして、ステータス バー図形のコントロール ハンドル ( コントロール ハンドルの画像 - 黄色い菱形 ) に接着します。

      ステータス バーの区切り線図形をステータス バーまたは他のステータス バーの区切り線図形に接着するときは、コントロール ハンドルを使用します。

      ステータス バー図形に接続した後、ステータス バーの区切り線図形が表示されない場合は、ステータス バー図形を選択し、[図形] メニューの [順序] をポイントして、[背面へ移動] をクリックします。

    2. [ウィンドウのサイズ変更] 図形をステータス バーの右端にドラッグして、ウィンドウのサイズが変更可能であることを示します。

ページの先頭へ

メニューおよびツールバーを作成する

Windows XP 図形を使用して、基本のメニュー、ドロップダウン メニュー、およびツールバーを作成できます。

メニューを作成する

  1. [ツールバーとメニュー] ステンシルから [メニュー バー] 図形をドラッグし、図面ページ上に配置します。メニュー バーの左隅にグリッパ ドットを表示するには、メニュー バー図形を右クリックして、[メニュー バーのロック] チェック ボックスをオフにします。

  2. ステンシルから [最上位のメニュー項目] 図形をドラッグして、メニュー バーの左端に接着します。

    ヒント: 最初のメニュー項目の左側にアイコンを配置することもできます。

  3. メニュー項目図形を選択して、名前を入力します。メニュー項目にショートカット キーが割り当てられている場合は、該当する文字に下線を付けます。

  4. 必要に応じて、手順 2. ~ 3. を繰り返します。

    図形のヘルプを表示するには、図形を右クリックして [ヘルプ] をクリックします。

    接続ポイント ( 接続ポイントの画像 - 青い X ) を非表示にするには、[表示] メニューの [接続ポイント] をクリックします。

    同じ列に表示されるすべての項目は、最も幅の広い項目に合わせます。

ドロップダウン メニューを作成する

  1. ステンシルから [最上位のメニュー項目] 図形をドラッグして、図面ページ上に配置します。

  2. メニュー項目図形を選択して、名前を入力します。メニュー項目にショートカット キーが割り当てられている場合は、該当する文字に下線を付けます。

  3. ステンシルから [ドロップダウン メニューの項目] 図形をドラッグして、最上位のメニュー項目の下部に接着し、名前を入力します。

  4. 手順 3. 繰り返して、列のすべてのドロップダウン メニュー項目を作成します。

  5. 最も幅の広いドロップダウン メニューの項目に合わせて、その他すべての項目のサイズを変更します。

  6. 各ドロップダウン メニューの項目図形を右クリックして、[メニュー項目のプロパティ] をクリックし、適切なオプションを選択します。

    図形のヘルプを表示するには、図形を右クリックして [ヘルプ] をクリックします。

    接続ポイント ( 接続ポイントの画像 - 青い X ) を非表示にするには、[表示] メニューの [接続ポイント] をクリックします。

ツールバーを作成する

  1. [ツールバーとメニュー] ステンシルから [ツールバー] 図形をドラッグし、図面ページ上に配置します。ツールバーの左隅にグリッパ ドットを表示するには、ツールバー図形を右クリックして、[ツールバーのロック] チェック ボックスをオフにします。

  2. ステンシルから [ツールバー ボタン] 図形をドラッグして、ツールバー図形の左端に接着します。

  3. [図形データ] ダイアログ ボックスで、ボタンの種類を選択します。ボタンを変更する場合は、図形を右クリックして [ボタンの種類を設定] をクリックし、[図形データ] ダイアログ ボックスを再び開きます。

  4. 必要に応じて、さらに [ツールバー ボタン] 図形と [ボタン セパレータ] 図形をドラッグし、互いに接着します。

    図形のヘルプを表示するには、図形を右クリックして [ヘルプ] をクリックします。

    接続ポイント ( 接続ポイントの画像 - 青い X ) を非表示にするには、[表示] メニューの [接続ポイント] をクリックします。

ページの先頭へ

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

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

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

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

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

×