1. Webデザインの実践プロセス
日 本 語 教師ができること
すなみ ほくと
角南 北 斗
hello@shokuto.com
2009.02.23 @ Tokyo University of Foreign Studies

2. 自己紹介

3. PC＆ネット歴
1998年のiMac購入が契機
書籍で学習
趣味で日記サイトを制作

4. 日本語教育歴
大阪大で修士課程修了
日本語学校で非常勤（２年半）
国際交流基金で制作スタッフ
授業補助や教材制作などを中心に

5. 転機１：制作現場で
教育機関のサイトを制作
ディレクターの必要性を実感
関係者間の共通言語・思想がない
ロスが多く双方がストレスを抱える

6. 転機２：教育現場で
情報教育系の学会に参加
迷走する学校現場に強い危機感
資格・オペレーション偏重
教師に知識＆自信＆信念もない

7. 立ち位置のシフト
Webデザイナーとして
ITに積極的に関わるポジションへ
一応１年は専門学校に在籍
希望する活動形態＝フリーしかなかった

8. 活動１：サイト制作
情報提供系
大学 / 日本語学校 / 研究会 / 個人サイト...
e-Learning
コースウェア / 教育・学習用ツール...

9. 活動２：IT環境整備
教材開発
テキスト作成 / 音声教材 / 映像編集
情報管理
データベース作り / マニュアル作成

10. 活動３：教育への提案
プレゼンテーション
日本語教育 / 情報教育 / Webデザイン
講師・コンサルティング
Web＆IT活用 / プレゼンテーションなど
昨年から調理師専門学校にも勤務

11. デザインの実践とは

12. デザインが良い
デザインが悪い

13. デザインが良い
デザインが悪い
デザインとは何を指すのか？

14. デザインを含む言葉を列挙してみる

15. デ ザイ ン ＝ 設 計

16. 設計が良い
設計が悪い

17. 設計が良い
設計が悪い
決して視覚的なことや
表層だけを指すのではない

18. Webデザインの設計対象
Webサイトの機能や形状
サイトに関わる人たちに与える
知識・感覚・感情
それに伴う生活や社会の変化

19. 具体的には・・・
デザインのフロー
Webサイト
!表現
!中身
!機能
!公開環境

20. 具体的には・・・ 目的
デザインのフロー 目標
戦略
Webサイト スケジュール
!表現 ＋ スタッフ
!中身
!機能 環境
!公開環境 広報
運営
評価

21. デザインは誰の仕事？
デザインに自覚的になる
広義のデザインは、決して
デザイナーだけのものではない
デザイナーは何をデザインする？
デザイナー以外の人（つまり教師）が
何をデザインすべきなのかも明確になる

22. デザイナーに期待できるもの
絶対的な線引きはない
その人の考え方や力量やケースによる
モノしか見ない人だっている
（注）角南は出来るだけ突っ込む方です
暗黙の期待は失敗のもと

23. 今日の目標

24. デザイナーと協力してWebを作る際
何をどんなふうにデザインしていくべきか
教師が自信を持って考えられるようになる
そのきっかけをつかむ

25. 多くの教育系Webコンテンツや
e-Learningがうまくいっていない理由は
教師側の判断にも原因があるから

26. デザインの目的

27. 事業のはじまり
外的要因
外圧で取り組まざるを得なくなった
内的要因
毎日の授業で苦労していることがある
何をすべきなのかを明確にする

28. デザインの目的を考える
誰がどうなれば
私はハッピーなんだろう？

29. デザインの目的
誰（対象）と
どうなる（変化後の姿）を
本音かつ具体的にイメージする
今後のすべての判断基準に
複数ある場合は優先順位を

30. ３つの視点

31. ３つの視点
User
Client Media

32. User: 利用者をイメージする
どんな人たちが
スキル・考え方・属性・生活スタイル
どんな現状に置かれており
何を望んでいるのか
User
それが本音であることが大切
Client Media

33. User: 都合よく想像しない
調査結果をもとに考える
アンケート・インタビュー・観察
自分の経験もあわせる
利用者像をでっち上げない
User
作りたいものに合わせて
都合良くイメージしてはダメ Client Media

34. Client: 自分に何ができるか
教師という職業人の強みや
自分が得意とする分野
どんなコンテンツを持っているか
これから作り出せるか User
他より有利な条件
Client Media
時間とか資金とか知名度とか

35. Client: 自分に何が足りないか
専門家の協力が必要な部分を
しっかりと見極める
内部リソースか外部リソースか
どの視点で評価されたいか
User
他より不利な条件
時間とか資金とか知名度とか Client Media

36. Media: Webの特徴を知る
なぜWebをメディアとするのか
作るものはWebの強みを生かしたものを
すぐにできること できないこと
・
Web的な感覚を理解する
User
Client Media

37. Media: Web的な感覚の会得方法
とにかく知ることを楽しむ
知ることにかかるコストを惜しまない
開発者である前に利用者であれ
理屈をこねるよりやってみよ
何でも自分で確かめる User
最終判断は教師に求められる Client Media

38. 三大ポイントを押さえる
デザインの目的
誰がどうなればハッピーか？を自問自答
デザインのフロー
どの部分のデザインを誰が行うかを明確に
デザインの視点
User・Client・Mediaの３つをまず考える

39. 事例紹介

40. 事例１：e-Learning
日本語でケアナビ
http://nihongodecarenavi.jp

41. 日本語でケアナビについて
看護・介護に携わる日本語学習者
を対象にした学習ツール
紙媒体にない方法で、言葉の意味
や用法を学ぶことができる
2005年から続くプロジェクト

42. デザインの目的
日本での仕事や生活場面での
コミュニケーションを
円滑にするのに役立ててもらう

43. ３つの視点：User
使える日本語を学びたい
コンピューターの操作は不慣れ
個人というよりみんなで使う
楽しめることが大切

44. ３つの視点：Client
スタッフに看護の専門家はいない
外部協力者の力を積極的に借りるべき
自身の家族の経験を生かす
日本語教師としての専門性で勝負
データを１から作る時間はある

45. ３つの視点：Media
紙媒体にはないWebの長所を
使いやすさをとにかく追求する
既製品では実現不可＝根本から設計
ツールとしての汎用性を高める
特定コース用ではない道具としての柔軟性

46. 目的
教師側
目標
Webデザイナー側
戦略
Webサイト スケジュール
!表現 ＋ スタッフ
!中身
!機能 環境
!公開環境 広報
運営
評価

47. デザインのフロー
使い勝手に対するこだわり
見た目も機能もシンプルでブレのないものを
コミュニケーションの促進
気付きは何でも共有する・記録する
データの管理と作業環境の向上
大量のデータを安全かつ効率的に作成

48. e-Learning系のコツ
学習については教師の仕事
学習をどう定義するのか、学習者とどんな関係
を結ぶのかは、教師が責任を持って判断
DB作りは技術者とよく相談
フォーマットや入力環境は技術面のサポートに
よってロスを大幅に減らせる

49. 事例２：コースサポートツール
Photo Album

50. Photo Albumとは
日本語コースの学習者が
イベント等で撮った写真を
みんなで共有したいという要望
授業や学習とは直接関係ないが
毎年対応が望まれている要素

51. デザインの目的
日本語コース参加者が
自分たちが撮った写真を
自由に共有し楽しんでもらう

52. ３つの視点：User
仲間で写真をやり取りしたい
コンピュータースキルはまちまち
とにかく手軽に

53. ３つの視点：Client
教師は技術面は不慣れ
極力手間はかけたくない

54. ３つの視点：Media
アップロードは誰がする？
枚数やファイルサイズの制限は？
無制限だとサーバーの容量が足りない
無料Webサービスを把握
手動で作成 → BBS → Gmail → Flickr

55. 目的
教師がやること
目標
角南のサポート
戦略
Webサイト スケジュール
!表現 ＋ スタッフ
!中身
!機能 環境
!公開環境 広報
運営
評価

56. 目的
教師がやること
目標
角南のサポート
戦略
Webサイト スケジュール
!表現 ＋ スタッフ
!中身
!機能 環境
!公開環境 広報
運営
評価

57. コースサポートツールのコツ
機能面での妥協点を探る
最近は無料のWebサービスでもかなり大丈夫
利用者のITリテラシー次第
ディレクションの必要度合
Webサービスに詳しい教師がいるといい
自分たちでノウハウを溜めていく意識を

58. デザインを支援する
無料Webサービス

59. コミュニケーション系
Skype
導入が楽・自動的に起動・邪魔にならない
クローズドなチャットルーム・ログ保存
簡易メーリングリストで情報共有
離れた場所・不定期出勤のパートナーと
ちょっとした会話の議事録に
サイズを問わないファイル送信

60. 記録系
Skype
Googleドキュメント
Docs：共有ドキュメントでぺーパーレス
SpreadSheets：予定表や工程表に
Writeboard
関係者でつくる社内向け告知ボード

61. ファイル管理系
Dropbox
複数人でのデータの非同時編集に便利
ファイルは常にローカルにあるので安心
差分アーカイブで安全対策
一般公開ファイルの置き場所としても
簡単に導入・容量も通常用途なら十分

62. スライド作成・共有系
Googleドキュメント
Presentation：グループ発表用に共同編集
Slideshare
PowerPointやPDFファイルをアップできる
ブログに埋め込み発表資料の公開や共有に

63. 写真編集・共有系
Flickr
タグを付ければコミュニティ用に使える
スライドショーなど見せ方もリッチに
同種サービスは「フォト蔵」など
Picasa
ローカルアプリ（Windows専用）
写真の加工作業が直感的で美しい

64. 動画共有系
YouTube
インフラとして非常に手軽
三洋電機「Xacti」などがあるとさらに手軽
字幕.in
動画に字幕をつけられるサービス
最近はサービスの安定度がちょっと？
角川「kadoTV」あたりも今後注目

65. 音声公開系
ケロログ
ボイスブログを音声教材データベースに
電話録音・音声編集など機能が充実
音声再生インターフェースも使いやすい

66. 無料Webサービス
活用までの道筋

67. Webサービス活用の肝
まずはWebメールの取得
Gmailが容量や使い勝手の面でオススメ
とにかく使ってみる
使い方を解説した記事を探す
個人のブログやIT系ニュースサイトなど
自分なりの使い方を考えてみる

68. ブログを使いこなす
日記だと思ってませんか？
ブログはコンテンツを入れる箱
ブログに入れにくいコンテンツは実は少ない
情報公開・告知・共有のための
あなただけのチャンネル

69. ブログという箱のメリット
自分が作ったものをアーカイブし
ておく場所になる
Webサービスと連携するとさらに柔軟に
コンテンツの追加が簡単なので
運営時は技術者の協力が不要
カテゴリ分けや検索機能がある

70. ブログを活用した事例（１）
研修の情報告知ブログ
研修関係者の限定利用
提出書類ファイルのダウンロードリンク
イベント情報やお知らせの告知メディア
来日前から情報提供ができる
教師が運営（一度も技術的な依頼は発生せず）

71. ブログを活用した事例（２）
むらログ（http://mongolia.seesaa.net/）
日本語教師である村上吉文さんのブログ
副題「日本語教師の仕事術」
Webサービスを上手に活用している好例

72. ブログ入門ルート（１）
まずは面白い記事を見つける
ブログ単位で探すのは最初は大変
記事単位ならチェックできる量は増える
SBM(Social BookMark)に登録
ブックマーク（お気に入り）共有サービス
ここでは「はてなブックマーク」を紹介
＊角南はDeliciousも使っています

73. ブログ入門ルート（２）
人気エントリーをチェック
はてブのトップページにあるコーナー
見出しから面白そうな記事を見つけて読む
付けられたタグで内容のアタリをつける
被ブクマ数とコメントで反応具合がわかる

74. ブログ入門ルート（３）
読んだ記事を「はてブ！」する
読んだらとにかく登録していく
記事中のリンク先なども「はてブ！」
タグをつけてフォクソノミーを実感
感想をコメントとしてつけてみる

75. ブログ入門ルート（４）
自分のブックマークを活用する
自分が読んできてた記事を概観する
必要なときは検索できる
他人のブックマークを活用する
知り合い同士でURLを教え合う
知り合いのブックマークをチェックする
他のユーザーのブックマークを見てみる

76. ブログ入門ルート（５）
お気に入りブログを見つける
記事を読んだ際に他の記事も読んでみる
はてブから何度か来たブログが出てくる
ブログ自体を定期的に確認したくなる

77. ブログ入門ルート（６）
RSSリーダーに挑戦する
RSS：ブログごとの更新状況のデータ
RSSリーダー：RSSを取得して一覧表示する
Google、livedoor、gooなど多数
はてブ自体もRSSを提供している

78. ブログに親しんだら・・
自分でも始めてみる
日記という既成概念を外せば可能性は広がる
みんなに告知して張り合いを出す
運営側の視点でブログを見る
Webサービスのブログパーツも使ってみる
技術的な問題の解決もブログから

79. 読み物からの理解も
滑川海彦「ソーシャル・ウェブ入門̶
Google、mixi、ブログ…新しいWeb世界
の歩き方」
深見嘉明「ウェブは菩薩である」
梅田望夫「ウェブ時代をゆく ─いかに働
き、いかに学ぶか」

80. まとめ

81. デザインを捉えなおす
デザインとは設計
職業的デザイナーだけが
デザインすればいいのではない
教育的コンテンツは
教師がいかに関われるかが肝

82. 三大ポイントを押さえる
デザインの目的
誰がどうなればハッピーか？を自問自答
デザインのフロー
どの部分のデザインを誰が行うかを明確に
デザインの視点
User・Client・Mediaの３つをまず考える

83. Web的な感覚を身につける
無料Webサービスが充実
利用者としてまず親しむ
ブログの理解はSBMから
ブログを使って発信していく

84. おわりに
WebやITを使うための敷居は
毎年少しずつ下がってきている
多くの人にとってプラスに働く
必要なのは好奇心と少しの勇気

85. ひとりでも多くの日本語教師が
WebやITを主体的に
活用することを願っています。

86. ご静聴ありがとうございました