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

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

発表者について すなみ ほくと 角南 北斗 Mail Blog Twitter hello@shokuto.com withcomputer.jp @shokuto 専門は日本語教育＋Webデザイン。 サイト構築や教材開発を行なうフリーランス。 プレゼンや飲食店開業支援の講師も担当。

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

スマホ時代 Web教材

スマホ時代 Web教材

スマホ、持ってる人！

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

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

スマホ時代 Web教材

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

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

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

教材の利用場面・利用機会が増え 学びにおける選択肢が増える。 自主的な学びの可能性が広がる。

教材利用の制約からの開放 PCは学校のPCルームにしかないし Web教材は授業でしか使わない 学習者がそれぞれの所持端末で 環境や場面に縛られず自由に使うように

教材利用機会の拡大 学びにおける選択肢の拡大 PC ルーム 授業 日常生活

教材制作者にとって この変化はハッピーだと思う。 でしょ？

でもさ、スマホでそのまま PCのサイトが見られるって わけじゃないんだぜ？

PCサイトをスマホで見ると... 表示がもたついてイライラ PC並の処理や回線速度をつい期待しがち 操作しづらくてイライラ 表示のたびに拡大作業が発生し面倒 ボタンが小さいと押しそこなってパニック 表示崩れや動かない機能もあったり

事例：日本語でケアナビ

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

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

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

スマホに合わせたバージョンは できるかぎり用意した方がいい

特に教材は！

なんで？

教材利用機会の拡大 学びにおける選択肢の拡大 PC ルーム 授業 日常生活 利用の強制力は弱まっていく

学習者が気に入らないと その教材は使ってもらえない。 逆に言えば、気に入られると どんどん使ってもらえる。 つまり自主的に学んでもらえる。

では、どんな教材が 学習者の支持を得られるのか？

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

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

1. 利用文脈に沿っている 具体的な利用場面をデザインする いつ・どこで・どんな目的で・どう使うもの？ これまでは「PCルーム＋授業」が前提に近かった 今はむしろそれ以外のシーンを主とすべき ながら利用を前提にする 教科書を読みながら、ノートを取りながら、 授業を聞きながら、電車を待ちながら・・・

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

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

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

2. 目的に対しシンプルである 多機能化はデメリットが多い 機能が増えると複雑化するため わかりにくさ・使いにくさを生みやすい 機能のカバーはシンプルな個の連携で スマホが様々な道具を入れる箱になるべきで、 単体のサイトが道具箱になろうとしてはダメ

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

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

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

ここまでは教材のカタチの話。 加えて、教材制作プロジェクトは どのように進めていくべきか？

教材制作の基本的姿勢 具体的な制作部分はプロの力を借りる インターフェースなど、スマホ対応の勘所は 制作側が押さえてくれる（はず...） 教材の位置付けや学習者の利用文脈は 教師側が示さないと反映されにくい Web制作のプロは教育のプロではないので...

学習者とともに作っていく コンセプト段階から学習者に聞いてみる 学習者の日常やスマホの使い方などは 必ずしも教師が十分に推測できるとは限らない 開発途中のレビューも学習者と行なう PCよりもカジュアルに試してもらいやすく 使いにくさがフィジカルなレベルで見える

重厚長大よりスモールスタート 学習者の持つ多様なニーズには 複数の教材で個別に応えていく方がいい 数を重ねれば開発側の経験値も広がり深まる 小さな教材はスピーディーに作れるし ダメだったときの対応もしやすい もう引き返せない！という展開が最も危険

すべて自前でやろうと思わない スマホには競合アプリが次々出てくる AppleやFacebookが機能をリリースしたり... 汎用性の高い非教材アプリも多い PCが苦手な層も使いこなしているような印象 開発と並行して、スマホの学習環境を 学生と共にチェックしていくことが大切

簡単にできる！ 音声で入力する 写真を撮る 音声で読み上げる 写真でスライドショー 動画に字幕を付ける フラッシュカードを作る 動画を撮る ４択問題を作る 手書きで文字入力する

まとめ

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

学習者も学習環境も変わる ならば教師も変わっていこう きっと学びはもっと魅力的になる

もっと学びを！ ご意見お待ちしてます hello@shokuto.com withcomputer.jp @shokuto