100 Days of AI-directed Web
プロがAIをディレクションして、100日間、毎日ひとつサイトをつくる記録。AIに丸投げ（ポン出し）ではなく、どこを人間が決めるか——コンセプト・組版・余白・引き算。その全工程を、各日の「つくり方の全容」として公開します。
Built so far
DAY 020 — 予約カレンダーSkill・無料配布（Skillそのものの作り方も公開）
day16〜19で作ってきた予約カレンダー——Googleカレンダー連動・LINE予約・送るだけで確定する自動予約・二重予約防止——を、Claude Code の Skill として無料配布します。質問に1つずつ答えるだけで、あなたのお店用の予約ページができる部品です。商用利用も、制作者がお客様の案件に使うのもOK。つくり方のページでは、温存してきた「Skillそのものの作り方」も公開しています。
DAY 016 — 高円寺・席ひとつの美容室(Googleカレンダー連動)
やりたいメニュー(=カット / カラー / パーマ…)にチェックを入れると、その所要時間ぶんまるごと空いている日時だけが出る。空き状況の元は、店主が普段使っている Google カレンダーそのもの。予約を書けばサイトの空きが減り、終日の「休み」を入れれば臨時休業になる。肝は、カレンダーには「カット 田中さん」と名前が入るのに、サイトに渡すのは「何時から何時が埋まっているか」だけで、お客さんの名前は一切サイトに出ないこと。予約システムは作らず、空いてる枠を選ぶと日時が LINE のメッセージに入る。デザインは高円寺の路地に馴染む墨色 + オリーブ + 明朝体、iOS風のすりガラス。
DAY 015 — 八ヶ岳・原村のヨガスタジオ(LINE 対話型 bot)
章3=C系「自分で更新できる」連動シリーズの4本目。LINE で「更新したい」と送ると、bot がメニュー(=空きクラス / お知らせ / 休講 / 本日のレッスン)を出して、選んで案内に答えるだけで サイトの該当箇所が書き換わる対話型 bot 構成。一度の会話で「本日のレッスン」と「お知らせ」を続けて更新するように、複数の項目を切り替えて更新できるのが、day13(=形式テキスト1通)との違い。サイトは八ヶ岳の森のなかで静かに呼吸を整えるような、クリーム白 + モスグリーン + 上品なセリフ書体の natural editorial。覚えるのは「更新したい」の 5 文字だけ。
DAY 014 — 町の内科・小児科(スプレッドシート連動)
章3=C系「自分で更新できる」連動シリーズの3本目。営業時間と定休日をスプレッドシートに書いておくと、現在時刻と照らし合わせて「午前診療中」「昼休み中」「午後診療中」「診療終了」「本日休診」がサイトのファーストビュー一番上に大きく出る。受付の人が手で更新するのは混み具合の3択(=空きあり/混雑中/受付終了)だけで、他はぜんぶ自動。完全に静的なHTMLだと臨時休診のようなイレギュラーに対応できない、その隙間をスプレッドシート1枚で吸収する設計。白基調 + 水色 + 丸ゴシック(=Zen Maru Gothic)で 清潔と親しみのあいだを狙う。
