タグ別アーカイブ: デザイン

こんにちは、キバンインターナショナルの小林です。

eラーニング導入事例をご紹介いたします。

【ご相談】

人材育成のコンサルティング会社。お客様に合った、自社のスキルアップ研修がある。それをeラーニングでも受講できるようにしたい。
その際にsmartbrainを使った場合、自社サービスのeラーニングとして見えるようにしたいが、可能か?

【ご提案】

標準機能で、以下のデザインが変更可能です
・ログイン画面の、背景が変更。
・eラーニング教材の、サムネイル画像の変更。
・タイトルロゴ

そもそもsmartbrainとは

誰が、どんな教材を、どれだけ学習したかを管理できる「eラーニングマネイジメントシステム」です。

スマホ、タブレット対応!! eラーニングシステム「smartbrain」

「smartbrain」特設サイト
http://www.smartbrain.info/

「smartbrain」お問い合わせはこちらから
http://www.smartbrain.info/?page_id=1290

「smartbrain」無料お試しはこちらから
http://www.smartbrain.info/?page_id=478

eラーニングことなら何でもお気軽にご相談ください。

株式会社キバンインタ―ナショナル http://www.kiban.jp/
電話:03-4405-8486
メール:international@kiban.jp


キーワードは「コスト削減」と「教育効果」2011年11月4日発行
■□■━━━━━━━━━━━━━━━━━━━━━━━━■□■

eラーニング導入こぼれ話 Vol.0062

■□■━━━━━━━━━━━━━━━━━━━━━━━━■□■

「最高の学びをすべての人に!」

こんにちは!いつも大変お世話になっております、株式会社キバンインターナショナルの田中です。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
●今回のポイント
1. 電子黒板にはLectureMAKER
2. STEP1「スライドマスタ」で「テンプレート」
3. STEP2 3種のボタンを使いこなす
4. STEP3 マルチメディアオブジェクトの挿入
5. 人気の秘密は、費用対効果
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

===(お知らせ)=====================

eラーニング先進国、韓国オンライン大学で採用の高機能教材作成
『Lecture MAKER』・・・99,750円(税込)
30日間無料お試しダウンロードはこちらからどうぞ。
http://lecturemaker.jp/

==============================

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【main contents】はじめてのLectureMAKER 3STEPマニュアル

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

●電子黒板にはLectureMAKER

先々週の韓国出張でレポートでお伝えした通り、日本でもこれから本格的に、もっともっと電子黒板が普及することが予想されます。

その電子黒板に相性ピッタリと思われるのが、LectureMAKER http://lecturemaker.jp/ で作成した教材。電子黒板の巨大なタッチパネルと、LectureMAKERの動画などマルチメディアオブジェクトを駆使した映像教材が、マッチしないはずがありません。

実際、LectureMAKERは韓国のオンライン大学に採用されている本格派の教材作成ツール。ウリは高機能ということなのですが、高機能ゆえに使い方にとまどう方もいらっしゃるかもしれません。そこで今回は、はじめての方向けに、3ステップでできる、シンプルな使い方をご紹介します。

●STEP1「スライドマスタ」で「テンプレート」

LectureMAKERの操作画面はPowerPoint2007ととても似ています。PowerPoint2007に使い慣れている方であれば、同じようなインターフェースなので、直感的に使いたい機能を探すことができます。

LectureMAKERは、自由に教材をデザインすることができますが、一から作るというのは手間がかかるもの。そこで活躍するのが標準搭載されているテンプレートです。

テンプレートには様々な種類がありますが、どれも、使いやすい教材が作成頂けるように設計されています。

動画やFlashなど、マルチメディアオブジェクトを挿入する位置や、学習メニュー表示、進むボタン、戻るボタンなど、ある程度きまっているので、そこに伝えたいコンテンツをあてはめていけば、簡単に教材が作成できてしまいます。

テンプレートの挿入は、PowerPointでもおなじみのスライドマスタ機能を使うことで簡単挿入できます。

●STEP2 3種のボタン

LectureMAKERでは、教材にボタンを設置することによって、講師の思った通りに学習を進めてもらうように作成することができます。

ボタンは大きく分けて3種類。

・一般ボタン
・目次ボタン
・ナビゲーションボタン

です。

一般ボタンは、押すと何かが起こるように設定できます。例えば、「指定したスライドへ移動」や「URLへリンク」、などとできます。

目次ボタンはその名の通り、目次やメニューです。クリックすれば、そのスライドへ移動します。

ナビゲーションボタンは「次へ」「前へ」「最後へ」など、教材の使いがってをよくするボタンです。

●STEP3 マルチメディアオブジェクトの挿入

テンプレートを指定し、ボタンの設置も覚えたら、今度は動画やFlashなどの、マルチメディアオブジェクトを挿入してみましょう。

「挿入」メニューから簡単に行うことができます。

挿入できるのは、動画、Flash、PowerPointファイル、pdfファイル、html、音声ファイルなど多岐に渡ります。

テンプレートの空いているところに挿入し、ドラッグして大きさを合わせてあげるだけで、教材らしくなります。

ここまでで基本的な教材は作成できますが、さらに思い通りに作成するとしたら動画と「PowerPointスライドの同期」など、進んだ機能も使ってみましょう。

●人気の秘密は、費用対効果

実はこのLectureMAKER、学校や企業様が使用するためだけでなくeラーニング教材を制作する業者さんにも多数ご購入頂いております。なぜでしょうか。

eラーニング教材は、一般的にFlashで作成されます。
オリジナルのコンテンツを作成しようと思えば、ゼロからボタンをデザインし、プログラミングで設定などが必要となります。これは大変な手間です。

こうしたことを業者さんに依頼すれば、けっこうな費用が必要となることは、eラーニングご担当者の方であればご存知かと思います。

それがこのLectureMAKERを使用すれば、自分でプロ級のオリジナルコンテンツが作成できるので、とても費用対効果のよいツールだと言えます。

●LectureMAKERで作成したeラーニング教材:

LectureMAKERのチュートリアルを、LectureMAKERで作成した教材でご紹介します。これを外注したら、それなりの金額がかかるかと思いますが、LectureMAKERであれば、自製することができます。ぜひご覧ください。

http://10000.bz/elw2010/
( パスワードをお忘れの場合、ログイン画面で「パスワードへルパー」をクリックしてください。このメールマガジンが届いているメールアドレスを入力すれば、新しいパスワードが発行され、ログインすることができます。)

ログイン後、
「【毎週更新】eラーニング導入こぼれ話」→「【第62回】LectureMAKER基本機能」をクリックでご覧頂けます。

━━(編集後記)━━━━━━━━━━━━━━━━━━━━━━

LectureMAKERは、「理想の教材を作りたい!」という学校の先生方にも多くのご支持を頂いております。まずは、簡単な使い方で、徐々に凝った教材を作っていくようにしてご利用頂ければ幸いです。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

今後も役立つコンテンツを公開して参りますので、よろしくお願い申し上げます。

Androidのプログラミングでは、インタフェースオブジェクトの配置をLayoutを利用しています。そのため、Layoutの使い方が非常に重要になってきます。

そもそもLayoutって何?

Layoutを適応させた例


Layoutとはオブジェクト類を整形させるための入れ物です。Layoutは入れ子構造にすることが可能で、様々な配置をすることが可能です。上図のようにオブジェクトの並びをLinearLayoutで整えてみました。LinearLayoutは並べる方向を指定できるLayoutです。すべてのオブジェクトは赤色の縦方向に配置するLinearLayoutに覆われていて、ボタン類はさらに横方向に配置するオレンジ色のLinearLayoutに覆われています。これらのLayoutを使うことによって、UIの設計を助けてくれます。また、Layoutを利用する一番の利点はAndroid端末によって表示画面の大きさが異なりますが、Layoutを駆使することですべての端末で同じように表示することが可能です。

適切なLayoutを選ぼう

Layoutの種類によって配置できる性質が異なります。アプリに適したLayoutを使いましょう。

LinearLayout

上記のように特定の方向に並べることができるLayoutです。一般的によく使われるLayoutの一つです。android:orientation=””で配置方向を設定でき、horizontal(水平)vertical(垂直)があります。

FrameLayout

FromaeLayout


FrameLayoutはいくつものViewを重ねて表示することが出来ます。なので、各レイヤーごとにViewを分けることが出来ます。上図の例ではFrameLayoutの中にView1とView2を重ねあわせました。

TableLayout

TableLayoutの例


TableLayoutを使うとHTMLのTableのように表を作ることが出来ます。先程のLayoutの一部をTableLayoutに変えてみました。TableRowを入れ子構造のように利用しなければならないので、XMLでのLayoutの作成のみに適しています。

XMLを使ったLayoutの管理

Layoutの作成はソースコード上に書くこともできますが、Eclipseを使えば、LayoutをXMLで作成するGUIのツールがあります。

MVCがしっかりしてる

LayoutをXMLで管理する事によって、MVCをはっきりと分離することが出来ます。デザインを変更したい場合はXMLだけを変更すればいいということです。また、共同開発する上でXMLを独立しているのでバージョン管理もファイル単位でデザインを管理することが出来ます。

表示文字列の管理が楽

XMLで定義している物全般に言えることですが、文字列の変更があった場合、使用されている文字列をすべて変更する必要はなく、XMLで管理された文字列のみを変更すればいいということです。ひとつのファイルですべての文字列を管理できることは非常に開発を行い易くしています。

大規模開発に向け

個人単位ではなく共同開発が必要な大きなプログラムなどに向いています。簡単なプログラムを書いたり、ゲーム系の大きなデザインの変更があるプログラムはソースコード内で、Layoutを管理したほうがいいと思います。

eラーニングシステム SmartBrain(スマートブレイン)を設計する際、PC用の画面を、携帯電話用にカスタマイズすることを絶対しないと決めました。

PC用の作成された画面を、手直しして、携帯電話用に再設計したとしても使いやすいものになりません。画面の遷移なども、PCとケータイ電話では、全く異なるから、PC用と携帯電話用は、別物としてインターフェイスを設計すべきです。

小さな画面でも、指先でも操作できるようなインターフェイスであrば、PCのマウスやキーボード操作であっても使いやすいと考えたからです。

スマートフォンの全機種対応を終わらせたら、次のステップでは、

1.PC用に最適化したeラーニングシステムのデザイン

2.ケータイ電話に最適化したeラーニングシステムのデザイン
この場合のケータイというのはスマートフォンをのぞく、通常の携帯電話です。

上記の2種類の画面設計が終わっており、順次開発を進めています。

設計をしっかりし、開発の合理化、開発の効率化を徹底しておかないと、多くの端末用の画面を作ることは大変な作業になります。また、動作検証も大変な作業になります。これまでの開発経験を活かし、徹底化した効率化をしながら、画面の効率的設計をしています。ちなみにPC用の画面の多くは、現在のeラーニングシステム SmartBrain(スマートブレイン)のWebサイトと同じテンプレートを使い回すことで、効率化をはかっています。(ちなみに、キバンインターナショナルのサイトは、全部WordPressというCMSで開発されていますが、1.ヘッダ部分 2.トップページ用の本体部分 3.第2階層用の本体部分 4.フッダ部分)という4つのデザインファイルだけで作られています。(フッダ、ヘッダは、全部共通ですので、実はデザインファイルは2種類だけです。)このWebサイト用に作成したデザインファイルを、eラーニングシステム SmartBrain(スマートブレイン)のPC用画面でも再利用して開発を進めています。

デザインが共通化することで、迷わず、わかりやすく操作をしていただきたいという願いも込められています。効率良い開発を徹底することで、プライスリーダーとして、皆様が購入できる金額でeラーニングをどんどん提供していきたいと思っています。

プログラマ視点でのWebデザイン

CATEGORIES eラーニングby.a.takeuchi2 Comments2009.10.30

絵もかけないし、デザインセンスもない。でもCSSなら修正できるという、プログラマ向けのデザインテクニック、を紹介します。

・余分な要素を取り除く
・余白をあける

たったこれだけです。

この2点をブログのリンクユニットに適用してみました。

Before After
before after

どうでしょう?

すっきりしましたよね。

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ