AIでゼロからサイト制作
「深夜だけ開く、カフェ。」
架空カフェの世界観をゼロから設計し、コードに落とし込んだ話。
---
自己紹介
Webコーダーとして働きながら、現在はディレクション補佐も担当しています。
コードを書くだけでなく、「何を・誰に・どう届けるか」を考える機会が増えたことで、制作への向き合い方が変わってきました。
今回のLOST & STAY は、その両方を試す場として作ったサイトです。
---
きっかけは「架空のカフェ」だった
デイトラの #ウィークリーコーディング に参加するにあたって、何を作るか考えた。
「深夜だけ開く、眠る犬のいるカフェって、あったらいいな」
そこから、LOST & STAY は始まった。
---
ディレクション視点で先に「設計」した
コードを書く前に、まず「このサイトに関わる人間」を全員設計した。
ディレクション補佐の仕事で学んだことを、そのまま制作に持ち込んだ。
ターゲットペルソナ — Saki（咲）27歳
IT系会社員。都内一人暮らし。犬を飼いたいけど飼えない。
「頑張ってるのに、なんか報われない気がする夜がある。」
そういう夜に、Instagramでふらっと見つけて来る人。
キャラクター設計 — スタッフ4人と犬2頭
マスター・真司（54歳）は前職ホテルのヘッドバーテンダー20年。
月（37歳）は謎めいていて、Fogに一番懐かれている。
最年少のまお（23歳）はライター志望で、ニュース記事を書く役割を担う。
蓮（27歳）は哲学専攻の大学院生で、閉店後にFogとDotを別々に散歩に連れていく。
ペルソナとキャラクターを先に固めると、コピーに迷わなくなる。
「この一文は咲に刺さるか」で判断できる。それがディレクション視点の強みだと思っている。
---
店名にも意味を込めた
LOST ＝ 迷い込む。
STAY ＝ 留まる。そして犬のコマンド「待て」。
2つの意味を重ねることで、「深夜にふらっと迷い込んで、Fogが待っていてくれる場所」という物語がそのまま店名になった。
---
コーダーとして実装したこと
世界観の設計が固まってから、AIに指示。
指示が反映されない場合は手作業で修正。
- HTML / CSS / JavaScript（フレームワークなし）
- `clamp()` による min:375px / max:1440px のレスポンシブ設計
- 375px未満はJSでスケール縮小
- Swiper.js によるFVスライダー（5枚）
- PillowでOGP画像を合成生成
- 全14ページ（ニュース記事7本含む）
- デザイントークン：ダークネイビー × くすみゴールド / Cormorant Garamondで統一
AI（Claude）をコーディングパートナーとして活用した。
コードを書くだけでなく、「この設定に矛盾はないか」「このコピーはペルソナに届くか」という壁打ち相手としても機能した。
---
公開URL：https://leo-code-lab.com/LOST_AND_STAY/index.html
