Windows Media Player 7 スキンデザインガイド

[アーティクル]
11/13/2008

Bill Birney
Microsoft Streaming Media Division

Jun 2000

要約: Microsoft Windows Media Player 7 は、カスタムスキンを作成するため豊富なプログラミングインターフェイスを提供します。数多くのスキン制作を計画している場合、一定のデザイン規準を標準化すると役に立ちます。この記事では、アートワークの制作およびスキン機能のデザインについてのデザインをガイドします。数多くのスキンの制作を計画していたり、スキン制作をデザインチームで分担する場合、このガイドラインが役立ちます。

はじめに

Microsoft Windows Media Player 7 は、カスタムスキンを作成するためのプログラミングインターフェイスを提供します。スキンとは、Windows Media Player に新しいルックアンドフィールを生み出すために組み合わせたスクリプト、アート、メディア、テキストファイルのセットです。スキンを使用すると、Windows Media Player の外見を変更すると共にその機能も変更できます。いいかえると、ボタンの場所や外見を変えるだけでなく、基礎である Windows Media Player テクノロジの範囲内で機能も変更することができるのです。

スキン用の豊富なプログラミングインターフェイスは、デザインにたくさんの可能性を提供します。数多くのスキン制作を予定している場合、一定のデザイン規準を標準化すると役に立ちます。標準化すると、チームでの制作環境において、スキン制作が簡単、高速になります。古いプロジェクトを再オープンして変更したり、コードを再使用するときにも役立ちます。

状況にもよりますが、デザイン上のアイディアをスタイルガイドという形で定式化した方がよいこともあります。スタイル、ガイドは遂行するジョブによってシンプルな場合も複雑な場合もあります。本記事では、Windows Media チームが使用したスタイルガイドに基いて、スキン制作を標準化する方法についてアイディアを用意しました。自由にこのアイディアを利用してよく、独自のガイドを作成しても構いません。この記事を読む前には、スキン制作に関するコンセプトを知っておくとよいでしょう。スキン制作について詳しくは、新しい Windows Media Player 7 のためのカスタムスキンの作成を参照してください。また Adobe Photoshop を使用した高度なグラフィック制作について、知っておくとよいでしょうこの記事では Photoshop のアンチエイリアシングおよびレイヤー機能について説明します。

本記事には、以下のセクションがあります:

スキン制作プロセススキン制作の仕事の流れについて、概要を説明します。
グラフィックデザインガイドアートワークやイメージファイル制作のガイドラインを説明します。
機能デザインガイドスキン機能の統合についてガイドラインを説明します。
詳細情報

スキン制作プロセス

スキン制作は、グラフィックデザイナー、グラフィック制作担当者、スクリプト担当者など異なるスキルや素質を持つ人々に分担させることができます。このセクションでは、スキン制作上の各ステップを説明します。

グラフィックデザイン: グラフィックデザイナーは、Adobe Photoshop を使用してスキンの背景、ボタン (上、下、使用不可、ロールオーバー)、スライダコントロール、スライディングドロワー、およびクリッピングカラーのレイヤー (下部レイヤー) を制作します。スキン制作には他のグラフィックプログラムを使用しても構いませんが、そのプログラムはレイヤーを使用するグラフィックを作成できることが条件です。(スライディングドロワーはメイン UI の背後からスライドして表示されるイメージです。スライディングドロワーは Microsoft JScriptR を使用すると実装され、特にメインインターフェイスの外見を複雑にする先進的コントロールがあります。
レイヤーの準備: グラフィック制作担当者は、ボタンのレイヤーエフェクトを削除して各ボタンのイメージマップレイヤーを作成し、ボタンに色を付けます。デザインガイドで色を指定すると、その色がすべてのスキンで一貫して使用されます。またグラフィック制作担当者は、Photoshop に含まれている Adobe ImageReady を使用して、アートピースの透明なコーナーを囲む四辺形を作成します。そしてイメージは .bmp ファイルとしてエクスポートされます。
スキン定義ファイルのスクリプト作成: スクリプト担当者は、アートエレメントを組み込んでスキンに機能性を付与するため、スキン定義ファイル (.wms) と関連 JScript ファイル (.js) を作成します。(Windows Media ファイルを除く) すべてのファイルは、Windows Media zip ファイル (.wmz) に格納されます。

.wmz ファイルを作成すれば完了です。.wmz ファイルをオープンすると、Windows Media Player 7 はそのファイルを展開してスキンを開始します。通常 .wmz ファイルは他のスキンファイルと共に、Windows Media Player の Skins フォルダに含まれています。このフォルダのスキンは、利用者がプレーヤー内で [スキン選択] タブをクリックすると選択されます。

グラフィックデザインガイド

このセクションでは、スキンに関連したアートワークおよびイメージファイルを制作するためのガイドラインを提供します。各セクションは、スキンのレイアウトと外見、カラー名のマッピング/クリッピングを標準化する方法、デザインテクニックについてアイディアを提供します。

レイアウトと外見

一般にメインのユーザーインターフェイス (UI) は、視覚的に見てすっきりしていて、アクセスしやすいものにします。EQ や再生コントロールのように先進機能やまれにしか使用しない設定は、ドロワーに入れるか別のビューに入れます。外側の縁のギザギザを少なくするには、スキン背景のカーブを減らしてシンプルにします。

背景イメージには、非アクティブなアートワークか状態を変更しないアートワークを配置します。これにはシャドー、ボタン周囲の輪、装飾、テキストボックスや、その他以下の理由でアクティブエレメントをアップさせるものがあります:

背景イメージは、関係ない情報を入れないで圧縮率を高めることができます。
エレメントを移動したり、その状態を変更する場合でも、ボタンが背景に組み込まれていると実行できません。

これはボタングループにとって特に重要です。たとえばボタンイメージとして背景の代わりにシャドーを付加する場合、シャドーのエリアをカラーマップに追加しないとシャドーの部分が切り取られます。シャドーをボタンイメージに追加すると、シャドーをボタンのアクティブな部分にしますが、通常これは予期しない結果です。

さらに、以下の点についても考慮しましょう:

アニメーションの .gif ファイルが使用できます。
テキストエレメントのフォントは、Microsoft Windows に含まれている標準フォントセットの中から選択すべきです。それ以外のフォントは、イメージの一部として考慮しなければなりません。
スキンのフルモードのビューの他、コンパクトモードのビューも作成してください。フルモードビューでは、利用者はプレーヤーの全機能にアクセスできます。コンパクトモードビューは小さく、最少の機能セットしか含んでいません。他のプログラムを使用していてミュージックをバックグラウンドで再生する場合、利用者はコンパクトモードに切り替えることができます。
ボタンにはできる限り多くの状態 (ホバーとかダウンの状態等の) を用意しましょう。ボタンの状態は利用者にフィードバックする貴重な情報を伝えるので、スキンはより使いやすく、直感的に分かりやすくなります。ボタンの状態は、グラフィカルな経験を豊かにしてくれます。
クリップタイトル、作者、説明文等の必須メタデータを表示する方法を用意してください。テキストをデザインの一部に組み込んで、データをグラフィック的に面白い方法で表示してください。

カラーと名前

グラフィックの制作にあたっては、以下の規則に従ってください。

レイヤーの名前付け: イメージマップの制作時には、グラフィック制作担当者やスクリプト制作担当者に分かりやすいレイヤーの名前付け規則を使用してください。イメージがボタンやスライダ縮小イメージの場合、名前にはエレメントの機能名を加えます。たとえば次のようにします:

図 1. [レイヤー] タブを表示した Photoshop Toolbox

背景イメージは、いつも Background という名前を付けます。再生ボタンのイメージはいつも、PlayBtn という名前にアンダースコア (_) と up、down、disabled 等のボタンの状態を追加します。
クリッピングレイヤーカラー: クリッピングレイヤー (下部レイヤー) カラーは、アンチエイリアシングを削除したときに縁がきれいに見えるように、スキンのコンテナの色に近いものにします。たとえば白いスキンに黒のクリッピングレイヤーを使用する場合、Windows Media Player がクリップされた領域を透明にすると、スキンの縁の黒い境界にむらが見えます。スキンとクリッピングレイヤーの間の線がしっかりしていてアンチエイリアシングされない場合、これは問題になりません。
イメージマップは必ず単一色にします: イメージマップに使用する形は、単一色で塗りつぶす必要があります。
シングルレイヤーボタン: ボタンはたくさんのレイヤーを合成して作るのではなく、できればボタンは 1 つのレイヤーで作成します。エクスポートがスピードアップするからです。
レイヤーエフェクト: ドロップシャドー、ベベリング、グローイングその他のレイヤーエフェクトを使用してください。イメージマップの作成プロセスがスピードアップするからです。
ボタングループ: ボタンを機能別グループに組織する場合、ボタンは BUTTONGROUP エレメントを使って論理的に組織化できるので、スクリプトを使用すると簡単になります。その他処理する .bmp ファイルが少しあります。以下のテーブルでは、ボタンを 1 つのイメージマップファイルにグループ化する方法を示します:

イメージマップファイル機能

PlayControls_UP.bmp
再生、停止、巻戻し、早送り、一時停止

WindowControls_UP.bmp
最小化、最大化、終了

面積のほとんどをボタンで占める小さなスキンでは、スキン全体を BUTTONGROUP エレメントにすると余白が生まれ、プロセスも簡単になります。たとえば既定または上のイメージを背景イメージとして使用できます。

イメージマップファイル	機能
PlayControls_UP.bmp	再生、停止、巻戻し、早送り、一時停止
WindowControls_UP.bmp	最小化、最大化、終了

機能別ボタンカラーの一貫性: すべてのスキンセットを通して、カラー対機能に同一のマッピングを適用してください。たとえばすべてのスキンのビデオ再生ボタンは純粋の緑 (16 進数では 00FF00) にします。つぎのテーブルでは、基本機能とそれに関連するマッピングカラー値を一覧表にしています。

機能	カラーの 16 進数値
再生	00FF00
停止	FF0000
一時停止	FF00FF
早送り	3300FF
巻戻し	00CCFF
最小化	00FFFF
終了	FFFF00
フルモードにスイッチ	FF9900

ボタングループカラーの一貫性: グループ内の標準カラーを持たないボタンには、以下のカラーの 16 進数値を以下の順序で割り当ててください。
1. #00FF00
2. #00CC00
3. #009900
4. #006600
5. #003300
6. #CC0000
7. #990000
8. #660000
9. #000000
10. #FF0000
グループ内の左上端のボタンから順に、時計回りにカラー値を割り当てます。サンプルのイメージマップでは、まず 00FF00 が左端のボタンに割り当てられ、00CC00 はその次、009900 はその次となります。

図 2. 一貫性のあるマッピングカラーのあるシングルイメージマップ
ボタングループイメージファイル: ファイルの名前付けには以下の規則を適用してください:
- 関連するレイヤー名に似た名前を使用します: レイヤー名に似た .bmp ファイル名を付けること、ファイルがアルファベット順に並べられるということを念頭に置いてください。
- グループには複数形の名前を使用します: ボタングループを含んだイメージファイルに名前を付ける場合、複数形を使用します。たとえば次のようにします:
PlayControls_DOWN.bmp

PlayControls_UP.bmp

PlayControls_HVR.bmp

PlayControls_MAP.bmp
- 機能と状態を使用します: ボタンを 1 つ含むイメージファイルを名前付けるときは、機能と状態を追加します。たとえば次のようにします:
VolumeThumb_UP.bmp

VolumeThumb_DOWN.bmp

VolumeThumb_ROLLOVER.bmp

カラー深度とファイルサイズ

ファイルサイズを最小化するため、大きなイメージは GIF 形式に変換するとよいでしょう。アニメーションを追加するなら、.gif ファイルは不可欠です。イメージサイズが小さくてアニメーションは論外の場合、イメージは 256 色 .bmp ファイルに保存します。ビットマップファイルはしばしば少し大きいだけで、CPU をあまり消費しないというメリットがあります。非常に小さなイメージは、.gif ファイルや圧縮 .bmp ファイルより 24 ビット .bmp ファイルの方が実サイズが小さくなります。

制作されたスキンファイル (.wmz) のサイズは、400KB 以下にしてください。イメージ品質を損なわない限り最少のカラー深度を使用します。カラーマップはいつでも 4 ビットカラーを使用してください。ほとんどのイメージは 8 ビットカラーで十分です、特に 256 色以下の小さなイメージの場合はそうです。大きなカラーパレットのある詳細なアートワークとボタンのような非常に小さなグラフィックは、24 ビット .bmp ファイルとして保存してください。

注: スキンの GIF エリアを透明にする場合、GIF ファイルの作成時にはイメージに透明なエリアを割り当てないでください。この方法は、GIF が Web ブラウザで表示された場合にのみ有効です。そのエリアには透明以外の色を割り当てて、スキン定義ファイルでそのエリアをクリップします。

機能デザインガイド

このセクションではスキンのデザインで使われる機能エレメントをリストアップして、手短かに説明します。機能デザインは利用者がスキンと対話してコンテンツを再生する方法を指定します。スキンのデザインでは以下のように、加える機能エレメントやその操作方法を考慮しなければなりません:

必須機能: つぎの機能はすべてのスキンに必須です:
- 再生
- 停止
- 一時停止
- 巻戻し (前の CD トラックまたは前のセクションに戻す)
- 早送り (次の CD トラックまたは次のセクションに移す)
- 最小化 (スキンをタスクバー上のボタンにする)
- 最大化 (全画面表示か、スキンを最大サイズにする)
- 終了 (Windows Media Player の終了)
機能は 2 つのボタングループにグループ化できます: プレイバックを制御する機能を含むものと、プログラムやウインドウを制御するものです。
基本機能: スキンには、機能を追加できます。あるアプリケーションには基本機能は必須でも、別のアプリケーションには異質で余計な場合があります。ごちゃごちゃしていて混雑したインターフェイスと利用者に十分なコントロールを与えないことのバランスを取る必要があります。以下の機能は基本的なものの例です:
- イジェクト
- シャッフル
- リピート
- ミュート
- ステレオ
[フルモードに戻る] ボタンは再生コンテンツには必須ではありませんが、すべてのスキンの見つかりやすい場所に配置することをお勧めします。このボタンを使用すると、利用者は簡単にフルプレーヤーモードに戻れます。以下のダイアグラムでは、Photoshop その他のグラフィックツールで標準 [フルモードに戻る] ボタングラフィックを制作するステップを示します。

図 3. [フルモードに戻る] ボタンの制作ステップ

以下のサンプルコードを使用すると [フルモードに戻る] 機能を実装できます。
```
<buttonelement
    mappingColor="red"
    upToolTip="Return to Full Mode"
    onClick="view.returnToMediaCenter();">
</buttonelement>  
```
必須ユーザーフィードバック: フィードバック機能は、プレーヤーの状態について有益な情報を利用者に提供します。テキストボックス、プログレスバーやフルサイズイメージ、アイコンを表示することにより、利用者に情報を伝えることができます。フィードバックはコンテンツの再生に必須ではありませんが、有益なフィードバックは満足のゆくユーザー経験にとって必須です。たとえば接続状態の情報は、ライブストリームに接続をトライしていて長い待ち状態におちいった利用者にとって、非常に重要です。スキンには以下のフィードバックを用意するようにしてください:
- バンド幅
- バッファリングパーセント
- 転送速度 (ダウンロード用)
- 経過時間トラック (CD プレイバック)
スライダコントロール: スライダコントロールを使用すると、利用者はパラメータを少しずつ調整できます。唯一必須なスライダはボリュームコントロールで、利用者が簡単にアクセスできるよう常時メインインターフェイス上に配置する必要があります。それ以外のスライダは、スキンが混雑しないように通常ドロワーの中に置きます。
- ボリューム
- イコライザ
- バランス
- 高音
- 低音
- パン
視覚化: 視覚化は、オーディオトラックのカラフルな表現です。ビデオフレームのあるスキン上の領域を使用すると、オーディオ専用コンテンツに視覚化を適用することができます。またビデオコンテンツと一緒に視覚化を使用することも可能ですが、その結果 CPU の消費量が増加することに注意してください。
ビデオ: ビデオフレームは唯一、ビデオ再生が可能なスキンに必須です。再生専用オーディオとしてデザインされたスキンは、ファイル拡張子フィルタ等のビデオファイルやストリームを利用者が選択するメカニズムを追加する必要があります。ビデオを再生するスキンでは、数多くの違ったフレームサイズや形を処理できるようにデザインする必要があります。固定したフレームサイズを持つスキンを作成する場合、かならず縮小拡大を処理するビデオエレメントの属性を maintainAspectRatio、shrinkToFit、stretchToFit にセットしてください。
再生リスト: 再生リストコントロールを使用すると、メディアコンテンツを組織することができます。スキンに再生リストがあると、利用者は長くスキンを使用するかも知れません。クリップやトラックをスイッチできるからです。インターフェイスをクリーンに保つためには、再生リストはドロワーの中に配置して隠すとよいでしょう。
Web リンク: スキンには、ストリーミングやダウンロードのためメディアをオープンするリンク、既定のブラウザで Web ページをオープンするリンクを追加できます。一般にリンクは、スキンのグラフックオブジェクトや領域に埋め込まれたり、再生リストのアイテムに添付されます。
開発者のクレジット: スキンには、開発者のクレジットを表示する小さなボタンやホットスポットを追加できます。通常この情報は、利用者がそのインターフェイスをクリックするまで隠されています。

詳細情報

完全なプログラミングリファレンスとサンプルスキンを含む Windows Media Player のスキン制作について詳しくは、Microsoft Web サイトから Windows Media Player SDK をダウンロードして Windows Media Player 7 をインストールしてください。

Windows Media Player 7 スキン デザイン ガイド

はじめに

スキン制作プロセス

グラフィック デザイン ガイド