Accenture Japan (有志)
🌊

【コピペ可】静的技術だけで学習サイトを、AIフル活用で立ち上げた方法

岸本悠佑_AIサムライ
に公開
HTML
JavaScript
lms
Claude Code
Gemini CLI
tech

結論

私が作ったサイト「すごいAI道場」はこちらです。
静的技術だけで、無料・登録不要・運用ゼロのe-learningサイトを実運用しています。
https://dojo.sugoiai.org

このレポジトリをコピペして中身を差し替えたら、あなたも独自の学習サイトを作れます。
そしてGitHub Pagesでホストしたら無料で公開できます。
https://github.com/ykishimotoy/AIDojo

※コピペ・改変・商用利用して良いです。MITライセンスで公開済み。

コピペ方法

  1. このレポジトリを 自分のGitHubにコピー（Fork）
  2. コピーしたものを自分のローカルにコピー（Clone）
  3. Claude Codeに命令して、howtoAI/*.html などのファイル名、動画IDと文章だけ差し替え
  4. GitHub Pages で公開

※コピペ後に、基本はAI任せで「文章とYouTube動画URLの差し替え」だけやれば使えます。
※Claude Codeがオススメですが、無料ならGemini CLIが同様に使えます。

この辺りが初めてで不安な方は、ChatGPTに聞けばなんでも教えてくれます。
参考までに各命令の出し方を書いておきますね。

ChatGPTへの質問の出し方
  • Claude Codeのインストール手順（Mac/Windows）を教えて
  • このGitHubレポジトリをFork→Clone→編集→Pages公開する手順を、初心者向けに手順化して
  • GitHub Pagesで独自ドメインを設定する方法（お名前.com）を教えて
Claude Codeの命令の出し方

1つ目のレッスンを、このような内容に書き換えて。タイトル：xxxxx、内容：xxxxx、動画URL：xxxxx

対象読者

この記事は、下記の方々をメインの対象として書かれています。

  • 教育コンテンツを作りたい人
  • 社内研修・イベント用の学習サイトを作りたい人
  • DBや運用に疲れた個人開発者

何を作りたかったのか？

私が使える静的な技術のみで、コピーと転用が可能なe-learningサイトを作りたかったんです。広く配布したいので、なるべく管理や運用が簡単になるように。

なんで作りたかったの？

第一に、「札幌すごいAIまつり」というイベントを実施するにあたり、このように機能するものが欲しかったんです。

  • イベント登壇者の事前AI学習サイト（ビジコン用）
  • イベント参加者の事後AI学習サイト（火が点いた人が学んで、次のAIまつりに挑戦してね）

第二に、今後教育コンテンツを新たに作ったときに、コピペすれば使い回せる「雛形」が欲しかったんです。AIに限らず、今後の人生で色々コンテンツを作っていこうと画策しているので。

技術は何を使ったのか？

静的なWebサイト構築のものだけ。データベースすら使っていません。

ソースコード

  • HTML（文章の中身、YouTube埋め込み）
  • CSS（デザイン）
  • JavaScript（YouTube再生完了の検知、学習ステータス管理など）
  • markdown（README.mdを書くなど）

ソースコード等を生成する方法

  • Claude Code（コーディング全般）
  • ChatGPT（最初の要件整理、鍔バッジ画像生成）
  • Gemini（トップページの鍔の画像生成）

公開のための方法（サービス）

  • YouTube（動画の公開とiframe埋め込みの利用）
  • GitHub Pages（ページのホスティング）
  • お名前ドットコム（独自ドメインの取得とDNS設定）

この構成で作ると何が“楽”になるか

  • サーバ管理が不要
  • DB設計・移行・保守が不要
  • 利用者サポート対応が不要
  • スケール・障害対応を考えなくていい

設計思想

なんとなく「AI道場を作りたい！」と思ったんですけど、その背景にこんな設計思想を持っています。

設計思想1：学習開始の心理的負荷を極限まで削る

学習者に火が点いたら、その火種を生かしたまま進めたい。せっかくAIを学ぼうとしてるんだから、下記の萎えるイベントを全排除しました。アクセスして最短5秒で学習を開始できます。

  • 「ここからは課金必要です」 → 完全無料
  • 「アカウント登録が必須」 → 登録不要、登録なしで全て使い放題
  • 「広告を30秒見ないと進めません」 → 広告なし

設計思想2：運営者が何も管理をせずに回る

当然ですが、個人発のプロジェクトなので、運営者が私しかいません。
ということは、私が倒れても勝手に回る構成を最初から目標にしました。

  • 自分が直接的にホスティングをしなくても回るサービスのフル活用（GitHub Pages, YouTube）
  • 完全に静的な公開のみで回るようにして、Webアプリ等の実装時にありがちなややこしい運用や改修を回避
  • サーバ側（GitHub Pages）でやるのは静的サイトなので軽い情報転送のみ、スケールに耐えられる
  • 問い合わせ窓口はここには作らない（コミュニティのDiscordへ誘導）

設計思想3：学習時に手を動かさせる

見るだけの学習って、長続きしないしあまり身に付かないと思っていて。
対して、自分で手を動かしたら、なんだか続くし身に付きませんか？
これをヒントに、学習時に下記の動きを自然にするように、YouTube動画で誘導しています。

  • YouTubeのPIP機能を使って、小画面再生しつつ、ChatGPT等を実際に触らせる。
  • とにかくまずはAIツールを開いて触ってみる。どうせ誰でも、使ってみたら使えるんだから。

設計思想4：別コンテンツの雛形にできる

とにかく全部を、転用できるようにしました。

  • 1つのレッスンを作ったら、別レッスンに転用できる。
  • ヘッダー、フッター、CSS、JSなどは共通にして転用可能にする。
  • 全体として、完全に別のコンテンツ（例えば武道教室）でも差し替えれば転用可能。

こんな思想をもとに、実際にe-learningサイトを作った中で、様々な工夫やおもしろポイントを考えて、それをAIに実装させていきました。

工夫ポイント

  • 雛形をまず作る
    最初の、index.htmlと、1個目のレッスンファイル。これらを作ってから、あとはそれをコピペ・中身を書き換える・公開で行けるように作っていきました。
  • 学習状況の記録
    →学習状況や取得メダルをLocalStorageで保存して、かつ「ふっかつのじゅもん」で復活させる。DBを配置する必要なく出せて、かつ「ふっかつのじゅもん」さえ覚えておけば、ブラウザのキャッシュが消えようが、スマホとPC間で共有したかろうが、全部できる。

おもしろポイント

今回は「AI道場」というテーマなので、道場っぽい要素を色々入れました。

  • すごいAI道場というネーミング
    ダサいけどすぐ分かる、親近感のある名前を一生懸命考えました。道場っていいよね。
  • 鍔バッジ
    鍔（つば。刀の持ち手上部にある円形の鉄の塊で、相手の手元への攻撃を防ぐもの）をバッジにして、学習を進めたら鍔バッジを貰えるようにしました。この鍔のデザインは、ChatGPTの画像生成で様々に指示して作成したものです。
    トップ画像にも鍔の画像を配置したり。
  • 「ふっかつのじゅもん」入力で復活させる。
    某有名RPGっぽくてワクワクするじゃないですか。

AIへの指示出し

基本的には、最初にrequirements.mdというファイルに要件を作って、それを読み込ませていい感じに最初のファイルを作る。（最初のファイルは微調整。）その後、最初のファイルを雛形にどんどん拡張し、細かいポイントは指示出ししていくって感じです。

なお、適当に箇条書きで要件を出して、ChatGPTに要件定義書を出させるというフローで動いていました。
（ですが、Claude Codeはデザインに関しては、細かくやるよりも「これを参考にして」みたいな指示の方がうまくいくことが多かったです。おすすめの参照先：https://soundquest.jp）

どんな感じに作ってるかなーというのは、下記をサンプルとしてご覧いただければ。
以下は、AIにそのまま渡して実装させた要件定義ファイルです。
「完成コード」ではなく「設計図」だと思って見てください。

requirements.mdの中身

設計思想

  • 生成AIを使いこなすために、実際に必要な知識を確認し、手元で体験させる。
  • 学習サイト上ではYouTubeの埋め込み動画と、解説やリンクを提供し、別のタブでChatGPTなどを表示して実際に操作させる。
  • 生成AIを使う上で直接的には不要なAI関連の知識（ディープラーニングや技術的背景知識など）はあえて非掲載にしている。
  • 実装完了した主要機能：トップページ（index.html）、レッスンページ（howtoAI/ai-basics.html）
  • コンテンツ一覧に載っている文言は私の雑な言葉なので、ページ作成の際には私の言葉をもとに、ビジネス上適切だがユーモアも交えた説明文に直して記載せよ。

ページ構成

トップページ（index.html）

  • ヘッダー: 「すごいAI道場」タイトル、サブタイトル、グラデーション背景
  • ナビゲーション:
    • 固定ヘッダー、スクロールダウンで隠れ、スクロールアップで表示
    • カテゴリ別の色分け（AI全般:オレンジ、起業・ビジコン:青、クリエイティブ:緑、コミュニティ:紫）
    • レスポンシブ対応：スマホではハンバーガーメニュー
  • カテゴリセクション: 4つのカテゴリ（AI全般、起業・ビジコン、クリエイティブ、コミュニティ）
  • レッスンカード:
    • カード形式で各レッスンを表示
    • レッスン番号バッジとボタンの色がカテゴリごとに異なる
    • ホバー時にカテゴリカラーで強調
    • レスポンシブ対応：PC（3列）、タブレット（2列）、スマホ（1列）

レッスンページ（howtoAI/ai-basics.html等）

  • ヘッダー: レッスン番号とタイトルが横並び（スマホでは縦並び）
  • 学習動画:
  • 参考リンク: ChatGPT、Claude、Geminiへの直リンク
  • テキスト詳細解説:
    • 折りたたみ式アコーディオン（デフォルト非表示）
    • ボタンクリックで展開/折りたたみ
    • 全コンテンツを含む（目的、概要、プロンプト、リスク、ツール等）
  • ナビゲーションボタン: 前へ/次へのページ遷移
  • レスポンシブ対応: スマホ・タブレットで適切なマージンとレイアウト

マイページ（howtoAI/mypage.html）

  • 概要: 学習進捗とバッジコレクションを確認できるページ。黄色（#ffd700）をテーマカラーとしたデザイン
  • バッジシステム:
    • 未取得：灰色の丸にレッスン番号を表示
    • 取得済み：バッジ画像（初期値：images/siken.png）を表示
    • 取得条件：各レッスンページで動画を最後まで視聴すると自動的にバッジ獲得
    • データ管理：LocalStorageにcompletedLessons配列として保存
    • カテゴリ分類：
      • AI全般（レッスン1-6）- オレンジ（#f46434）
      • 起業・ビジコン（レッスン7-12）- 青（#4a90e2）
      • クリエイティブ（レッスン13-18）- 緑（#27ae60）
      • コミュニティ（レッスン19）- 紫（#9b59b6）
  • バッジ画像のカスタマイズ: 各バッジの画像はdata-badge-image属性で管理されており、HTMLを編集するだけで変更可能
    <div class="badge-item" data-lesson="1" data-badge-image="../images/custom-badge.png">
  • ふっかつのじゅもん機能: カテゴリ別にバッジを一括解放できる機能。コミュニティで共有される隠しコマンド
    • 呪文一覧：
      • あかいもも: AI全般のバッジ（レッスン1-6）を全て解放
      • あおいはすかっぷ: 起業・ビジコンのバッジ（レッスン7-12）を全て解放
      • みどりのみかん: クリエイティブのバッジ（レッスン13-18）を全て解放
      • むらさきのぶどう: コミュニティのバッジ（レッスン19）を解放
    • 成功時のメッセージ：「おお　AIサムライ！\nよくぞ　もどってきてくれた！\nわしは　とても　うれしいぞ。」
    • 失敗時のメッセージ：「じゅもんが　ちがいます。\nじつは　こみゅにてぃーで　きけるよ。」
  • リセット機能: 全バッジの取得状態をリセットする機能
    • 確認ダイアログ：「今までのバッジが全て消えてしまいます！よろしいですか？　はい/いいえ」
    • 実行条件：「はい」を選択した場合のみ実行
    • 処理内容：LocalStorageのcompletedLessonsを空配列にリセット
  • レスポンシブ対応:
    • PC：バッジを自動的にグリッド配置（最小120px幅）、円形バッジを縦に配置
    • タブレット：バッジサイズ80px、フォントとマージンを調整
    • スマホ：1列の横長カード表示、バッジサークル（60px）を左側に配置し、ラベルとステータスを右側に横並び配置。カテゴリ別にホバー時のボーダーカラーが変化
  • バッジホバーエフェクト: カテゴリ別に色分けされたbox-shadowで視覚的なフィードバック（AI全般:オレンジ、起業・ビジコン:青、クリエイティブ:緑、コミュニティ:紫）

技術仕様

  • 動画トラッキング: YouTube IFrame APIで視聴完了を検知、LocalStorageとCookieに記録
  • バッジシステム: 動画視聴完了時に自動付与、進捗をLocalStorageで管理
  • カラーコーディング: カテゴリごとに統一された配色（アイコン、ナビ、カード、ボタン）
  • アニメーション: スムーズなスクロール、ヘッダー表示/非表示、アコーディオン開閉
  • 拡張性: 新しいレッスンページはai-basics.htmlを複製し、LESSON_NUMBERとVIDEO_IDを変更するだけで追加可能

すごいAI道場のコンテンツ一覧

AI全般

  • AI基礎- 進め方と、目的とゴール（進め方：ピクチャインピクチャ機能で再生しながら進める、目的：AIを使いこなすための基礎知識を得る、ゴール：自分の業務に合わせた使い方と注意点が分かり、最初の講座でまずはAIを1回は思い通りに使えたこと。次の講座以降は、提示された方法論やツールのイメージをつけられるようになっていること。）- 生成AIの概要（ラッキー超優秀なインターンを無料で雇えた、あなたの能力を100倍に拡張する、起業の専門家を召喚してみる）- AIのイメージ（入力内容をもとに類推する、桃太郎を生成させてみる）- 基本的なプロンプト（命令、背景、入力情報。類推には情報が大事。最初から上手くはいかないので試行錯誤。）- 基本的なリスクと注意点（ハルシネーション、著作権やデータの利用権、データ流出、ライセンス違反）- AIツールの種類と課金（文章生成やWeb情報収集、クリエイティブ系の生成ー画像、動画、音楽、スライド、課金はまずは無料か、無料にない機能を解放したいなら月額課金。年額はやめた方がいい、進化が早すぎて後悔する。）
  • プロンプトの技術（プロンプトエンジニアリング）- 基礎的なプロンプト（深津式プロンプト、命令、背景、役割、制限、出力形式・例、入力）- markdown形式の紹介（構造、書き方、なぜいいか＝AIが理解し易い）- 構造化- ただ適当に指示する（Zero-Shot Prompting）- 例示（Few -shot Prompting）- 役割の提示- 思考の連鎖（Chain of thought）- AIの回答の正確性を、AIに確認・修正させる
  • 様々な領域のAIツール（文章、画像、動画、音楽、スライド）- 全部基本的には「プロンプト」芸- 文章生成はChatGPTを使えばいい。Claude、Geminiも強いが、まずは一番メジャーなChatGPTを慣れると吉。- 画像生成はGeminiのnano bananaが強い、その他ChatGPTのDA-LLE。- 動画生成は使いやすいのはMidJourney、その他Sora2とかVeo3とかあるが結構課金ゲー。- 音楽生成はSuno。- スライド生成はClaudeかGenSpark。
  • AIエージェント- 自律的に動作を行うAIの総称。- AIエージェントの4要素　役割Profile：各Agentの役割と目的を定義する　記憶Memory：各Agentの経験を蓄積し、次の行動のために記憶を活用する　計画Planning：タスクをサブタスクに分割し、目標達成のための計画を立てる　行動Action：Profile / Memory / Planningの結果に基づきタスクを実行し、結果を取得する参考：A Survey on Large Language Model based Autonomous Agents  Fig.2- 実際のところは、自律的に動くようなやつをエージェントと呼びがち。定義は曖昧。
  • 実用上のリスクと対処法- 情報の信頼性リスク（幻覚＝ハルシネーション）→AIによるクロスチェック- コスト観点のリスク（トークンによるAPI従量課金が高額になる、色々月額サービスを使いすぎて総額が増える）→課金額の上限を設定する、ローカルでやる？- 情報漏洩リスク（個人情報や機密情報を外部ネットに入れる、学習に利用される可能性）→そもそも情報を入れないスタンス、構成を理解する- 著作権・各種権利・ライセンスリスク（権利違反、ライセンスを違反）→著作権などの権利に違反していないかAIによるクロスチェック、ライセンス全文をAIで読み込んでから成果物をAIでクロスチェック- 個人情報・プライバシーリスク（個人情報を意図せず漏らすなど）→個人情報を含めない、データが飛ぶ範囲や利用規約をきちんと理解する- 公平性・バイアスリスク（アメリカや中国のデータや文化が無意識に優先される）→これを知った上で、自分の出したい内容を明確にプロンプトに含める- 法務・コンプライアンスリスク（例えばカリフォルニア州法で裁判する必要性、AI生成ということがレピュテーションリスクになる事例がある）→利用規約の明確な理解- 倫理・社会的リスク- 運用面・組織リスク- 国際リスク（海外クラウドへのデータ転送と保管、アメリカや中国との外交問題によるサービス停止やデータの意図せず利用されちゃう可能性）
  • 「モデル」というものと、その利用方法- モデルは脳そのもののイメージ（GPT, Claude, Gemini）- モデルを裏に仕込んだサービスがたくさんある。- 有名どころはクラウド上で動くもの、他にローカルで動くものもある。（gpt-oss, deepseek, qwen, llama。これらはhugging faceで配布されている。興味あればインストールしてみよう）- ローカルモデルのメリットデメリット（手元で動くから上記の各種リスクを下げられるし無料で使える、が技術力が必要。玄人むけ。）
  • 各種資格- 結局資格を取るよりも自分で使う方が100倍身につくし有用だよ。まとまってるけど遅い：資格はある時点までの情報だから、速すぎるAIの進化の速度には追いつけない、最新情報は常に追っておく必要あり。就職に役立つかは微妙、ネームバリューは少しはあり、使い方次第。- 生成AIパスポート：AIの歴史や技術の変遷を知るのに有用。- G検定：生成AIパスポートより一段深い技術的知識や、生成AIよりも範囲の広い、機械学習・ディープラーニングの知識を得るのに有用

起業・ビジコン

  • 目的：AIをビジネスアイデア作りや、ビジネスそのものに適用できるようになること。ゴール：AIを使って作成した事業アイデアをPitch Deck（スライド3枚）と、イメージ画像1枚にまとめる。その後の精度向上や本格的な起業に向けたアクションを知った状態になること。
  • 起業は誰でもできる（ちょっとAIに聞いてみて、筋のいい起業アイデアを出してもらう体験、紙ペラ2枚税務署に出せば起業できる説明、起業はITやAI分野でなくてもいい（IT分野は技術力が必要、でも非IT分野は自分の経験や興味をもとにやれる。要は自分の起業にAIをアドバイザー兼実務として使いたい。）
  • アイデアの種を見出す　（起業やビジネスの始めは、誰かの困りごと（自分や知り合い：日常でこういうことができたらいいなと思っている。それを解決できたらいいな。）→仮説を作る。（〇〇は××なら新しくなる的なやつ）→　筋の良さの見極め方（それは金を払ってでも解決したい？どれくらい払える？どれくらい人数がいそう？→人数はAIに「フェルマー推定を用いて」と言って聞いてみたらいい。）
  • ビジネスモデルを作成する
  • ここまでで起業する、アジャイル的な起業の考え方を伝授。
  • お金を得る方法（クラファン→CAMPFIREなど。事業の内容を書いて投資を募る、スタートアップのコンテストに参加して起業家を募る、エンジェル投資家を探すなど。1個目から順に難易度が上がる。）
  • ビジネスモデルキャンバスを整理するなど。（個人なら、ここまでやらなくてもとりあえず起業してみたらいい、経験になるし先行者利益を取れる可能性もある。精度や成功確率を上げたいならここを色々考える。会社内での提案ならこの辺を突っ込まれそうだから網羅的にまとめておくと突っ込まれた時に返せる。）
  • その他、東京都のサービス開発フレームワークなど紹介。（ゴリゴリに作りたい時向け。ただし、ここを頑張りすぎると疲弊するし、最初から考えすぎるよりもまずやってみて軌道修正していくのが吉。）
  • 起業の開始・維持の必要な作業（個人事業主/法人。個人事業主がオススメ、紙ペラ2枚（開業届と所得税の青色申告承認申請書）を税務署に出そう。法人は収益が年額500万くらいになったら考えるといい、最初から作るのはおすすめしない。確定申告はやよい会計を使ったら、初年度は無料、次年度は年額12000円くらいでできる、簡単。かかったお金関連は、必要経費にできるので節税になる。不明点は全部AIに「あなたは税理士です」と役割を与えて聞こう。辞めるときは廃業届。）
  • Webサイト生成：自分のサービスのWebサイトや、IT系のサービスを作ってみたいならClaudeを使おう。Webサイトレベルなら、非エンジニアでも簡単に作って公開できる。サービスは知見が必要、AIに聞きながら作りながら学ぶのが吉。markdownで入力して、artifactで生成されたものを確認し、また修正点をAIに投げるの繰り返しで一定程度いける。公開はGitHub Pagesでやると良い。
  • スライド生成AI：Claudeを使おう。markdownで入力して、細かい点はDLして手で修正。画像を入れ込むのは難しそう。スライド用のアイコンや図の作成はChatGPT（DALLE）で、背景透過で作らせるといい。痒いところに手が届かないし、自分の頭を使わなくなる感が高いので、現状は補助ツールくらいの印象を持っておくべし。現状、一般論はサクッとAIで作り、レイアウトや配置などにこだわって魂を込める系のものはほぼ手で作るのがオススメ。
  • WebサービスやアプリのAI生成：IT系のサービスを作ってみたいならClaude Codeを使おう。サービスの作成や公開には知見が必要、AIに聞きながら作りながら学ぶのが吉。markdownでrequirements.mdを作成して、その後Todo.mdを作成させ、そこからエージェント的に動作させる。ただし、Webサービスは技術力が必要なので、「本当にインターネット上でこのサービスを全部やる必要あるんだっけ？一部だけでよくない？なんならWebサイトだけで事足りない？」と自問自答して、必要最低限なものだけを作っていくのがオススメ。機能をリッチにしようとすると、ほぼ確実に挫折するよ。

クリエイティブ

  • 目的：AIによって自身の創造性を拡張する方法を知り、実際に自分の能力を超えた作品を生み出すこと。ゴール：作成した「自分が満足のいく」作品1つを、XやSNS等にアウトプットすること。その後のさらに大規模なクリエイティブ作品を作るための知識を知った状態になること。
  • はじめに、クリエイティブ系は組み合わせてこそ真価を発揮する（生成した音楽に、画像生成を介して動画生成した動画を編集して合わせるとか）
  • ストーリーやプロンプトのAI生成（ストーリーを文章生成AIでブラッシュアップやゼロから作成、）
  • 画像生成AI：Geminiのnano banana(imagen)を使おう（精度が非常に高い、写実的、一部切り出してウォーターマークを消せる）※ウォーターマーク完全なしがいいならChatGPTの画像生成（DALL-E）。画像編集ソフトはMacならプレビュー、Windowsならペイント。で、画像同士を組み合わせるのはパワポやkeynoteでできる。ChatGPTは画像を透過させて生成できるので、透過した画像を出力するのもおすすめ。
  • 動画生成AI：初手で凄さを体感したいなら、Sora一択。Soraとググって、適当にプロンプトを打ってみたら、動画と音声が複合的に生成されて驚愕すると思う。ただし長編を作りたいならMidJourneyをnanobananaと組み合わせて使おう（最初に画像を出して、それを動画化、延長。）→動画編集ソフトは、最初は無料のShotCutがオススメ。Windows,Mac両対応で、操作が分かりやすい。その他、動画生成はOpenAIのSora、GoogleのVeoも非常にクオリティが高いが、ウォーターマークを消そうとすると課金体系が結構えぐい。これらをMidJourneyではうまく統合して月額課金数千円で使えるので、慣れるまではMidJourneyがいい。慣れたら
  • 音楽生成AI：Sunoを使おう（いい感じに音楽の生成。）→音楽編集はちょっとわからん、ShotCutで切ったり貼ったり動画と合わせたりはできるよ。音楽の指示出しには音楽理論を学ぶのがおすすめ、全くAIとか関係ないけどSoundQuestというサイトが超学びやすくてオススメ、ここで基本的な音楽の理論や言葉を身に付けると音楽の生成がしやすくなる、というか何か自分で楽器を演奏したくなる。本当に全く関係ないけど、尺八はプラスチック製のを15000円くらいで買えるから買うといい。
  • スライド生成AI：2つ選択肢があり、1つ補助的に使えるものがある。1つ目はNotebookLM。非常に高精度なスライドを10分くらいで一括生成してくれて、PDFにしてくれる。デザインや配置などが非常に秀逸でプロレベルと言っても過言ではない。欠点は、スライドの文字や図形や絵など全てが1枚の画像として合体して出るので、後でPowerpointなどのスライド編集ソフトで細かい調整などをできない。2つ目はまじん式プロンプトを使う。json形式という構造を整理した形式にして、その構造をGoogle Slideに出力してくれる。詳細な使い方はここを読めばわかる。欠点は、前者に比べて絵や図に弱いのと、ちょっとまだAIで作ったよね感が強いところ。ただし、こちらはパワポ形式でダウンロードできるし、Google Slideで編集もできるから、プロトタイプを作らせて手で編集するには非常に有効なツール。3つ目、補助ツールとして、スライド用のアイコンや図の作成はChatGPT（DALLE）で、背景透過で作らせるといい。全般として、かなりいい線まで来てるが、なお痒いところに手が届かないので、現状は補助ツールくらいの印象を持っておくべし。
  • 投稿してみよう＆投稿前の諸注意：投稿時は著作権その他の権利侵害に注意し、「AI生成した」などの表記を示す。多くの人はAI生成されたものよりも人が作ったものを重んじる（AI生成音源と録音CDとライブの比較）。自分で創造したものがある場合は、「昔のもどうせAIでサクッと生成したんでしょ」とこれまでの努力を否定される可能性があるため表示の仕方には注意が必要（これはAIで作った、これは手書きなど。ここまでで岸本が喋ってて、なんかAIじゃなくちゃんと喋ってるなら聞こう、という気持ち湧かなかった？と問題提起）。

コミュニティ

  • Discordコミュニティの入会ページ

※下記の「@ファイル名」は、Claude Codeに特定のファイルを参照させるための書き方です。

AI（Claude Code）への最初の指示出し方法

@requirements.md をもとにタスクを実行せよ。デザインは「https://soundquest.jp」を参考にして作成せよ。

AI（Claude Code）への追加の指示出し方法の例

@creative/14_creative-intro.html において、全体のデザインの色が青色になっている。これを緑色に変更したい。全体のCSSを確認して、 @index.html の「クリエイティブ」セクションで定義している緑色になるように改変せよ。必要に応じてファイルを1つのままにしてもCSSファイルを分割しても良い。

大変だったポイント

  • AI解説動画の作成
    今ある17レッスン（総計400分）で、レッスンごとに全部これらの作業をやってたんです。なかなかハードでしたね。特に動画撮影と編集。

    • コンテンツを文章化（人力で箇条書き→Claude Codeで整形→レビュー→微調整）
    • スライド作成（人力で箇条書き→Claude Codeで整形→ウェブサイトの解説文に反映→解説文をインプットにNotebookLMでスライド化）
    • レッスンをZoomでやって撮影（めちゃ人力）
    • 動画編集（めちゃ人力）
    • 動画チェック（めちゃ人力）
    • YouTube公開（めちゃ人力）
    • ウェブサイトに反映（Claude Codeに指示出しして反映し、人力で確認してからgit push）

  • モチベの維持
    今のものは全部で17レッスン。本当は全部で20レッスン作るはずだったのですが、17個作った時点でAIまつり本番突入。残り3つを作る重い腰が上がらない...。（逆に言うと、AIまつりまでに17個作ってよかったっす。）
    他にも、ITエンジニア編（Webサイト構築とかClaude Code解説とか）も作ろうと思ってるんですが、これもなかなか重い腰が上がらずです。そのうちやります、そのうちね。

  • AIでの鍔画像の生成
    当時は、ChatGPTがゴリゴリの鍔形状のプロンプトを入れたら1/4くらいの確率で使えるのを出してくる、そしてGeminiは形状をきちんと作ることができない、という感じでした。鍔の穴の形って難しいんですよ。鍔バッジ全18種類を作り終えるのに1週間くらいかかりましたね。この記事で話してる内容です。
    https://zenn.dev/acntechjp/articles/f7c246635b5caa
    ただ、AI道場を作り終えて1ヶ月後くらいに、Geminiが鍔に完璧に対応しててマジで感動しました。なのでその記念に、AI道場のトップページの画像はGemini製の鍔です。「炎の鍔を生成」の雑プロンプトですげーの出してくれる子に進化していました。

使ってもらうためにやった工夫

初手で明らかに「レッスン1をクリックできるなー」という配置にしたことです。

で、もう1つ、「最初にモーダル画面を配置して、チュートリアル動画を再生させる」。
要は、初回アクセス時に背景暗め画面、チュートリアル動画が強制で出るようにしました。

ただ、ここで実際の初回ユーザ（奥さんのいとこ）の操作を見てみたら、めちゃめちゃ最初のモーダル画面を無視してたんですね。（暗い画面で強制動画再生だ、うざいから飛ばそ、という感じ。）

なので、モーダル画面はやめて、チュートリアルのレッスンをレッスン0として作って、トップページで最上部の配置にしました。ストレスも減ったし動画再生数も上がってそうなので、良きかなと思います。

あえてやらなかったこと

  • ユーザー管理や学習進捗を、サーバ保存しなかった
    これは、面倒くささの回避に加えて、「私がそういう技術力がない」という所も理由です。恥ずかしながら、Ruby on Railsやってみたけどあんま分からなかった勢でして。そういうwebアプリとしてでなく、自分の身の丈にあって、かつ簡単な構成で作っちゃおうと思ったんですね。（いつかRails Tutorialに再チャレンジはしようと思いますが）
  • アクセス解析を入れていない
    これは単純で、学習サイトが「札幌現地のイベント経由でじわじわ使われるようになる」前提なので、数字を分析しようとすると数字の少なさに心を折られそうだったからです。萎えないの大事。なんとなく何回再生されたかはYouTubeの再生数で分かるし。（現時点で初回レッスンが200回再生くらい、200人は見てくれたと期待。）
    もし入れたいと思った方は、Google Analyticsとか入れるといいと思います。アクセス経路が可視化されて便利ですよ。
  • LMS（Moodle等）を使わなかった理由
    なんでだか、初めから眼中になかったですね。でもゼロから静的Webサイトで作った方が、色々技術的にも自分が掌握できるし、使い勝手もいいんじゃないでしょうか。

終わりに

学習サイトって「作ること」ではなく「使ってもらって、伝えた内容を身に付けてもらうこと」がゴールだと思っています。
なので、ガワは私のものを流用する等で、大変な実装を迂回してとりあえず作ってしまって、コンテンツの方の作り込みを頑張るのが得策だと思います。
私は今後、自分で学習サイトを作るなら、今回作ったものを転用しまくります。

最初から完成品でなくても良いと思います。
とりあえず私のやつをテンプレとしてCloneして動かしてみて、こういうの載せてみよーというふうに使ってみてくださいませ。きっとそれが良き一歩目となります。

それでは、e-learningサイトを作ろうという皆さんを応援して、本記事の結びとします。

Accenture Japan (有志)
Accenture Japan (有志)

アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。

Discussion