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

注: 最新のヘルプ コンテンツをできるだけ早く、お客様がお使いの言語で提供したいと考えております。このページは、自動翻訳によって翻訳されているため、文章校正のエラーや不正確な情報が含まれている可能性があります。私たちの目的は、このコンテンツがお客様の役に立つようにすることです。お客様にとって役立つ情報であったかどうかを、このページの下部でお知らせください。簡単に参照できるように、こちらに英語の記事があります。

windows xp のユーザーインターフェイステンプレートを使用して、Microsoft windows xp のガイドラインに従って設計された図形を使用して、ユーザーインターフェイスのモックアップを作成します。図形には、アプリケーションウィンドウ、ウィザードページ、ツールバー、メニュー図形、コントロール図形などの空白のフォームなど、インターフェイスでよく使われる要素が含まれています。

これらの図形を使うと、複雑なアプリケーションウィンドウまたはタブ付きダイアログボックスのモックアップから、簡単なメッセージボックスまたは1つのボタンに至るまで、あらゆるものを作ることができます。

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

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

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

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

メニューとツールバーを作成する

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

  1. Windows およびダイアログから、空白のフォーム図形を図面ページにドラッグします。

  2. 図形を選択した状態で、ダイアログボックスのタイトルを入力します。

  3. ウィンドウボタンの図形をタイトルバーの右端にドラッグして、ボタンの種類を選択します。通常、[Help] ボタンと [閉じる] ボタンが、左から右に配置されています。

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

    方法

    1. コモンコントロールから、コマンドボタンの図形を空白のフォーム図形の右下にドラッグします。

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

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

    特定のコントロール図形の詳細については、図形を右クリックし、[サポート] をクリックします。

    テキストツールを使用して、空白のフォーム図形に独自のテキストを作成する場合は、Tahoma 8 pt としてテキストを書式設定します。

  6. クラスタのコマンドを論理グループにします。

  7. グループボックスグループの線の図形を空白のフォーム図形にドラッグして、グループを視覚的に分離します。

    ガイドを使用してコントロールを配置します。

    [印刷] ダイアログボックスの [ファイル] メニューには、多くの一般的な要素があるダイアログボックスの例を示しています。

ページの先頭へ

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

  1. Windows およびダイアログから、空白のフォーム図形を図面ページにドラッグします。

  2. 図形を選択した状態で、ダイアログボックスのタイトルを入力します。

  3. ウィンドウボタンの図形をタイトルバーの右端にドラッグして、ボタンの種類を選択します。通常、[ Help ] ボタンと [閉じる] ボタンが、左から右に配置されています。

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

    方法

    1. コモンコントロールから、コマンドボタンの図形を空白のフォーム図形の右下にドラッグします。

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

  5. タブコントロール (body)図形を空白のフォーム図形にドラッグし、フォーム内に収まるようにサイズを変更して、タブの領域を残します。

  6. タブコントロール (タブ)図形をドラッグして、タブコントロール (本文)図形の上端に接着します。

  7. タブコントロール (タブ)図形が選択されている状態で、タブの名前を入力します。

  8. 各タブについて手順6と7を繰り返し、タブを互いに接着すると共に、 tab コントロール (body)図形に貼り付けます。

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

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

    特定のコントロール図形の詳細については、図形を右クリックし、[サポート] をクリックします。

    テキストツールを使用して、空白のフォーム図形に独自のテキストを作成する場合は、Tahoma 8 pt としてテキストを書式設定します。

  11. クラスタのコマンドを論理グループにします。

  12. グループボックスグループの線の図形を空白のフォーム図形にドラッグして、グループを視覚的に分離します。

    ガイドを使用してコントロールを配置します。

    [ページ設定] ダイアログボックスの [ファイル] メニューには、多くの一般的な要素があるダイアログボックスの例を示します。

ページの先頭へ

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

  1. Windows およびダイアログから、空白のフォーム図形を図面ページにドラッグします。

  2. 図形を選択した状態で、アプリケーションウィンドウのタイトルを入力します。

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

  4. ウィンドウのボタンの図形をタイトルバーの右端にドラッグして、ボタンの種類を選択します。通常、[最小化] ボタン、[最大化] ボタン、[元に戻す]、[閉じる] ボタン (左から右に配置) の3つのボタンがあります。

  5. ツールバーとメニューから、メニューバーの図形を空白のフォーム図形にドラッグし、タイトルバーの一番下に貼り付けて、メニュー項目を追加します。

    方法

    1. トップレベルのメニュー項目図形をページにドラッグし、メニューバーの左端に接着します。

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

    2. 図形を選択した状態で、名前を入力します。メニュー項目にキーボードショートカットがある場合は、適切な文字に下線を引きます。

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

      図形の詳細については、右クリックして [サポート] をクリックしてください。

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

      列内のアイテムは、すべて幅が広いものである必要があります。

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

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

    方法

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

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

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

      図形の詳細については、右クリックして [サポート] をクリックしてください。

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

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

  7. コモンコントロールから、必要に応じて水平方向と垂直方向のスクロールバーを空白のフォーム図形の右端と下端にドラッグします。

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

    文書の一部のみが表示されていることを示すには、親指のサイズを小さくしてください。ドキュメントのほとんどが表示されていることを示すには、親指のサイズを大きくします。

  9. [ステータスバー ] 図形をアプリケーションウィンドウの下端にドラッグし、適切に書式設定します。

    方法

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

      コントロールハンドルは、ステータスバーの分割図形をステータスバーまたは別のステータスバーの分割図形に接着する場所を提供します。

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

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

ページの先頭へ

メニューとツールバーを作成する

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

メニューを作成する

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

  2. トップレベルのメニュー項目図形をドラッグして、メニューバーの左端に接着します。

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

  3. 図形を選択した状態で、名前を入力します。メニュー項目にキーボードショートカットがある場合は、適切な文字に下線を引きます。

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

    図形の詳細については、右クリックして [サポート] をクリックしてください。

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

    列内のアイテムは、すべて幅が広いものである必要があります。

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

  1. トップレベルのメニュー項目図形を図面ページにドラッグします。

  2. 図形を選択した状態で、名前を入力します。メニュー項目にキーボードショートカットがある場合は、適切な文字に下線を引きます。

  3. ドロップダウンメニュー項目図形をドラッグし、最上位メニュー項目の一番下に貼り付けて、名前を入力します。

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

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

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

    図形の詳細については、右クリックして [サポート] をクリックしてください。

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

ツールバーを作成する

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

  2. ツールバーのボタンの図形をドラッグし、ツールバー図形の左端に接着します。

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

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

    図形の詳細については、右クリックして [サポート] をクリックしてください。

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

ページの先頭へ

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

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

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

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

×