最新のアプリ

  • [アーティクル]

ライブ タイルを使ってさらに優れた UX を生み出す

Rachel Appel

Rachel Appelライブ タイルは、アプリを紹介する効果的な方法の 1 つです。アプリの開発者は、ユーザーにアプリ自体の起動を求めなくても、開発したアプリについての情報を表示できます。Windows プラットフォームでの UX を特徴づけるライブ タイルに、魅力的で人を引き付け、クリックしたいと思わせる関連コンテンツを表示します。

開発者にとってライブ タイルは優れた第一印象を生み出すチャンスです。ユーザーは、コードや技術の細部は気にしません。気になるのは、アプリを使う際のエクスペリエンスだけです。使いやすいか、わかりやすいかなどが内部のしくみよりも重要です。

ライブ タイルはアプリに誘導する入り口となり、この入り口の第一印象でユーザーはアプリの有用性を判断します。アプリの利用者の多くは、ライブ タイルに目を留め、使ってみてから、アプリの他の部分も使うようになります。アプリを起動するか、ライブ タイルに表示されるデータをちらっと見るだけかは重要ではありません。ライブ タイルは、きわめて重要な第一印象を作り上げるものです。

つまり、タイルやスプラッシュ スクリーンは、魅力的かつ人目を引くものにすることがに大切です。もちろん、アプリの他の部分を無視してもよいと言っているわけではありません。しかし、見栄えのするタイルがなければ、アプリの他の部分にたどり着くこともありません。ご想像どおり、このライブ タイルに最新情報が表示されるよう定期的に更新するには、プッシュ通知を使います。アプリ関連の情報を表示するバッジを追加して、この通知機能をロック画面に拡張することもできます。

図 1 は、Windows タブレットとデスクトップで使用できるライブ タイルとして、「大」、「ワイド」、「普通」、「小」という 4 つの形式のスタイルを示しています。図 1 の画像のうちタイルに情報を表示していないものは、シンプルなデザインで天気予報を利用していることを示しています。情報を表示しているものは、わかりやすいグラフィックスに最も重要な情報だけを添えてタイルにしています。この例では、現在の天気と暴風雨警報を表示しています。

つのサイズ (大、ワイド、普通、小) のライブ タイル
図 1 4 つのサイズ (大、ワイド、普通、小) のライブ タイル

UX が優れていれば、ストアでの評価やユーザーの満足度が上がります。アプリを差別化する最善の方法は、ライブ タイルをブランド化することです。図 1 は、タイルを使って実現できる優れたエクスペリエンスの例を示しています。ユーザーはアプリを起動しなくても、現在の天気がわかります。サイズ「大」のプライマリ タイルでは、天気を表示する都市を最大 3 つ設定でき、それ以外のサイズでは 1 つの都市のみ天気が表示されます。重要なデータが、わずか 310 x 310 ピクセルという、実に小さなフィールドに詰め込まれています。

ライブ タイルのグラフィックスのしくみ

ここまではライブ タイルが重要な理由を説明してきましたが、ここからはライブ タイルのグラフィックスのしくみを理解します。さいわい、マイクロソフトは、タブレットや携帯電話など、タッチ ファーストの小型デバイスで適切に機能する一連のデザイン原則を定めて、開発者が従いやすく、使いやすい UX パラダイムを確立しています。開発者は、デザイナーを雇わなくても見た目のよいアプリを公開できます。デザイナーがまったく必要ないとは言いません。特にゲームなど、アプリによっては複雑なグラフィックスが必要になるものもあり、このような場合はデザイナーの参加が必要です。

今回は、デザインを専門としない開発者が簡単に作成できるライブ タイルのデザインを紹介します。マイクロソフトが定めたデザイン原則の一環として、ライブ タイルは、ユーザーがアプリを実際に操作しなくてもアプリのデータを使用できるようにします。デバイスのホーム画面にさっと目を通して、複数の情報源から瞬時に関連情報を得られるので、ユーザーにとっては非常に便利です。

最新アプリのグラフィックスには、ユーザー生成のグラフィックスとアプリ グラフィックスの 2 種類があります。家族休暇の写真やプロが撮影した写真などが、ユーザー生成のグラフィックスと考えられます。ライブ タイル内やアプリ バーの画像はアプリのグラフィックスです。タイルを作成するときは、どちらのグラフィックスを使って情報発信してもかまいません。Visual Studio には、マイクロソフトのモダン デザインに則したテンプレートが付属しています。開発者はこれを使って、プロの表現を達成できます。つまり、必要なものはすべて、package.appxmanifest ファイルに用意されています。開発者は、適切なサイズのグラフィックスそのもの用意するだけです。

タイルをライブにする前に、正しくブランド化することが大切です。図 2 のタイルは、吹きだしと "QotD" (「今日の名言」) という文字で構成されるシンプルなデザインです。明確なデザインと明るい赤が目を引き、簡単に見つかり、アプリの内容がすぐにわかります。今のところ、標準の静的なタイルです。更新情報を送信し始めると、この状態は変化します。

「今日の名言」アプリのライブ タイル

Windows ストア アプリや Windows Phone ストア アプリでグラフィックスを使用する場合は、次に示すアセット用に複数の画像が必要です。

  • ライブ タイル: ユーザーがタップまたはクリックしてアプリを起動するための、サイズ「大」または「小」の正方形または長方形。通常、画像やテキストを含めます。
  • バッジ: アプリの状態を示す、ライブ タイル上の小さなアイコンまたはグリフ。図 1 では、「大」、「小」どちらのタイルにもバッジがあります。
  • スプラッシュ スクリーン: アプリが読み込まれる直前に表示される導入画面。多くの場合、ロゴやグラフィックスを含めます。
  • アプリ内タイル: アプリのデータを表示するタイルで、GridView または ListView に含めます。Windows スタート ページにあるライブ タイルのような使い心地です。

これらのアセットの画像には、.png 形式と .jpg 形式が最適です。Windows ストア アプリと Windows Phone ストア アプリのそれぞれに、サイズが異なる多数の画像アセットを含めることができます。画像とタイルの対応付けを構成するには、プロジェクトのパッケージ マニフェストを編集します。パッケージ マニフェストとは、名前、バージョン番号、グラフィックス アセット、機能の宣言など、アプリ固有のすべての設定を指定するファイルです。図 3 は、Windows ストア アプリの package.appxmanifest でロゴを定義するようすを示しています。

アプリの Package.appxmanifest ファイルにおけるタイル グラフィックスの構成
図 3 アプリの Package.appxmanifest ファイルにおけるタイル グラフィックスの構成

以下のアセットの種類ごとに、少なくとも 1 つのグラフィックスを指定します。指定しないものには既定のアイコンが表示されます。

  • [70x70 の正方形のロゴ]: 70 x 70 ピクセルの画像
  • [150x150 の正方形のロゴ]: 150 x 150 ピクセルの画像
  • [350x150 のワイド ロゴ]: 350 x 150 ピクセルの画像
  • [310x310 の正方形のロゴ]: 310 x 310 ピクセルの画像
  • [30x30 の正方形のロゴ]: 30 x 30 ピクセルの画像

このように分類されたタイルのサイズに合ったグラフィックスを指定します。図 3 の項目の [スケーリングされた画像] は、80%、100%、140%、および 180% です。図 3 の一番下に、スケーリングされた画像の正確なサイズが一覧されています。ここに表示されているサイズは、Windows ストア アプリのみに該当することに注意してください。Windows Phone ストア アプリのプロジェクトでは、より小型のデバイスで動作するように、少し違ったアセットと倍率の組み合わせになっています。Windows ストア アプリと Windows Phone ストア アプリのどちらも、次の構成でロゴとスプラッシュ スクリーンを用意します。

  • [ストア ロゴ]: ストアに表示するロゴ
  • [バッジ ロゴ]: ロック画面上や既存のタイルの内部に表示する小さなアイコン
  • [スプラッシュ スクリーン]: 通常はロゴや紹介のテキストを含み、アプリ起動時に表示する全画面ページ

デスクトップをはじめモバイルやタブレットなど、さまざまな画面構成において正しいサイズに合わせる必要があるため、多数のバージョンの画像があります。150x150 ピクセルの画像を用意すれば、ピクセルがつぶれたり、画像がぼやけるほど極端に引き伸ばす必要はありません。

写真やグラフィックスの編集プログラムを使って、タイルのグラフィックスを作成できます。このようなツールを利用すれば、シンプルでも目を引く 図 2 のようなロゴを作成するのは難しいことではありません。アプリで使用できるグラフィックスの在庫もたくさんあります。

テンプレートによるタイルのコーディング

タイルは、さまざまなタイミングで画像やテキスト入れ替えて表示する機能がなければ、普通のアイコンとほぼ変わりません。定期的に更新するからこそ、ライブ タイルです。タイルの更新は、コードを利用するか、またはプッシュ通知とタイルを連携させて行います。プッシュ通知を使用する場合、プロセスのライフサイクルに合ったバックグラウンド タスクを使ってタイルを更新します。この方法では、アプリ自体は実行しないで、5 つの異なるアイテムを周期的に巡るように所定の間隔でコードを実行します。プロセス ライフサイクル管理についての参考情報については、「Windows ストア アプリのライフサイクル」をご覧ください。

図 4 のコードは、プッシュ通知を使わずに、シンプルなタイル更新を実行して、図 5 のタイルを作成しています。このコードでは、まず、TileUpdateManager クラスの静的メソッド CreateTileUpdaterForApplication を呼び出して、TileUpdater オブジェクトを取得します。次に、TileManager クラスの GetTemplateContent メソッドに TileTemplateType 列挙オプションの 1 つを渡して、定義済みのタイル テンプレートを取得します。

図 4 プッシュ通知を使わないシンプルなタイル更新

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

使用できるさまざまなタイル サイズ
図 5 使用できるさまざまなタイル サイズ

タイルの外観を表現するのは HTML テンプレートなので、innerText 属性にアクセスするか、SetAttribute を呼び出すことで、コードからタイルを操作できます。さいわい、XAML の開発者は、タイルを作るためだけに HTML について多くを学ぶ必要はありません。XAML は HTML に似ています。ただし、TileSquare150x150Text04 テンプレートを定義する次のような HTML 要素については理解しておくようにします。

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

開発者は、以前の寸法の古いタイルを基にしてライブ タイルを即席で仕上げることはできません。また、テンプレート HTML を自身で作成することもありません。代わりに、タイルの基本形状、アイコン、メッセージを編集できる複数のテンプレートから選ぶことができます。Windows 8.1 と Windows Phone 8.1 の両方で使えるコード サンプル付きのテンプレートの一覧については、bit.ly/1oqwQd6 を参照してください。

一覧からいずれかのテンプレートを選び、コード内で使用します。図 4 では、GetTemplateContent を呼び出して、この定義済みのテンプレートを取得しています。利用可能な多数のテンプレートからどれでも選択できます。

テンプレートを取得すると、コード サンプルでは、簡単なコードを実行して、シンプルなタイル更新を 1 回行っています。さらに魅力的なタイルにするのであれば、最新情報で定期的に更新します。定期更新を行うには、アプリにバックグラウンド タスクやプッシュ通知を追加します。今回は UX 関連の話題を中心に扱っているため、バックグラウンド タスクからタイルを更新する方法については、bit.ly/1vH6J2p のビデオをご覧ください。

最高の UX にするためのセカンダリ タイルの使用

ユーザーは、スタート画面に一部のデータをピン留めすることがあります。たとえば、航空機の搭乗券、電子ブック、特定の株式銘柄記号などは、ユーザーが画面にピン留めすることが多い情報です。Windows 8.1 や Windows Phone 8.1 でこれを実現するには、セカンダリ タイルを使います。セカンダリ タイルを使用すれば、ユーザーは自分が使うアプリを簡単にカスタマイズでき、ストアでの評価の向上につながります。

アプリの世界には、ディープ リンクという考え方があります。これは、ユーザーがアプリ内を数回移動した後、その場所に直接移動するためにその場所へのリンクをピン留めすることを意味します。セカンダリ タイルには、以下に示すようにさまざまな用途があります。

  • 指定した都市の天気
  • 具体的な旅行の日程
  • 保存したゲーム
  • これから見る映画、途中から見たい映画
  • 友人の連絡先情報
  • お気に入りの写真
  • カスタム アラーム

プライマリ ライブ タイルが既にあるので、このタイルはセカンダリであることを忘れないでください。明確なルールはありませんが、アプリ全体の更新はプライマリ タイルで行います。セカンダリ タイルに表示する具体的な種類のデータは、多くの場合、メイン タイルに表示しても意味がありません。通常、ユーザーはアプリを起動後、スタート ページに移動します。セカンダリ タイルでは、ユーザーがアプリを起動すると、アプリの特定部分に直接移動します。これが「ディープ リンク」です。基本的には、アプリのスタート画面を起動する場合はプライマリ タイルを、データの特定の詳細を表示する場合はセカンダリ タイルを使用します。

次のコードは、セカンダリ タイルを作成して表示します。

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

SecondaryTile コンストラクターを呼び出し、名前、引数、サイズ、使用する画像など、タイルに設定するすべての情報を渡します。開発者に必要なのは適切な情報を呼び出しに渡すことだけだけです。コンストラクターをオーバーロードすれば、さまざまな選択肢が生まれます。

セカンダリ タイルは標準のタイルとほぼ同じですが、アプリのコンテンツや特定の部分へのディープ リンクが可能です。ユーザーが使いやすいように両方のタイルを組み合わせると、ストアでの評価が高まります。したがって、Windows スタート ページから表示すると便利な詳細データがアプリにある場合は、セカンダリ タイルの使用を検討します。

結論

ユーザーが何もしなくてもアプリと対話でき、有益な情報を受け取ることができれば成功です。それがアプリ ストアでの評価につながります。グラフィックス デザインに詳しくなくても、見栄えのよい役立つアプリを作成できます。

倍率が異なるできるだけ多くのサイズのグラフィックスを作成します。そうすれば、Windows がデバイスに応じて最適なグラフィックスを選択します。UX が向上すれば、アプリ ストアでの評価が高まります。そして、直接、ダウンロード数の増加につながります。

Rachel Appel は 20 年を超える IT 業界での経験を持つマイクロソフトの元社員で、コンサルティング、執筆活動、および指導を行っています。彼女は Visual Studio Live!、DevConnections、MIX など、業界トップ クラスのカンファレンスで講演しています。専門分野は、マイクロソフトの各種開発ツールやオープン Web を重視したテクノロジとビジネスを連携させるソリューションの開発です。Appel についてもっとよく知るには、彼女の Web サイト rachelappel.com (英語) を参照してください。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Frank La Vigne に心より感謝いたします。