ウィンドウ枠

大部分の Windows アプリケーションでは標準のウィンドウ枠を使用することが推奨されます。没入型アプリケーションの場合は、ウィンドウ枠を隠す全画面表示モードを使用できます。シンプルで軽快、かつまとまりのある外観にするため、グラスの使用を検討してください。

デザイン コンセプト
ガイドライン
   ウィンドウ枠
   全画面表示モード
   グラス

ウィンドウ枠を使用すると、ユーザーはウィンドウを操作でき、タイトルとアイコンからコンテンツを特定できます。

メモ帳ウィンドウを囲むウィンドウ枠のスクリーン ショット

典型的なウィンドウ枠

注: ウィンドウの管理およびブランド化に関するガイドラインは、それぞれ別の項目として記載しています。

デザイン コンセプト

グラス ウィンドウ枠

グラス ウィンドウ枠は Microsoft® Windows® の特長の 1 つである新しい外観を表すものであり、美しさと軽快さの両方を実現しています。半透明のフレームがウィンドウに開放感を与え、圧迫感を和らげているので、ユーザーは周囲のインターフェイスに気を取られることなくコンテンツと機能に集中できます。

電卓を囲むグラス ウィンドウ枠のスクリーン ショット

グラス ウィンドウ枠

ウィンドウ内の、ウィンドウ枠に接する小さな領域で、グラスを戦略的に使用できます。この領域は、実際にはウィンドウのクライアント領域の一部ですが、ウィンドウ枠の一部であるかのように見えます。

境界部分が半透明になったウィンドウのスクリーン ショット

この例では、グラスが使用されたクライアント領域が、フレームの一部のように見えます。

非表示のフレーム

枠をまったく表示しないことが最適なウィンドウ枠となる場合もあります。このようなフレームは、メディア プレーヤー、ゲーム、キオスク アプリケーションなど、別のプログラムとは一緒に使用されない没入型の全画面表示アプリケーションのメイン ウィンドウで多く使用されます。

コンテンツ ビューアーでは、コンテンツの全画面表示を選択できると便利なことがよくあります。例としては、Windows Internet Explorer、Windows Live フォト ギャラリー、Windows ムービー メーカー HD、Microsoft PowerPoint、Microsoft Word などが挙げられます。

全画面表示の Media Player のスクリーン ショット

この例では、Windows Media Player でコンテンツが全画面表示されています。

カスタム枠

大部分の Windows アプリケーションでは標準のウィンドウ枠を使用することが推奨されますが、ゲームやキオスク アプリケーションのような全画面表示の没入型スタンドアロン アプリケーションでは、全画面表示されないウィンドウにカスタム枠を使用することが適している場合もあります。カスタム枠を使用する理由としては、ブランド化以外に、エクスペリエンス全体に独自性を与えるということもあります。

ピクチャ パズルとフレームの図

カスタム枠は、ゲームのような全画面表示の没入型スタンドアロン アプリケーションに適しています。

ガイドライン

ウィンドウ枠

  • 標準のウィンドウ枠を使用します。
    • 例外: 全画面の没入型スタンドアロン アプリケーションに独自性を与えるには、以下のことを検討します。
      • メイン ウィンドウのウィンドウ枠を非表示にします。
      • サブ ウィンドウにはカスタム枠を使用します。
      • カスタム枠の使用が適している場合は、フレーム自体が目立ちすぎない、軽快なデザインを選択します。

        間違った例:
        目障りなフレームのスクリーン ショット

        この例では、カスタム枠自体が目立ちすぎています。

  • ウィンドウ枠上にコントロールを配置しないようにします。コントロールはウィンドウ枠ではなくウィンドウ内に配置します。

    間違った例:
    ウィンドウ枠内にあるコントロールのスクリーン ショット

    正しい例:
    クライアント領域内にあるコントロールのスクリーン ショット

    正しい例では、コントロールはウィンドウ枠上ではなくクライアント領域内に配置されています。

全画面表示モード

  • 全画面表示モードを選択できるプログラムで全画面表示モードを有効にするには、次のようにします。
    • メニュー バーまたはツール バーに、モーダルな全画面表示コマンドを用意します。ユーザーがコマンドをクリックしたら、コマンドを選択状態にします。

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

      この例では、全画面表示コマンドが標準のショートカット キーと共に表示されています。

    • 全画面表示のショートカット キーには F11 キーを使用します。
    • ツール バーがあり、全画面表示モードが一般的に使用される場合は、"全画面表示" というツールヒント付きのグラフィック ツール バー ボタンも用意します。

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

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

  • 全画面表示モードから戻すには、次のようにします。
    • メニュー バーまたはツール バーに、モーダルな全画面表示コマンドを用意します。ユーザーがコマンドをクリックしたら、コマンドを選択解除の状態にします。
    • 全画面表示のショートカット キーには F11 キーを使用します。他に割り当てられていなければ、Esc キーを同じ目的で使用することもできます。

グラス

Windows の標準のウィンドウ枠では自動的にグラスが使用されますが、ウィンドウ枠に接する領域でもグラスを使用することができます。

  • ウィンドウ枠に接する、テキストを含まない小さい領域で、その効果を十分検討した上でグラスを使用するようにします。こうすることで、その領域が枠と一体化し、プログラムに簡素で軽快、かつまとまりのある外観を与えることができます。
  • 境界部分が半透明になったウィンドウのスクリーン ショット

  • この例では、グラスを使用して、コントロールではなくコンテンツにユーザーの注意を引き付けています。

  • 通常のウィンドウ背景の方が魅力的であったり、使いやすかったりする状況では、グラスは使用しないでください。

    正しい例:
    4 つのグラフィックとラベルを表示するウィンドウのスクリーン ショット

    この例では、グラスを使用することで、Alt キーを押しながら Tab キーを押したときのウィンドウが軽快に見えます。このウィンドウは、グラフィックと強調された 1 つのテキスト ラベルで構成されているため、グラスが効果を発揮しています。

    間違った例:
    12 個のグラフィックを表示するウィンドウのスクリーン ショット

    この間違った例では、グラスを使用することでウィンドウが煩雑になっています。このような場合は、通常のウィンドウの背景を使用する方が適しています。

表示: