2021年6月8日読了時間: 7分

ブランディングされたStoryline 360のプロトタイプを作成する方法

更新日：2023年11月27日

原文「How to Create a Branded Storyline 360 Prototype」

次の画像をご覧ください。

それぞれの会社の名前を思い浮かべてください。とても簡単ですよね？言葉がなくても、各社ブランドを識別できます。認識可能なロゴやブランドマークなどのブランディングは企業のアイデンティティです。ブランディングは会社のストーリーの一部です。ブランディングは会社として誰であるか、何を気にかけているか、何をしているのかを示しています。また、ブランディングは企業のアイデンティティにおける非常に重要な側面であるため、企業がオンライントレーニングにブランディングを要求する場合があります。そのような場合、Storyline 360で美しいカスタムブランドのプロトタイプを簡単に作成できる例をお見せしたいと思います。

会社のブランドを研究する

時間をかけて会社のブランドを理解することは、コースデザインでその会社のブランドの本質を捉えるのに役立ちます。ブランドは若々しく活気に満ちたトーンですか？それとも、モダンで落ち着いたデザインですか？色の選択から始まり、画像の選択、タイポグラフィまで、細部に渡っています。これらの要素を研究してコースに適用すると、同様のトーンを反映したデザインにするのに役立ちます。作成するコースに会社のブランドを反映するためにできることがいくつかあります。

ブランディングガイドを確認する

ブランディングガイドには、フォントやロゴのバリエーションからカラーパレット、画像のガイドラインなど、役立つ情報がたくさん含まれています。その会社からブランディングガイドを入手できない場合は、オンラインで検索してください。大企業の場合は、検索で見つかる可能性があります。またガイドラインが最新であることを確認してください。

会社のWebサイトをチェックする

企業は、ブランドガイドラインに合致するWebサイトの構築に多額の費用を費やしています。時間をかけてWebサイトの各ページを調べ、確認してください。テキストのフォーマットと各ページのレイアウトを見てください。画面上のオブジェクトをクリックまたはカーソルを合わせると、どんなデザイン要素に気づきますか？クリーンでシンプルな画像、またはカラフルで活気のある画像など、どのような種類の画像を使用していますか？ボタンは丸みを帯びていますか、それとも長方形でしょうか？ボタンはどのように挙動していますか？他にどのようなデザインの詳細に気づきますか？

会社のオンラインビデオを見る

ビデオは、会社のブランドを理解するのに役立つもう1つの優れた方法です。多くの場合、ブランド化されたビデオは、YouTube、Vimeo、その他のビデオプラットフォームページで見つけることができます。使用しているアニメーション、言語、音楽の種類に細心の注意を払ってください。会社のビデオはナレーションを組み込んでいますか？それともメッセージを伝えるために画面上のグラフィックとテキストで表現する傾向でしょうか？作成コースに同様の要素を含めることをお勧めします。

会社のSNSにアクセスする

会社のソーシャルメディアは、デザインのアイデアの優れたリソースになるかもしれません。一部の企業は、投稿オンラインコンテンツを特別にブランドデザインするために専門職を雇うことさえあります。会社が共有するコンテンツを表示し、画像、広告、GIFのデザインを注意深く見てください。これらの素材は、スライドデザインのインスピレーションとして役立つ場合があります。

PowerPointやその他ドキュメントをオンラインで検索する

他の創造的な方法でブランディング例を見るのも非常に役に立ちます。ブランドに関するPPTやPDFがオンライン検索できる企業もあります。しかし見つけるのが難しい場合があります。一例として「filetype：PDF 会社名」または「filetype：PPT 会社名」で検索してみてください。下記画像は検索窓に入力した例です。

検索結果により、コースに使用できるデザインのアイデアが満載の会社のブランドのドキュメントまたはプレゼンテーションのリストが表示されるかもしれません。日付をチェックして、ブランド情報が最新であることを確認します。

プロトタイプを作成する

会社のブランドをしっかりと把握したら、ブランド要素をStoryline 360で作成するプロトタイプに適用します。プロトタイプは、ストーリーボードとコースの最終バージョンとの間の中間点です。プロトタイプは、関係者にコース全体のエクスペリエンスがどのようになるかをプレビューするものです。

ブランド化されたプロトタイプのもう1つの優れた用途は、Storyline 360での一連のマイクロラーニングコースシリーズの開発を合理化することです。コンテンツの量が最も少ないストーリーボードを選び、関係者がサンプルを確認できるようにプロトタイプを作成します。これは、シリーズ全体を構築する前に、フィードバックをもらい、調整するための優れた方法です。

そのため、ブランド化されたプロトタイプを作成するポイントを詳しく見てみましょう！

Storyline 360でブランド化されたプロトタイプを作成する

ブランドを適用したプロトタイプを作成する方法を紹介するために、このモックアップ（架空）のMy Pet社のWebサイトを使ってみましょう。この会社のブランドアイデンティティをStoryline 360プロトタイプに組み込む方法について説明します。

空のテンプレートから始める

Storyline 360で最初に新しいプロジェクトを作成する際、デフォルトのナビゲーションボタンやその他のスライドプロパティを使用すると、スライドサイズは4：3になります。後でスライドのデザインを作り直すことがないように、コースに内容を追加する前にスライドのサイズを変更しておくことをお勧めします。スライドサイズ16：9で、[次へ/前へ]ボタンが表示されないようにし、各スライドに独自のカスタムナビゲーションを作成できるようにします。他のスライドのプロパティとプレーヤーの機能も編集します。上記の設定を施したプロジェクトファイルをテンプレートとして残しておくと再利用しやすくなります。

もちろん、独自のプロジェクトテンプレートを設定する方法はたくさんあります。テンプレートを使えば、新しいStoryline 360プロジェクトを作成する度に同じ編集を行う必要はありません。

Articulate 360 Teamsをご契約の場合は、Storyline 360のチームスライドを使ってテンプレートとして共有できるため、チーム全員が簡単にアクセスして再利用できます。

ブランドカラーテーマを作成する

会社のブランドに合わせて、デフォルトのカラーテーマをカスタマイズします。新しいカラーテーマを作成し、会社のブランディングガイドからブランドカラーコードを入力するだけです。ブランディングガイドにアクセスできない場合でも、Storyline 360のスポイトツールを使って会社のWebサイトから目立つ色をカラーピックすることにより、プロジェクトのブランドカラーテーマを作成できます。他のコースを作成する時も簡単に見つけて選択できるように、色のテーマ名に会社と同じ名前を付けておくのをお勧めします。

新しいテーマフォントを作成する

会社が提供する承認フォントを使用するか、完全に合致するフォントを見つけて、新しいテーマフォントを作成します。Storylineファイルを他の人と共有して編集する場合は特にブランドフォントと完全に合致する標準的なフォントを使用することをお勧めします。

合致するフォントを見つける簡単な方法は、会社のWebサイトを見ながらコースに文章を入力することです。画面の片側でWebサイトを開き、反対側でStorylineプロジェクトを開きます。

Storyline 360では、選択確定前にフォントプレビューできるため、コース内のテキストを表示し、Webサイトのフォントに合致するものが見つかるまで各フォントをゆっくりとみていくことができます。Storyline 360でのテキストの操作の詳細については、この記事（英語）をご確認ください。

スライドをカスタマイズする

次にスライドを作成します。スライドのデザインをガイドするために、前に調査したWebサイト、ブランディングガイド、オンラインビデオ、SNS、その他のドキュメントを参照してください。

ストーリーボードを既に作成している場合は、ストーリーボードの内容を反映させ、スライドを作成します。表紙スライド、内容スライド、複雑なインタラクションスライド、クイズスライドが含まれる場合があります。マスタースライドとフィードバックマスターを使って、今後の開発時間を大幅に短縮します。特に、各コースで同様のレイアウトを使用する場合はそうです。

サンプルを見たいですか？下記のMy Pet社のブランドをどのように解釈し、プロトタイプに適用したかをご覧ください。