社長のコメントがSlackで流れるので、AIでレビューWebアプリを作ったら別の壁が待っていた話

〜デザイナーがAIと一緒にCloudflareで認証付きWebアプリを作ってみた〜

こんにちは。UIデザイナーのはっしーです。

最近は、ワイヤーフレームを引いてクライアントに確認してもらうという流れではなく、AIを使ってLPやWebサイトのモックアップを作り、確認いただくことがかなり増えてきました。

以前までは、デザインを確認してもらうときはSlackで、

「ここ余白を広げてください！」 「この画像差し替えで！」 「ここ文言変更！」

といった感じでコメントをもらっていました。

一見、普通のやり方です。

実際、これまではそれで大きな問題はありませんでした。

ただ、AIでプロトタイプをどんどん作るようになってから、ある問題が目立つようになりました。

コメントが流れる。

Slackは便利です。

便利なんですが、当然ながらデザインレビュー専用ツールではありません。

普段の業務連絡も、雑談も、別案件の相談も、全部同じ場所に流れてきます。

その結果、

• 修正コメントが別の会話に流れる
• スレッドが乱立する
• 「あの修正、どこだっけ？」となる
• 気付いたら別の話題になっている

ということが起きます。

Slackにはリスト機能もあります。

以前、Slackのテンプレートを使った業務改善について記事を書いたこともあります。

Slackテンプレートで始めるお手軽DX | トピックス | リベロジック株式会社

ただ、スレッドの通知が分かりづらかったり、通知を連携すると今度はメッセージ欄が荒れてしまったり……。

結局、

チャット欄だけがどんどんにぎやかになる。

AIでLPを作るスピードは何倍にもなったのに、レビューの方法は昔のままでした。

生成するところだけ速くなっても、その後のレビューで詰まっていたら、なんだかもったいない。

そこで考えました。

だったらHTMLに直接コメントを書けばいいのでは？

あるLPを作っていたとき、ふと思いました。

AIで作ったプロトタイプのHTMLに、直接コメントを書ければいいのでは？ しかも、コメントや添付画像をまとめてZIPにして、Claude CodeやCodexなどのAIへそのまま渡せたら便利なのでは？

スクリーンショットへ赤入れするのも分かりやすいのですが、HTMLそのものをレビューできれば、

• クリックした場所
• 対象要素のCSSセレクタ
• 近くにある文字
• ページ名
• 添付した参考画像

なども一緒に残せます。

つまり、

「ここ直して」ではなく、「このHTML要素をこう直して」ができる。

これはAIへ修正をお願いするときにも相性がよさそうです。

「これ、かなり便利なのでは？」

そうして作り始めたのが、

Design Marker（LP赤入れチェッカー）

です。

とりあえず作ってみた

最初のバージョンは、自分のパソコン上で動かすローカルアプリでした。

使い方はシンプルです。

1. HTML一式をZIPにする
2. Design Markerへドラッグ＆ドロップ
3. ZIP内のHTMLをブラウザ上で表示
4. 気になる場所をクリック
5. コメントを書く
6. コメント情報を同梱したレビューZIPを書き出す
7. Claude CodeやCodexなどのAIへ渡して修正してもらう

スクリーンショットに赤線を引くような感覚で、HTMLへ直接コメントできます。

すごい昔こんなの作るってなったら何日かかっていたことか。

作っているうちに、

コメント一覧、担当者名、コメント位置へのジャンプ、画像添付、複数レビューの統合……。

「あれも欲しい」「これも欲しい」と少しずつ機能が増えていきました。

このあたりから、

これ……普通に社内ツールとして便利なのでは？

と、だんだん調子に乗り始めます。

AIとの相性が思った以上によかった

Design Markerを作ってみて、一番手応えを感じたのがAIとの連携でした。

普通のチャットで修正をお願いすると、

「左上の画像を、もう少し大きくしてください」

くらいの指示になりがちです。

人間同士なら画面を見ながら何となく分かりますが、AIにとって「左上」がどこなのか、「画像」がどの要素なのかは曖昧です。

Design Markerでは、クリックしたHTML要素から、例えばこんなCSSセレクタを取得できます。

article.strength-item:nth-of-type(1)
 > div.strength-visual-wrap
 > div.illustration-slot

するとAIへ、

article.strength-item:nth-of-type(1)内のイラストを、現在の115％程度に拡大してください。

という形で指示できます。

DOMの構造が大きく変わっていなければ、修正対象をかなり具体的に特定できます。

さらにページ名、近くの文字、コメント、参考画像まで一緒に渡せます。

今まで、

違う違う、そこじゃない！

とAIへ何度か言い直していた修正が、一発で狙った場所に入ることも増えました。

「HTMLでレビューする」って、AI時代とかなり相性がいいのでは？

ここでかなり手応えを感じました。

「これは便利だ！」と思って社内へ共有した結果

よし。

これは便利だ。

みんなにも使ってもらおう。

意気揚々と社内へ共有しました。

すると……。

使えない？ 何だ、わしの設定か？

あっ……。

そうです。

僕のパソコンでは動く。

でも、

みんなのパソコンでは、そのままでは動かない。

ローカルアプリあるあるに、きれいに突っ込みました。

俺は使える。でも、みんなは使えない

僕は開発している本人なので、当然動きます。

しかし、ほかの人が使うにはNode.jsのインストールや依存パッケージの準備が必要でした。

開発に慣れている人なら、それほど難しいことではありません。

でも、デザイナーやディレクターへ、

まずNode.jsをインストールしてください

から説明するレビューアプリ。

……それはもう、気軽なレビューアプリではない。

そこで、

「じゃあワンクリックで起動できるようにすればいい！」

と思い、start-mac.commandという起動ファイルも作りました。

ダブルクリックすると、

ターミナルを起動して、必要な準備をして、アプリを立ち上げて、ブラウザまで開く。

よし。完璧。

……と思ったのですが。

冷静に考えると、

「この知らない.commandファイルをダブルクリックしてください」

という案内も、まあまあ怖い。

社長に「とりあえずこれダブルクリックしてください！」って送るのか……。 怪しい。 自分で作ったのに怪しい。

一応動くものはできましたが、社内共有の本命にはなりませんでした。

AIと一緒にアプリを作っていると、

「自分の環境では動くのに、ほかの人は使えない」

という、開発ではおなじみらしい壁にも普通にぶつかります。

エンジニアの先輩の一言

そんな中、エンジニアの先輩から一言。

READMEを作って、 「CloudCodeにフォルダを読み込ませてREADME通りセットアップしてください」 でいいんじゃない？

……

便利にしようとして色々作り込んでいましたが、AIを使える人向けなら、その方が圧倒的にシンプルでした。

何でもアプリ側で解決しようとするより、

使う人とAIを含めて、一番楽な方法を考える。

これも一つ勉強になりました。

でも社長はコメントを書いてくれない

READMEも作った。

起動方法も簡単にした。

これでいける。

……と思いました。

ところが。

音沙汰なし。

社長、お忙しいからかまってくれねぇ……。

ここで、さらに重要なことに気付きました。

レビューアプリを作ることよりも、

使ってもらうこと

の方が何倍も難しい。

ローカルでどれだけ便利にしても、

「アプリを起動する」

という最初の一手が必要です。

忙しい人にとっては、その一手すらハードルになります。

それなら……。

だったらWebにしよう

URLをクリックするだけなら使ってもらえるのでは？

そう考えて、Design MarkerのWeb版を作ることにしました。

とりあえずログイン前ページを作ってモチベーションをあげます。

色々作り込みたいけど考えることが多いので一旦はAI作のLPです。

裏側はどうしようか考えました。そこで選んだのがCloudflareです。

とはいえ、僕はデザイナーです。

Cloudflare Pages、Pages Functions、Cloudflare Access、D1、R2……。

名前は聞いたことがあっても、実際に自分で構成を考えてWebアプリとして組むのは初めてでした。

ここからはAI先生の出番です。

社内向けの管理画面と、お客さんへ共有するレビュー画面を作りたいです

管理画面にはCloudflare Accessを利用する方法があります

コメントとかプロジェクト情報は？

D1へ保存できます

ZIPは？

R2を利用する方法があります

なるほど。全部分かった気がする！

……気がするだけです。

AIは本当に優秀です。

聞けば、かなり具体的な構成まで教えてくれます。

ただ、今回の開発で強く感じたのが、

AIが方法を教えてくれることと、安全なシステムを作れることは別

ということでした。

「教えてください」から「この認識で合っていますか？」へ

特にセキュリティに関わる部分を、AIの回答だけで決めるのは怖い。

そこで、分からない部分や重要な部分はエンジニアの先輩にレビューしてもらうことにしました。

以前の僕だったら、

Cloudflareでこういうことがやりたいんですが、どうすればいいですか？

というところから聞いていたと思います。

でも、それだと先輩も一から全部説明しなければいけません。

忙しいところに、

「先輩！最初から教えてください！」

と突撃しているようなものです。

今回は、まずAIと何度もやり取りしながら自分なりに整理しました。

そして、

管理画面はCloudflare Accessで社内メンバーだけに制限する。 共有画面は案件ごとのURLとID・パスワードでログインする。 プロジェクト情報やコメントはD1、LP一式のZIPはR2へ保存する。 この認識で合っていますか？

というところまで持っていってから相談しました。

つまり、

「教えてください」

ではなく、

「この認識で合っていますか？」

に変わったんです。

これは自分の中ではかなり大きな変化でした。

先輩とのやり取りも少なく済み、本当に確認が必要なところへ時間を使ってもらえます。

自分自身もAIの回答をコピーして終わりではなく、

「なぜそうするのか」

を少しずつ理解しながら進められるようになりました。

Webにしたら、別の壁が待っていた

こうしてWeb版が少しずつ動くようになってきました。

URLを送れば開ける。

ローカルアプリより圧倒的に使いやすい。

「これで解決では？」

……と思ったのですが。

Webにした瞬間、ローカル版ではあまり意識していなかった問題が一気に出てきました。

例えば、

• 顧客の公開前LPをクラウドへ預けてよいのか
• 誰がどの案件を閲覧できるのか
• パスワードをどう保護するのか
• 不正なログイン試行をどう防ぐのか
• アップロードされたHTMLを安全に表示できるのか
• 案件終了後のデータをいつ削除するのか

などです。

認証画面を一つ付ければ「セキュリティ対応完了！」というわけではありません。

当たり前なんですが、自分で作ってみて初めて、その重さを実感しました。

現在はCloudflare Accessや案件ごとのログイン、D1・R2への保存など、基本的な仕組みを実装しています。

一方で、

パスワード保護の強化、ログイン試行回数の制限、HTMLプレビューの分離、データの保存・削除ルールなど、正式な一般公開に向けて改善したい部分も残っています。

Design Markerには、ZIPをクラウドへ保存せず、ブラウザ内だけでレビューするモードもあります。

クラウド上で案件を共有するときだけ、必要なプロジェクト情報やZIPを保存する仕組みにしています。

現時点のDesign Markerは、まだ正式サービスではありません。

社内利用を中心に検証している段階です。

つまり今回作ったのは、

「完全に安全なサービスが完成しました！」

という話ではありません。

むしろ、

何を守らなければいけないのかを知り、必要な対策を一つずつ実装している途中のアプリ

です。

Webにするということは、便利になるだけではありません。

利用者のデータを預かる責任も生まれる。

これは今回かなり勉強になりました。

完成したデザインメーカーの管理画面です。

ダッシュボードから社員は全ての赤入れチェックを確認できます。

詳細ページに入るとこのような形で構成案のクイックリンクを開けばLPを直接みたりコメントを描けるようになっております。

そしてこのような形でLPと記入されたコメントを確認することができます。また以前のコメントを参照したりすることも可能ですので構成の直しがスムーズになりました。

AIがいても、勉強は必要だった

今回の開発を通して、もう一つ強く感じたことがあります。

AIのおかげで、デザイナーでも以前よりずっと開発に挑戦しやすくなりました。

僕自身、

「これを作りたい」

から実際に動くものまで持っていける範囲は、明らかに広がっています。

でも、それは、

「もう勉強しなくてもいい」

という意味ではありませんでした。

むしろ逆でした。

この構成がおすすめです

分かりました！

だけでは危ない。

本当に必要なのは、

「なぜ？」 「今回もそれでいい？」 「何か抜けてない？」 「この部分は専門家に確認したがよくない？」

と考えられることでした。

AIの提案が今回の条件に合っているのか、何が不足しているのかを判断するための知識は必要です。

AIは本当に頼れる相棒です。

でも、最後に判断して責任を持つのは人間です。

今回のDesign MarkerのWeb化は、そんなAIとの付き合い方を改めて考えるきっかけにもなりました。

AI時代に一番変わるのは、レビューかもしれない

AIは数分でLPを作ってくれます。

以前なら何時間もかけていた叩き台が、びっくりするくらい早く出てきます。

でも、そのあとに行う、

「ここをこうして」 「この余白を少し広げて」 「この画像だけ変えて」

というやり取りは、意外と昔から変わっていません。

作る速度だけが上がって、

人間が確認して、修正内容を伝えて、また作り直す。

この部分はまだかなり人間的です。

だから最近は、

AIそのものだけでなく、

AIと人がどうやってやり取りするか

という仕組みも重要になってくるのではないかと思っています。

Design Markerは、そのための実験の一つです。

現在は、

HTMLへのコメント、画像添付、複数レビューの統合、プロジェクトごとのバージョン管理などを試しています。

これからやりたいこともまだ山ほどあります。

スクリーンショットそのものへの赤入れ。

コメントからAIへの修正依頼。

バージョン間比較の改善。

複数人レビューの使いやすさ向上。

そしてもちろん、認証やHTMLプレビュー、データ管理などの安全性向上。

まずは社内で実際に使いながら、一つずつ改善していく予定です。

最初は、

「Slackのコメントが流れるから何とかしたい」

くらいの気持ちで作り始めた小さなツールでした。

それが気付けば、

ローカルアプリを作り、

社長に使ってもらえず、

Web化し、

Cloudflareを勉強し、

セキュリティで悩み、

エンジニアの先輩へ相談し、

AIとの付き合い方まで考えることになりました。

……レビューアプリ一個作りたかっただけなんですけどね。意外と考えることが多かったです。

でも、こうやって自分の業務の中にある小さな不便を、AIと一緒に形にできるようになったのは面白い変化だと思います。

安心して一般公開できるところまで育てられたら、改めてDesign Markerを正式に紹介したいと思います。

その前に。

まずは社長に、ちゃんとコメントを書いてもらうところから頑張ります（笑）。 でもとりあえず今日は美味しいお酒が飲めそうです