レスポンシブ、特にWebデザインに関しては、ここ数年、この用語は流行語になっています。しかし、レスポンシブとはどういう意味なのでしょうか？そして、さらに重要なことに、それはeラーニングにとって何を意味するのでしょうか？
まず、元のWebデザインにおける「レスポンシブ」について説明します。次に、それがeラーニングにどのように適用されるか、そしてなぜそれが重要であるかを確認しましょう。
レスポンシブデザインとは？
標準A4用紙サイズ29.7×21.0cmの横向きにコンテンツレイアウトをデザインするように依頼されたとします。寸法が固定されているので、紙のデザインは非常に簡単ですよね？
次に新しい要件を追加しましょう。同じコンテンツをB5用紙サイズ縦向きに変えてください。もちろん、どの用紙サイズを使用しても、すべての内容が読みやすいものでなければなりません。寸法が変わると、デザイン作業が少し難しくなりますね。
これは基本的に、2000年代初頭に始まったモバイルデバイスの爆発的増加でWebデザイナーが直面した課題です。レスポンシブデザイン手法がなければ、Webデザイナーは、元のサイトと同じ内容であるが、モバイルデバイスで閲覧するユーザー向けに特別にデザインされた別バージョンのサイトを作成することを余儀なくされました。この方法で複数のサイトを用意することは、モバイル対応コンテンツに対する高まる需要を満たすための時間とコストの両方を考慮しなければなりませんでした。ますます多くのデバイスが登場するにつれて、このデバイス固有のアプローチでは、すべての新しいデバイスやユースケースに対応することができないことが明らかになっていきました。
レスポンシブデザインという用語は、2010年のA List Apartの「Responsive Web Design」というタイトルの記事で、Webデザイナー兼作家のEthan Marcotte氏によって最初に造られました。彼はレスポンシブデザインを使用して、様々なデバイスで動作するようにWebサイトを最適化するためのWebデザインアプローチを説明しました。要約すると、Marcotte氏はWebデザイナーがレスポンシブデザインを使用して、任意の画面サイズやデバイスで読みやすくナビゲートしやすい方法でWebサイトの内容と機能を保持することにより、可能な限り最高のユーザーエクスペリエンスを提供することを提案しました。
技術的に言えば、レスポンシブル性は、Fluid Grids（流体グリッド）、柔軟な画像、メディアクエリ（CSS3仕様の一部）を使用することで実現されます。実際には、Web開発者は、様々な画面サイズと解像度のブレークポイントでWebサイトが内容を再配置、サイズ変更、非表示、置き換え方法を定義するだけです。レスポンシブデザインでは、CSSがガイドし、ブラウザが内部的に大変な作業を行っています。
たとえば、Webデザイナーは、水平方向スペースで使えるピクセル数に応じて、コンテンツレイアウトを1段組から2段組に調整するように指定する場合があります。スマートフォンなど画面の狭いデバイスでコンテンツを表示すると1段組表示で応答（レスポンス）し、ユーザーが大画面のタブレットデバイスでコンテンツにアクセスすると、同じコンテンツがより広い2段組のレイアウトに応答（レスポンス）することを意味します。
レスポンシブデザインは、A4用紙サイズ横向き、B5用紙サイズ縦向きで同等に機能するコンテンツレイアウトを作成するという、難しい課題を解決します。用紙のサイズごとに個別のカスタムレイアウトを作成する必要がなくなり、用紙サイズに応じてレイアウトをどのように変更するかを定義すればよいのです。したがって、潜在的に存在するすべての用紙サイズに合わせてデザインを作成する必要はありません。コンテンツが様々なサイズの制約にどのように対応するかについてのルールを設定するだけです。
コンテンツレイアウトを紙の寸法の変更に応じて変更するこの例は、レスポンシブデザインが、マルチデバイスの世界でWebコンテンツを配信する際のいくつかの課題にどのように対処するかを示しています。しかし、レスポンシブデザインは、eラーニングコースを複数のデバイスに提供するという課題にどのように対処するのに役立つのでしょうか？
レスポンシブeラーニングは、レスポンシブWebデザインと同じ流動的な適応のあり方を体現していますが、いくつかの重要な工夫が施されています。これらのねじれをよりよく理解するために、最初に、マルチデバイスのeラーニングの開発に固有の課題に焦点を当てましょう。
課題
テキストと画像をリフローするための垂直スクロールレイアウトを提供するWebページとは異なり、今日のeラーニングコースのほとんどは、オブジェクトが相互に固定された位置にあることに依存する水平レイアウトのスライドベースの原則に従います。
スライドベースのeラーニングコースは、多くの場合、さまざまな種類のコンテンツで構成されています。グラフィックやテキストを含む単純なスライドから、学習者がコンテンツを触覚的に操作するように促すメディアが豊富なインタラクションまで、あらゆるものが含まれます。
レスポンシブWebデザインは、Webコンテンツの相対的な配置は実際には重要ではないため機能します。たとえば、テキストが3段組から1段組になっている場合や、画像が別の場所に配置されている場合でも、コンテンツは意味をなします。
しかし、スライドベースのeラーニングコンテンツの場合はそうではありません。スライドベースのeラーニングは、画面サイズを小さくするためにスライド内のオブジェクトの相対位置が変わったり消えたりした場合、学習者にはそれは意味をなさなくなります。スライドベースのeラーニングを様々なデバイスで機能させるには、画面サイズやアスペクト比に関係なく、スライド画面上の要素の位置を変更してはなりません。これにより、ほとんどのeラーニング開発者は困惑しています。学習者のデスクトップPC、ノートPC、タブレット、スマートフォンに流動的に適応するeラーニングコンテンツ（固定位置にとどまる必要のある要素を含む）を開発する方法です。
スライドベースのeラーニングは、多くのeラーニングコンテンツが頼りしている手法ですが、一部の企業組織は、Webサイトスタイルのeラーニングを優先して、スライドベースのレイアウトを放棄することでレスポンシブeラーニングを作成することを選択しています。基本的に、インタラクティブなeラーニングを作成する代わりに、小さなWebサイトを作成します。
このタイプのコンテンツはレスポンシブウェブデザインツールと戦略を使用して開発されているため、モバイル向けに作成されており、逆にスライドベースのコンテンツと同じ相対的なポジショニング要件はありません。
このアプローチの欠点は？歴史的に、レスポンシブeラーニングを可能にするツールは、eラーニングオーサリングツールではなく、Web開発ツールです。つまり、最近まで、モバイル対応のWebベースのeラーニングコンテンツを作成するには、一般的にほとんどのeラーニング開発者が多くの時間、コーディングスキル、Web開発ツールが必要でした。
では、eラーニングの作成者は、レスポンシブコースを構築するという課題をどのように克服できるでしょうか。
ソリューション
その質問に対する簡単な答えは、テクノロジーがコースの作成者にとって大きな負担になることを解決することです。Articulateでは、2つの状況を変えるツールがこれを行っています。
完全にレスポンシブなeラーニングを作成するためのWebベースのオーサリングツール
Rise360は、Webブラウザでレスポンシブeラーニングを開発するための革新的な新しいアプリケーションです。レスポンシブWebサイト構築ツールで使用されているのと同じテクノロジーを使って、本質的にレスポンシブなコンテンツを作成します。ただし、Rise360は、eラーニング用にデザインされているため、Web開発用のツールとは異なります。いくつかのレッスンブロックタイプがあり、非常に簡単に作成できます。コース開発者は、テキスト、イメージ画像、ビデオ、タイムライン、ラベル付きグラフィック、並べ替えアクティビティ、プロセス、クイズなどのブロックタイプを挿入し、編集するだけです。
Rise360のすべてのレッスンは本質的にレスポンシブル性が高く、モバイルを念頭に置いて特別に設計されています。そのため、見栄えがよく、コーディングや手動での調整を必要とせずに、あらゆる方向であらゆるデバイスで完全に機能します。何よりも、コース開発者は学習者を特定のデバイスに制限する必要はありません。学習者が使用するデバイスが何であれ、Riseコースは自動的に適応して最高のユーザーエクスペリエンスを提供します。
レスポンシブモバイルコースプレイヤー
Rise360は、本質的にレスポンシブル性の高いeラーニングを数分で作成するための完璧なツールですが、多くの企業組織は、あらゆるデバイスで機能し、そして高度にインタラクティブなスライドベースのeラーニングコースを作成したいと考えています。そして、新しいレスポンシブルコースプレイヤーが備わったStoryline360及びStudio360はそれを行うことができます。
レスポンシブプレイヤーは、学習者が使用しているデバイスを検出し、様々な画面サイズと向きに流動的に適応し、小さな画面のデバイスではナビゲーション要素が邪魔にならないように非表示になり、コンテンツ画面領域を最大化します。たとえば、スマートフォンでは、レスポンシブモバイルプレイヤーがサイドバーメニューを非表示にし、ブラウザ枠を取り除き、モバイルフレンドリーな再生コントロールを提供します。最も重要なことは、レスポンシブレスポンシブモバイルプレイヤーベースのeラーニングコンテンツをデザインどおりにキープできることです。スライド内のオブジェクトの配置位置が固定されるため、コースの作成者ではなく、コースプレイヤーが学習者のデバイスに適応する責任を負います。
Rise360と新しいレスポンシブモバイルコースプレイヤーにより、Articulateはレスポンシブデザインの基本原則をeラーニングにもたらします。現在、コース開発者は、学習者を特定のデバイスに拘束せず、品質を犠牲にしないeラーニングコンテンツを配信できます。
レスポンシブがeラーニングにとって重要なのはなぜ？
モバイルデバイスの利用が増え、インターネット対応デバイスが増えるにつれ、学習者がデスクトップPCのコースにだけアクセスすると想定することはもはや現実的ではありません。私たちはモバイル社会であり、私たち全員がモバイル学習者です。
モバイルおよびタブレット市場の成熟度と豊富な種類のデバイスを考えると、企業組織がラーニングエクスペリエンスから障壁を取り除き、期待していることは驚くべきことではありません。美しく見え、どのデバイスを使っても直感的に機能するコースを期待しています。
そして、レスポンシブなeラーニングツールを使用することで、企業は最終的にまさにそれを実現できます。
ここで学んだことを試したい方は、Articulate 360の30日間の無料トライアルをお試しください。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です
Comments