48
制作アプローチ 角南 北斗 すなみ ほくと Web教材 スマホ時代の @shokuto

スマホ時代のWeb制作アプローチ

Embed Size (px)

DESCRIPTION

2012 PCカンファレンス @京都大 の分科会での角南の発表スライド。

Citation preview

Page 1: スマホ時代のWeb制作アプローチ

制作アプローチ

角南 北斗すなみ ほくと

Web教材スマホ時代の

@shokuto

Page 2: スマホ時代のWeb制作アプローチ

���������������

角南 北斗すなみ ほくと

発表者について

専門は日本語教育+Webデザイン。サイト構築や教材開発を行なうフリーランス。プレゼンや飲食店開業支援の講師も担当。

[email protected]@shokuto

MailBlogTwitter

Page 3: スマホ時代のWeb制作アプローチ

���������������

これまでの主な発表題目

ひとつ下のプレゼンClient 2.0 のためのディレクションを考える今日からはじめる「じぶんブランディング」伝わるプレゼンの組み立て方を考えるお料理のコツと情報教育日記じゃないのよブログは勝たないプレゼンテーションの学びかた名刺デザインで学ぶプレゼンテーション

Page 4: スマホ時代のWeb制作アプローチ

���������������

スマホ時代 Web教材

Page 5: スマホ時代のWeb制作アプローチ

���������������

スマホ時代 Web教材

Page 6: スマホ時代のWeb制作アプローチ

���������������

スマホ、持ってる人!

Page 7: スマホ時代のWeb制作アプローチ

���������������

スマホってどういうイメージ?ほとんどの場面でPCの代替になる小さなPCともいうべき何でもOK感       +ケータイのような気軽さといつでもどこでもつながる感

Page 8: スマホ時代のWeb制作アプローチ

���������������

スマホの急速な普及携帯電話の新機種は軒並みスマホに学生のスマホ率は上昇の一途学生は年度ごとに入れ替わっていくので教師と違い世の状況が反映されやすい

Page 9: スマホ時代のWeb制作アプローチ

���������������

スマホ時代 Web教材

Page 10: スマホ時代のWeb制作アプローチ

���������������

教材制作に携わってる人!

Page 11: スマホ時代のWeb制作アプローチ

���������������

教材の違い:利用想定授業・学内専用で使わせる教材と広く一般公開し自由に使ってもらう教材発表者が後者を手がけることが多いので今回は後者の要素にフォーカスしますWebサイト型の教材だけでなくアプリなどにも通じる、考え方の話です

Page 12: スマホ時代のWeb制作アプローチ

���������������

スマホの普及が教材に与える影響

Page 13: スマホ時代のWeb制作アプローチ

���������������

教材の利用場面・利用機会が増え

学びにおける選択肢が増える。

自主的な学びの可能性が広がる。

Page 14: スマホ時代のWeb制作アプローチ

���������������

教材利用の制約からの開放PCは学校のPCルームにしかないしWeb教材は授業でしか使わない

学習者がそれぞれの所持端末で環境や場面に縛られず自由に使うように

Page 15: スマホ時代のWeb制作アプローチ

���������������

PCルーム 授業 日常生活

教材利用機会の拡大

学びにおける選択肢の拡大

Page 16: スマホ時代のWeb制作アプローチ

���������������

教材制作者にとって

この変化はハッピーだと思う。

でしょ?

Page 17: スマホ時代のWeb制作アプローチ

���������������

でもさ、スマホでそのまま

PCのサイトが見られるって

わけじゃないんだぜ?

Page 18: スマホ時代のWeb制作アプローチ

���������������

PCサイトをスマホで見ると...表示がもたついてイライラPC並の処理や回線速度をつい期待しがち

操作しづらくてイライラ表示のたびに拡大作業が発生し面倒ボタンが小さいと押しそこなってパニック

表示崩れや動かない機能もあったり

Page 19: スマホ時代のWeb制作アプローチ

���������������事例:日本語でケアナビ

Page 20: スマホ時代のWeb制作アプローチ

���������������

PC用そのままだと表示直後は全体が出る。小さすぎて見えないので指で拡大操作が必要。

Page 21: スマホ時代のWeb制作アプローチ

���������������

これをスマホ用に作ると・・

Page 22: スマホ時代のWeb制作アプローチ

���������������

スマートフォン向けにゼロから画面を再設計。やりたいことをすぐに、快適にできるように。

Page 23: スマホ時代のWeb制作アプローチ

���������������

スマホに合わせたバージョンは

できるかぎり用意した方がいい

Page 24: スマホ時代のWeb制作アプローチ

���������������

特に教材は!

Page 25: スマホ時代のWeb制作アプローチ

���������������

なんで?

Page 26: スマホ時代のWeb制作アプローチ

���������������

PCルーム 授業 日常生活

教材利用機会の拡大

学びにおける選択肢の拡大

利用の強制力は弱まっていく

Page 27: スマホ時代のWeb制作アプローチ

���������������

学習者が気に入らないと

その教材は使ってもらえない。

逆に言えば、気に入られると

どんどん使ってもらえる。

つまり自主的に学んでもらえる。

Page 28: スマホ時代のWeb制作アプローチ

���������������

では、どんな教材が

学習者の支持を得られるのか?

Page 29: スマホ時代のWeb制作アプローチ

���������������

学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている

Page 30: スマホ時代のWeb制作アプローチ

���������������

学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている

Page 31: スマホ時代のWeb制作アプローチ

���������������

1. 利用文脈に沿っている具体的な利用場面をデザインするいつ・どこで・どんな目的で・どう使うもの?これまでは「PCルーム+授業」が前提に近かった今はむしろそれ以外のシーンを主とすべき

ながら利用を前提にする教科書を読みながら、ノートを取りながら、授業を聞きながら、電車を待ちながら・・・

Page 32: スマホ時代のWeb制作アプローチ

���������������

1. 利用文脈に沿っている学習者視点に立った文脈設定を授業以外の学習者の日常の学びや本音は教師も意外に知らなかったりするものわからなければ学習者に聞く・調べる・想像する教材提供者側の都合や思いを押し付けない

Page 33: スマホ時代のWeb制作アプローチ

���������������

学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている

Page 34: スマホ時代のWeb制作アプローチ

���������������

2. 目的に対しシンプルであるいま必要だからスマホを取り出し、アプリやサイトのアイコンをタッチ。ここで今すぐできないと意味がない。利用目的にダイレクトに応える教材をPCと違ってのんびりやらない迷わず操作でき、結果もすぐ得られるように

Page 35: スマホ時代のWeb制作アプローチ

���������������

2. 目的に対しシンプルである多機能化はデメリットが多い機能が増えると複雑化するためわかりにくさ・使いにくさを生みやすい

機能のカバーはシンプルな個の連携でスマホが様々な道具を入れる箱になるべきで、単体のサイトが道具箱になろうとしてはダメ

Page 36: スマホ時代のWeb制作アプローチ

���������������

学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている

Page 37: スマホ時代のWeb制作アプローチ

���������������

3. 個人のニーズに合っている方向性や利用スタイルを絞る様々な学習ニーズやスタイルに対応するとどう使っていいか謎のサイトになってしまうこう使ってほしい、という色を打ち出すこと学習者は自分に合うものを使いたい。教材に自分を合わせるようなことはしない。結果、選択肢がないと使われない。

Page 38: スマホ時代のWeb制作アプローチ

���������������

3. 個人のニーズに合っているニッチでパーソナルな切り口がいい一般的・汎用的なものはすでに出揃っている?ニッチな切り口や特徴があるものだからこそ自分にピッタリはまれば強い愛着も生まれるホーム画面にアイコンを置いてもらえるように

Page 39: スマホ時代のWeb制作アプローチ

���������������

ここまでは教材のカタチの話。

加えて、教材制作プロジェクトは

どのように進めていくべきか?

Page 40: スマホ時代のWeb制作アプローチ

���������������

教材制作の基本的姿勢具体的な制作部分はプロの力を借りるインターフェースなど、スマホ対応の勘所は制作側が押さえてくれる(はず...)

教材の位置付けや学習者の利用文脈は教師側が示さないと反映されにくいWeb制作のプロは教育のプロではないので...

Page 41: スマホ時代のWeb制作アプローチ

���������������

学習者とともに作っていくコンセプト段階から学習者に聞いてみる学習者の日常やスマホの使い方などは必ずしも教師が十分に推測できるとは限らない

開発途中のレビューも学習者と行なうPCよりもカジュアルに試してもらいやすく使いにくさがフィジカルなレベルで見える

Page 42: スマホ時代のWeb制作アプローチ

���������������

重厚長大よりスモールスタート学習者の持つ多様なニーズには複数の教材で個別に応えていく方がいい数を重ねれば開発側の経験値も広がり深まる

小さな教材はスピーディーに作れるしダメだったときの対応もしやすいもう引き返せない!という展開が最も危険

Page 43: スマホ時代のWeb制作アプローチ

���������������

すべて自前でやろうと思わないスマホには競合アプリが次々出てくるAppleやFacebookが機能をリリースしたり...

汎用性の高い非教材アプリも多いPCが苦手な層も使いこなしているような印象

開発と並行して、スマホの学習環境を学生と共にチェックしていくことが大切

Page 44: スマホ時代のWeb制作アプローチ

���������������

写真を撮る

動画を撮る

音声で読み上げる

フラッシュカードを作る動画に字幕を付ける

手書きで文字入力する

写真でスライドショー

音声で入力する

4択問題を作る

簡単にできる!

Page 45: スマホ時代のWeb制作アプローチ

���������������

まとめ

Page 46: スマホ時代のWeb制作アプローチ

���������������

スマホ時代の教材設計とは?スマホは学習の選択肢を広げるが教材の内容と形の質も問われる時代スマホはパーソナルな道具だからこそ学習者個人のスタイルに合わせた教材を重厚長大な1つのプロジェクトより小さく数多い柔軟な開発を継続しよう

Page 47: スマホ時代のWeb制作アプローチ

���������������

学習者も学習環境も変わる

ならば教師も変わっていこう

きっと学びはもっと魅力的になる

Page 48: スマホ時代のWeb制作アプローチ

���������������

もっと学びを!

[email protected]@shokuto

ご意見お待ちしてます