Behind the build — Day 015

つくり方の全容

day15 は、八ヶ岳・原村のヨガスタジオ「Calm(架空)」。1 人で運営しているような小さなスタジオが、毎日の「ワンポイントレッスン」と「空きクラス」と「お知らせ」を、講師 1 人の手で苦なく更新していけるか。LINE で「更新したい」と送ると、bot が メニューを出し、選んで案内に答えるだけで サイトが書き換わる 構成にしました。day13 の LINE ワンショット (=形式テキスト 1 通で送る) と違って、こちらは 対話で複数の項目を順番に切り替えて更新できる 設計です。完成したサイトと、その仕組みを順番に。

Calm サイトのファーストビュー。森のなかで蓮華座を組み手で印を結ぶ人物の写真の上に、大型の italic セリフで『Calm』、その下に『呼吸を、思い出す時間。』のキャッチコピー
サイトのファーストビュー。左下の「Calm」が森の写真に大きく重なる、雑誌の表紙のような構成

01

LINE に「更新したい」と送ると、メニューが出る。

LINE トーク画面。ユーザーが『更新したい』と送信、bot が『何を更新しますか?』と返信し、画面下に『お知らせ / 休講 / 本日のレッスン / キャンセル』のクイックリプライ ボタンが並ぶ
「更新したい」の一言で、4 つの選択肢が画面下に並ぶ

「今日のレッスンを更新したい」と思ったら、LINE で「更新したい」と送るだけ。bot が「何を更新しますか?」と返事をして、空きクラス / お知らせ / 休講 / 本日のレッスン の 4 つを画面下のクイックリプライで提示します。覚えるのは「更新したい」の 5 文字だけ。形式テキストも、特別なコマンドも、ありません。

出した指示LINE で「更新したい」と送ると、bot が「何を更新しますか?」と返してきて、選択肢を出してほしい。選択肢は 4 つくらいで、空きクラスとお知らせと休講と本日のワンポイントレッスン。それぞれを選んだら、次の入力をガイドしてほしい。

02

選ぶと、bot が次に何を送ればいいか教えてくれる。

LINE トーク画面。ユーザーが『本日のレッスン』をタップして送信、bot が『今日のワンポイントレッスンを送ってください (=80-100 字推奨)。例: 肩こりの人は、息を吸う時に肩を上げず、鎖骨を横に広げるイメージで。』と返信、画面下に『キャンセル』のクイックリプライ ボタン
「本日のレッスン」を選ぶと、bot が「次はこの形式で送って」と案内してくれる

「本日のレッスン」を選ぶと、bot が「今日のワンポイントレッスンを送ってください (=80-100 字推奨)」と案内し、例文まで添えてくれます。利用者は その案内に従って、本文を送るだけ。「字数を覚える」「形式を整える」必要がない。ガイドに従う、それだけです。

03

一度の会話で、いくつも切り替えて更新できる。

LINE トーク画面。ユーザーが本文を送信、bot が『Sheets に書き込みました。サイトの『本日のワンポイントレッスン』が更新されました。』と返信、画面下に『続けて更新する / 終了』のクイックリプライ ボタンが並ぶ
1 件目が終わると「続けて更新する」が出る
LINE トーク画面。ユーザーが『続けて更新する』をタップして送信、bot が再び『何を更新しますか?』と返信、画面下にメニュー 4 択のクイックリプライが再表示される
タップするとメニューが戻ってくる。これが対話型の核心

1 件目の更新が終わると、bot は「続けて更新する / 終了」の選択肢を出します。続けて更新するをタップすれば、また 4 つのメニューが出てくる。たとえば 今日は「本日のレッスン」と「お知らせ」を続けて更新する、ということが、サイトを行き来せずに 1 つのトーク内で完結します。これが day13 (=形式テキスト 1 通で送る) との大きな違いです。

04

サイトは「八ヶ岳の森」のように、静かに、深く。

Calm サイトの『本日のワンポイントレッスン』セクション。クリーム色の吹き出し型カードに、日付『2026.06.29 MON』と本文、署名『— Asana』、右側にモノクロの講師ポートレート写真
「本日のワンポイントレッスン」は、講師が話しかけている吹き出しの形に

配色は クリーム白 + モスグリーン 1 色、書体は Cormorant Garamond の italic と Noto Serif JP。八ヶ岳の森のなかで、ゆっくり呼吸を整える時間そのもののような、静かで深いトーン。本日のワンポイントレッスンは 吹き出し型のカード + モノクロの顔写真 で、「目の前で話してくれている」見え方に。雑誌のような editorial 大型 italic で「Calm」を主役に置きました。

05

そして、完成形。

完成形 PC。森の中で蓮華座を組む人物のフルブリード写真の FV / 本日のワンポイントレッスン / 今週の空きクラス / クラススケジュール / インストラクター紹介 / お知らせ / アクセス / 料金 / LINE CTA の順に並ぶ
完成 — Calm(PC)
完成形 SP。同じ構成が縦に積み上がる
完成 — Calm(SP)

その日のレッスンを終えてから、LINE を開いて 1〜2 分。「更新したい」「本日のレッスン」「(=本文をペースト)」「続けて更新する」「お知らせ」「(=本文をペースト)」。それだけで、サイトの 2 か所が同時に書き換わります。CMS も予約システムも、ありません。静的 HTML + Google スプレッドシート + LINE bot だけで、八ヶ岳・原村の小さなヨガスタジオの今日が、サイトの一番上で語り続けます。これが day15 の答えです。

「対話で、サイトを育てていく」

個人のサロン (=美容室・ネイル・整体・カウンセリング)、家族経営の小さなカフェや喫茶店、地域の塾や習いごと教室など、「日々の小さな変動を、店主 1 人で苦なく更新したい」業態なら、同じ仕組みで応用できます。メニューを増やすだけ。覚えるのは「更新したい」の 5 文字だけ。100連発の中で、もう少し追いかけてみます。

サイトを見る →