次の方法で共有


窓枠

手記

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

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

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

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

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

手記:ウィンドウの管理ブランド化に関連するガイドラインについては、別の記事で説明します。

設計の概念

ガラス窓枠

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

電卓screen shot of glass frame around calculator screen shot of glass frame around calculator の周りのガラス フレームのスクリーン ショット

ガラス窓枠。

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

半透明のエッジscreen shot of window with translucent edge screen shot of window with translucent edge を持つウィンドウのスクリーン ショット

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

非表示のフレーム

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

多くの場合、コンテンツ ビューアーは、コンテンツを全画面表示にするオプションを利用できます。 たとえば、Windows Internet Explorer、Windows Live フォト ギャラリー、Windows Movie Maker HD、Microsoft PowerPoint、Microsoft Word などがあります。

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

この例では、Windows Media Player のコンテンツを全画面表示で表示できます。

カスタム フレーム

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

●パズルとフレームの図

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

ガイドライン

窓枠

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

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

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

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

        間違った:

        気が散るフレームscreen shot of distracting frame screen shot of distracting frame のスクリーン ショット

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

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

    間違った:

    ウィンドウ フレームscreen shot of control in window frame screen shot of control in window frame でのコントロールのスクリーン ショット

    そうです:

    クライアント領域screen shot of control in client area screen shot of control in client area でのコントロールのスクリーン ショット

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

全画面表示モード

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

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

      全画面表示メニュー項目がscreen shot of window with full screen menu item screen shot of window with full screen menu item されたウィンドウのスクリーン ショットをする

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

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

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

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

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

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

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

グラス

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

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

そうです:

4 つのグラフィックスとラベルのscreen shot of window with four graphics and label screen shot of window with four graphics and label を持つウィンドウのスクリーン ショット

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

間違った:

12 個のグラフィックスscreen shot of window with twelve graphics screen shot of window with twelve graphics を含むウィンドウのスクリーン ショット

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