仕事終わりの2時間で、ホームページの叩き台とフレームワークが出来上がった話

たまには、 こういう生っぽい記事も書いてみようと思います。

AIで何ができるかという話ではなくて、 僕が実際にどう使っているか。

昨日の夜にやったことを、 そのまま書きます。

19時、仕事が終わった

*↑ これが今のホームページ*

昨日もいつも通り、 サロンの仕事が19時に終わりました。

営業後って、 普通ならちょっと休みたいんですよね。

でも最近、 ずっと頭にあったことがありました。

FALAPのホームページ、 そろそろ作り直したいなと。

今のサイトにも愛着はあります。

ただ、 予約までの流れをもう少しわかりやすくしたい。 スマホで見た時の印象も、 今の自分たちに合う形に整えたい。

そんなことを、 ずっと考えていました。

友人のWeb制作者に相談した

今のFALAPのホームページは、 友人の会社にお願いして作ってもらったものです。

なのでまずは、 その友人に相談しました。

すると、 「作ること自体はできると思う。 でも、引っ越しは慎重にね」と。

ここが大事だったんですが、 リニューアルって、 ただ新しくすればいい話じゃないんですよね。

検索順位が落ちる可能性もあるし、 URLの引き継ぎを雑にやると、 今まで積み上げたSEOが崩れる。

その前提をちゃんと聞いた上で、 「まずは叩き台を作ってみたらいい」 と言われました。

それならやってみようと思って、 そこからAIと一緒に動き始めました。

2時間後、たたき台ができた

そこからAIと一緒に制作を始めて、 2時間後にはここまでできていました。

*↑ 2時間で出来上がったリニューアル版のたたき台*

「2時間でここまで？」と思うかもしれませんが、 これ、 見た目だけの話じゃないんです。

デザインを少し触った、 みたいな軽い話ではない。

中身の設計まで含めて、 叩き台を作りました。

このたたき台の裏側にいるチーム

*↑ AIと一緒に設計したチーム編成*

この叩き台を作る前に、 まずやったのがチーム編成でした。

ホームページのリニューアルって、 一人で思いつきで触ると、 だいたいどこかが抜けます。

導線、 コピー、 デザイン、 実装、 SEO、 公開後のチェック。

全部、 別の視点が必要なんですよね。

そこでAIと一緒に、 先に役割を分けました。

僕がAIと一緒に設計したのは、8つのロール。

• ディレクター — 全工程をつなぐ司令塔
• 事業設計・ブランド責任者 — 何を売るか、誰に届けるかの定義
• UX・導線設計 — お客様の不安を洗い出して、予約までの道筋を作る
• コピーライター — 訴求文、CTA文言、FAQのテキスト作成
• UIデザイナー — 色、余白、ボタン、スマホ表示の最適化
• フルスタックエンジニア — 実装全般
• SEO・計測担当 — 検索順位を落とさないリダイレクト設計、構造化データの移行
• QA・品質管理 — 公開前チェックと公開後の継続改善

普通ならこれ、 制作会社が分業で進める話だと思います。

でも今回は、 AIと一緒に各ロールの責任範囲を整理して、 SEOやリダイレクトの注意点まで先に洗って、 そこから制作に入りました。

だから、 ただ速かったというより、 迷いが少なかった。

仕事終わりの2時間で、ここまで形にした。

これはさすがに、 自分でも感覚が変わりました。

AIを触っている人と、 まだ触っていない人では、 もう仕事の進み方そのものが違う。

大げさじゃなく、 そう感じています。

本業の人たちにも伝えたい

これをやったの、 美容師の僕です。

Webの専門家でもないし、 プログラマーでもない。

それでも、 AIをちゃんと使えば、 ここまで進められる。

だったら本職のWeb制作者やエンジニアが 本気で使ったらどうなるか。

たぶん、 もっとえげつない差が出ます。

逆に言えば、 大手や強い会社は、 こういうところにもう普通に投資してくるはずです。

手作業で時間をかけてやっている人たちは、 このままだと必ず淘汰されます。

煽りたいわけじゃないんです。

でも、 美容師の僕が仕事終わりの2時間でここまでできてしまった事実を見て、 これは伝えないといけないと思いました。

この過程を、AIで動画にしてみた

今回の流れは、 AIでそのまま動画にもしてみました。

正直、 ここまで来たかと思いました。

声も全部AIですよ。

僕自身、一言も喋っていないんです。

僕の声をAIに学習させて、 台本から自動でナレーションを生成しています。

そして動画編集も全部AI。 字幕、BGM、画像の配置、シーンの切り替え。 僕は一切触っていません。

やったのは「こういう動画を作って」と指示しただけ。

使ったのは、以前レビュー記事を書いた 「Claude Code × Remotion Skills」というAI動画制作の教材です。

👉 昨夜発売のAI動画教材を即買いして、寝てる間に動画ができてた話

台本、ナレーション、字幕、画像、編集まで 全部AIエージェントが自動でやってくれる。

ちなみにこの教材、 今日（3/22）まで5,980円なんですが、 明日から19,800円に値上げされます。

もしこの記事を読んで、 AIをもっと実務で使ってみたいと思った人には、 かなり参考になるはずです。

動画制作に限らず、 AIに仕事を任せて、 形にしていく感覚がつかめると思います。

こういうふうに、 僕が今実際にAIをどう使っているのか、 どんなことができているのかも、 たまにはそのまま共有していこうと思います。

机上の話より、 実例の方が伝わることも多いので。