レンズの設計ガイドライン (Windows Phone ストア アプリ)

Applies to Windows Phone only

このトピックでは、Windows Phone でカメラ レンズを使い、リッチ メディアを実装して、一貫性のある優れたレンズ アプリのエクスペリエンスを実現するための設計に関するベスト プラクティスについて説明します。レンズ アプリの開発について詳しくは、「Windows Phone 8 のレンズ」をご覧ください。

レンズのユーザー エクスペリエンス ガイドライン

レンズ アプリは、組み込みのカメラを補完するためのもので、カメラと写真表示の両方の機能をそのまま拡張したように感じられます。レンズは、実世界のシナリオを、パノラマやグループ写真など、そのシナリオに特化したアプリに対応付けるのに役立つ手段となります。レンズは、次の 2 つの主要機能を備えることでこれを実現します。

  • キャプチャ:

    UI の例: (1) レンズ切り替えボタンをタップし、(2) レンズを選択して瞬間をキャプチャし、(3) 確認して写真をカメラ ロールに保存します。

    UI の例: (1) レンズ切り替えボタンをタップし、(2) レンズを選択して瞬間をキャプチャし、(3) 確認して写真をカメラ ロールに保存します。

  • 表示と操作:

    UI の例: (1) すべての写真がカメラ ロールに表示され、(2) 写真を作ったアプリでその写真をもう一度開き、(3) 操作または編集し、(4) 新しい写真を保存します。

    UI の例: (1) すべての写真がカメラ ロールに表示され、(2) 写真を作ったアプリでその写真をもう一度開き、(3) 操作または編集し、(4) 新しい写真を保存します。

重要な注意:  レンズ アプリを作る場合、次の基本的な点について留意する必要があります。

  • レンズはビューファインダーを使用する機能に組み込まれます。
  • レンズにより、写真がカメラ ロールに保存されます。
  • 強化された表示または編集エクスペリエンスを提供するレンズは、組み込みのフォト ビューアーでそのエクスペリエンスをもう一度提供します。

起動エクスペリエンス

レンズは主にカメラ アプリで、組み込みのカメラ エクスペリエンスのコンテキストで起動されます。デバイスのカメラ エクスペリエンスでは、縦向きと横向きの両方がサポートされますが、ユーザーがデバイスをカメラのように持っているとき (横向き) にレンズ アプリが起動される可能性が最も高いことを理解しておくことが重要です。そのため、起動画面とアプリの既定の向きは横向きに設定することをお勧めします。

レンズはビューファインダーを使用する機能です。つまり、ビューファインダー固有のアプリを起動する場合、ビューファインダーの特性を利用するエクスペリエンスがすぐに実現されます。ただし、ユーザーが資格情報を入力したり、アプリの一部分を使うために法的に同意する必要のあるアプリはこの限りではありません。

組み込みのカメラ エクスペリエンスとのアプリの統合について詳しくは、「Windows Phone 8 のレンズ機能拡張」をご覧ください。

キャプチャ エクスペリエンス

一般的に、レンズのキャプチャ エクスペリエンスには、特別な理由がない限り、組み込みのカメラのユーザー エクスペリエンスとの一貫性を持たせる必要があります。レンズ エクスペリエンスに必要な一貫性を提供するには、次の点を考慮してください。

  • ジェスチャ (特に左方向へスワイプ) とエクスペリエンスは、デバイスの向きを基準にして作る必要があります。
  • アプリでは、デバイスの向きを基準にして、さらに写真があることを示す左向き矢印アイコンをサポートする必要があります。
  • [保存] と [キャプチャ] のストック アニメーションは一貫している必要があります。
  • アプリでは、タップによるキャプチャとカメラ ハードウェア ボタンをサポートしている必要があります。
  • 半押しによるフォーカスをサポートします。
  • 必要な箇所で、フラッシュのアイコン画像と状態を利用できる必要があります。
  • 必要な箇所で、基本カメラと同様に、フォーカスを示すかっこが機能する必要があります。

ユーザーがレンズ アプリ内から写真を撮ることができる場合、写真はユーザーのカメラ ロールに即座に保存されます。キャプチャ時、アプリで複数の写真が撮られる場合、追加の写真 (バッキング データ) はアプリのローカル フォルダーに保存され、これらの画像の表示がカメラ ロールに保存されます。

キャプチャの方法

レンズは多くのカメラ アプリで使われるため、利用可能な各種キャプチャ方法と、それぞれの方法に適用される一意の設計ガイダンスを区別することが重要です。

従来のキャプチャ

この種のレンズ アプリでは、写真はカメラ ロールに直接保存され、ユーザーはその後すぐにビューファインダーに戻されます。

従来のキャプチャ アプリ

従来のキャプチャ アプリ

キャプチャと確認

この種のレンズ アプリでは、キャプチャした画像をカメラ ロールに保存する前に、ユーザーが解析して受け入れる必要があります。

キャプチャと確認を行うアプリ

キャプチャと確認を行うアプリ

キャプチャと確認を行うアプリでは、項目の保存を確認、取り消すアニメーションに加え、一貫したアイコン セット ([保存] と [削除]) を使う必要があります。[キャンセル] と [保存] では、いずれもユーザーをビューファインダーに戻す必要があります。これらのアイコンは、Windows Phone SDK に用意されています。

ビューファインダー機能からのリンク バック

多くのレンズ アプリでは、写真は単にユーザーのカメラ ロールに保存されるだけですが、Windows Phone のレンズでは従来よりもはるかに複雑な写真でコンテンツをキャプチャできます。リッチ メディア レンズでは、ユーザーがキャプチャした画像により深くさまざまな形でかかわれるように、ローカル フォルダーまたは Web からデータを組み込みます。

リッチ メディア レンズでは、アプリにリンク バックされる写真を保存できます。カメラ ロールに保存された写真は、カメラ ロールの他の写真と同様に共有、編集できます。組み込みのフォト ビューアーでリッチ メディア項目を表す写真を表示する場合、ユーザーはその項目に関連付けられているリッチ メディア エクスペリエンスにリンク バックできます。

リッチ メディア オープン リンク

リッチ メディア オープン リンク

オープン リンクからは、選んだ項目を表示または編集するようにカスタマイズされた機能を起動する必要があります。これは、アプリの一般的な起動ポイントと考えないでください。[コピーの保存] は、ユーザーが画像を変更した場合のみ有効になるようにします。リッチ メディア レンズを組み込みのフォト ビューアーと統合する方法について詳しくは、「Windows Phone 8 のリッチ メディア機能拡張」をご覧ください。

リッチ メディア アプリでは、カメラ ロールに保存した画像があるとは想定しないでください。ユーザーはカメラ ロールに保存した項目を削除できます。したがって、カメラ ロールに保存された対応する画像がない場合でも、リッチ メディア レンズでもう一度エクスペリエンスを作成できるようにしてください。

ユーザーは、カメラ ロールに保存された項目を共有または編集できるので、ブランド要素の使用は避けてください。不要で目障りな表示に対処することなく、ユーザーが画像を共有できるようにします。

キャプチャした写真と関連付けられたバッキング データは、アプリのローカル フォルダーに累積されます。リッチ メディア アプリでは、カメラ ロールから画像を削除することはできませんが、ローカル フォルダーからデータを消去することはできます。これらのアプリでは、アプリでキャプチャした任意の写真に移動する機能が用意されているため、ユーザーは、その写真と関連付けられているバッキング データを削除できます。リッチ メディア レンズでアプリから項目の新しいコピーが作られる場合、このアクションは [保存] ではなく [コピーの保存] で行われる必要があります。

次に、リッチ メディア エクスペリエンス内の移動に関するヒントをいくつか示します。

  • 表示または編集エクスペリエンスを開始する場合は、[戻る] でカメラ ロールに戻る必要があります。
  • 編集エクスペリエンスを開始する際、[コピーの保存] では、確認した変更を表示するためにユーザーをアプリ内に留める必要があります。[削除] では、画像に関連付けられているバッキング データを削除します。

アプリでリッチ メディア エクスペリエンスが提供されていない場合は、アプリの WMAppManifest.xml ファイルでリッチ メディア拡張機能を宣言しないでください。

  リッチ メディア項目が保存されないアプリには、[削除] オプションを提供しないでください。代わりに、現在のセッションでキャプチャされた項目を表示します。

デザインに関するその他の考慮事項

レンズは強力なアプリですが、その機能は限定的です。ユーザーのカメラ ロールから写真を削除したり、ユーザーがインストールしたその他のレンズを列挙したり、レンズ アプリで組み込みの編集エクスペリエンスを開始したりすることはできません。これらの制限は、アプリのユーザーの個人情報とデータを保護することを目的としています。レンズでは、電話に組み込まれているフォト ビューアーのすべての機能を模倣しないでください。

レンズ ピッカー用のアイコンの準備

レンズ ピッカーには、アプリ自体を示すアイコンとは異なる解像度のアイコンが必要です。アプリでは、Assets フォルダーに、電話で使用可能な解像度ごとに 3 つのアイコンを用意する必要があります。各アイコンの名前と解像度に関する説明を次の表に示します。

解像度ごとにアイコンを作る方法について詳しくは、Windows Phone 8 のアイコン テンプレートをダウンロードしてください。

電話の解像度アイコン サイズ (ピクセル)フォルダーファイル名
WVGA173 x 173AssetsLens.Screen-WVGA.png
HD720p259 x 259AssetsLens.Screen-720p.png
WXGA277 x 277AssetsLens.Screen-WXGA.png

 

電話の解像度について詳しくは、「Windows Phone 8 の複数解像度アプリ」をご覧ください。

推奨事項のまとめ

すべてのレンズは、ビューファインダーを使用する機能に組み込まれ、写真をカメラ ロールに保存します。その他の留意点を以下にまとめます。

起動エクスペリエンス:

  • レンズのスプラッシュ画面は横向きに表示されます。
  • レンズ アイコンでは、WVGA、HD720p、WXGA の解像度がサポートされます。

キャプチャ エクスペリエンス:

  • カメラの既定のユーザー エクスペリエンスと一貫性があるようにします。

    • ジェスチャ サポート: プレビューするための左方向へのスワイプ。
    • 横方向と縦方向をサポートします。
    • ボタンの動作:

      • 半押し。
      • ハードウェアのキャプチャ。
      • タッチによるキャプチャ (フォーカスあり)。
    • 必要な場所におけるフラッシュのアイコンとオン、オフ、自動の状態、前面カメラ。
    • フォーカスのかっこ。
  • カメラ ロールにはキャプチャごとに 1 つの写真が保存されます。
  • キャプチャで複数の JPG 画像が作成される場合、アプリのローカル フォルダーに追加のバッキング データが保存されるようにします。

キャプチャと確認を行うアプリ:

  • [保存]、[コピーの保存]、[削除] には一貫したアイコンのセットを使います。
  • [削除] と [保存] ではいずれもビューファインダーに戻る必要があります。

リッチ メディア レンズ:

  • アプリで写真を編集したり、後で表示したりするために追加のデータが保存される場合、リッチ メディア機能の実装を検討する必要があります。
  • オープン リンクでは、選んだ項目を表示または操作するようにカスタマイズされた機能にユーザーを移動します。
  • (ユーザーが画像を削除した場合があるため) カメラ ロールを開く前にカメラ ロール内に画像があるかどうかを確認し、画像がない場合は適切に処理します。
  • リッチ メディア エクスペリエンスを提供するアプリでは、ユーザーがカメラ ロールの項目からリンクしたデータがアプリで削除されている場合にも対応できる必要があります。
  • リッチ メディア レンズ アプリでは、アプリでキャプチャされたコンテンツを、カメラ ロールではなくローカル フォルダーのバッキング データに基づいて列挙する必要があります。
  • リッチ メディア レンズ アプリでは、ユーザーがデバイスからバッキング データを削除できる必要があります。
  • 編集エクスペリエンスを開始する場合、保存機能は [コピーの保存] と呼ばれます。アプリのユーザーには、確認した変更が表示されるようにします。
  • オープン リンクからの移動:

    • 表示または編集エクスペリエンスを開始する場合、[戻る] を押すと、カメラ ロールに戻る必要があります。

アプリでリッチ メディア エクスペリエンスが提供されない場合:

  • リッチ メディアが保存されないアプリには、[削除] オプションを提供しないでください。代わりに、現在のセッションでキャプチャされた項目を表示します。
  • アプリでリッチ メディアを使わない場合は、アプリの WMAppManifest.xml ファイルではリッチ メディア拡張機能を宣言しないでください。

関連トピック

Windows Phone 8 のレンズ

Windows Phone 8 のレンズ機能拡張

Windows Phone 8 のリッチ メディア機能拡張

 

 

表示:
© 2014 Microsoft