---
title: スマホ時代のWeb制作アプローチ
tags: 
author: [Hokuto SUNAMI](https://convert.docswell.com/user/shokuto)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V7NMYDX2E8.jpg?width=480
description: 2012 PCカンファレンス ＠京都大 の分科会での角南の発表スライド。
published: August 07, 12
canonical: https://convert.docswell.com/s/shokuto/K6YNGL-2012pcc
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V7NMYDX2E8.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YJ9NPG8DJ3.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJ8KDV85ED.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJLZM5R37R.jpg)

スマホ時代
Web教材


# Page. 5

![Page Image](https://bcdn.docswell.com/page/47MVY3RM7W.jpg)

スマホ時代
Web教材


# Page. 6

![Page Image](https://bcdn.docswell.com/page/P7R29QRLJ9.jpg)

スマホ、持ってる人！


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PJXDQ5Y6EX.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/3JKX963GED.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LE35W6G5J5.jpg)

スマホ時代
Web教材


# Page. 10

![Page Image](https://bcdn.docswell.com/page/8EDDKV1YEG.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/V7PXKVQ2E8.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/2JVLVZ5X7Q.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/5EGXL46RJL.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4JQ8YG4Y7P.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/K742W5QZJ1.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/LJ1MYWPDEG.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJW3G628J2.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4EZVLYD9J3.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/Y765WD1DEV.jpg)

事例：日本語でケアナビ


# Page. 20

![Page Image](https://bcdn.docswell.com/page/G75YM34874.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/9J2G9ZVVJR.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/DEYV4R3QEM.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/VJNMYDV278.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/YE9NPG6DE3.jpg)

特に教材は！


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GE8KDVZ57D.jpg)

なんで？


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LELZM5D3JR.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4JMVY3PMJW.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/PJR29Q1LE9.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/PEXDQ5G67X.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/3EKX964G7D.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/L735W6L5E5.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/87DDKVNY7G.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/VJPXKV5278.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/2EVLVZPXJQ.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/57GXL4PREL.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4EQ8YG2YJP.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/KJ42W5LZE1.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/LE1MYWLD7G.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GEW3G6V8E2.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/47ZVLY49E3.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/YJ65WD3D7V.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GJ5YM3L8J4.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/LE35W6LGJ5.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/8EDDKVNNEG.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/V7PXKV5NE8.jpg)

まとめ


# Page. 46

![Page Image](https://bcdn.docswell.com/page/2JVLVZPY7Q.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/5EGXL4PWJL.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/4JQ8YG2Q7P.jpg)

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


