Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,814 views

Published on

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

  • Be the first to comment

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

  1. 1. スマホ時代のWeb教材制作アプローチすなみ ほくと角南 北斗 @shokuto
  2. 2. 発表者についてすなみ ほくと角南 北斗Mail hello@shokuto.comBlog withcomputer.jpTwitter @shokuto専門は日本語教育+Webデザイン。サイト構築や教材開発を行なうフリーランス。プレゼンや飲食店開業支援の講師も担当。
  3. 3. これまでの主な発表題目ひとつ下のプレゼンClient 2.0 のためのディレクションを考える今日からはじめる「じぶんブランディング」伝わるプレゼンの組み立て方を考えるお料理のコツと情報教育日記じゃないのよブログは勝たないプレゼンテーションの学びかた名刺デザインで学ぶプレゼンテーション
  4. 4. スマホ時代 Web教材
  5. 5. スマホ時代 Web教材
  6. 6. スマホ、持ってる人!
  7. 7. スマホってどういうイメージ?ほとんどの場面でPCの代替になる小さなPCともいうべき何でもOK感       +ケータイのような気軽さといつでもどこでもつながる感
  8. 8. スマホの急速な普及携帯電話の新機種は軒並みスマホに学生のスマホ率は上昇の一途 学生は年度ごとに入れ替わっていくので 教師と違い世の状況が反映されやすい
  9. 9. スマホ時代 Web教材
  10. 10. 教材制作に携わってる人!
  11. 11. 教材の違い:利用想定授業・学内専用で使わせる教材と広く一般公開し自由に使ってもらう教材 発表者が後者を手がけることが多いので 今回は後者の要素にフォーカスします Webサイト型の教材だけでなく アプリなどにも通じる、考え方の話です
  12. 12. スマホの普及が教材に与える影響
  13. 13. 教材の利用場面・利用機会が増え 学びにおける選択肢が増える。自主的な学びの可能性が広がる。
  14. 14. 教材利用の制約からの開放PCは学校のPCルームにしかないしWeb教材は授業でしか使わない学習者がそれぞれの所持端末で環境や場面に縛られず自由に使うように
  15. 15. 教材利用機会の拡大 学びにおける選択肢の拡大 PCルーム 授業 日常生活
  16. 16. 教材制作者にとってこの変化はハッピーだと思う。 でしょ?
  17. 17. でもさ、スマホでそのままPCのサイトが見られるってわけじゃないんだぜ?
  18. 18. PCサイトをスマホで見ると...表示がもたついてイライラ PC並の処理や回線速度をつい期待しがち操作しづらくてイライラ 表示のたびに拡大作業が発生し面倒 ボタンが小さいと押しそこなってパニック表示崩れや動かない機能もあったり
  19. 19. 事例:日本語でケアナビ
  20. 20. PC用そのままだと表示直後は全体が出る。小さすぎて見えないので指で拡大操作が必要。
  21. 21. これをスマホ用に作ると・・
  22. 22. スマートフォン向けにゼロから画面を再設計。やりたいことをすぐに、快適にできるように。
  23. 23. スマホに合わせたバージョンはできるかぎり用意した方がいい
  24. 24. 特に教材は!
  25. 25. なんで?
  26. 26. 教材利用機会の拡大 学びにおける選択肢の拡大 PCルーム 授業 日常生活 利用の強制力は弱まっていく
  27. 27. 学習者が気に入らないとその教材は使ってもらえない。 逆に言えば、気に入られると どんどん使ってもらえる。つまり自主的に学んでもらえる。
  28. 28. では、どんな教材が学習者の支持を得られるのか?
  29. 29. 学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている
  30. 30. 学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている
  31. 31. 1. 利用文脈に沿っている具体的な利用場面をデザインする いつ・どこで・どんな目的で・どう使うもの? これまでは「PCルーム+授業」が前提に近かった 今はむしろそれ以外のシーンを主とすべきながら利用を前提にする 教科書を読みながら、ノートを取りながら、 授業を聞きながら、電車を待ちながら・・・
  32. 32. 1. 利用文脈に沿っている学習者視点に立った文脈設定を 授業以外の学習者の日常の学びや本音は 教師も意外に知らなかったりするもの わからなければ学習者に聞く・調べる・想像する 教材提供者側の都合や思いを押し付けない
  33. 33. 学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている
  34. 34. 2. 目的に対しシンプルであるいま必要だからスマホを取り出し、アプリやサイトのアイコンをタッチ。ここで今すぐできないと意味がない。 利用目的にダイレクトに応える教材を PCと違ってのんびりやらない 迷わず操作でき、結果もすぐ得られるように
  35. 35. 2. 目的に対しシンプルである多機能化はデメリットが多い 機能が増えると複雑化するため わかりにくさ・使いにくさを生みやすい機能のカバーはシンプルな個の連携で スマホが様々な道具を入れる箱になるべきで、 単体のサイトが道具箱になろうとしてはダメ
  36. 36. 学習者に評価されるポイント1. 利用文脈に沿っている2. 目的に対しシンプルである3. 個人のニーズに合っている
  37. 37. 3. 個人のニーズに合っている方向性や利用スタイルを絞る 様々な学習ニーズやスタイルに対応すると どう使っていいか謎のサイトになってしまう こう使ってほしい、という色を打ち出すこと 学習者は自分に合うものを使いたい。 教材に自分を合わせるようなことはしない。 結果、選択肢がないと使われない。
  38. 38. 3. 個人のニーズに合っているニッチでパーソナルな切り口がいい 一般的・汎用的なものはすでに出揃っている? ニッチな切り口や特徴があるものだからこそ 自分にピッタリはまれば強い愛着も生まれる ホーム画面にアイコンを置いてもらえるように
  39. 39. ここまでは教材のカタチの話。加えて、教材制作プロジェクトはどのように進めていくべきか?
  40. 40. 教材制作の基本的姿勢具体的な制作部分はプロの力を借りる インターフェースなど、スマホ対応の勘所は 制作側が押さえてくれる(はず...)教材の位置付けや学習者の利用文脈は教師側が示さないと反映されにくい Web制作のプロは教育のプロではないので...
  41. 41. 学習者とともに作っていくコンセプト段階から学習者に聞いてみる 学習者の日常やスマホの使い方などは 必ずしも教師が十分に推測できるとは限らない開発途中のレビューも学習者と行なう PCよりもカジュアルに試してもらいやすく 使いにくさがフィジカルなレベルで見える
  42. 42. 重厚長大よりスモールスタート学習者の持つ多様なニーズには複数の教材で個別に応えていく方がいい 数を重ねれば開発側の経験値も広がり深まる小さな教材はスピーディーに作れるしダメだったときの対応もしやすい もう引き返せない!という展開が最も危険
  43. 43. すべて自前でやろうと思わないスマホには競合アプリが次々出てくる AppleやFacebookが機能をリリースしたり...汎用性の高い非教材アプリも多い PCが苦手な層も使いこなしているような印象開発と並行して、スマホの学習環境を学生と共にチェックしていくことが大切
  44. 44. 簡単にできる! 音声で入力する 写真を撮る 音声で読み上げる 写真でスライドショー 動画に字幕を付ける フラッシュカードを作る 動画を撮る 4択問題を作る 手書きで文字入力する
  45. 45. まとめ
  46. 46. スマホ時代の教材設計とは?スマホは学習の選択肢を広げるが教材の内容と形の質も問われる時代スマホはパーソナルな道具だからこそ学習者個人のスタイルに合わせた教材を重厚長大な1つのプロジェクトより小さく数多い柔軟な開発を継続しよう
  47. 47. 学習者も学習環境も変わる ならば教師も変わっていこうきっと学びはもっと魅力的になる
  48. 48. もっと学びを! ご意見お待ちしてます hello@shokuto.com withcomputer.jp @shokuto

×