Windows 10ガイドラインに適合するユーザーインターフェイス構築術
第35回 エンバカデロ・デベロッパーキャンプ

エンバカデロ・テクノロジーズ
セールスコンサルタント 毛利春幸本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

はじめに Windows 10 のユーザーインターフェースは、今までとどう違うのか？大きく変化したUI/UXに対応すべく新たに加わったVCLをフル活用し、新しい設計方法を詳しく説明します。このセッションではコンポーネントを利用し基本であるナビゲーション要素・コマンド要素・コンテンツ要素・対話型などを例に大きく設計思想をシフトさせる技術を伝授します。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

過去のWindows デザイン
 複数ウィンドウやMDIは不向き• Windows 10さまざまな入力方法を考慮する必要がある

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

Windows 10に適合したUX
 Windows 10になって動作環境が大きく広がりました…
• 高解像度モニタ• タッチスクリーン• キーボード着脱式PC• タブレット：

上記を考慮したUIデザインが必要です。
一般的なパターンと要素本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

UIデザインの基本
 ナビゲーション・コマンド・コンテンツの３つに分割されたエレメント
ナビゲーションエレメント
サブレベルナビゲーション
コンテンツエレメント

コマンドエレメント

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

5

ナビゲーション デザ インの基本
 アプリのコンテンツと機能のすべてを単一ページに配置して、ユーザーが パンするだけでそのコンテンツ内を移動を考慮する
ナビゲーションエレメント

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

6

TToolBarでナビゲーションエレメント
 TToolBarを使いナビゲーションエレメントを再現

TStackPanel

ナビゲーションエレメント
TToolBar

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

メニューの可視エントリ ポイント
ツール バー右端のプライマリ アクションの隣に配置
ドロップダウンメニュー

7

ナビゲーションウィンドウ さまざまなトップレベルのナビゲーション項目を使うこと ができるパターンです。これにより、画面領域を節約することができます。

ナビゲーションウィンドウ

コンテンツエレメント

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

8

TSplitView ナビゲーションウィンドウ TSplitViewを利用

TSplitView
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

9

ナビゲーションエレメント
 画面遷移をナビゲーションする要素• ツリー状の構造• 並列の関係

並列とツリー状の関係
画面1

画面2

画面3

ツリー状
画面1

並列の関係
ピア ツー ピア
画面2

画面3

画面1

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

画面2

画面1-1

画面1-2

画面1-3

画面1-1-1

画面1-1-2

画面1-1-3

画面310

コマンドエレメント
 コンテンツエレメントを操作 / その他共通操作• ボタン類• 時刻選択• ドロップダウンリスト• 選択コントロール

コマンドエレメント

古い基幹系のファンクションキー？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

11

TGridPanelコマンドエレメント
 TGridPanelで平均的にボタンを配置する
ナビゲーション

コンテンツ
コマンドエレメントはすべてのパンで共通にするのか？
設計時の判断が必要
コマンドエレメント

TGridPanel
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12

TGridPanelコマンドエレメント
 ナビゲーションがTopの場合
ナビゲーション

コンテンツ

コマンドエレメント

TGridPanel
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

13

最もよくみられるページの分割方法
 エレメント分割イメージ

理想的な分割方法や画面遷移を包括的に設計していく

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

コマンドアイコン
 Segoe MDL2 Assetsフォント• アイコンなどの記号で、Windows 8.xでは「Segoe UI Symbol」フォントが使われていたが、Windows 10では「Segoe MDL2 Assets」フォントに変更されています。デザインが異なるだけでなく、多くの記号が追加されている。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

15

コンテンツエレメント(デザイン)
 メイン画面です。

• オーディオビデオ / 画像表示 / グラフ /テキスト/グリッド

コンテンツエレメント

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

リスト / グリッド
 Windows 10 リスト表示のガイドライン
項目

詳細

リスト ビュー

主にテキストの多いコンテンツのコレクションを表示する

グリッド ビュー

主に画像の多いコンテンツ コレクションを表示する

ドロップダウン リスト

拡張可能なリストから、ユーザーが 1 つの項目を選択する

リスト ボックス

スクロール可能なボックスから、ユーザーが 1 つまたは複数の項目を選択する※TListViewの事ではございません。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

TCardPanel コンテンツエレメント
 TCardPanelで複数のコンテンツを実現

コンテンツエレメント
パン切替はTCardPanel
画面配置をTGridPanelでしています。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18

ハブコントロール
 ハブのコンテンツはパンする堅牢なビューに表示でき、新しい情報、入手可能な項目、関連する項目がひとめでわかります。

TGridPanelやTStackPanel

全体はTStackPanel

TPageScrollerやTScrollBox

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

19

レスポンシブデザイン /アダプティブ・レイアウト
 レスポンシブデザイン• デスクトップ・タブレット・縦・横などの最適なレイアウト

 アダプティブレイアウト• ユーザーの使用目的や状況、環境などに応じたコンテンツを、ユーザーの使用するデバイスや画面サイズに関係なく同じコンテンツを利用できるようにレイアウトならびに画像や文字のサイズ、並びに必要に応じてコンテンツや機能を変更する手法

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

20

タブレットモード取得
 Windows 10でタブレットモードかデスクトップモードか判定する方法として、レジストリのキーで判定• [HKEY_CURRENT_USER¥SOFTWARE¥Microsoft¥Windows¥CurrentVersion¥ImmersiveShell]"TabletMode"=dword:00000000 (タブレットモードがオンのときは1、オフのときは0)

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

21

タブレットでのパネルの活用
 TGridPanel, TFlowPanelを活用しタブレットモードに対応した配置を行う

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

22

タブレットでのタッチ操作
 タブレットPCやタッチパネル搭載PCではマウスの代わりにタッチ操作が使われる
 指で操作されることを考慮してUI設計を行う（操作部品の大きさや配置）
 VCLでは「標準ジェスチャ(30種類以上)」と「カスタムジェスチャ」でタッチ操作を扱える

TControl.Touch.GestureManagerへ

OnGestureは継承元がTControlだとついている本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

23

操作を完了までに 2秒
 重い処理 / ダウンロード / サーバーからのレスポンス• ユーザーの操作をブロックするモーダルな確定的でないタスクでは、進行状況不定バー TActivityIndicator

10秒より長い時間がかかる 場合は、操作を取り消す方法を用意

 重い処理での(応答なし)もThread化

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

24

通知
 メッセージボックスやダイヤログによる通知をTNotificationCenter コンポーネントを利用する

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

25

ハイコントラストモード
 ハイコントラストモード時にスタイルを切替る
 Windows 10でのハイコントラストモード判定する方法として、レジストリのキーで判定• [[HKEY_CURRENT_USER¥Control Panel¥Accessibility¥HighContrast]"Flags"="126"

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

26

WinRT WinRTとは• Windows 8以降に導入された新しいランタイム• Windows 10の新機能はWinRTによって提供されているものが多い

 DelphiでのWinRTの利用• WinRTを利用するためのヘッダファイルを用意• 本日「B3」セッションで説明しました。後日ビデオをご覧ください

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

27

新しい環境への適応力をつけ
Windows 10 アプリケーションを成功させましょう 新しいアプローチを用いた開発• Delphi / C++Builderは他の開発環境よりも、高い後方互換性を維持• 新たに導入されたコンポーネントを活用• 最新のテクノロジーもなじみのあるコンポーネント手法によりサポート

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

28

THANKS!
www.embarcadero.com/jp
第35回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。