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

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

自己紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• http://mongolia.seesaa.net/

ブログ入門ルート（１） まずは面白い記事を見つける ブログ単位で探すのは最初は大変 記事単位ならチェックできる量は増える 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を主体的に 活用することを願っています。

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