UX を向上するマイクロコンテンツを作成する方法 (1)

マイクロコンテンツとは、ユーザーの注意を引き、素早く情報を伝えることを目的とした、小規模で簡潔なコンテンツです。例えば、以下に示すように、オンラインヘルプで検索を行った際に、検索結果に該当するトピックのタイトルと簡単な説明を表示するのに使用されます。

マイクロコンテンツは、ユーザーエクスペリエンスを大幅に向上させるのに役立ちます。

このシリーズでは、HTML5 検索結果に表示するマイクロコンテンツを作成する方法を、2 つのパートに分けて紹介します。

パート 1: プロジェクトの作成とマイクロコンテンツファイルの作成 (本記事)
パート 2: マイクロコンテンツのシングルソース化 (今後公開予定)

パート 1 では、オンプレミスのコンテンツオーサリングツールである MadCap Flare Desktop を使って、HTML5 検索結果に表示するマイクロコンテンツを作成するため、Flare プロジェクトとマイクロコンテンツファイルを作成し、マイクロコンテンツの応答と代替フレーズを作成する方法をステップバイステップで説明します。

MadCap Flare は、XML ベースのシングルソースからレスポンシブ Web、ヘルプ、eラーニングコースなどのオンライン形式の出力と、マニュアルやカタログなどの印刷用の出力を生成できるオーサリングツールです。HTML や XML の知識がなくても、テンプレートを使用してプロのようなコンテンツを簡単に作成できます。

テンプレートからプロジェクトを作成
マイクロコンテンツファイルの作成
マイクロコンテンツの応答の作成
代替フレーズを作成する作成
まとめ
関連情報とツール

テンプレートからプロジェクトを作成

最初に、Flare Desktop に同梱の Austin テンプレートを使用して、新規プロジェクトを作成します。

[ファイル] > [新規プロジェクト] を選択します。[新規プロジェクト開始ウィザード] が開きます。
[プロジェクト名] フィールドに任意のプロジェクト名を入力します。
(オプション) [プロジェクトフォルダ] フィールドでプロジェクトを保存する場所を指定できます。デフォルトでは、C:\Users\<ユーザー名>\Documents\マイプロジェクトフォルダに保存されます。
[次へ] をクリックします。
[内蔵テンプレート] の Tutorials フォルダ内にある Austin テンプレートを選択します。

(クリックして拡大)
[次へ] をクリックします。
ブランディング画面はデフォルトの設定のままにします (ここでは、色やロゴなど、プロジェクトの外観をカスタマイズできます)。[次へ] をクリックします。
[完了] をクリックします。プロジェクトが作成され、Flare Desktop に読み込まれます。

マイクロコンテンツファイルの作成

チュートリアルで作成するすべてのフレーズと応答を保存するための新しいマイクロコンテンツファイルを追加します。このチュートリアルでは、1 つのマイクロコンテンツファイルのみ作成しますが、マイクロコンテンツを整理したり、管理しやすくするために、必要に応じて、任意の数のマイクロコンテンツファイルを作成できます。

まず、マイクロコンテンツファイルを保存する新しいサブフォルダを作成します。
1. インターフェイスの左側で [コンテンツエクスプローラ] を開きます。
2. Resources フォルダを選択します。
3. [コンテンツエクスプローラ] のツールバーにあるをクリックします。「NewFolder」という名前のフォルダが追加されます。
4. フォルダ名を「MicroContent」に変更し、ENTER キーを押します。
作成した MicroContent フォルダを右クリックして、コンテキストメニューから [新規] > [マイクロコンテンツ] を選択します。[ファイルを追加] ダイアログが開きます。
[ファイル名] フィールドに「My-Micro-Content」と入力します。

(クリックして拡大)
[追加] ボタンをクリックします。マイクロコンテンツファイルが [コンテンツエクスプローラ] に追加されます。右側に [マイクロコンテンツエディタ] が開き、左側にマイクロコンテンツのフレーズ、右側に応答用の領域が表示されます。すでに 1 つのフレーズと応答が追加されています。

(クリックして拡大)

マイクロコンテンツの応答の作成

マイクロコンテンツの応答の作成方法は複数あります。

[マイクロコンテンツエディタで応答を作成する方法]
トピックへリンクして応答を作成する方法
ブックマークへリンクして応答を作成する方法
トピックからリンクして応答を作成する方法

まずは、[マイクロコンテンツエディタ] に直接応答を入力する簡単な方法から見てみましょう。

[マイクロコンテンツエディタ] で応答を作成する方法

マイクロコンテンツの応答の作成方法は複数あります。まずは、[マイクロコンテンツエディタ] に直接応答を入力する簡単な方法から見てみましょう。

[マイクロコンテンツエディタ] の左側にある「マイクロコンテンツについて」というフレーズをクリックして、テキストを選択します。
「Music」と入力し、ENTER キーを押します。
以下のテキストをコピーし、マイクロコンテンツエディタの右側に貼り付けて、既存のコンテンツを置き換えます。

Known as “The Live Music Capital of the World,” Austin has an eclectic, vibrant music scene. There are more music venues per capita in Austin than in any other city in the United States.

(クリックして拡大)
をクリックして作業内容を保存します。
[プロジェクト] リボンを選択し、[プライマリのビルド] ドロップダウンから [“All-About-Austin-HTML5” のビルド] を選択します。

注:
検索結果用のマイクロコンテンツを含む出力を生成する際には、いくつか留意すべき点があります。まず、HTML5 ターゲットである必要があります。次に、検索エンジンは MadCap Search または Elasticsearch のいずれかである必要があります。Google Search は使用できません。そして最後に、[ターゲットエディタ] には、検索結果に含めるマイクロコンテンツファイルとフレーズ/応答を選択するオプションがあります。Austin プロジェクトテンプレートのデフォルト設定では、マイクロコンテンツが表示されるように設定済みであるため、このチュートリアルでは設定する必要はありません。
ターゲットのビルドが完了したら、インターフェイス下部の [ビルド] グリッドで該当する行をダブルクリックします。
出力で「music」を検索します (大文字と小文字は区別されません)。マイクロコンテンツが検索結果の上部に表示されます。

(クリックして拡大)

マイクロコンテンツは表示されますが、プロジェクトに「Music」というトピックがすでに存在するため、通常この方法は推奨しません。[マイクロコンテンツエディタ] でこのテキストを手動で入力すると、シングルソース化されません。トピックと [マイクロコンテンツエディタ] の両方で使用できるスニペットを作成するか、次に説明する他の方法のいずれか (応答を手動で入力するのではなく、リンクを使用する方法) を使用することで、状況を改善できます。

トピックへリンクして応答を作成する方法

マイクロコンテンツのフレーズ/応答を、トピックへのリンクに変更してみましょう。

[マイクロコンテンツエディタ] の左側で、フレーズ「Music」をダブルクリックします。行が展開され、[リンクの追加] と [マイクロコンテンツの説明] が表示されます。

(クリックして拡大)

[マイクロコンテンツの説明] は「代替フレーズ」と呼ばれます。ここでは、マイクロコンテンツを作成したときのデフォルトの状態が表示されています。このフレーズは削除しても構いませんが、音楽に関連する別のフレーズに置き換えてみましょう。
代替フレーズをクリックし、キーボードの F2 キーを押してテキストを選択します。次に「rock and roll」と入力し、ENTER キーを押します。

(クリックして拡大)

これにより、ユーザーが「music」または「rock and roll」 (あるいはそれに近いキーワード) を検索した際に、検索結果にこのマイクロコンテンツの応答が表示されます。
[リンクの追加] をクリックします。
表示されるダイアログで Music.htm を選択します。
[OK] ボタンをクリックします。右側の応答が Music.htm のコンテンツに置き換わります。これはトピックへのリンクであるため、右側のエディタでコンテンツを変更することはできません。変更するには、トピックを編集する必要があります。左側のリンクをクリックするか、右側の応答を右クリックして [リンクを開く] を選択してトピックを開くことができます。

(クリックして拡大)
をクリックして作業内容を保存します。
再度ビルドして出力を表示します。
「rock and roll」を検索します。検索結果にマイクロコンテンツが表示されます。内容はトピックと同じであり、下部にはトピックへの自動リンクも表示されます。今回は代替フレーズ「rock and roll」を使用したため、ほかの検索結果は表示されません。このフレーズは [マイクロコンテンツエディタ] でのみ使用されており、プロジェクト内のその他の場所では使用されていないためです。

(クリックして拡大)

この方法も有効ですが、トピックはマイクロコンテンツに適さないほど大きいことがよくあります。この例のようにトピックが比較的小さい場合でも、マイクロコンテンツにはその一部だけを使用したい場合があります。そのため、後述するほかの方法のいずれかを使用することを推奨します。

ブックマークへリンクして応答を作成する方法

マイクロコンテンツへの応答をより具体的にする方法の 1 つは、トピック全体ではなく、トピック内のブックマークにリンクすることです。早速試してみましょう。

(左側の) [マイクロコンテンツエディタ] のツールバーにあるをクリックします。新しい行が追加され、新しいフレーズを作成できるようになります。
(クリックして拡大)
「zilker park」と入力し、ENTER キーを押します。

(クリックして拡大)
「zilker park」行をダブルクリックして展開します。
[リンクの追加] をクリックします。
表示されるダイアログで Attractions.htm を選択し、左下にあるをクリックします。

(クリックして拡大)
このトピックにはまだブックマークがありませんが、[ブックマークを選択] ダイアログで自動的に作成できます。「見出し」を展開し、「h2 – Zilker Park」を選択します。

(クリックして拡大)
[OK] ボタンをクリックします。[ファイルの選択] ダイアログでも [OK] ボタンをクリックします。
右側の応答には、「Zilker Park」という見出しからトピックの末尾までのトピック内のすべてのコンテンツが表示されます。

(クリックして拡大)
をクリックして作業内容を保存します。
再度ビルドして出力を表示します。
「Zilker」を検索します。検索結果にマイクロコンテンツが表示されます。フレーズ全体 (「zilker park」) を入力する必要はなく、一部を入力するだけで十分です。
前の例と同様に、トピック (および特定の見出し) へのリンクがマイクロコンテンツに自動的に提供されています。

(クリックして拡大)

また、応答が途中で切れており、下部に矢印が表示されています。これは、応答の高さがしきい値 (スキンで制御可能) に達したためです。下矢印をクリックすると応答が展開され、すべての内容が表示されます。

(クリックして拡大)

トピックとそれ以降の内容を含める必要がある場合は、この方法が有効です。ただし、この例では「Zilker Park」の下にマイクロコンテンツの応答には関係のない「Lady Bird Lake」セクションがあります。そのため、次に説明する方法を使用することを推奨します。これは、ほとんどの状況 (必ずしもすべてではない) で推奨される方法です。

トピックからリンクして応答を作成する方法

最も柔軟な方法は、トピック内の特定のコンテンツブロックを選択し、マイクロコンテンツとしてタグ付けして、そのコンテンツから新しいフレーズへのリンクを作成することです。

この方法でやり直すため、まず、以前のステップで作成したマイクロコンテンツフレーズを削除します。

[マイクロコンテンツエディタ] の左側で、「zilker park」行のをクリックします。

(クリックして拡大)
をクリックして作業内容を保存します。

次に、トピック内の特定のコンテンツブロックを選択し、マイクロコンテンツとしてタグ付けして、そのコンテンツから新しいフレーズへのリンクを作成する方法でやり直してみましょう。

Attractions.htm トピックを開きます。
「Zilker Park」という見出しまでスクロールします。
見出しの横にある自動生成されたブックマークは必要ないので削除します。
「Zilker Park」セクション (見出し、およびその下にある段落とイメージ) を選択します。

(クリックして拡大)
[ホーム] リボンを選択し、[マイクロコンテンツを作成] をクリックします。[マイクロコンテンツを作成] ダイアログが開きます。
[フレーズ] フィールドに「zilker park」と入力し、[OK] ボタンをクリックします。[マイクロコンテンツエディタ] が開き、新しいフレーズとその応答が表示されます。

(クリックして拡大)
Attractions.htm トピックに戻ります。左側の構造バーに示されるように、選択したコンテンツが新しいマイクロコンテンツタグ内にラップされています。Flare Desktop は、この情報に基づいて検索結果に表示するマイクロコンテンツを識別します。また、マイクロコンテンツが、スニペットと同様に、灰色のマーカー括弧で囲まれているのが分かります (ただし、個別のファイルであるスニペットとは異なり、コンテンツをクリックするだけでコンテンツを変更できます)。

(クリックして拡大)
をクリックしてすべてのファイルを保存します。
再度ビルドして出力を表示します。
「Zilker」を検索します。検索結果にマイクロコンテンツが表示されます。前の方法と同様に、トピック内の特定のコンテンツへの自動リンクが表示され、応答は高さの関係で一部のみ表示されます。

(クリックして拡大)

応答を展開すると、Zilker Park のコンテンツのみが含まれていることがわかります。

(クリックして拡大)

ヒント
このような状況では、画像をテキストの片側または反対側に配置するなど、コンテンツの構造を少し変える必要があるかもしれません。Flare Desktop では、さまざまな方法でこれを実現できます。1 つの解決策は、レスポンシブレイアウトにより、マイクロコンテンツが異なるサイズのデバイスで表示される際に構造を調整します。レスポンシブレイアウトの詳細は、オンラインヘルプを参照してください。

代替フレーズを作成する作成

この記事の冒頭で、既存の代替フレーズを置き換え、それが出力でどのように機能するかを確認しました。しかし、まだ新しい代替フレーズを作成していないので、ここで作成してみましょう。

[マイクロコンテンツエディタ] の左側にある「Music」行をダブルクリックして展開します (まだ展開されていない場合)。
ツールバーにあるをクリックします。
「jazz」と入力し、ENTER キーを押します。
(クリックして拡大)
をクリックして作業内容を保存します。
再度ビルドして出力を表示します。
「jazz」を検索します。「music」や別の代替フレーズ「rock and roll」を検索した場合と同じように、マイクロコンテンツが検索結果に表示されます。

まとめ

パート 1 では、オンプレミスのコンテンツオーサリングツールである MadCap Flare Desktop を使って、HTML5 検索結果に表示するマイクロコンテンツを作成するため、Flare プロジェクトとマイクロコンテンツファイルを作成し、マイクロコンテンツの応答と代替フレーズを作成する方法を説明しました。

次のパート 2 では、マイクロコンテンツをシングルソース化する方法について説明します。