クリーム色の背景、色付き表示、高コントラスト、大きな文字のほうが読みやすいですか?配色と文字を選ぶと、すべてのページに一度で反映されます。

無料レッスン

誰にでも使えるAI機能にする

このレッスンのあとで: 事情の違う人にも読める返答かを、規則で確かめられる。

60分のレッスンコマンド7件AI コーディングエージェントのラボ:opencode でコードを説明・修正し、その結果を確かめる

読めない案内

市役所の手続き案内AIが、「後ほどパラメータのメニューをご利用ください」と答えました。日本語を学び始めたばかりの人や、急いでいる人には、意味が分かりません。

アクセスしやすさは、一部の人だけの話ではありません。疲れた人、画面が小さい人、慣れない人にも関わります。

このレッスンのゴール

メモ

事情の違う人にも読める返答かを、規則で確かめられる。

キーワード

ことばいみれい
アクセスしやすさ事情の違う人も使えること
やさしい日本語短い文とやさしい言葉で書くこと
難しい言葉多くの人に分かりにくい言葉ご利用
読む時間文章を読み終えるまでの秒数
別の入口チャット以外の使い方

学生が入力するセルは、このプレビューでは空白です。

規則にできる読みやすさ

「読みやすく」は気持ちの話に聞こえますが、数えられる規則にできます。一つの文の長さ、全体の長さ、難しい言葉の有無の三つです。

日本語は語の間に空白がないので、長さは文字数で数えます。読む時間は、1 分に読める文字数から求めます。

三つの返答の見たところ

返答見たところ
r1短い文が二つで、読みやすい
r2一文が長く、難しい言葉が二つある
r3文は短いが、全体が長い

学生が入力するセルは、このプレビューでは空白です。

別の入口と、見せ方

チャットだけが入口だと、打つのが苦手な人は使えません。選べるボタン、音声、前に使った例など、別の入口を用意します。

色だけで意味を伝えるのもやめましょう。高、中、低のように、言葉でも伝えます。画面の拡大でも崩れないようにします。

よくある間違い

注意

「アクセスしやすさは、障害のある人のための特別な機能だ」と考えがちです。実際には、急いでいる人や慣れない人も助かります。最初の設計に入れておくほうが、後から足すよりずっと安く済みます。

モデル用の補助を書く(1)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'const base = process.env.AI_URL || \"http://ai:4000\";' '// 応答に含まれるトークン数。なければ null。' 'function count(data, name) {' '  return data.usage && typeof data.usage[name] === \"number\" ? data.usage[name] : null;' '}' > model.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

モデル用の補助を書く(2)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'async function ask(messages, sample, max) {' '  try {' '    const res = await fetch(base + \"/v1/chat/completions\", {' '      method: \"POST\",' '      headers: { \"content-type\": \"application/json\", authorization: \"Bearer lab\" },' '      body: JSON.stringify({ model: \"lab\", messages: messages, max_tokens: max || 100 }),' '      signal: AbortSignal.timeout(30000),' '    });' '    if (res.ok === false) throw new Error(\"status \" + res.status);' '    const d = await res.json();' '    return { text: d.choices[0].message.content, inTokens: count(d, \"prompt_tokens\"), outTokens: count(d, \"completion_tokens\"), recorded: false };' '  } catch (error) {' '    console.log(\"記録済みサンプル: モデルが答えませんでした (\" + error.message + \")。\");' '    return { text: sample, inTokens: null, outTokens: null, recorded: true };' '  }' '}' 'module.exports = { ask };' >> model.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

読みやすさの確認を書く(1)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'const { ask } = require(\"./model\");' 'const RULES = { maxSentence: 20, maxChars: 45, jargon: [\"ご利用\", \"パラメータ\", \"後ほど\"], cpm: 300 };' 'const REPLIES = [' '  { id: \"r1\", text: \"緑のボタンを押します。次に日付を選びます。\" },' '  { id: \"r2\", text: \"後ほど、パラメータのメニューをご利用になり、確認の前に日付を変更してください。\" },' '  { id: \"r3\", text: \"ご注文の品は発送しました。金曜日に届く予定です。届かないときはご連絡ください。調べてご案内します。\" },' '];' > access.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

読みやすさの確認を書く(2)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'function chars(text) {' '  return text.split(\" \").join(\"\").length;' '}' 'function sentences(text) {' '  return text.split(\"?\").join(\"。\").split(\"。\").filter(function (s) { return s.length > 0; });' '}' >> access.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

読みやすさの確認を書く(3)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'function problems(text) {' '  const out = [];' '  const longest = Math.max.apply(null, sentences(text).map(function (s) { return chars(s); }));' '  if (longest > RULES.maxSentence) out.push(\"長い文\");' '  if (chars(text) > RULES.maxChars) out.push(\"長すぎる\");' '  const hard = RULES.jargon.filter(function (w) { return text.includes(w); });' '  if (hard.length > 0) out.push(\"難しい言葉\");' '  return out;' '}' >> access.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

読みやすさの確認を書く(4)

コマンド
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'async function main() {' '  for (const r of REPLIES) {' '    const secs = Math.ceil((chars(r.text) * 60) / RULES.cpm);' '    console.log(r.id + \" \" + chars(r.text) + \" 文字、\" + secs + \" 秒、\" + JSON.stringify(problems(r.text)));' '  }' '  const msg = \"次の文を、やさしい言葉で書き直してください。後ほど、パラメータのメニューをご利用になり、日付を変更してください。\";' '  const reply = await ask([{ role: \"user\", content: msg }], \"あとで、メニューを開いて日付を変えてください。\", 40);' '  console.log(\"やさしい文: \" + reply.text);' '}' 'main();' >> access.js"

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

返答の読みやすさを調べる

コマンド
docker exec -w /home/node/project agent node access.js

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

出力の例

行示していること
r1 21 文字、5 秒、[]短く、問題がない
r2 ... ["長い文","難しい言葉"]一文が長く、難しい言葉もある
r3 ... ["長すぎる"]全体が上限を超えている
やさしい文: ...モデルの一文。言葉は毎回違う

学生が入力するセルは、このプレビューでは空白です。

このラボとソースについて: AI コーディングエージェントのラボ:opencode でコードを説明・修正し、その結果を確かめる

授業で使いますか?このモジュールを学生に割り当てると、教員用ガイド、自動採点つきの課題、学生ごとのラボを使えます。