窓枠

Note

この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。

ほとんどのプログラムでは、標準のウィンドウ フレームを使用する必要があります。 イマーシブ アプリケーションでは、ウィンドウ フレームを非表示にする全画面表示モードを使用できます。 よりシンプルで軽く、まとまりのある外観を実現するために、戦略的にガラスを使用することを検討してください。

ウィンドウ フレームを使用すると、ユーザーはウィンドウを操作し、タイトルとアイコンを表示してその内容を識別できます。

メモ帳ウィンドウの周りのウィンドウ フレームのスクリーン ショット

一般的なウィンドウ フレーム。

メモ:ウィンドウ管理ブランド化に関連するガイドラインは、別の記事で示されています。

設計概念

ガラス窓枠

ガラス窓フレームは、魅力的で軽量であることを目指して、Microsoft Windowsの美学の印象的な新しい側面です。 これらの半透明のフレームは、ウィンドウを囲むインターフェイスではなく、コンテンツと機能に焦点を当てるのに役立つ、開いている、あまり侵入の少ない外観をウィンドウに与えます。

電卓の周りのガラスフレームのスクリーンショット

ガラス窓枠。

ウィンドウ フレームに触れるウィンドウ内の小さな領域で、戦略的にガラスを使用できます。 このような領域は、技術的にはウィンドウのクライアント領域の一部であるにもかかわらず、ウィンドウ フレームの一部のように見えます。

半透明の端を持つウィンドウのスクリーン ショット

この例では、ガラスをクライアント領域で使用して、フレームの一部のように見えるようにします。

非表示フレーム

最適なウィンドウ フレームがフレームにまったくない場合があります。 これは多くの場合、メディア プレーヤー、ゲーム、キオスク アプリケーションなど、他のプログラムと組み合わせて使用されないイマーシブ全画面表示アプリケーションのプライマリ ウィンドウの場合です。

多くの場合、コンテンツ 閲覧者は、コンテンツを全画面表示するオプションを利用できます。 たとえば、Windows インターネット エクスプローラー、Windows Live フォト ギャラリー、Windows Movie Maker HD、Microsoft PowerPoint、Microsoft Wordなどがあります。

全画面表示のメディア プレーヤーのスクリーン ショット

この例では、Windows メディア プレーヤーそのコンテンツを全画面表示にできます。

カスタム フレーム

ほとんどの Windows アプリケーションでは、標準のウィンドウ フレームを使用する必要があります。 ただし、ゲームやキオスク アプリケーションなどのイマーシブな全画面表示のスタンドアロン アプリケーションの場合は、全画面表示ではないウィンドウにカスタム フレームを使用するのが適切な場合があります。 カスタム フレームを使用する動機は、 ブランド化だけでなく、全体的なエクスペリエンスに固有の感覚を与える必要があります。

スクランブル画像パズルとフレームのイラスト

カスタム フレームは、ゲームなどのイマーシブな全画面表示のスタンドアロン アプリケーションに適しています。

ガイドライン

窓枠

  • 標準ウィンドウ フレームを使用します。

    • 例外: イマーシブな全画面表示を提供するために、スタンドアロン アプリケーションは次のようなユニークな操作性を備えています。
      • プライマリ ウィンドウのウィンドウ フレームを非表示にすることを検討 してください

      • セカンダリ ウィンドウにカスタム フレームを使用することを検討してください。

      • カスタム フレームが適切な場合は、軽量で、それ自体にあまり注意を引かないデザインを選択します。

        正しくない:

        気が散るフレームのスクリーン ショット

        この例では、カスタム フレームはそれ自体に注意を引きすぎました。

  • ウィンドウ フレームにコントロールを追加しないでください。 代わりに、ウィンドウ内にコントロールを配置します。

    正しくない:

    ウィンドウ フレーム内のコントロールのスクリーン ショット

    正確:

    クライアント領域でのコントロールのスクリーン ショット

    正しい例では、コントロールはウィンドウ フレームではなくクライアント領域内にあります。

全画面表示モード

  • オプションの全画面表示モードを持つプログラムの場合は、全画面表示モードを有効にします。

    • メニュー バーまたはツール バーにモーダル全画面表示コマンドを表示します。 ユーザーがコマンドをクリックすると、選択した状態でコマンドが表示されます。

      全画面表示メニュー項目を含むウィンドウのスクリーン ショット

      この例では、全画面表示コマンドと標準のショートカット キーを示します。

  • 全画面表示ショートカット キーには F11 を使用します。

  • ツールバーがあり、全画面表示モードが一般的に使用されている場合は、全画面表示ツール ヒントを含むグラフィック ツール バー ボタンもあります。

    全画面表示ボタンと元に戻すボタンのスクリーン ショット

    全画面表示ツール バー ボタンの例。

  • 全画面表示モードから元に戻すには:

    • メニュー バーまたはツール バーにモーダル全画面表示コマンドを表示します。 ユーザーがコマンドをクリックすると、そのコマンドがクリア状態で表示されます。
    • 全画面表示ショートカット キーには F11 を使用します。 まだ割り当てされていない場合は、Esc もこの目的に使用できます。

ガラス

標準のウィンドウ フレームでは、Windows では自動的にガラスが使用されますが、ウィンドウ フレームに触れる領域ではガラスを使用することもできます。

  • テキストなしでウィンドウフレームに触れる小さな領域で戦略的にガラスを使用することを検討してください。 そうすることで、領域がフレームの一部であるように見えるようにすることで、プログラムをよりシンプルで軽く、よりまとまりのある外観にすることができます。
  • 半透明の端を持つウィンドウのスクリーン ショット
  • この例では、glass はコントロールではなくコンテンツにユーザーの注意を集中させます。
  • プレーンウィンドウの背景がより魅力的で使いやすい状況では、ガラスを使用しないでください。

正確:

4 つのグラフィックスとラベルを持つウィンドウのスクリーン ショット

この例では、ガラスを使用して、Alt + Tab ウィンドウの外観を軽量にします。 ガラスはグラフィックスと 1 つの強力なテキスト ラベルで構成されているため、このウィンドウに対して機能します。

正しくない:

12 個のグラフィックスを含むウィンドウのスクリーン ショット

この間違った例では、ガラスの使用は気が散っています。 プレーンウィンドウの背景は、より良い選択肢です。