2021年1月12日読了時間: 6分

効果的なタブインタラクティブをデザインするための初心者向けガイド

更新日：2023年11月22日

原文「A Beginner’s Guide to Designing Effective Tabs Interactions」

eラーニングで最も頻繁に使用されるインタラクティブタイプについて考える時、典型的なタブインタラクティブはおそらく真っ先に考えられるタイプです。それは大きな驚きではありません。タブインタラクティブは用途が広く、関連する内容を直感的にレイアウトでき、画面のスペースを節約し、学習者に自分のペースで情報を掘り下げて習得するように勧めることができます。

汎用性に加えて、タブインタラクティブは簡単にすばやく作成できます。Rise360では、タブインタラクティブを作成することはものすごく簡単です。タブブロックをレッスンに挿入するだけです！！Storyline360では、素材集Content Library360にあるタブインタラクティブが含まれているテンプレートスライドをすぐに適用した後にカスタマイズしたり、下記のビデオのように5分以内にカスタムタブのインタラクティブを作成することができます。

Storyline 360でゼロから作成するカスタムタブインタラクティブがコースに必要であり、作成するのが初めての場合や、作成するのが億劫になっている場合、プロが作成したように学習者にとって直感的に見えるタブインタラクティブをどのようにして作成することができるのでしょうか？またタブインタラクティブを本当に使うべきなのでしょうか？

これらは、このブログで取り組む質問です。効果的なタブインタラクティブを構築するためのいくつかの簡単なデザイン上の考慮すべきポイントを、誰もが習得できる単純な機能的および視覚的なデザインガイドラインを紹介します。

内容を検討する

タブは、ヒント集、プロセスのステップ、複数スライドにまたがる箇条書きやテキストに最終的になりそうなアイデアなどの関連内容を提示するための優れた方法です。

たとえば、無料でダウンロードできるMontse氏が作成したこのテンプレートは、付箋を付けたノートブックのように関連内容をグループ化しています。

Montse氏のコースは非常に活気があり、魅力的に見えます。しかしタブインタラクティブをすべての内容に適用すべきなのでしょうか？

答えはNoです。タブインタラクティブがコンテンツに最適であるかを確認する質問を次に示します。

提示しようとする情報はすべて論理的に関連していますか？ 情報を論理的にまとめることができない場合、タブインタラクティブを使用すると学習者が混乱する可能性があります。
学習者は情報を並べて比較した方がよいですか？ 例えば、製品間の相違点と類似点を学習者に理解してほしい場合、タブインタラクティブは1つのタブ内容しか表示できないため、最良の選択ではありません。学習者が比較しやすくするために、横に並べたり、表レイアウトを試すべきです。
情報をより簡潔にできますか？ たとえ内容すべてが関連していたとしても、すべての内容を合理化することは理想的ではありません。特に内容の合理化が重要なメッセージの読解性を犠牲にする場合、タブインタラクティブに詰め込む状況ではありません。場合によっては、その内容を別スライドに分けたサブメニューとした方が適切に機能する場合があります。

わかりやすいタブラベルを使用する

タブインタラクティブの優れた点は、ナビゲートが直感的で、関連情報をグループ化できることです。このタイプのインタラクティブを非常に直感的にする方法の1つは、ラベルを使用することです。タブラベルは短く簡潔にし、提示する内容のタイプを考慮する必要があります。タブラベルは、順序や優先順位を表す数字や文字、単語や短いフレーズ、アイコンや画像、さらにはこれらの組み合わせなど、様々な形式をとることができます。

以下は、無料でダウンロードできるタイプ別タブラベルのテンプレートです。

数字や文字でラベルされたタブ

単語やフレーズでラベルされたタブ

アイコンや画像でラベルされたタブ

タブの配置を検討する

わかりやすいラベルを作成することは、タブインタラクティブをナビゲートしやすくするための最初のステップにすぎません。意味のある方法で画面上にタブを配置することも同様に重要です。

では、効果的なインタラクティブを実現するには、どのようにタブを配置すべきなのでしょうか？タブは画面上で垂直方向または水平方向に均等な間隔で配置するのが理想的です。ただし、学習者がタブをクリックするのが難しくなるほど近づけないでください。

以下は、2つのタブのデザインの簡単な比較です。

左側のタブデザインは、タブが垂直に並んでいるため直感的に使用できます。右側のデザインを見ると、タブが等間隔で配置されておらず、タブが分離しているかがわかりにくいため、学習者の操作が難しくなっています。タブのサイズ、間隔、配置が一貫していると、操作を簡単にナビゲートできるようになります。

タブがクリックできるように見えるようにする

タブを配置したら、クリックできることを学習者に知らせることが必要です。ここでオブジェクトのステイト（状態）がポイントになります。Storyline 360では、オブジェクトのステイト機能を使用して、学習者がマウスホバーやクリックなどのアクションをする時に、オブジェクトの外観を変えることができます。単純なことですが、スライドデザインをユーザーフレンドリーにする強力な方法です。

例えばHoverステイトをタブに適用すると、何かが起こることを学習者に知らせます。

Storyline 360では、タブ、ボタン、文字、テキストなど、画面上のオブジェクトにさまざまなステイトを簡単に割り当てることができます。

ステイトをタブに適用することにより、クリックするタブに関連する内容が表示されることを学習者に知らせることができます。

Visitedステイトをタブに追加して、学習者にタブの情報をすでに閲覧したことを知らせることもできます。

これらのステイトをすべて使うとさらに良くなります。

これらのステイトをすべて使うと、タブのナビゲートがわかりやすくなります。

補足

インタラクティブなeラーニングデザインにも適用しようとした時、タブインタラクティブのように控えめなものをより美しく直感的にするためのポイントを考えることはエキサイティングです。ここで共有したガイドラインにより、タブを含むStorylineであらゆるタイプのインタラクティブなデザインに自信を持っていただければ幸いです。

Storyline 360で効果的なタブインタラクティブを構築する方法についてさらに詳しく知りたい場合は、以下の記事をご覧ください。