SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(InputMan)

Windows UXガイドライン準拠マニュアル
InputManだからこそできること

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (51.4 KB)

 Windows 7対応アプリケーション作成時のデザインの指針『Windowsユーザーエクスペリエンスガイドライン』に記載されている推奨値は、標準のコントロールでは実現が難しいものもあります。しかし、InputMan for Windows Forms 6.0Jを利用することで、簡単に要件を満たすことが可能です。今回は、この推奨値と標準コントロールが適合していない項目を具体的に見ていきながらInputManコントロールと比較し、解説していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

Windows 7対応UIを標準コントロールで実現するのは難しい…

 『Windowsユーザーエクスペリエンスガイドライン』というものをご存知でしょうか? 1995年にマイクロソフトプレスから出版されていた『Windowsユーザーインターフェイスデザインガイド』のWindows 7対応版です。というよりも、『Windowsユーザーインターフェイスデザインガイド』が絶版となり入手が困難な現状では、WindowsアプリケーションのUIをデザインするときの唯一の道しるべというべき情報です。この機会にぜひ一読してもらいたい内容になっています。

 しかしながら、Windowsユーザーエクスペリエンスガイドラインに沿ってVisual BasicやVisual C#でWindowsフォームをデザインしようとしても、うまくいかない項目が散見されます。

「標準コントロールでデザインし辛いデザインをしたい」

 そんなときはグレープシティのInputMan for Windows Forms 6.0Jの出番です。InputManならば、標準のコントロールでは実現できないガイドラインどおりのデザインを実現できます。

Windowsユーザーエクスペリエンスガイドラインとは?

 Windowsユーザーエクスペリエンスガイドラインは、MSDNライブラリに公開されている技術資料で、PDFファイルとしても公開されています。マイクロソフトがこのガイドラインを公開した目的は、次のように説明されています。

  • Windowsベースのすべてのアプリケーションにとって、質の高い、一貫性のある基準を設定する
  • ユーザーエクスペリエンスに関する特定の質問に答える
  • 仕事をより簡単にする

 ガイドラインは次の10セクションで構成されており、Windows 7に対応したWindowsアプリケーションである操作を行うときにはどのようなコントロールをどのように使うのか、また、マニュアルにはどのように記載するのか、という内容が説明されています。

  • デザインの原則
  • コントロール
  • コマンド
  • テキスト
  • メッセージ
  • 対話操作
  • ウィンドウ
  • 外観
  • エクスペリエンス
  • Windows環境

 今回は「コントロール」について書かれたセクションの内容に沿って、標準コントロールが適合していない項目について、具体的に標準コントロールとInputManコントロールを比較しながら確認していきます。サンプルソースには、これから紹介する各UIパーツを格納しておきました。参考にしてみてください。

ドロップダウンリスト

 ガイドラインでは、ドロップダウンリストの高さの推奨値は「14DLUs(23ピクセル)」となっています。

 標準のドロップダウンリストの高さは、フォントから自動的に決定されるためマニュアル設定ができません。一方、InputManのGcComboBoxの高さは手動設定ができます。例えばMS UIゴシックの9ptの場合、標準のドロップダウンリストなら20ピクセルですが、GcComboBoxなら23ピクセルに設定できます。

図1 ドロップダウンリスト
図1 ドロップダウンリスト

 ガイドラインでは、コマンドボタンの高さの推奨値も「23ピクセル」となっています。ガイドラインに合わせているので当然といえば当然ですが、InputManのGcComboBoxならばコマンドボタンの高さと合わせることができ、デザインの統一感も生まれます。

コンボボックス

 ガイドラインでは、コンボボックスの高さもドロップダウンリストと同様に「14DLUs(23ピクセル)」が推奨されています。

 標準コントロールもInputManも、ドロップダウンリストとコンボボックスはプロパティ値により切り替えるもので元は一つのコントロールです。そのためドロップダウンリスト同様、推奨値との相違が、標準コントロールでは発生してしまいます。

図2 コンボボックス:InputManを利用すれば、ドロップダウンリスト同様、推奨値に沿ったサイズで作成可能
図2 コンボボックス:InputManを利用すれば、ドロップダウンリスト同様、推奨値に沿ったサイズで作成可能

リストボックス

 リストボックスに関するガイドラインで注目したいのは、コントロールサイズの推奨値ではなく、複数選択が可能な場合に推奨されるコントロールです。

 ガイドラインによれば、複数選択を行うときには複数選択できることが分かるようにチェックボックス付のリストボックスを使うことが推奨されています。標準コントロールの場合、チェックボックス付のリストボックスはCheckedListBoxとなるため、単一選択か複数選択かによりコントロールを張り替えなくてはなりません。一方、InputManのGcListBoxではShowCheckBoxプロパティで制御できるため便利です。

図3 リストボックス
図3 リストボックス

 また、ガイドラインには、「複数選択時にリストボックスの下に選択済みのアイテム数を表示することが検討されている」と書かれています。InputManのGcListBoxにはフッター表示機能があるので、フッターに選択数を表示するようにコードを書けば、この検討中のガイドラインにも簡単に対応可能です。

 もう一つ重要なのは、標準のListBoxとCheckedListBoxでは同じ高さに表示できるアイテム数に差がある点です。InputManのGcListBoxでは、チェックボックスの表示の有無が同じ高さに表示するアイテム数に影響しません。

 ささいなことですが、このような違いが生じなければ、

お客様「リストボックスにチェックボックスをつけて使いやすくしてほしい」
開発者「了解しました(面倒だけれどListBoxをCheckListBoxへ張り替えよう)」
お客様「一度に見える項目数が少なくなった。前のように表示してほしい」
開発者「申し訳ありませんが、画面に余裕がなくて対応できないと思います」

といった会話をしなくて済みます。

テキストボックス

サイズの推奨値

 ガイドラインでは、テキストボックスの高さの推奨値は「14DLUs(23ピクセル)」となっています。

 標準のテキストボックスの高さは、MultiLineプロパティをTrueにしないとフォントから自動的に決定されるだけでマニュアル設定ができません。一方、InputManのGcTextBoxの高さは手動設定できます。 例えばMS UIゴシックの9ptの場合には、標準のテキストボックスなら19ピクセルですが、GcTextBoxなら23ピクセルに設定できます。

図4 テキストボックス
図4 テキストボックス

文字の表示位置

 標準のTextBoxでも、MultilineプロパティをTrueにして複数行入力を抑止するようにプログラムを組めば、推奨値の高さにコントロールのHeightプロパティを設定することができます。しかし、文字と縦方向の表示位置がセンタリングされず、入力枠に対して上の方に位置してしまいます。

 InputManのコントロールは、GcTextBoxをはじめとして、さまざまなコントロールで文字表示位置を手軽に設定できるため、推奨値の高さにしても違和感なく表示することが可能です。

図5 文字の配置
図5 文字の配置

入力制限

 ガイドラインによれば、入力時に入力する文字を特定できる場合は、入力後にチェックするのではなく入力制限を行うことが推奨されています。

 InputManには、数値のみが入力できるGcNumber、和暦に対応したGcDate、時間に特化したGcTimeSpanなど、さまざまな入力内容に対応した多彩なコントロールが用意されています。

「Windows API Code Pack for .NET」+「InputMan」でWindows 7対応アプリを実現

 InputMan for Windows Form 6.0JはWindows 7に対応しています(参考リンク:Windows 7 対応状況一覧(.NET製品))。しかし、「ジャンプリスト」「コマンドリンク」「タスクバーアイコンへのプログレスバー表示」など、Windows 7で追加されたUX(ユーザーエクスペリエンス)に対応するコントロールは含まれていません。このようにWindows 7特有の機能を追加するには、マイクロソフトから無償提供されているWindows API Code Pack for Microsoft .NET Frameworkを使用します。

 InputManにWindows API Code Packを加えれば、ガイドラインのほとんどの項目を推奨値で作成できます。ぜひ、お手元にあるWindowsアプリケーションの画面を推奨値だけで作成しなおしてみてください。そして、元のデザインと見比べて評価してみてください。なんとなく違和感があった画面が、しっくりくる画面に変わっていると思います。

製品情報

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4959 2010/02/25 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング