GitHubを使って、ChatGPT6（正確にはCodex)とFable5.1に共同作業をさせてみる。一方の枠を使い切っても、もう一方に作業を引継ぐ実験。

まいにちのホーム
GitHubの活用からデザインの比較と公開まで

全13章
2026年9月6日
主題：個人用ホームページ GitHub Things AIへのメモ連携

第1章　GitHub接続でできること

■あなた
GitHubにプラグインしたので、何ができるのか試してみたいです。例えば、どんなことが出来るでしょうか。
■AI
接続したGitHubで使える機能を確認して、試しやすい具体例を挙げます。プラグイン管理のスキルを使って確認します。
■AI
GitHubへの接続を確認できました。アカウント名は伏せますが、あなたのアカウントで問題なく認識されています。
このチャットから日本語で頼んで、GitHub上のファイルを調べたり、修正したりできます。例えば、次のような使い方ができます。
プロジェクトの内容を理解したいなら、「私のリポジトリ一覧を見て、それぞれ何のためのものか説明して」と頼めます。説明書を作ったり直したりしたいなら、「このプロジェクトの使い方を、初心者向けのREADMEにまとめて」です。コードを調べて修正するなら、「このエラーの原因を調べて、修正案を作って」。変更内容をチェックするなら、「このプルリクエストを読んで、変更点と問題点を説明して」。やることを整理するなら、「この改善案をIssueとして登録して」。そして原稿を保存・改訂するなら、「このnote原稿をMarkdownで保存して、前の版からの変更点をまとめて」といった頼み方ができます。
用語を補足しておくと、リポジトリはファイルや変更履歴をまとめる保管場所、プルリクエストは変更を取り込むための提案、Issueは課題やアイデアの記録です。実際に扱える範囲は、接続時に許可したリポジトリと権限によります。
最初のお試しなら、「私のリポジトリ一覧を見て、何が入っているか初心者向けに説明して」が手軽です。note用途なら、原稿の修正履歴を残す使い方もできます。

第2章　READMEの編集を試す

■あなた
それでは、それを依頼します。
■AI
リポジトリ一覧を取得して、説明文やREADMEから、それぞれ何が入っているのか初心者向けにまとめます。
■AI
確認できたあなたのリポジトリは1件です。名前は「desktop-tutorial」で、用途はGitHub Desktopの操作を練習するための場所、公開範囲は非公開になっています。
現在、中に入っているのはREADME.mdという説明ファイル1つです。内容は英語で、おおよそ次のように書かれています。
GitHub Desktopへようこそ。READMEにはプロジェクトの概要や使い方を書きます。6行目に名前を書いて保存し、GitHub Desktopに戻ってください。
つまり、ファイルを書き換えて、その変更を記録する練習用のリポジトリです。今のところ、プログラムやnoteの原稿は入っていません。
次のお試しには、「このREADMEを日本語の説明に書き換えて、変更履歴を残して」と頼むと、GitHub上のファイルを実際に編集するところまで体験できます。
■あなた
それでは、それを実行して下さい。
■AI
READMEを初心者向けの日本語に書き換え、変更内容が分かるメッセージを付けてGitHubに保存します。
■AI
READMEを初心者向けの日本語に書き換え、GitHubへの保存と変更履歴の記録を確認しました。
追加した内容は、READMEの役割、基本用語の説明、編集を練習する手順です。日本語になったREADMEと、今回の変更履歴（コミット）は、それぞれGitHub上のリンクから確認できます（リンクは非公開のため本記事では省略します）。
変更履歴では、元の英語から何が変わったかを確認できます。

第3章　個人のホームページを考える

■あなた
それでは、何か作ってみるのが良いでしょうね。よくホームページを作るということをやっている人がいますが、個人でホームページを作る場合、どのようなメリットがあるのでしょうか。web上の情報を一元管理できるとかですか？
■AI
はい。ネット上に散らばった情報や、自分の活動への入口を一つにまとめるのは、個人ホームページの大きなメリットです。
例えば、次のような使い方があります。
自己紹介・活動紹介として使えば、「私はこういうことをしている人です」と、URL一つで伝えられます。noteやSNSの記事を整理する場所として使えば、テーマ別・おすすめ順に並べて、過去の記事も見つけてもらえます。作品や資料の展示に使えば、文章、写真、制作したアプリなどを、まとまった形で紹介できます。よく使う情報への入口にすれば、ニュース、参考サイト、資料などへのリンクを一か所に集められます。そして自分用の道具として作れば、メモ検索、読書記録、執筆の進捗管理など、欲しい機能を自分で用意できます。
「情報の一元管理」には、少し段階があります。
まずは、リンクをまとめる方法です。noteの記事、SNS、クラウドストレージの資料などへの入口を、一つのページに並べます。比較的簡単に作れます。
さらに進めると、情報そのものを集めて表示できます。例えば、最新記事や予定を自動表示する仕組みです。こちらは、情報を取得するための連携や設定が必要になります。各サービスの内容まで編集するには、さらに機能を作る必要があります。
あなたのnoteでの活動に合わせるなら、「自己紹介＋テーマ別のnote記事一覧＋おすすめ記事」というホームページは用途が分かりやすそうです。記事が増えても、「初めての人にはこれを読んでほしい」という順番で案内できます。
一方、自分で情報を整理することが主目的なら、自分専用の情報整理ページという形もあります。最初に「人に見てもらう場所」と「自分が毎日使う場所」のどちらを作りたいか考えると、必要な機能が見えてきます。

第4章　自分が毎日使うホームを作る

■あなた
「自分が毎日使う場所」を作ってみたいです。
■AI
毎日開く「自分用のホーム」として、よく使うリンク、今日やること、メモをまとめたページを作ります。まずはnoteの執筆にも使える構成にします。Sitesの制作・公開スキルを使って、動くものを確認できるところまで進めます。
■AI
このページに置きたい「よく使うサイト」や「毎日したいこと」があれば教えてください。まずは、リンク・やること・メモをまとめた構成で進めます。
■AI
リンクを開く、今日のやることにチェックを付ける、思いつきをメモする、という3つを同じ画面にまとめます。書いた内容は次回も残り、ご本人だけが使えるページにします。
■あなた
メール、証券会社、動画サイト、note、カレンダー、通販サイト、電子書籍サイト、オフィスソフトなどのサイトです（具体的なサービス名は伏せます）。毎日やっているのは、カレンダー、メールチェック、noteの生成です。
■AI
メール・予定・noteをすぐ開けるように上段にまとめ、証券会社、動画サイト、通販サイト、オフィスソフトも並べます。日々の流れに合わせて「今日のやること」と「noteのアイデアメモ」を下に置きます。
■AI
「電子書籍サイト」はどのサービスでしょうか？サイト名かURLを教えてください。ほかのリンクから先に組み込みます。
■あなた
（電子書籍サイトの名前を伝えました。）
■AI
電子書籍サイトも追加しました。メール・カレンダー・noteを上に、買い物や動画などのリンクをその下にまとめた画面ができています。続いて、やることやメモを保存できるようにします。
■AI
リンクはあとから追加・編集でき、やることは完了チェック、メモは保存・書き直しができるようにしました。いま、ページを開き直しても内容が残ることと、保存に失敗したときに入力が消えないことを確認しています。
■AI
保存・編集・削除の確認ができました。メール、カレンダー、note、電子書籍サイトなどをまとめた「まいにちのホーム」を、ご本人だけが開けるURLで使えるようにします。
■AI
ページ本体と保存機能は完成しています。いま専用URLを有効にしているところです。開けるようになったら、そこをブックマークして毎日の入口として使えます。
■AI
専用URLが使えるようになり、閲覧できるのがご本人だけであることも確認できました。最後に、実際のURLから保存先へ接続できることを確認しています。
■AI
ご本人だけが開ける「まいにちのホーム」を作りました（専用URLは非公開のため省略します）。このホームでは、次のことができます。

• メール・カレンダー・noteなど、いつものサイトを開く

• 今日のやることを追加し、完了にチェックする

• noteのアイデアをメモして保存・編集する

• リンクを自分で追加・変更する

保存した内容は次回も残ります。まずはブックマークして、やることかメモを一つ書いてみてください。

第5章　ホームのタスクとThings

■あなた
中々良いですね。因みにタスクリストは現在、Thingsというアプリを使っているのですが、ホームページ上のタスクは、何をベースにしているのでしょう。
■AI
このホームページのタスクリストは、今回、このページ専用に作ったものです。タスクはサイト側のデータベース（Cloudflare D1）に保存しています。
現在できるのは「追加・完了チェック・削除」で、保存した内容は次回も残ります。Thingsとは連携していないため、互いのタスクは同期されません。
すでにThingsを日常的に使っているなら、二重管理を避けたいですね。ホーム側は「noteを書くときの簡単なチェックリスト」に用途を絞ったり、タスク欄を外してアイデアメモを広くしたりできます。
■あなた
Thingsと連携は難しいですか。
■AI
Thingsで利用できる連携方法を公式情報で確認し、このホームページからできることを整理します。
■AI
「Thingsを開く」「Thingsにタスクを送る」連携なら、比較的簡単です。一覧や完了状態まで同期する場合は、少し大がかりになります。
公式機能を踏まえると、実装の目安は次の通りです。ホームからThingsの「今日」を開くのは簡単です。ホームに入力した内容をThingsへ追加するのも比較的簡単です。一方、Thingsのタスク一覧をホームにも表示するには、Macなどで情報を読み出し、ホームへ送る仕組みが必要になります。さらに、両方で編集・完了して自動同期するとなると、更新の食い違いや重複も扱う必要があり、手間がかかります。
最初の2つには、Thingsが公式に用意している「アプリを呼び出す専用リンク」を使えます。Thingsをインストールした端末で動く仕組みです（参考：公式説明）。
一覧の取得や更新には、Appleの「ショートカット」などを使えますが、ホームページとの橋渡しは別途作る必要があります（参考：公式のショートカット機能）。
今回なら、まずはホームに「Thingsの今日を開く」「Thingsに追加する」の2つを置く構成が合いそうです。タスクの管理先をThingsにまとめながら、このホームを毎日の入口として使えます。

第6章　Things連携とインボックス

■あなた
それでは、それを依頼します。
■AI
ホームに「Thingsの今日を開く」と「Thingsに追加する」を組み込みます。入力したタスクをThingsへ渡せるようにし、現在のホームに反映します。Sitesの制作・公開スキルに沿って進めます。
■AI
「Thingsの今日を開く」ボタンと、タスク名をThingsの入力画面へ渡す欄を作ります。追加するときはThings側で内容を確認して保存する形です。ホームに保存済みのタスクは、下の折りたたみ欄から引き続き確認できます。
■AI
2つの操作を組み込み、日本語や記号を含むタスク名も正しくThingsへ渡せることを確認しました。これから、いつものホームのURLに反映します。
■AI
「まいにちのホーム」にThings連携を追加しました。

• Thingsの今日を開く：Thingsの「今日」を表示します。

• Thingsに追加する：入力したタスク名をThingsへ渡します。Thingsの入力画面で確認して保存してください。

以前のタスクは「ホーム用チェックリスト」に残しています。
ホームを再読み込みしてお試しください。Thingsが開かない場合は、Safariなどでホームを開いてください。
■あなた
開くのはThingsのインボックスに変更して下さい。
■AI
Thingsを開くボタンを「インボックスを開く」に変更して、いつものホームに反映します。
■AI
ボタンの行き先・表示名・アイコンを、インボックス用に変更しました。確認が済んだので、いつものホームのURLへ反映しています。
■AI
「Thingsのインボックスを開く」に変更しました。「まいにちのホーム」に反映済みです。

第7章　シンプルなデザインへ

■あなた
このホームページのデザインを、もっとシンプルでカッコいい様に、変更して下さい。
■AI
余白を広く取り、色数と装飾を抑えた、すっきりしたデザインに整えます。Sitesのスキルを使って、今の機能を保ちながらホームページを更新します。
■AI
白と黒を基調に、カードの枠や影、大きな見出しを減らします。よく使うサイトを上段に、Thingsとnoteのメモを下段にまとめ、日々の操作にすぐ入れる配置にします。
■AI
新しいレイアウトができました。Thingsのインボックスを開くボタンを黒で際立たせ、初回設定の説明は折りたたんでいます。スマートフォンでは縦一列に並ぶように整えました。
■AI
変更後の確認が済みました。新しいデザインを、いつものホームページのURLへ反映しています。
■AI
白と黒を基調に、余白と細い線で整えたシンプルなデザインへ変更しました。Thingsやメモの機能も引き続き使えます。新しいホームページは、いつものURLから開けます。
以前の表示が残る場合は、ページを再読み込みしてください。

第8章　コードとデータの保存先

■あなた
良い感じです。取り敢えずこれで使ってみます。そしてこれは、GitHubに格納できるのでしょうか。
■AI
現在の保存先を確認して、GitHubに格納できるものを整理します。
■AI
はい、できます。デザインや機能を作っているソースコードを、GitHubに格納できます。
現在はSites側に保存されています。GitHubにも保存すれば、変更履歴を確認したり、以前のデザインに戻したり、別の環境で開発を続けたりできます。今のホームページのURLも、そのまま使えます。
ご自身用の非公開リポジトリ（コードの保管場所）に保存できます。
なお、入力したメモやタスクは別のデータベースに保存されているため、それらのバックアップは別途行う形になります。
■あなた
入力したメモやタスクもGitHubに格納しないと、次回の変更時に困るのではないですか？
■AI
変更時にメモやタスクがどう扱われるか、今の保存処理を確認します。
■AI
通常のデザインや機能の変更なら、メモやタスクをGitHubに入れなくても大丈夫です。今の仕組みを確認しました。
保存先は次のように分かれています。

• ホームページのコード：画面や機能、データの読み書きの仕組み。GitHubに保存できます。

• 保存済みのメモ・ホーム用タスク：サイト専用のデータベースに保存されています。

次回も同じデータベースを使って更新すれば、入力した内容を引き継げます。今回のデザイン変更でも、保存先は変えていません。
先ほどの「バックアップは別途」というのは、誤削除への備えや、別のサービスへ引っ越す場合のためです。変更のたびにGitHubへコピーする必要がある、という意味ではありません。

第9章　GitHubの非公開リポジトリに保存

■あなた
それではGitHubの非公開リポジトリ（コードの保管場所）に格納して下さい。
■AI
非公開リポジトリを作成し、ホームページのコードと変更履歴を保存します。まず、接続中のGitHubアカウントと保存するファイルを確認します。
■AI
保存先のアカウントを確認できました。リポジトリ名は「daily-home」にして、これまでの変更履歴もまとめて格納します。
■AI
コードの準備はできています。GitHub連携には新しいリポジトリを作る機能がないため、ログイン済みのGitHubアプリから作成できるか確認しています。
■AI
新規リポジトリの作成にはGitHubのWeb画面へのログインが必要です。開いたログイン画面でご自身のアカウントにログインし、完了したら教えてください。コードの準備は進めておきます。

• ログインしました

• ログイン済みのChromeを使ってください

■あなた
ログインしました。
■AI
ログインを確認できました。非公開で作成し、現在のコードに加えて、最初の作成から今回のデザイン変更までの履歴を保存します。
■AI
非公開リポジトリを作成できました。過去の変更を順番に保存し、GitHub上のファイルが元のコードと一致することを確認しています。
■AI
GitHubの非公開リポジトリに保存しました。リポジトリ「daily-home」は、ご自身のGitHubアカウントから開けます。
コード一式と、初期作成から今回のデザイン変更までの履歴を格納済みです。今のホームページも、そのまま使えます。
■あなた
ログインしました。
■AI
ありがとうございます。ログイン後の作業も完了し、コードと変更履歴を非公開で保存できました。保存したリポジトリは、GitHub上で確認できます。

第10章　次回の変更に備える

■あなた
素晴らしいですね。今後、仕様変更をすることもあると思うのですが、その場合、すぐに呼び出せる様にしたいです。どうしたらいいですか。
■AI
次回もすぐに変更を頼めるよう、Codexでの呼び出し方をOpenAIドキュメントのスキルで確認します。
■AI
この会話を「まいにちのホームの変更・管理」という名前にして、ピン留めします。次回はそこを開けば、この続きから変更を依頼できます。
■AI
すぐ開けるよう、この会話を「まいにちのホームの変更・管理」に名前を変え、ピン留めしました。
次回はサイドバーのピン留め欄から開き、そのまま変更内容を伝えてください（参考：公式ガイド）。
例えば、こんな依頼で大丈夫です。
ホームのメモに検索機能を追加してください。変更後はGitHubとホームページにも反映してください。
この会話なら、これまでの作成経緯や保存先を参照しながら、続きを進められます。

第11章　チャコールとライムのデザイン

■あなた
ホームページのデザインを、もっとカッコ良くセンスある感じにしたいです。仕様変更を依頼します。
■AI
今のシンプルさを生かしながら、文字の強弱、配色、余白にメリハリをつけて整えます。Sitesのスキルを使い、ホームページとGitHubの両方に反映します。
■AI
今回は、深いチャコールに淡いライム色を効かせたデザインにします。リンクとThingsを見渡せる配置にし、メモ欄は明るい紙のような色で、書く場所をはっきりさせます。
■AI
新しい配色とレイアウトを組み込みました。リンクのアイコンやボタンも統一し、メモ欄の文字を読みやすく整えています。
■AI
確認が済みました。新しいデザインをいつものURLへ反映し、GitHubにも変更を保存します。
■AI
深いチャコールとライム色を基調に、文字・アイコン・余白を整えました。メモ欄は明るく、書きやすいデザインにしています。新しいホームページは、いつものURLから開けます。
GitHubにも変更を保存済みです。
■あなた
だいぶカッコいい感じになりました。しばらくこれで使ってみようと思います。
■AI
ぜひ、普段の流れで使ってみてください。使いにくいところや追加したい機能が見つかったら、この会話でそのまま教えてください。

第12章　ChatGPTとClaude Codeの比較

■あなた
事情を先に説明します。今、ChatGPTとClaude Codeの使用感を比べる実験をしています。同じGitHubリポジトリ（daily-home）を両方から使うため、共通の指示書としてAGENTS.mdとCLAUDE.mdを追加しました。また、Claude側のデザイン案がtry/claude-designというブランチに入っていますが、これは見比べ用なので触らないでください。AGENTS.mdには、私（持ち主）がgit操作を自分では行わないこと、作業の前後にpullとpushをすることなどを書いてあります。
そのうえで作業をお願いします。AGENTS.mdを読んでから、mainからtry/codex-designというブランチを作り、ホームページのデザインをカッコいいものに作り直してください。機能やデータには手を入れず、見た目だけ変えてください。終わったらpushして、mainに向けたPRを作ってください。mainへのマージはしないでください。
■AI
まずGitHubの最新のAGENTS.mdを読み、mainを基にtry/codex-designブランチで作業します。Sitesのスキルを使って見た目を作り直し、確認後にpushしてmain向けのPRを作成します。Claude案のブランチには触れず、マージもしません。
■AI
AGENTS.mdとREADMEを確認しました。最新のmainを取得し、独立した作業場所で進めます。デザインは、深いネイビーと鮮やかなブルーを使い、余白と文字の強弱で整えた、落ち着きのあるワークスペースにします。
■AI
よく使うサイトを上段に横並びにし、その下にThingsと明るいメモ欄を配置します。変更をスタイルシート中心にまとめることで、既存の操作や保存処理を保ったまま、画面全体の印象を変えます。
■AI
新しいデザインのプレビューを開きました。今回は比較用のため、本番のメモやタスクを読み込まない別環境です。変更は外観とREADMEの説明だけに収まり、現在、指定の型チェックとビルドを確認しています。
■AI
型チェックとビルドは両方通りました。差分も確認し、機能・Things連携・データ保存のコードはmainと同じです。これから比較用ブランチをpushし、main向けのPRを作成します。
■AI
ネイビーとブルーを基調に、リンクを上段、Thingsと明るいメモ欄を下段に配置しました。
try/codex-designへpushし、main向けの確認用PR（#2）を作成済みです。

• 変更は外観とREADMEの説明のみです。

• 機能・保存済みデータ・Claude案は変更していません。

• 型チェックとビルドは成功しました。

• mainへのマージと公開サイトへの反映は行っていません。

第13章　最新版とまとめ帳を公開

■あなた
daily-homeリポジトリのmainが更新されています（メモ主役の配置、ネイビー×青の色、メモを束ねてAIに渡す機能、まとめ帳）。最新のmainを公開サイトに反映してください。データベースにsummariesという表が増えていますが、無ければ初回アクセス時に自動で作られる仕組みなので、マイグレーションの扱いはあなたの判断に任せます。公開後、トップページと/api/homeが正常に返ることを確認して報告してください。
■AI
最新のmainとAGENTS.mdを確認し、Sitesの公開手順で反映します。summariesの作成処理も確認したうえで、公開後にトップページと/api/homeの応答を確かめます。
■AI
最新のmainに、メモ中心の配置・AIに渡す機能・まとめ帳が揃っていることを確認しました。summaries用のマイグレーションも用意されており、表が既にあっても安全に実行できるため、そのまま公開に含めます。公開範囲は本人限定を維持します。
■AI
型チェックとビルドが通り、summariesのマイグレーションも既存の表を変更しないことを確認しました。コードは最新のmainと同一のまま、これから公開サイトに反映します。
■AI
公開への反映が完了し、summariesの表が追加されたことも確認できました。最後に、認証付きでトップページと/api/homeの応答を確認しています。
■AI
最新のmainを公開サイトに反映しました（公開版6）。
公開後、認証付きで確認済みです。

• トップページ：HTTP 200

• /api/home：HTTP 200（JSON）

• summaries表：既存のマイグレーションで追加済み

メモ中心の配置、AIに渡す機能、まとめ帳が利用できます。公開範囲は本人限定のままです。