Webデザインの実践プロセス日本語教師ができること

2009.02.23 @ Tokyo University of Foreign Studies

角南 北斗すなみ ほくと

hello@shokuto.com

自己紹介

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

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

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

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

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

活動１：サイト制作情報提供系大学 / 日本語学校 / 研究会 / 個人サイト...

e-Learningコースウェア / 教育・学習用ツール...

活動２：IT環境整備教材開発テキスト作成 / 音声教材 / 映像編集

情報管理データベース作り / マニュアル作成

活動３：教育への提案プレゼンテーション日本語教育 / 情報教育 / Webデザイン

講師・コンサルティングWeb＆IT活用 / プレゼンテーションなど昨年から調理師専門学校にも勤務

デザインの実践とは

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

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

デザインとは何を指すのか？

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

デザイン＝設計

設計が良い設計が悪い

設計が良い設計が悪い

決して視覚的なことや表層だけを指すのではない

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

Webサイト

具体的には・・・デザインのフロー

!表現!中身!機能!公開環境

Webサイト

具体的には・・・デザインのフロー

!表現!中身!機能!公開環境

目的目標戦略

スケジュールスタッフ環境広報運営評価

＋

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

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

暗黙の期待は失敗のもと

今日の目標

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

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

デザインの目的

事業のはじまり外的要因外圧で取り組まざるを得なくなった

内的要因毎日の授業で苦労していることがある

何をすべきなのかを明確にする

デザインの目的を考える誰がどうなれば

私はハッピーなんだろう？

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

３つの視点

User

Client Media

３つの視点

User: 利用者をイメージするどんな人たちがスキル・考え方・属性・生活スタイル

どんな現状に置かれており何を望んでいるのかそれが本音であることが大切

User

Client Media

User: 都合よく想像しない調査結果をもとに考えるアンケート・インタビュー・観察

自分の経験もあわせる利用者像をでっち上げない作りたいものに合わせて都合良くイメージしてはダメ

User

Client Media

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

User

Client Media

Client: 自分に何が足りないか専門家の協力が必要な部分をしっかりと見極める内部リソースか外部リソースか

どの視点で評価されたいか他より不利な条件時間とか資金とか知名度とか

User

Client Media

Media: Webの特徴を知るなぜWebをメディアとするのか作るものはWebの強みを生かしたものを

すぐにできること・できないことWeb的な感覚を理解する

User

Client Media

Media: Web的な感覚の会得方法

とにかく知ることを楽しむ知ることにかかるコストを惜しまない

開発者である前に利用者であれ理屈をこねるよりやってみよ

何でも自分で確かめる最終判断は教師に求められる

User

Client Media

三大ポイントを押さえるデザインの目的誰がどうなればハッピーか？を自問自答

デザインのフローどの部分のデザインを誰が行うかを明確に

デザインの視点User・Client・Mediaの３つをまず考える

事例紹介

日本語でケアナビ事例１：e-Learning

http://nihongodecarenavi.jp

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

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

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

３つの視点：Clientスタッフに看護の専門家はいない外部協力者の力を積極的に借りるべき自身の家族の経験を生かす

日本語教師としての専門性で勝負データを１から作る時間はある

３つの視点：Media紙媒体にはないWebの長所を使いやすさをとにかく追求する既製品では実現不可＝根本から設計

ツールとしての汎用性を高める特定コース用ではない道具としての柔軟性

!表現!中身!機能!公開環境

目的目標戦略

スケジュールスタッフ環境広報運営評価

Webサイト＋

教師側Webデザイナー側

デザインのフロー使い勝手に対するこだわり見た目も機能もシンプルでブレのないものを

コミュニケーションの促進気付きは何でも共有する・記録する

データの管理と作業環境の向上大量のデータを安全かつ効率的に作成

e-Learning系のコツ学習については教師の仕事学習をどう定義するのか、学習者とどんな関係を結ぶのかは、教師が責任を持って判断

DB作りは技術者とよく相談フォーマットや入力環境は技術面のサポートによってロスを大幅に減らせる

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

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

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

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

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

３つの視点：Mediaアップロードは誰がする？枚数やファイルサイズの制限は？無制限だとサーバーの容量が足りない

無料Webサービスを把握手動で作成 → BBS → Gmail → Flickr

!表現!中身!機能!公開環境

目的目標戦略

スケジュールスタッフ環境広報運営評価

Webサイト＋

教師がやること角南のサポート

!表現!中身!機能!公開環境

目的目標戦略

スケジュールスタッフ環境広報運営評価

Webサイト＋

教師がやること角南のサポート

コースサポートツールのコツ機能面での妥協点を探る最近は無料のWebサービスでもかなり大丈夫利用者のITリテラシー次第

ディレクションの必要度合Webサービスに詳しい教師がいるといい自分たちでノウハウを溜めていく意識を

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

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

記録系SkypeGoogleドキュメントDocs：共有ドキュメントでぺーパーレスSpreadSheets：予定表や工程表に

Writeboard関係者でつくる社内向け告知ボード

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

スライド作成・共有系GoogleドキュメントPresentation：グループ発表用に共同編集

SlidesharePowerPointやPDFファイルをアップできるブログに埋め込み発表資料の公開や共有に

写真編集・共有系Flickrタグを付ければコミュニティ用に使えるスライドショーなど見せ方もリッチに同種サービスは「フォト蔵」など

Picasaローカルアプリ（Windows専用）写真の加工作業が直感的で美しい

動画共有系YouTubeインフラとして非常に手軽三洋電機「Xacti」などがあるとさらに手軽

字幕.in動画に字幕をつけられるサービス最近はサービスの安定度がちょっと？角川「kadoTV」あたりも今後注目

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

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

Webサービス活用の肝まずはWebメールの取得Gmailが容量や使い勝手の面でオススメ

とにかく使ってみる使い方を解説した記事を探す個人のブログやIT系ニュースサイトなど

自分なりの使い方を考えてみる

ブログを使いこなす日記だと思ってませんか？ブログはコンテンツを入れる箱ブログに入れにくいコンテンツは実は少ない

情報公開・告知・共有のためのあなただけのチャンネル

ブログという箱のメリット自分が作ったものをアーカイブしておく場所になるWebサービスと連携するとさらに柔軟に

コンテンツの追加が簡単なので運営時は技術者の協力が不要カテゴリ分けや検索機能がある

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

ブログを活用した事例（２）むらログ（http://mongolia.seesaa.net/）

日本語教師である村上吉文さんのブログ副題「日本語教師の仕事術」Webサービスを上手に活用している好例

ブログ入門ルート（１）まずは面白い記事を見つけるブログ単位で探すのは最初は大変記事単位ならチェックできる量は増える

SBM(Social BookMark)に登録ブックマーク（お気に入り）共有サービスここでは「はてなブックマーク」を紹介＊角南はDeliciousも使っています

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

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

ブログ入門ルート（４）自分のブックマークを活用する自分が読んできてた記事を概観する必要なときは検索できる

他人のブックマークを活用する知り合い同士でURLを教え合う知り合いのブックマークをチェックする他のユーザーのブックマークを見てみる

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

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

ブログに親しんだら・・自分でも始めてみる日記という既成概念を外せば可能性は広がるみんなに告知して張り合いを出す

運営側の視点でブログを見るWebサービスのブログパーツも使ってみる技術的な問題の解決もブログから

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

まとめ

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

三大ポイントを押さえるデザインの目的誰がどうなればハッピーか？を自問自答

デザインのフローどの部分のデザインを誰が行うかを明確に

デザインの視点User・Client・Mediaの３つをまず考える

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

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

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

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