フェノメナエンターテインメントのトップページへ

UI デザイン研究室

UIデザイン研究室のホームへ戻る

Windows 8 アプリのUIデザイン

Windows 8 Start Screen

アップルやアンドロイドによるスマートフォン、タブレット全盛の中、Windows 8 が発売されマイクロソフトによる巻き返しが行われています。
Windows 8 のUIはタッチパネル操作に重点が置かれています。
しかし、PC上での動作も求められるため、マウスとキーボードでの操作も残すというハイブリッドな操作体系になっています。
さらに、タイルUIが使用されているスタート画面とデスクトップアプリとストアアプリの関係で基本的なUIがどういうデザインなのかわかりにくくなっています。
そこで、今回はWindows 8 アプリケーションのUIをデザインする際に必要な基礎知識を記載しました。

[ Windows 8 と Windows RT ]

Windows 8 ファミリーには以下の3種類が存在します。

  • ・Windows 8
  • ・Windows 8 Pro
  • ・Windows RT

Windows 8 に対するProとRTの違いは以下のとおりです。

Windows 8 Pro 主にセキュリティ機能が強化されている。
Windows RT ユーザーがデスクトップアプリ(従来のWindows EXE)をインストールできない。

Windows RT 上で使用できるデスクトップアプリは機器メーカーがあらかじめインストールしたアプリだけであることに注意が必要です。あなたが過去に所有していたWindows EXE形式のプログラムをWindows RT が搭載されたタブレットやパソコンでは使用できません。
Windows 8 とWindows RT の違いは画面の見た目だけではわからないため、タブレットやパソコンの仕様書を細かく確認する必要があります。

[ デスクトップアプリ と ストアアプリ ]

Windows 8 で動作するアプリには「デスクトップアプリ」と「ストアアプリ」という2つの形式があります。
UIデザインを行う際には2形式の違いについて十分理解しておくことが必要です。

1. デスクトップアプリ

Desktop application

Windows 3.1 から脈々と続く「デスクトップ上のウィンドウ内に画面表示する」アプリがこの形態です。Windows 7 や以前のOSにも対応したアプリとして開発することが可能です。
マウス操作がUIの基本ですが、タブレット向けアプリの場合はタッチ操作にも配慮してUIデザインを行う必要があります。

デスクトップアプリのUIを構築する手段は以下2種類が存在します。

フォームによるUI構築 旧来から存在する方法です。一般的には、VisualStuidoというWindowsプログラムを開発するアプリ内のリソースエディタを使用してUI構築を行います。
WPFによるUI構築 2006年に登場した比較的新しいUIの構築環境です。WPFは処理系プログラムと画面表示系プログラムを別々に開発してアプリを作り上げることができる仕組みを持っています。

WPFはWindows Presentation Foundationの略で、画面表示系プログラムはXAMLと呼ばれるXML系の言語により記述します。
ボタンなどOS標準のUIパーツはベクターデータで用意されており、綺麗なリサイズや見た目のカスタマイズが行えるようになっています。
XAMLは、MicrosoftのExpression Blendというアプリを使って作成することができます。Expression BlendはAdobe Flashのように画面のデザインを作成したり、タイムラインアニメーション作成などの機能を持っており、UIのデザインや開発を行うためにはExpression Blendの操作を習得する必要があります。

2. ストアアプリ

Store application

Windows 8 から新たに加わったアプリ形態で、Windows 7 や以前のOSには対応していません。
Modern UIアプリと呼ばれることもあります。
常にフルスクリーンでの表示が行われ、従来のようなウィンドウは存在しません。(※Windows8.1 から画面を分割して表示する仕様が加わります)
ストアアプリはタッチ操作を基本としており、タブレットやスマートフォンに最適化したUIです。

ストアアプリのUIを構築する手段は以下2種類が存在します。

XAMLによるUI構築 当面主流となる構築方法で、デスクトップアプリとUI開発の環境は同一です。プログラミング言語はC#が主流になっています。
HTMLによるUI構築 今後増えていくと思われますが、表示速度や安定性という課題が続いています。プログラミング言語はJava Scriptです。

[ WPF と フォーム ]

デスクトップアプリのUI構築には「WPF」と「フォーム」という方法が存在することを前述しました。ボタンなどOS標準のコントロールパーツはUI構築方法よって微妙に見た目が異なります。
UIのデザインを行う際は、この違いを把握しておくことも必要になります。
以下は、UIの構築方法(フォームまたはWPF)とOS(Windows 7 または8 )の違いでWindows標準のコントロールパーツがどのように表示されるかを図示しました。

フォームで構築したUIをデスクトップアプリとしてWindows 7 またはWindows 8 で動作させると以下のように表示されます。
Windows 8 は7 に対してフラットな見た目に標準のコントロールパーツのデザインが変更されています。

フォーム / Windows 7

フォームで作成しWindows 7で表示

フォーム / Windows 8

フォームで作成しWindows 8で表示

WPFで構築したUIをデスクトップアプリとしてWindows 7 またはWindows 8 で動作させると以下のように表示されます。
フォームで構築した場合と見比べると、微妙な違いが存在しています。

WPF / Windows 7

WPFで作成しWindows 7で表示

WP / Windows 8

WPFで作成しWindows 8で表示

[ ストアアプリのUIデザイン ]

XAMLで記述したコントロール類をストアアプリ化してWindows 8 で動作させると以下のように表示されます。
このサンプルはデスクトップアプリと同じXAMLを使用しています。全てWindows標準のコントロールパーツです。

Store / Dark

ストアアプリとして作成しWindows 8で表示(ダーク)

Store / Light

ストアアプリとして作成しWindows 8で表示(ライト)

ストアアプリを開発する際には、アプリごとに「ダーク」または「ライト」どちらかのテーマカラーを設定できます。
デザインのカスタマイズを行わないで開発すると、テーマカラーとアクセントカラーで画面が表示されます。
上記アクセントカラーは、ユーザーが設定した「スタート画面の色設定」が反映されるため、開発者側でカスタマイズ指定を行わない場合はユーザーの色設定がアプリの画面デザインに反映されます。

Color settings

スタート画面の色設定画面

デスクトップアプリは今までのWindowsアプリデザインの延長線上でUIを設計・デザインしても問題はありません。
画面上の要素配置や画面遷移の考え方などUIの基本設計はWindows 7用と変える必要はありません。ただし、タッチパネル操作を主な操作方法と想定する場合は、ボタンなど操作パーツのサイズを大きくする必要があります。
UIデザインの考え方を今までのWindowsアプリから大きく変える必要があるのは、タブレット等のタッチパネル操作をターゲットに作成する「ストアアプリ」です。

以下がストアアプリのUIデザインを行う際のポイントです。

  • ・常に全画面で表示されることに対応する
  • ・ボタン等は指で操作できる大きさを確保する
  • ・ソフトウェアーキーボードの出現に対応する
  • ・縦/横両方の画面向きに対応する(アプリの要件定義によりますが...)

iPadやAndroidタブレット向けアプリのUI設計・デザインを行っている人にはあたりまえの要件ですが、パソコン向けWindowsアプリのUI概念がしみついた設計者やデザイナーには意外と難しく感じるかもしれません。

Document Manager for Tablet

弊社でUI開発を行ったストアアプリの画面イメージ

[ 最後に ]

Windows 8 のGUIデザインについては、マイクロソフトが発行しているデザインガイドラインを理解して作成する必要があります。
[ Windows 7 時代の UX ガイドライン ]を開く(デスクトップアプリに関してはWindows 7 用の資料しか無いようです)

特にストアアプリは、マイクロソフトの審査後にストア配布が行われるため、マイクロソフトが発行しているガイドラインを理解し作成する必要があります。
[ WindowsストアアプリのUXデザインサイト ]を開く

Windows 8 に対応し「美しく、使いやすく、分りやすい」UIデザインを実現していくには、開発者とデザイナー双方が Windows 8 のUI システムと開発ツールの仕様について理解し、地道に知識を蓄えていくことが必要です。

このページのトップへ