作った記録

作ったものごとの、公開までの流れと、誰が何をしたかです。

#9 1996年風ホームページ メーカー

部品を選ぶだけで、アクセスカウンター・キリ番・工事中の看板がある1996年風の自分のホームページが作れる遊び。「あなたは 000001 人目のお客様です」

1996年風ホームページ メーカーの画面。左で部品を選び、右の古いブラウザ風の枠に星空背景と虹色の見出しのページが出ている
状態
✓ 動いている
公開日
2026.11.02
番号
小さなWebツール #9
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 11.01「面白い企画」10案から、1996年のホームページ体験を選ぶ(社長)
  2. 11.01博物館型・なりきり型・自分で作る型の3案から、自分で作る型を選ぶ(社長)
  3. 11.025行の仕様どおりに試作。保存した画像で模様が消える問題を直す
  4. 11.02公開(社長が合格)

日付の記録です(時刻は残していません)。

数字で見る

13個選べる部品
6種類背景
Claude作ったAI

誰が何をしたか

  • 題材と形(自分で作る型)の選択社長(人)
  • 部品・画面・BGM・コードAI(Claude)
  • 合格と公開の判断社長(人)

当時の見た目を新しく作り直した再現です。実在のサイトや画像は使っていません。BGMはコードで鳴らすオリジナルの短い曲です。

#8 たまき屋の見本サイト(架空)

架空の仕出し・お弁当屋の、5ページのお店のサイト。締め切り・お届け範囲・支払いをまとめた「ご注文の方法」と、写真が入る場所の提案つき。「集まりの真ん中に、あたたかいご飯を。」

たまき屋(見本)のトップ画面。こげ茶の背景に「集まりの真ん中に、あたたかいご飯を。」の見出しと、お品書き・ご注文の方法のボタン
状態
✓ 動いている
公開日
2026.11.01
番号
見本サイト #8
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.26見本サイトの2件目は飲食店に決める(社長)
  2. 10.31業種の候補を8つ出し、仕出し・お弁当屋で作り始める
  3. 11.015ページと、フォントの見比べ6案を作る(AI)
  4. 11.01業種とフォントを決め、見本として公開(社長が決定)

日付の記録です(時刻は残していません)。

数字で見る

5ページトップ・お品書き・ご注文の方法・お店について・ご注文
6案社長が選んだフォントの見比べ
Claude作ったAI

誰が何をしたか

  • 飲食店にすること・業種とフォントの判断社長(人)
  • 業種の候補・原稿・デザイン・コード・写真の提案文AI(Claude)
  • 公開の判断社長(人)

店名・住所・電話番号・料金・お知らせは、すべて架空です。写真の場所には、どんな写真を入れるとよいかの提案を書いています。見本のため、注文フォームは送信できません。

#7 動く動画用語の絵図鑑

自分で動画を作り始めた人のための、動画制作の用語24語を、押すと動く見本で引ける図鑑。「押すと、言葉が動き出す」

動く動画用語の絵図鑑のトップ画面。「動く動画用語の絵図鑑」の見出しと、エンドカードの見本が再生されている画面
状態
✓ 動いている
公開日
2026.11.01
番号
小さなWebツール #7
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.24動画の最後のロゴの所を何と呼ぶか、の質問から、絵図鑑の2巻を動画の言葉にすると決める(社長)
  2. 10.24読む人を「自分で動画を作り始めた人」に、HTML・CSS・JavaScriptでポップに動く形にすると決める(社長)
  3. 10.245つのデザイン案から、1巻目とそろう形を選ぶ(社長)
  4. 10.31漏れていた編集の基本8語を足して24語に
  5. 11.01各ページに目次へのリンクを足して公開(社長が合格)

日付の記録です(時刻は残していません)。

数字で見る

24語載っている言葉
24本押すと動く見本
Claude作ったAI

誰が何をしたか

  • 題材・読む人・動かす方針社長(人)
  • デザインと書体の選択、スマホでの確認と指摘社長(人)
  • 語の選定・文章・動く見本・コードAI(Claude)
  • 合格と公開の判断社長(人)

見本の動きと音は、すべてコードで作っています(動画や音声のファイルは使っていません)。読み上げの声は、見ている端末のブラウザの声です。

#6 青葉設備工業の見本サイト(架空)

架空のビル設備工事会社の、9ページの企業サイト。採用ページと、写真が入る場所の提案つき。「建物の水と空気を、止めない。」

青葉設備工業(見本)のトップ画面。紺色の背景に「建物の水と空気を、止めない。」の見出しと、事業案内・採用情報のボタン
状態
✓ 動いている
公開日
2026.10.25
番号
見本サイト #6
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.23企業向けHPを、設計書→原稿→コードの順に作る(社長とAI)
  2. 10.25架空のビル設備工事会社として、社名・住所・数字を作り直す
  3. 10.25写真の場所を「どんな写真を入れるか」の提案文に、フォントを決める(社長)
  4. 10.25見本として公開(社長が決定)

日付の記録です(時刻は残していません)。

数字で見る

9ページトップ・会社紹介・事業案内・採用など
3か所お知らせ・施工実績・求人を、ファイル1つの書き換えで更新できる
Claude作ったAI

誰が何をしたか

  • ページ構成・デザイン案・フォントの判断社長(人)
  • 設計書・原稿・コード・写真の提案文AI(Claude)
  • 公開の判断社長(人)

会社名・住所・電話番号・実績・求人の条件は、すべて架空です。写真の場所には、どんな写真を入れるとよいかの提案を書いています。

#5 Webデザイン用語の絵図鑑 AIへの頼み方付き

サイトを頼むときに出てくる31語を見本図と図解で引き、選んだ言葉をツリーに集めて、AIへの指示文を作れる図鑑。「選んだものが、そのまま指示文になる」

Webデザイン用語の絵図鑑 AIへの頼み方付きの画面。左に選んだ言葉が木の形に並び、右にカフェのサイトを頼むAIへの指示文ができている
状態
✓ 動いている
公開日
2026.10.22
番号
小さなWebツール #5
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.21図鑑に発注メモ メーカーの良さを載せ、プロンプトを作る道具にする案(社長)
  2. 10.21選んだものが木のように並ぶ形を決める(社長)
  3. 10.22社長が実際に使い、サイトの種類・リセット・使ったあとの案内・表示の切り替えを足す
  4. 10.22名前を決めて公開(社長が合格)

日付の記録です(時刻は残していません)。

数字で見る

31語載っている言葉
2つ作れる文(AIへの指示文・発注メモ)
Claude作ったAI

誰が何をしたか

  • 題材と、ツリーで見せる形社長(人)
  • 実際に使っての確認と指摘社長(人)
  • 語の選定・指示文の例・文章・図・コードAI(Claude)
  • 名前と合格の判断社長(人)

入力した内容は、この端末のブラウザの中にだけ残り、どこにも送りません。図はすべてコードで描いています。

#4 Webデザイン用語の絵図鑑

ヘッダーやフッターなど、サイトを頼むときに出てくる言葉を、見本図と図解で引ける図鑑。「その場所、なんて呼ぶ? 16語」

Webデザイン用語の絵図鑑のトップ画面。「その場所、なんて呼ぶ?」の見出しと、スマホのページの見本図。ハンバーガーメニューが指されて、名前と説明が出ている
状態
✓ 動いている
公開日
2026.10.22
番号
小さなWebツール #4
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.20題材を決める(社長)
  2. 10.2016語の図鑑を作る(社長が合格)
  3. 10.2231語の合本「なんて呼ぶ?Web図鑑」として公開
  4. 10.22合本を取り下げ、16語の図鑑に戻して公開(社長の判断)

日付の記録です(時刻は残していません)。

数字で見る

16語載っている言葉
2つ見本図(スマホ・PC)
Claude作ったAI

誰が何をしたか

  • 題材社長(人)
  • 書体と配色社長(人)が候補から選択
  • 語の選定・構成・文章・図・コードAI(Claude)
  • 合格の判断社長(人)

図はすべてコードで描いています。

#3 サイト発注メモ メーカー

14の質問に答えると、ホームページ制作会社に渡す発注メモのたたき台ができる道具。「答えるだけで、頼み方がまとまる。」

サイト発注メモ メーカーの画面。左に「お店や会社の名前を教えてください」の質問、右に目的・締め切り・予算の欄とページの地図がある発注メモの伝票
状態
✓ 動いている
公開日
2026.10.22
番号
小さなWebツール #3
作った体制
人とAI

サイトを開く

公開までの流れ

  1. 10.19題材を決める(社長)
  2. 10.19デザインの方向を選ぶ(社長)
  3. 10.20社長の実機確認で2か所を直す
  4. 10.20完成(社長が承認)
  5. 10.22サイトで公開

日付の記録です(時刻は残していません)。

数字で見る

14問質問の数
0件送信・保存する入力
Claude作ったAI

誰が何をしたか

  • 題材とデザインの方向社長(人)が候補から選択
  • 実機での確認と指摘社長(人)
  • 質問の設計・文章・デザイン・コードAI(Claude)
  • 合格の判断社長(人)

入力した内容は画面の中だけで使い、どこにも送りません。ページを閉じると消えます。

#2 喫茶 ろじのね(架空)

架空の喫茶店のサンプルサイト。「路地の奥で、一杯ずつ。」

喫茶 ろじのね のトップ画面。店名と「路地の奥で、一杯ずつ。」の一文、路地の奥の店とコーヒーとケーキのイラスト
状態
✓ 動いている
公開日
2026.10.19
番号
サンプルサイト #2
作った体制
第1期・AIだけ

サイトを開く

公開までの流れ

  1. 10:16着手
  2. 10:20編集へ提出
  3. 10:22編集の確認に合格
  4. 10:23社長の承認
  5. 10:24公開

日本時間。2026.10.19の記録です。

数字で見る

約8分着手から公開まで(確認待ちを含む)
7分着手から社長の承認まで
0回制作の作業で、人の手が入った回数
0回編集の差し戻し

誰が何をしたか

  • 制作AI社員(Web制作)
  • 確認AI社員(編集)
  • 承認AI社長
  • 公開一部を株主(人)が担当

画像はコードで描いたイラスト(SVG)です。

#1 麦ともくれん(架空)

架空のパン屋のサンプルサイト。「朝いちばんの焼きたてを、いつもの道で。」

麦ともくれん のトップ画面。店名と「朝いちばんの焼きたてを、いつもの道で。」の一文、パン屋の建物のイラスト
状態
✓ 動いている
公開日
2026.10.17
番号
サンプルサイト #1
作った体制
第1期・AIだけ

サイトを開く

公開までの流れ

  1. 10:49着手
  2. 記録なし編集へ提出
  3. 記録なし編集の確認
  4. 10:54社長の承認
  5. 10:56公開

日本時間。2026.10.17の記録です。

数字で見る

約7分着手から公開まで(確認待ちを含む)
5分着手から社長の承認まで
0回制作の作業で、人の手が入った回数
0回編集の差し戻し

誰が何をしたか

  • 制作AI社員(Web制作)
  • 確認記録なし
  • 承認AI社長
  • 公開記録なし

画像はコードで描いたイラスト(SVG)です。