技能五輪国際大会で通訳者と考えた非エンジニアのためのAI資料作りのノウハウ

Transcript

1. 技能五輪国際大会で通訳者と考えた 非エンジニアのための AI資料作りのノウハウ リテールアプリ共創部 戸田駿太 2024/11/26
2. 戸田 駿太 2024/4 (新卒入社) リテールアプリ共創部 Claude 3.5 sonnet 第47回技能五輪国際大会 Web Technologies 出場 第60,61回技能五輪全国大会 ウェブデザイン職種 金賞 名前 入社時期 所属 好きなAIアシスタント 大会の経験
3. 今回の目的 1. 技能五輪について 2. 通訳者について 3. 資料を作ってみる 4. 翻訳について 5. まとめ 6.
4. 非エンジニアに向けての説明資料作り 1. 英語の資料の翻訳方法 2. 実際にスライドを作るときに使ったプロンプト付き！ その回答を元にスライドの文章を記載しています
6. 国際大会は25歳まで(職種によって違う) 全国大会は23歳まで 若年者ものづくり競技会は20歳まで 若手技能者の競技を通じて技能を広め る唯一の全国レベルの技能競技大会 技能五輪国際大会の職種一覧 技能五輪国際大会(WorldSkills) 1. 技能五輪全国大会 2. 若年者ものづくり競技会 3. 条件 概要 1. 産業機械 2. 情報ネットワーク施工 3. 製造チームチャレンジ 4. メカトロニクス 5. 機械製図CAD 6. CNC旋盤 7. CNCフライス盤 8. モバイルアプリケーション開発 9. 業務用ITソフトウェア ・ソリューションズ 10. 溶接 11. タイル張り 12. 自動車板金 13. 航空機整備 14. 配管 15. 電子機器組立て 16. ウェブデザイン 17. 電工 18. 工場電気設備 19. れんが積み 20. 左官 21. 広告美術 22. 自律移動ロボット（仮称） 23. 家具 24. 建具 25. 建築大工 26. 貴金属装身具 27. フラワー装飾 28. 美容/理容 29. ビューティーセラピー 30. 洋裁 31. 洋菓子製造 32. 自動車工 33. 西洋料理 34. レストランサービス 35. 車体塗装 36. 造園 37. 冷凍空調技術 38. ITネットワークシステム管理 39. グラフィックデザイン 40. 看護/介護 41. 構造物鉄工 42. ビジュアル販売促進 43. 建設コンクリート施工 44. パン製造 45. インダストリー4.0 46. 重機メンテナンス 47. 3Dデジタルゲームアート 48. 物流貨物輸送（仮称） 49. 化学実験技術 50. クラウドコンピューティング 51. サイバーセキュリティ 52. 水技術 53. ホテルレセプション 54. 3Dプリント 55. デジタルコンストラクション 56. 工業デザイン技術 57. 光電子技術 58. 再生可能エネルギー 59. ロボットシステムインテグレーション
7. 競技日数: 4日間 課題数: 7つ 各課題の作業時間: 3時間 インターネットの使用禁止(オフラインドキュメントあり) 1. 使用ツールの制限 2. VSCode(プラグインの制限あり) a. PHP Storm b. Postman etc c. フレームワーク・ライブラリの制限 3. React a. Laravel b. Bootstrap etc c. 競技条件 概要
8. 5. フォトスライドショー 画像を読み込み、フォトスライドショーを作る a. 7種類のアニメーションを実装 b. 6. ウェブサイト構築 リヨンを訪れる観光客に向けてHTML, CSSでウ ェブサイトを作成する a. レイアウトや画像などは全て配布される b. 7. チームプロジェクト(交流目的なので全員同じ点数) リ ヨ ン の レ ス ト ラ ン 情 報 を 使 用 し て チ ー ム で ア プリを作る a. デ ー タ の 配 布 な ど は な く チ ー ム で ア プ リ の 内 容 を考え設計をして発表する b. 今 回 は 日 本 🇯🇵、 コ ロ ン ビ ア 🇨🇴、 ア ゼ ル バ イ ジ ャ ン 🇦🇿の3人チームだった c. 1. スピードテスト HTML, CSS, JS, PHPの9個の問題を解く a. 2. バックエンド 製品管理ページ、APIの作成 a. DB設計 b. 3. 自作CMS テキストorマークダウンで書かれた記事のフ ァイルを読み取り表示する a. ライブラリを使えないためフォーマッターな ど全て自前実装 b. 4. フロントエンド 配 布 さ れ る API を 使 用 し て モ バ イ ル ウ ェ ブ ア プリを作成する a. 駐車場の空き状況、イベント、天気など確認 できる b.
9. 開会式&閉会式
10. 交流
12. 英語で説明される内容を通訳する 1. 課題説明の通訳 a. 海外選手との交流のフォロー 2. 英語の課題内容を翻訳する 3. 決まったフォーマット a.
13. PCの知識 1. Microsoft Officeの操作ができる a. ウェブアプリに関する知識 2. ほとんどない a.
14. 競技内容 1. 用語 2. 通訳者の作業内容 3.
15. わかりやすい言葉での説明 1. 段階的な説明と理解度の確認 2. 具体例を用いた実践的な説明 3. プロンプト 以下の通訳者にウェブアプリや技能五輪国際大会を説明をしたい ときに必要なことを3つ挙げてください。 IT知識が豊富ではない人 ウェブアプリに関する知識はなし
17. 課題ごとに課題内容を要約 通訳者のレベルに合った表現 採点内容 用語の解説 概要、機能、ポイントなどのセクション分け 参考になるサービス プロンプト この通訳者に課題の内容を伝える際に必要な工夫をいくつか挙げ てください
18. プロンプト この仕様書の内容を以下の人物に伝わるように説明してください。 IT知識が豊富ではない人 ウェブアプリに関する知識はなし 簡単に理解できる少ない文章で概要、機能、ポイント、採点基準のセクションで分けて説明して ください。 仕様は説明を簡単にするために省いても構いません。 参考になるアプリの例があれば 教えてください。 文章中に技術的な用語がある場合は知識の無い人にもわかるように説明を付け 足してください。 最後のこの仕様書に出てくる技術的な用語を全て表にして出力してください。 この表には英単語、日本語の単語、日本語の説明を書いてください。 これを全て日本語のマーク ダウンの形式で出力してください。
19. この仕様書の内容を以下の人物に伝わるように説明してください。 IT知識が豊富ではない人 ウェブアプリに関する知識はなし 簡単に理解できる少ない文章で概要、機能、ポイント、採点基準のセクションで分けて説明して ください。 仕様は説明を簡単にするために省いても構いません。 参考になるアプリの例があれば 教えてください。 文章中に技術的な用語がある場合は知識の無い人にもわかるように説明を付け 足してください。 最後のこの仕様書に出てくる技術的な用語を全て表にして出力してください。 この表には英単語、日本語の単語、日本語の説明を書いてください。 これを全て日本語のマーク ダウンの形式で出力してください。 人物の定義 補足情報 形式の指定
20. 概要 新しい会社がブラウザ（インターネットを見るためのソフト）で遊べるゲ ームサイトを作ろうとしています。YouTubeのようにゲーム制作者が自分 のゲームをアップロードでき、ユーザーがそれを遊べるサービスです。 参考例： Friv.com（ブラウザゲームサイト） Y8.com（ブラウザゲームサイト） 主な機能 ユーザー機能 1. 会員登録とログイン ゲームを探して遊ぶ スコアを記録する 他のプレイヤーのスコアを見る ゲーム制作者向け機能 2. 自分のゲームをアップロード ゲームの説明や画像の編集 重要なポイント 使いやすさ スマートフォンでもパソコンでも見やすい画面設計 目の不自由な方でも使いやすいように配慮 ゲーム一覧の表示 人気順や新着順で並び替えができる スクロールすると自動的に次のゲームが表示される （Instagramのような仕組み） 採点基準 画面のデザインと使いやすさ ゲームの表示や操作のスムーズさ アクセシビリティ（誰でも使いやすいか） 競技課題：オンラインゲームプラットフォーム開発（フロントエンド）
21. 英単語 日本語 説明 Frontend フロントエンド ユーザーが直接目にする画面部分 API API（エーピーアイ） システム同士がデータをやり取りするための仕組み Database データベース データを保存する場所 HTML/CSS HTML/CSS ウェブページを作るための基本言語 JavaScript ジャバスクリプト ウェブページに動きを付ける言語 iframe アイフレーム ウェブページの中に別のページを表示する枠 Single Page Application シングルページアプリケ ーション ページ遷移せずに動作するウェブアプリ Accessibility アクセシビリティ 誰でも使いやすいような配慮 Infinite scroll 無限スクロール スクロールすると自動的に続きを読み込む機能 Sign Up/Sign In 会員登録/ログイン サービスの利用を開始/再開する機能 競技課題：オンラインゲームプラットフォーム開発（フロントエンド）の用語集
22. 基本構造が自動生成されるので時短になる 複数の課題に対して同じ品質の説明資料を作成可能 複数の視点からの説明案を得られる 新しい例えや説明方法の発見 プロンプト AIに頼りつつ編集して作っていくことで得られるメリットを教え てください
23. AIが技術的な文脈を誤解する可能性 課題の本質的な部分が簡略化されすぎるリスク 不適切な例えや説明の生成リスク 説明スキルの向上機会の減少 プロンプト 反対にデメリットについて教えてください
24. 常にその資料を参考にMTGを行うことで、理解度 が増しているように感じた 最後の用語の表が検索に役立つ
26. 大会運営からdocxファイルで課題を受け取る 1. 英語の課題を翻訳する 2. 翻訳した文章は英文の下に赤文字で表示する 3. 大会運営にdocxファイルで提出する 4.
27. Google Translate, DeepL 生成AI (Claude, ChatGPTなど) プロンプト 翻訳をする際に以下のAIを使います。1.Google Translate, DeepL 2.生成AI 以下の条件があります。1.PCでの作業 2.docxファイルでの提供 これらのメリットデメリットを教えて 無料で利用可能 通訳者が使い慣れている 全文一括での翻訳が不可 段落ごとの翻訳で単語や表現の一貫性に課題 例： 「courier」が「クーリエ」 「配送業者」 など異なる訳語で表示 全文一括での翻訳が可能 Wordからのコピー&ペーストで フォーマットが崩れる 文脈を理解した適切な単語選択 文書全体で一貫した表現を維持
28. 生成AIを使った翻訳の方が優秀！ 通訳者も生成AIの方が精度高いと評価 プロンプトによる細かい指示にも対応
29. プロンプト 以下のフローをmermaidで出力してください 1. 大会運営からdocxファイルで課題を受け取る 2. AIにdocxファイルを読み込ませる a. docxが読み込めない場合はpandocでmdにする 3. プロンプトを書く 4. マークダウンで出力する 5. マークダウンの文章をpandocでdocxにする 6. 翻訳が正しいかチェックする 7. 提出用に編集する 8. 大会運営にdocxファイルで提出する
30. プロンプト pandocとは何か今回の使用方法に絞って簡単に説明してください Pandoc Claude 3.5 Haiku 文書形式を相互に変換できるドキュメントコン バーター 今回はdocxファイルとマークダウンファイルを 相互に変換するツールとして使用 マークダウン → docx変換時の役割 AIが出力したマークダウンを提出用のdocx 形式に変換 適切な文書フォーマットでの出力を実現 生成AIアシスタントの一つ Claude 3.5 sonnetの方が正確だ が速度は遅い 今回の使用用途ではこちらで十分 速度を重視しての採用
31. pandoc -f docx -t markdown test.docx -o test.md プロンプト コマンド メリット 簡潔に今回pandocを使うメリットを教えてください 1. AIとの相性 AIが扱いやすいmarkdown形式での作業が可能 2. 作業効率 手動での変換作業が不要 文書構造が維持される 3. docxファイルの方が通訳者が扱いやすい test.docxをtest.mdに変換
32. この仕様書はウェブアプリを作るためのものです。 この仕様書を日本語に翻訳してマークダウン形式で出力してください 仕様書に書いてある英文以上の文章は記述しないでください 以下の条件の英単語は翻訳しないでください。 URL 変数名になる可能性のある単語 ライブラリ フレームワーク ソフト名
33. この仕様書はウェブアプリを作るためのものです。 この仕様書を日本語に翻訳してマークダウン形式で出力してください 仕様書に書いてある英文以上の文章は記述しないでください 以下の条件の英単語は翻訳しないでください。 URL 変数名になる可能性のある単語 ライブラリ フレームワーク ソフト名 仕様書の定義 補足情報 形式の指定
34. # モジュールD - フロントエンド ## ウェブ技術 ### プロジェクト提出者: - Thomas Mak - Sebastian Häni - Cyril Wanner ### 日付: 30.04.21 ### バージョン: 1.0 ## プロジェクト概要 新設された会社は、オンラインブラウザゲーミングプラ ットフォームを作成するフルスタック開発者を募集して います。ゲーム開発者はゲームをプラットフォームにア ップロードし、ユーザーはブラウザ上でオンラインでゲ ームをプレイできます。 プラットフォームには3つの部分があります： - Game Developer Portal: ゲーム開発者がゲームを プラットフォームにアップロードするためのウェブアプ リケーション - Administrator Portal: 管理者がユーザーとゲームを 管理するためのウェブアプリケーション - Gaming Portal: ユーザーがブラウザ上でゲームをプ レイするためのウェブアプリケーション ## プロジェクトの説明 フェーズ2では、開発者およびゲーミングポータルのフ ロントエンドを実装する必要があります。フロントエン ドは、選択したフレームワークを使用してシングルペー ジアプリケーションとして実装する必要があります。 フロントエンドは以下の機能を提供します： - ユーザーのサインアップ、サインイン、サインアウト - ゲームの検索 - ゲームのプレイ - ゲーム終了時のスコア投稿 - ゲームごとのハイスコア表示 - ユーザープロフィール - 作成したゲームのリスト - ゲームごとのハイスコア - 自分のゲームの管理 - タイトルと説明の更新 - 新バージョンのアップロード ## 非機能要件 - フロントエンド技術は自由に選択可能 - Google ChromeとMozilla Firefoxで正常に動作する こと - アクセシビリティのベストプラクティスに従うこと 基本完璧 本番で使用して通訳者による修正は 1つのみ 翻訳したくない部分を英語のまま残 してくれる 好きなようにプロンプトでカスタマ イズできる
35. AIを使うことで負担が減った（チェックのみになった） 精度に驚いた（修正は1つのみ） 逆に感じた通訳者の必要性 AIでのリアルタイム翻訳はまだ早い 1. 海外の選手と仲良くなるには通訳者の力が必要 2.
36. 非エンジニアへの技術説明スキル 専門知識のない人にも理解できる資料作成のテクニック AI翻訳・文書変換のワークフロー プロンプトエンジニアリング これらを参考にみなさんの業務の効率化が進むと幸いです 技能五輪ブログ