サイドバー ガジェット

Windows サイドバー ガジェット

適切なユーザー インターフェイスですか?
デザイン コンセプト
使用パターン
ガイドライン
推奨サイズおよびスペース
ドキュメンテーション

ガジェットは、ユーザーを妨げることなく、個人的な関連情報や単純なタスクに迅速なアクセスを提供するミニアプリケーションです。たとえば、天気ガジェットはひとめでわかる情報を提供し、付箋ガジェットは日常頻繁に使用する単純機能を提供します。 ガジェットは人目を引く外観を持ち、単一タスクの実行に最適化されています。

ガジェットは通常、デスクトップの端にあるサイドバーに配置されます。ガジェットはサイドバーに配置 (ドッキング) されるだけでなく、サイドバーから離してデスクトップのどこにでもフロートさせることができます。ガジェットはフロート状態にするとドッキング状態より大きく表示されます。開始ボタン、タスクバー、通知エリアと同様、ガジェットはデスクトップの一部です。通常のウィンドウとは異なり、タスクバー ボタンでは示されません。

ガジェットのフライアウトでは、詳細情報が一時的に表示されます。フライアウトはガジェットをクリックすると表示され、フライアウト以外の場所をクリックすると閉じます。フライアウトはドッキング状態とフロート状態のどちらでも使用できます。

ガジェットの設定やカスタマイズを行うには、オプション ダイアログ ボックスを使用します。

このデスクトップは、サイドバーにドッキングされた状態のガジェットと、デスクトップでフロートしているガジェットを示しています。天気ガジェット (左下) で情報をモニターできます。付箋ガジェット (左上) は頻繁に使用する単純機能を提供します。RSS ガジェット (右中央) は記事見出しフライアウトと共に表示されます。

オプション ダイアログ ボックスの例。　

開発者の方へ: 「ガジェット開発の概要」にガジェット作成方法が記載されています。

注意: レイアウトに関するガイドラインは別の記事で紹介されています。

適切なユーザー インターフェイスですか?

判断するには、以下の質問を検討してください。

• 常に利用可能であることが必要な機能ですか? 迅速なアクセスが必要で頻繁に使用する機能のみをサイドバーに配置してください。
• ユーザーの関心が高い機能ですか? ユーザーは、迅速かつ頻繁に閲覧したい情報の表示のみに画面の一部を使用します。
• 情報は定期的に変わりますか? 変わらない場合、ユーザーは画面の一部をその情報のためには使用しません。
• 目的はプログラムの起動またはプログラムへの関心を促進することですか? その場合には、代わりにスタート メニューを使用してください。サイドバーはプログラム ランチャーやプログラムの広告ではありません。
• 目的は通知を提供することですか? 代わりに通知を使用してください。
• 目的はエラー、警告、または確認メッセージを提供することですか? 代わりにエラー メッセージ、警告メッセージ、確認などの適切なメカニズムを使用してください。実行中のプログラムにガジェットがリンクしている場合は、代わりにそのプログラムにメッセージが表示されます。
• 目的は進行状況を表示することですか? 代わりに進行状況ダイアログを使用してください。

デザイン コンセプト

優れたガジェットを作成するには秘訣があります。

優れたガジェットは、常に役立つ機能性を提供します。 役に立たない場合、ユーザーはガジェットを閉じて限られたデスクトップ スペースを有効に使用しようとします。ガジェットは、情報のモニタリング、頻繁に使用する機能の提供、パズルなどの娯楽に適しています。

効果的なガジェットは、デスクトップ周辺部分で機能を発揮します。 機能に簡単にアクセスでき、しかも妨げになりません。ガジェットは 1 日中デスクトップに表示されますが、常に使用されているわけではありません。ユーザーが主要なタスクに集中できることが必要です。ユーザーは、目と手の動きの記憶からガジェットの場所を見つけることを学び、必要なときに迅速にアクセスできるようになります。

優れたガジェットは、単一の明確なタスクを確実に達成します。 無関係な機能は排除し、コア機能に間単にアクセスできるようにします。最も重要な情報に大きなフォントを使用し、よく使用するアクティビティはわずかなクリックで実行できるようにします。1 つのガジェットですべてを実行しようとするより、単一タスクに最適化した複数のガジェットを使用してください。そうすれば、ユーザーは使用する機能をコントロールしやすくなります。

誤った例:

正しい例:

誤った例では、多機能ガジェットが複数のタスク実行を試みますが、いずれも成功しません。単一タスク型ガジェットの方がタスクの実行に優れ、ユーザーは使用する機能をコントロールしやすくなります。

優れたガジェットは、単一タスクを適切に示す視覚的テーマを使用しています。 ガジェットは、ラベル付きボックス、アイコン、コンテンツに似ないようにします。重要な情報を伝達する、意味のあるイラストを使用します。ガジェットに実際のアプライアンスの機能がある場合、そのアプライアンスに似ているガジェット、またはそのアプライアンスを暗示するガジェットをデザインします。たとえば、時計ガジェットは実際の時計に、カレンダー ガジェットは実際のカレンダーに見えるようにします。

直接結び付くものがない場合は、主な点が類似している現実のオブジェクトから視覚的要素を使用します。たとえば、CPU メーターと速度計はどちらも性能を示すため、CPU メーターは速度計に似せることができます。通貨コンバーターとクレジット カードはどちらも通貨と旅行に関連しているため、通貨コンバーターはクレジット カードに似せることができます。このように緩やかな類似性はわかりにくい場合もありますが、視覚を刺激し、独自に目を引くガジェットにすることができます。

誤った例:

正しい例:

正しい例のガジェットは、クレジット カードで通貨と旅行を暗示し、背景にはこのテーマをサポートする世界地図を使用しています。また、クレジット カードのテキストをまねて大文字テキストを使用しています。対照的に、誤ったガジェットは基本的にアイコン付きのボックスです。

適切な視覚的テーマがない場合は、色と形で意味を伝えることができます。

この例では、ガジェットは形と色を使用し、株および市場指数が動いている方向を示しています。

どのスタイルを使用する場合でも、視覚に訴えるガジェットにしてください。 貴重な画面スペースを埋める退屈で魅力のないガジェットは好まれません。プロ デザイナーと相談し、適切な視覚的テーマを見つけて見栄えの良いガジェットを作成してください。

他の Microsoft® Windows® エリアと比較しても、ガジェットの自由度は特に高くなっています。標準的外観のユーザー インターフェイスを作成するために組み合わせる構築ブロックの固定セットはありません。この柔軟性によって優れたガジェットを作成できますが、同時にきわめて稚拙なガジェットを作成してしまう可能性もあります。標準の Windows 操作は維持しつつ、ガジェットの機能と外観には独自性を持たせてください。

ガジェットでは、以下の 5 項目に特に留意してください。
1. 単一の明確なタスクを確実に達成します。
2. 常に役立つ機能性を提供します。
3. 妨げになることなく迅速なアクセスが可能で、デスクトップ周辺部分で機能を発揮します。
4. ガジェットの単一タスクを示す、視覚に訴えるテーマを使用します。
5. 標準操作は維持しつつ、ガジェットの機能と外観には独自性を持たせます。

使用パターン

ガジェットには複数の使用パターンがあります。

これらのパターンを分類しておくことが重要です。お楽しみ用ガジェットは、数週間後に飽きてしまうことが簡単に想像できます。

ガイドライン

コントロール

• コマンド関連コントロールはホバー状態にします。 既定の状態では必要なものだけを表示します。ポインタをガジェット上に置くまで、ほとんどのコントロールは非表示にできます。したがって、いずれの状態でもガジェットの最重要部分にユーザーの目を向けることができます。

  

  この例では、ガジェットが受動状態にあるときにユーザーにとってより重要なのは、メモを読むことです。ユーザーがガジェットを使用するまで、コマンド関連コントロールは非表示にできます。

• ラベル用の十分なスペースがないため、ツールチップを使用してすべてのコントロール ラベルを表示します。詳細なガイドラインについては「ツールチップ」を参照してください。

  

  コントロール ラベル付きのツールチップの例。

• 一般的コントロールのように動作し、しかもガジェットのテーマに適したコントロールを使用します。 ガジェットの外観に合う色を選択します。サイズに制約があるため、一般的コントロールの標準サイズよりもコントロールを小さくしなければならない場合があります。

  

  株式ガジェットは、より小さいカスタム スクロールバーとガジェットに合った色を使用しています。

• コマンドには標準グリフを使用します。 コマンドが標準グリフで表されていない場合は、一貫したスタイルの適切なグリフを作成します。ガジェットの外見に応じて、グリフの色や輝度の調整が必要な場合があります。すべてのグリフは、静止、ホバー、およびダウン状態を備えていることが必要です。ユーザーが変更できるようにマウス アップをコミットする必要があります。

  

  ガジェットの一般的タスク用標準グリフの例。

• スクロールバーは既定でドッキング状態やフロート状態にしないでください。 代わりに、既定コンテンツがガジェット内に適切に収まるようにしてください。ユーザーがカスタマイズしたコンテンツでは、

  • 必要な場合は垂直スクロールバーを使用します。

  • スペースが貴重であり、コンテンツ位置を完全にコントロールすることが重要でない場合は、ページネーションの使用を検討してください。

    

    このガジェットでは、1 度に 4 つの見出しを閲覧できます。

  • それと同時に電子メール メッセージの最初の数行などの役立つ情報を提供するには、コンテンツの切り捨てを検討してください。フライアウトまたは関連アプリケーションへのリンクで完全なコンテンツを表示します。

• ガジェット テキストには、Windows Vista® システム フォントであるメイリオや Segoe UI を使用します。

状態

• ドッキング状態ではコア機能を示します。 サイドバーから決して離れないことを想定して、ガジェットをデザインします。コア機能を決定する際は、ターゲット オーディエンス、重要なシナリオ、スペースの制約、およびシンプルさを考慮します。

• 追加機能を提供するにはフロート状態を使用しますが、根拠なく提供しないでください。 十分な配慮を必要とするタスク、または時間集約的な複雑なタスクは、ガジェットに埋め込むのではなく、アプリケーションまたは Web サイトにリンクします。追加機能が不要な場合は、ドッキング状態とフロート状態を同じにします。

  

  この例で、ドッキング ガジェットとフロート ガジェットの機能は同じですが、フロート ガジェットの方がより多くのコンテンツを示しています。

• フロート状態の影を濃くして、フロートしていることを強調します。 アクティブでないウィンドウと同じスタイルの影を使用します。

• フライアウトを使用して、2 次情報および機能を一時的に表示します。 情報および機能が常に利用可能であることが必要な場合は、ガジェットに直接配置します。フライアウトには入れないでください。また、オプションにはフライアウトを使用せず、オプション ダイアログを使用します。

  以下の表で、ドッキング ガジェット、フロート ガジェット、フライアウト、およびフル アプリケーションに適した機能を比較します。

  状態	適した機能
  ドッキング	常に役立つコア機能。
  フロート	常に役立つ追加機能。
  フライアウト	場合により役立つ 2 次機能。
  フル アプリケーション	十分な配慮を必要とするか、時間集約的な複雑な機能。

• ドッキング状態とフロート状態には、類似した外見と操作を使用します。 ドッキング ガジェットとフロート ガジェットの外見および動作が大きく異なると、ユーザーを混乱させる可能性があります。ドッキング状態ではスペースが制約されるため、より小型なレイアウトが必要になることがありますが、インタラクティブ コンポーネントはほぼ同じ場所に配置するようにしてください。いずれの状態でも、同じアクションは同じ結果を得ることが必要です。

• インストール時に、目的に沿ったアクションをガジェットに実行させることを検討してください。 これによって、ガジェットに存在感を与えることができます。たとえば、カレンダー ガジェットの場合はページを今日の日付にめくるようにします。

• ガジェットの初期構成は避けてください。 最も可能性の高いオプション、または利便性のあるオプションを既定で選択してください。初期構成が必要だと、ガジェットが重くなります。

• 読み込み中の状態やオフライン状態のフィードバックを提供します。 ガジェットがオフラインか、読み込み中かをユーザーに知らせます。

  • 読み込み中の状態では、"データを取得中です" のように何を読み込んでいるかを説明するテキストと共にアクティビティ インジケータを使用します。

  • オフライン状態では、"サービスはご利用になれません" などの適切なテキストと共に 16 x 16 ピクセルの情報アイコンを使用します。必要に応じて、フェードしたプレースホルダ コンテンツまたはキャッシュ データを表示して、ガジェットを識別できるようにします。ガジェットは、接続が確立すると自動的に作動することが必要です。

    接続の遮断はガジェットに反映されますが、ユーザーはネットワーク通知エリア アイコンや Web ブラウザなど従来の方法で察知する可能性が高いため、ガジェットが注意を喚起する必要はありません。

  

  これらの例は、オフライン状態と読み込み中の状態を示しています。

• セッション全体を通じて状態を維持してください。 ユーザーは、ガジェットが前回のコンピュータ使用時と同じ状態になっていることを期待します。たとえば、解いている途中のパズルはそのままの状態にしておく必要があります。

操作

• 標準の Windows ポインタ動作を使用します。 たとえば、リンクにはハンド ポインタのみを使用します。

• ガジェットのサイズは自動的に変更しないでください。 1 つのガジェット サイズを変更すると他のガジェットが移動するため、サイズの自動変更はユーザーを混乱させ、困惑させます。ホバーのサイズは決して変更しないでください。必要な場合は、クリックするとサイズを変更できます。

• 可能な限り、 エラー処理メッセージやその他のメッセージの必要性を排除するようにガジェットをデザインしてください。 これらのメッセージはガジェットの軽さに矛盾します。

• エラー、警告、情報の各メッセージを表示する必要がある場合は、メッセージをインプレースで表示するか、異なるガジェット状態として表示してください。 これらのメッセージにはダイアログ ボックスを使用しないでください。エラー メッセージと警告メッセージに適した、16 x 16 ピクセルの標準アイコンと共にメッセージを表示します。ユーザー入力のマイナー エラーには、アイコンを使用しないでください。

  

  この例で、インプレースのユーザー入力エラーには、アイコンは必要ありません。

  エラー、警告、情報の各メッセージ アイコンに関するガイドラインの詳細については、「標準アイコン」を参照してください。

• ガジェットにヘルプは提供しないでください。 代わりに、デザインを見ればわかるようにしてください。

アニメーションおよびサウンド

• アニメーションは慎重に使用します。 根拠がなく、妨げになるアニメーションの使用は避けてください。人の目は、動き、特に周辺部の動きには敏感です。情報は目立たないように更新して、ユーザーが自然に気が付くようにします。注意を引き付けるためにアニメーションを使用する場合は、それが注意に値するものであり、ユーザーの思考を中断する価値があるかどうかを確認してください。クロスフェードなどの変化は、更新を円滑に感じさせる場合もありますが、過度の注意を引くこともあります。ガジェットをテストし、アニメーション速度と表面エリアなどの変数を微調整して、円滑さとインパクトの適切なバランスを見つけてください。特定のユーザー アクションでトリガされるアニメーションの使用を奨励します。正しく使用すると、円滑で洗練されたガジェットにすることができます。
• サウンドは慎重に使用します。 サウンドでユーザーを妨げないでください。サウンドは控え目に、ユーザー操作にのみ使用してください。ガイドラインの詳細については「サウンド」を参照してください。

オプション ダイアログ ボックス

• オプション ダイアログ ボックスは必要な場合にのみ使用します。 一部のガジェットはオプションを必要としません。役立つオプションの種類には、コンテンツの追加や削除などの個人設定や機能のカスタマイズがあります。オプション ダイアログ ボックスがガジェットの大部分と重複する場合は、ユーザーにガジェットで設定を直接調整してもらうことを検討してください。たとえば、ユーザーはドラッグ アンド ドロップを使用して、一覧の項目を並べ替えたい場合があります。オプション ダイアログ ボックスでこの機能を提供すると、ガジェットの大部分と重複する可能性があり、ユーザーが最終的な結果を思い浮かべることは難しくなります。

• フライアウトでオプションを提供しないでください。

• ガジェットのオプション グリフを通じて、オプション ダイアログ ボックスへのアクセスを提供します。

  

  オプション ダイアログ ボックスには、ガジェットの右上角にあるオプション グリフを通じてアクセスします。

• オプション ダイアログ ボックスの外観はプロパティ ウィンドウに似ていますが、タブはありません。オプションはスクロール バーを使用せずに 1 ページに収めます。ダイアログ ボックスでのコントロール配置については、一般的なレイアウト ガイドラインに従ってください。

Windows 統合

• ガジェットを Windows SideShow に拡張することを検討してください。

推奨サイズおよびスペース

• ドッキング ガジェットは幅 130 ピクセルです。 影の 5 ピクセル、左側の 2 ピクセル、および右側の 3 ピクセルを含みます。

• ドッキング ガジェットには高さの最大限度はありませんが、ユーザーがより多くのガジェットを見ることができるように、ガジェットはスペースを効果的に使用する必要があります。スペースを効果的に使用したガジェットは、高い確率で使用されます。

• フロート ガジェットは 400 x 400 ピクセルを超えないようにしてください。

  

  フロート ガジェットおよびドッキング ガジェットの推奨サイズ。

• オプション ダイアログ ボックスは幅 278 ピクセルのクライアント エリアを持ち、高さは 400 ピクセル以下です。 高さは、400 ピクセル以下でコントロールを収納できるよう調整することが必要です。

• オプション ダイアログ ボックスのテキストは、96 DPI の場合、12 ピクセルのメイリオまたは Segoe UI で、行間は 14 ピクセルです。

  

  オプション ダイアログ ボックスの推奨サイズ。

ガイドライン フィードバック

Microsoft 機密
作成者 Stephan Hoefnagels
最終更新月日 2007 年 8 月 16 日
ガイドライン フィードバック