研究室サイトのAI駆動開発

153 Views

September 28, 26

スライド概要

profile-image

組織論 ラインミニアプリ

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

AI駆動開発【大阪支部 #15】 研究室ウェブサイトのAI駆動開発 「それくらい分かれよ」をAGENTS.mdに書くまで 2026年9月25日 tappuriz https://t-homma.osaka-ue.ac.jp/

2.

SPEAKER PROFILE THEME / PHILOSOPHY 本間 利通 AI駆動開発(哀) https://t-homma.osaka-ue.ac.jp/ 大阪経済大学 経営学部 教授 生成AIに全部やってもらう Management & AI Commons Osaka 主宰 できるまで粘着する 株式会社團コミュニケーション ズ 顧問 自然言語だけでやりきる

3.

研究室ウェブサイト構築 リニューアルに至った3つの背景 BACKGROUND 01 BACKGROUND 02 BACKGROUND 03 旧サイトの放置 コンテンツ追加 なりすまし対策 10年近く未更新 Connpassコミュニ ティ発足に伴う拡 充 Xでの偽アカウント への注意喚起

4.

開発スケジュール 圧倒的なスピード感(当社比) 8/14 8/15 ChatGPT 5.6で サイト一式作成 VS Codeで開発 (クレジット7%) 8/18 8/24 9/18 GitHub Pages サブドメイン Google検索 公開開始 取得完了 上位表示確認

5.

生成AIとの格闘(3日間) 公開後の方が更新を繰り返しているれども、0→1が大変だった 1. 要件・構成 2. プロトタイプ 3. 公開版 ■ 画像は不使用 × AIポエムが全 ページに追加 ✔ ポエムは一つだ けに厳選 × 見出しフォントが 巨大 × 無駄に動かしす ぎ ✔ 控えめなエフェ クトのみ採用 ■ 今風を強調 ■ HTML/CSS/JSで 構成

6.

AIの問題挙動 問題のある挙動は AGENTS.mdだけで解決 HTML・CSS・JSの役割分担な んて、わざわざ設定ファイルに 書くことじゃないと思っていた。 CSSクラスの乱立 既存の共通スタイルを使ってくれない 解決:AGENTS.mdで抑制できた 勝手なインライン追加 共通cssファイルを無視する 解決:AGENTS.mdで抑制できた 文章を過剰に盛る それくらい分かれよをmd化 →AI駆動開発 ドラマチックに書くが、実態と乖離 所感:こっちはそこまで深く考えてない

7.

AI駆動開発の所感 言語化能力の限界 開発体験 存在しないような行間を読ま 何も指示しなくても表示はい せるのではなく、設計思想を い感じになる。品質抜きであ 伝えるためのハーネスが不 れば、AIに全部やってもらう 可欠 方針が強化された。

8.

生成AIの循環 生成AIで作ったサイトを、生成AIがその情報を拾って回答 公式で注意喚起 公式サイト上に、な りすましアカウントの 注意喚起を掲載 検索上位への表 示 名前検索で、作成し たウェブサイトが上 位に表示 別のAIに正しい情報を渡してくれている 生成AIによる引用 Gemini等の生成AI が情報を自動収集 し、検索結果でも公 式注意喚起を引用・ 回答

9.

作成したウェブサイトからの声明

10.

AI検索(Google)

11.

むしろ低い方が今風なのかも

12.

まとめ 実用に耐えるウェブサイト完成 ac.jpドメインの謎のSEO力により名前検索で上位 当初の目的の注意喚起はできている https://t-homma.osaka-ue.ac.jp/ AIとの通信コスト削減 なしでいけそうと思ってたけど、やっぱりAGENTS.md必要だった。

13.

コミュニティ紹介 Management & AI Commons Osaka – ゆるLT会 #11 2026年10月20日(火) 18:30-20:00 KINTOテクノロジーズ株式会社 Osaka Tech Lab Management & AI Commons Osaka – もくもく会 #12 2026年9月30日(水) 18:30-20:00 大阪経済大学図書館 ラーニング・コモンズ

14.

# AGENTS.md ## サイトの目的 静的な学術サイト。文章を読みやすく、簡潔で落ち着いた構成を保つ。 ## HTML/CSS/JSの設計原則 - HTMLは意味と構造だけを担当させる。 - 見た目は `style.css`、動作は `script.js` に置く。 - インラインCSS、インラインJavaScript、HTML内のイベントハンドラは追加しない。 - 既存の構造、セレクタ、文言を優先して使う。 ## 外部依存を増やさない 既存の構成を優先し、新しいライブラリ、 CDN、ビルドツールなどを導入しない。既存の Google Analytics設定を削除・重複追加しない。必要な場合は理由を明 示する。 ## 日英ページと構造化データ - ページを追加・改名・削除する場合は、日英の対応ページ、 `lang`、canonical、`hreflang`、言語切替リンクを合わせて更新する。 - `script.js` が実行時に生成する JSON-LDの内容、型、必須プロパティを維持する。 URL、言語、ページ種別を変更する場合は対応する構造化データも更新す る。 ## View Transitionsの制約 既存のページ遷移や表示状態を壊さない。 View Transitionsを変更・追加する場合は、対応ブラウザと非対応ブラウザの両方で自然に動くことを確認する。 ## UTF-8前提 HTML、CSS、JavaScriptはUTF-8で扱う。日本語を含む既存の文言を、依頼なく書き換えない。 ## 変更後の確認項目 - 変更箇所に不要な CSS、外部依存、インライン記述がない。 - PC幅とスマートフォン幅でレイアウトを確認した。 - ページ遷移、既存の JavaScript、Google Analytics、JSON-LDに問題がない。 - 変更は依頼された範囲に収まっている。