ニュース アプリ

ここでは、Windows 8.1 用の優れたニュース アプリを作る方法について説明します。

概要

Windows 8.1 には、タッチ中心のタブレットから高解像度のノート PC やデスクトップ PC まで、これまでにない範囲の多様なデバイスが用意されています。このようにさまざまなフォーム ファクターは、ニュースの発行元がさまざまな使用事例やシナリオで優れたエクスペリエンスを実現し、1 つのアプリで多くの読者の心を動かすためのまたとないチャンスを表します。

また、新しい Windows ストアでは、アプリがコンテンツを配布または宣伝したり、コンテンツで収益を得たりする新たな機会を提供すると同時に、サブスクリプションに独自の商業価値を利用する場合に柔軟性を提供します。  

ここでは、ニュース アプリにとって特に重要な Windows 8.1 の新機能に注目します。  

• クロムよりコンテンツを優先— Windows 8.1 では、オペレーティング システムは存在感がなくなるため、コンテンツが影響力を持ちます。読者は、以前よりも集中し、気が散ることが少なくなります。
• ブランドを輝かせる— Windows 8.1 では、ライブ タイル、スプラッシュ画面、ロゴなどを使って、ブランドの名声や評価をアプリに取り入れることができます。
• 共有コントラクトとデバイス コントラクト— 新しいトップレベルのオペレーティング システムの機能により、コンテンツは共有可能になり、アプリが近くのデバイスを使用できるようになります。
• 通知— より積極的に繰り返し使われるように、ライブ タイルとトースト通知を使ってユーザーに新しいコンテンツを通知します。

ニュース アプリのレイアウトとナビゲーション

ニュース アプリでは、通常、さまざまなカテゴリのニュースが表示されます。Windows ストア アプリに階層型のナビゲーション パターン を使うと、ユーザーが関心のあるコンテンツを最初に取り上げながら、アプリを軽快かつ柔軟に使用できるようにすることができます。

アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。

フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。

階層モデル

ニュース アプリには、多くの場合、ユーザーが探して使う多くのコンテンツがあります。また、情報密度を管理するため に、ニュース アプリやニュース Web サイトには、さまざまなカテゴリが多数用意されている傾向があります。たとえば、一般的に、トップレベル のページでは、"ニュース速報" や "トップ記事" というセクションが目立つ形で特集されます。また、その他にも、政治、国際ニュース、 テクノロジ、スポーツ、金融、エンターテインメントなどのさまざまなカテゴリがあり、いくつかの記事がアプリの トップレベルで取り上げられて表示される場合があります。レイアウトや操作に Windows 8.1 の階層モデルを使うと、アプリは、 ユーザーが興味のあるコンテンツをタブやメニューの背後に隠すのではなく、トップレベルに表示することが できます。そのトップレベルのランディング ページ ("ハブ") では、多様なビジュアルを提供し、ユーザーの関心を集め、アプリの さまざまな部分に引き込みます。

アプリのレイアウトについて考えるときは、シナリオやカテゴリに、その相対的な重要性や、最大多数のユーザーにどこまで幅広くアピールするかに 基づいて優先順位を付けます。たとえば、トップ ニュース記事や ニュース速報というカテゴリは、一般的に、ニュース アプリのほとんどのユーザーにとって重要なため、アプリのハブ ページで 目立つ形で特集する必要があります。

次の図は、サンプル ニュース アプリの階層モデルを示しています。

アプリのハブ ページ

アプリのハブでは、すべてのカテゴリのトップ記事、ニュース速報、ユーザーにお勧めのコンテンツ、 特集記事を、簡単にパンできる 1 つのサーフェイスに表示できます。各カテ ゴリ グループは、魅力的なコンテンツをハブに表示できます。ユーザーは、グループのヘッダーをタップ すると、特定のセクションに移動して、より多くのコンテンツを表示できます。

ニュースのカテゴリ

アプリのカテゴリすべてをアプリのハブ ページにフラットにレイアウトし、各カテゴリの記事を いくつか掲載して、ユーザーをそのカテゴリに引き込みます。次に示すように、グループ ヘッダー の横に数を表示することにより、カテゴリに複数の記事があることを示すことができます。

ニュース速報

ニュース速報は、ニュース アプリにとって重要なシナリオです。それは、ユーザーは最新かつ 最重要なニュース記事に関心があるのが一般的だからです。ハブ ページの先頭でニュース速報や作成中の記事を強調する には、ハブでこれらを他のコンテンツより大きくしたり、ニュースの優先順位に基づいて太さや色のバリエーションを使ったりします。

次の例では、コンテンツの配置やサイズを使うだけでなく、見出しの前に赤で "Live" と表示してユーザーの目をそのコンテンツに向け ることにより、現在起こっている出来事を区別します。

ブックマーク/後のために保存

ユーザーは、記事を保存やブックマークして、後でその記事の続きを読みます。アプリで この操作が軽快かつ柔軟にサポートされている場合、ユーザーはアプリを起動し続けます。保存した 記事に戻ることはユーザーにとって違和感がありません。 ハブ ページに "ブック マーク" や "お気に入り" のようなセクションを追加し、ユーザーが保存したすべての記事を格納します。次に例を示します。

ユーザーは、"ブックマーク" や "お気に入り" セクションに記事を追加し、読み終えたら削除することができます。

セマンティック ズーム

セマンティック ズームを使うと、ユーザーは 1 つのビュー内ですばやく移動できます。たとえば、すばやくピンチ とパンを行って、ハブのトップ ニュース記事からハブ ページの最新ニュース カテゴリに移動できます。 次の例では、ユーザーがセマンティック ズームを使ってさまざまなニュース カテゴリ間をすばやく移動する方法を示します。

ニュース アプリで動作するセマンティック ズームの例をもう少し紹介します。

セマンティック ズームを使うと、ユーザーはグループを選んで移動することで、ハブ ページ上のカテゴリを並べ替えることができます。 これにより、ユーザーはアプリのハブ ページのパーソナル設定を行うことができるようになり、アプリを自分の好みに近づけることができます。たとえば、ユー ザーがアプリの "テクノロジ" カテゴリを気に入っていて、そのカテゴリを "政治" カテゴリの前に配置したいとします。 ユーザーがこの操作を行うことができるようにして、アプリの外観をユーザーの好みに合わせます。

セマンティック ズームは、特定のカテゴリのさまざまな記事の間を移動するために、そのカテゴリ ページで使う こともできます。セマンティック ズームを使うと、ユーザーは記事と記事の間をすばやく移動できます。

アプリの記事ビュー

アプリの記事ビューとは、コンテンツが表示される場所です。ユーザーがこのビューでのエクスペリエンスを楽しめるようにすると、アプリが引き立ちます。これは、ユーザーがアプリで大半の時間を費やす場所だからです。重要なのは、コンテンツを直感的に表示し、このビューを見た目にも美しく表現することです。 また、このビュー内での移動を効率的にすることも重要です。

ニュース アプリの記事ビューは、ユーザーが親指を使って簡単かつ人間工学的にコンテンツ内を移動できるように、横方向にパンする必要があります。 さらに、記事を複数のページに分けることを考えてみます。記事の中でページ区切りを使うと、ユーザーはどこまで読んだかを記憶し、移動したい場所に簡単に進むことができ ます。

ただし、本当にすばらしいレイアウトとユーザー エクスペリエンスを実現するには、ニュース記事を作るときに、ユーザーが次のシナリオでその記事を表示することを考慮してください。

• タブレット PC
• ノート PC
• デスクトップ PC

これらの各シナリオでは、ユーザーの使用パターンを考慮したさまざまなレイアウトが活かされます。たとえば、ユーザーは、タブレットでニュースを読むときは横向きと縦向きのビュー両方を使うのに対し、ノート PC とデスクトップ PC では、横向きのビューで記事を読む可能性が最も高くなります。そのため、両方の向きを考慮して記事ビューを設計します。さらに、タブレット向けのレイアウトは、タッチ ナビゲーション用に最適化する必要もあります。前に示したとおり、コンテンツを複数のページに分けるのは良いことです。タッチ中心でページを追加するには、記事の中でスナップ位置を使って "スピード バンプ" を作ります。これにより、ユーザーは、記事のパンをすばやく行うときに自分が記事のどこを表示しているかがわかります。

ノート PC とデスクトップ PC のユーザーにとっては横方向レイアウトが一般的なため、退屈な列がなくなるように記事のレイアウトを検討しててください。あるレイアウトの手法では、複数の列にまたがるコンテンツのインセット、画像、またはその他のメディア要素を使います。レイアウトに変化を付けるために、ページ全体にまたがる引用を追加したりタイトルを使ったりできます。また、ノート PC とデスクトップ PC のシナリオでは、ほとんどの場合、ユーザーは移動にキーボードとマウスを使います。そのため、キーボードとマウス両方による入力に対応したレイアウトにすることが重要です。

関連記事とコメントを記事ビューに表示すると、ユーザーに引き続き読んでもらい、アプリを長く使ってもらうこと ができます。外観は次のようになります。

記事の間の移動

ユーザーが特定のトピックやニュース カテゴリに興味を持つことはよくあるため、それに関連した複数の記事を読む場合があります。 アプリのコンテンツが傾向として短い場合は、ユーザーが記事の最後で右にパンすると次の記事に移動し、 記事の先頭で左にパンにすると前の記事に移動するようにします。 また、ユーザーがすばやく別の記事に切り替えることができるように、このビューにセマンティック ズームを 用意することもできます。

各投稿や記事のコンテンツが長くなる傾向にある場合は、ユーザーが簡単に他の記事に切り替えることができるように、上部 のアプリ バーに [Previous Article] (前の記事へ) ボタンと [Next Article] (次の記事へ) ボタンを配置することを検討してください。ユーザーが記事を前後にスワイプできるようにする以外に、これらのボタンも用意できます。このようなボタンにさまざ まな視覚スタイルを試すことができます。たとえば、前の記事や次の記事のサムネイルを表示すると、ユーザーは、切り 替え後のコンテンツのプレビューを見ることができます。または、標準的な "前へ" と "次へ" のグリフを使っても、コンテンツに集中できるように上部のアプリ バーを半透明や透明にすることもできます。 上部のアプリ バーにあるこのようなボタンの例を次に示します。

コマンド実行

"ブックマークへの追加"、"新しいフィードの追加"、"タイルをスタート画面にピン留めする" など、一般的なタスクのコマンドはすべて、下部のアプリ バーにあります。このアプリ バーは、これらのコマンドを 1 か所にまとめ、ユーザーがコマンドを確実に見つけられるようになっています。

コマンド実行について詳しくは、 「Windows ストア アプリのコマンド実行の設計」をご覧ください。

ブックマーク

一般的に、ユーザーは、記事を後で読むために保存するときや読んでいる記事が次回まで終わらないときに、ハブ ページから記事を ブックマークします。魅力的なニュース アプリでは、どちらの状況もサポートされているため、ユーザーは、ハブ ページやカテゴリ ページからでも、記事を読んでいる間でも下部のアプリ バーを使って、選んだ記事をブックマークできます。 ブックマーク ボタンはトグル (ブックマークを追加または削除する 1 つのボタン) です。

ユーザーが使うデバイスに関係なくブックマークされた記事を引き続き読むことができるように、常に、ブックマークをローミングします。 次の例に示すように、ボタンの機能がハブ ページのコンテキストに依存していても記事ビューでグローバルであれば、一貫性を保つため、ボタンはアプリ バーの左側に表示されたままになります。

アプリのナビゲーション階層について詳しくは、「Windows ストア アプリのナビゲーション デザイン」をご覧ください。

テキスト選択

アプリでコンテンツ (特に記事ビュー内のテキスト) を選ぶことができるようにします。これは、ユーザーが記事からの引用を選ぶ傾向にあるためです。 システムでは、選んだコンテンツをコピーするためのショートカット メニューが自動的に表示されます。

コントラクト

ニュース アプリでは、Windows 8.1 のコントラクトを使う必要があります。このコントラクトは、ユーザーのエクスペリエンスを向上させ、アプリと Windows の他のエクスペリエンスを関連付けるのに適しています。コントラクトについて詳しくは、「アプリ コントラクトと拡張機能」をご覧ください。

共有コントラクト

共有コントラクトによって、ユーザーは、2 つのアプリ間で自然にコンテンツを共有できます。アプリ間でのコンテンツの共有には多数のシナリオがあり、ニュース アプリの明確な差別化につながります。Windows 8.1 の共有を使うと、これらのシナリオをすべて実現できます。その際、追加の統合をアプリにコーディングする必要はありません。ユーザーがアプリからのコンテンツを共有できるようにする場合、アプリを共有ソースにします。アプリが他のアプリからのデータを使うことができるようにする場合、アプリを共有ターゲットにします。

ニュース アプリからの共有

ニュース カテゴリの大半のアプリは、ニュース コンテンツの利用に関するものです。記事や興味を引く話題の共有は今日のニュース アプリの重要な機能であるため、これらのアプリはすべて、共有コントラクトのソースとなる必要があると考えられます。

アプリを共有ソースにすると、そのニュース アプリのコンテンツ (形式は URI、ビットマップ、HTML、テキスト、記憶域の項目、カスタム データ型など) を、これらの形式に対応した他のアプリで利用可能になります。この機能により、魅力的なシナリオを実現できます。そのようなコントラクトを使ったソーシャルな共有の場面は、簡単に想像することができます。アプリはソーシャル ネットワーク、ブログ作成アプリ、電子メール アプリですぐに共有を実行できるように作成できます。

コントラクトを使うと、ソーシャルな共有に加え、メモ帳アプリ、ニュース アグリゲーター、その他の共有ターゲットを使ってニュース記事を共有することで、ユーザーは調査、計画、アーカイブ タスクを完了できるようになります。たとえば、後で参照できるように、記事へのリンクと共にあるニュース記事からの抜粋の一部を保存しておきたい場合、その情報を表す適切なデータ型が共有ソースによって提供されていればこれを保存できます。

共有ソース コントラクトをサポートすると、"タップして送信" で有効にした近距離近接通信で、アプリのコンテンツをデバイスと直接共有できます。

ソース アプリでは、ユーザーに共有してもらいたいコンテンツに必要な数だけ、データ型をサポートすることが重要です。そうすると、ユーザーは幅広い共有ターゲット アプリとアプリのコンテンツを共有できるようになります。以下の例では、Contoso News がソース アプリです。強調されているのは、共有するテキスト、サムネイル、記事へのリンクです。[共有] ウィンドウには、QuickLink と共有ターゲット アプリのリストがあり、これらのコンテンツの種類をサポートしています。

ニュース アプリとの共有

一部のニュース アプリには他のアプリからの記事の収集に優れているものがあります。このようなアプリでは、ユーザーの使い慣れた、単独のまとまった形式で大規模な一連のソースから情報の整理と利用ができます。これらのアプリは、共有ターゲット コントラクトのサポートに役立ちます。

共有ターゲットでは、共有ソース アプリによって提供されるデータをおもしろく、意味のある方法で利用できます。以下の例では、ニュース アプリの記事を後から読むために、ニュース アグリゲーターで共有できます。

共有コントラクトについて詳しくは、「コンテンツの共有と受信」をご覧ください。

コメントと他のソーシャル アプリとの統合

ニュース アプリでは、ユーザーがコメントを投稿できるようにして価値を提供したり、共有チャームと統合されるアプリを使って記事について議論したり記事にタグを付けたりすることができます。共有チャームと統合されるアプリに依存することで、アプリの共有エクスペリエンスを、ユーザーが実際に共有に使っているアプリに提供します。これは、すべての共有を 1 つの統合されたエクスペリエンスに集めることで、ユーザーに役立ちます。また、特定のソーシャル ネットワークのコーディングに時間をかける必要はありません。新しいソーシャル ネットワークを起動すると、アプリは自動的にそのソーシャル ネットワークと統合されます。

ニュース アプリの文字体裁

ニュース アプリで文字体裁のグリッドとサイズの見本を使うと、ユーザーが多くの 情報をすばやく簡単にスキャンして使用できる視覚的な階層が作られます。書体見本 (type ramp) で指定された Segoe UI を使うことは、ニュースのコンテンツには適していますが、Calibri (Windows ストア アプリで推奨されるドキュメントのフォント) や Cambria (推奨される "従来のドキュメント" のフォント) を使うことを検討してみてください。Georgia フォントは、Web 上のニュース サイトで人気があるため、ニュース アプリでも使い慣れたオプションである可能性もあります。

別のシステム フォントを指定する場合は、そのフォントが Windows 8.1 と共にインストールされていることを確認し、Microsoft Office などの個別のアプリをインストールする必要がないようにしてください。 独自のフォントやライセンスを取得したフォントを使う場合は、そのようなフォントをアプリに含めるための十分な法的権利があることを確認してください。 使うフォントに関係なく、Windows 8.1 の書体見本 (type ramp) では、使うサイズやスタイルの最大数に対して適切なガイダンスを提供しま す。

アプリ全体で少数のフォント サイズを使うと、書体見本 (type ramp) のガイダンスで推奨されているように、コンテンツに構造とリ ズムが生まれます。複数の要素で書体見本 (type ramp) の同じフォント サイズを使っていても、さ まざまな種類の情報を伝える場合、色、フォントの太さ、スタイルを使って情報階層を示すことを検討してください。 次の例では、フォントのサイズ、色、太さを使ってこのような階層を作る方法を示します。

フォントのベスト プラクティス (サイズ、色、太さなど) について詳しくは、「テキストおよび文字体裁のガイドラインとチェック リスト」をご覧ください。

コンテンツの鮮度

ニュースのシナリオでは、アプリのコンテンツを最新の状態に維持することが必要です。ユーザーに対して新鮮さを示す要素を見てみましょう。

コンテンツの最終更新時刻

ユーザーに対して "最終更新" に関する情報を表示することは、ニュース アプリの信頼性において信用 を築きます。キャンバスに最終更新に関する情報を示す際は、目立たないようにします。この情報は、書体見本 (type ramp) の三次情報スタイル (9 ポイント) で表示する必要があります。 次に例を示します。

記事の投稿時刻

記事の投稿時刻を表示することも、ユーザーに読んでいるコンテンツの鮮度について知らせるため のよくあるもう 1 つの方法です。このようなタイム スタンプでは、書体見本 (type ramp) の三次情報スタ イルを使い、同じ書体見本 (type ramp) を使うレイアウトで他のコンテンツから区別するには色や太さを使います。

コンテンツの更新

ニュース アプリでは、常に、最新のコンテンツを表示する必要があります。アプリのコンテンツを最新の状態にして おくには、状況を見てデータをダウンロードしてください。たとえば、ユーザーが記事を読んでいる間に、ハブ ページ の新しいコンテンツをダウンロードすると、ユーザーがそのページに戻ったときにページは最新の状態になります。 ただし、ユーザーがワイヤレス モバイル接続を使っているときにバックグラウンドでデータをダウンロードしないでください。アプリは、ローミング時やモバイル ブロードバンドの使用 時にバックグラウンドでのデータ利用を最小限に抑える必要があります。

さらに、コンテンツがオフラインで利用できないときにユーザーに通知することで、アプリはオフラインのシナリオを処理できるようにします。

ユーザーが現在表示しているページのコンテンツをアプリで更新する必要がある場合は、「プログレス コントロール のガイドラインとチェック リスト」で説明したように、更新中のキャンバス領域の上部に進行状況を示します。 また、「リスト アニメーションのガイドラインとチェック リスト」で説明したように、アニメーションを使って、キャンバスで新しい コンテンツの挿入や古いコンテンツの削除を行います。次の画像では、画像の上部に進 行状況バーがある例を示します。

ニュース アプリですぐに更新されなかったコンテンツにユーザーが切り替える場合は、古いコンテンツを暗く表示して、 多くのコンテンツが更新中であるを示す進行状況をキャンバス上に表示することを検討してください。

コンテンツが更新中の間でもアプリがすばやく応答することを確認します。 また、接続が脆弱な場合は、タイムアウト値を設定して、アプリのオフライン UI を表示するようにしてください。次の図では、更新中にハブ ページのコンテンツが暗く表示されていることを示します。

つながりとライブ

ライブ タイルと通知を使って、ユーザーがスタート画面を表示していても最新のコンテンツを表示できるようにします。これらの機能を使うことで、ユーザーとのつながりを作り、アプリを生き生きとさせることができます。

タイルと通知

最新のニュース記事やニュース速報をタイルに表示すると、ユーザーは再び魅了さ れ、アプリのタイルで興味を引く新しい記事を見つけたときにアプリに引き込まれます。ニュース ヘッドラインが表示されるアプリのタイルの例を次に示します。

ユーザーがさまざまなニュース カテゴリのタイルをスタートにピン留めできるようにすると、ユーザーは、これらのカテゴリに合った通知が表示され、興味のある特定の種類のニュースにすばやくアクセスできます。 これは、ユーザーをもう一度アプリに引き込むもう 1 つの手段です。

ユーザーがニュース速報のトースト通知 (アプリが動作していない場合でも表示されます) をオプトインできるようにすると、アプ リは、熱心なユーザーに対して最新のニュースについて最新の情報を絶えず提供し、アプリに引き込むことができます。 これは、ユーザーが設定チャームからアクセスするアプリの設定で有効にできるオプトインの 設定になります。一方的な通知は、ニュース速報のトーストを表示することに明らかに興味を示していないユーザーを困らせる可能性があります。 トースト通知の例を次に示します。

ローミング

ほとんどの人は複数の Windows PC を所有しているため、ニュース アプリでは、所有するすべての Windows PC 間で一貫したユーザー エクスペリエンスが提供され、 ユーザーは期待どおりの動作が得られます。アプリの設定、記事のブック マーク、お気に入りのニュース カテゴリ、読み取り設定、すべての PC 間でユーザーに役立つアプリのその他の データをローミングできます。アプリ データのローミングのベスト プラクティスについて詳しくは、「アプリケーション データのローミングのガイドライン」をご覧ください。

ウィンドウのサイズ変更

Windows 8.1 では、ウィンドウを最小の幅に至るまで自由にサイズ変更し、画面上に複数のアプリを並べて表示することで、ユーザーはマルチタスク動作を実現できます。 狭い幅で正しく動作するようにアプリを設計することは、アプリが画面に 表示されている時間を長くし、より長くユーザーの関心を集めておくのに効果的な方法です。これにより、ユーザーはアプリを使いながらマルチタスク動作を実現できるため、 他の作業を行っているときでも、アプリは画面に表示されたままになります。

ユーザーがアプリをサイズ変更する理由はさまざまです。ニュース記事の中に外部リンクがあるときに、ユーザーは、その記事を離れることなくブラウザーで新しいリンクを開きたいと考えることがあります。また、単に横にある別のアプリを大きくしたいだけの場合もあります。アプリをサイズ変更する理由が何であれ、ユーザーが読んでいた記事がサイズ変更によって消えたり、読んでいた位置がずれたりしないようにすることが重要です。

ユーザーがアプリのサイズを変更して幅よりも高さが大きくなる場合は、ページのフローを調整して縦方向にパンすることを検討してください。ウィンドウのサイズ変更について詳しくは、「ウィンドウ サイズと画面に合わせたスケーリングのガイドライン」をご覧ください。

スプラッシュ画面

既に説明したとおり、ニュース アプリは、Web から新しいコンテンツを頻繁にダウンロードする必要があります。アプリの処理速度と応答性を 高めるには、各カテゴリの画像すべてがダウンロードされるまで待機せずに、ランディング ページを表示してください。待機すると、ユーザーは我慢できなくなる場合があります。記事のタイトルがダウンロー ドされたらすぐにアプリのハブ ページがユーザーに表示され、その後、画像と他のデータが非同期的に読み込まれます。

ハブ ページが表示されるまで少し待つ間に、アプリがコンテンツをダウンロードしていることをユーザーに通知するメッセージと共にスプラッシュ画面を表示します。次に例を示します。

関連トピック

Windows ストア アプリのコマンド実行の設計

Windows ストア アプリの紹介

Windows ストア アプリのナビゲーション デザイン

タッチ操作の設計

Windows ストア アプリの UX ガイドライン