映画制作者のFrederic Lumiereが、Claude Codeでの開発のためにChrome拡張ClickSayを1人で作った理由

Frederic Lumiereは、画面の見た目をClaude Codeに直してもらうとき、文章で説明する代わりに、直したい要素をクリックして声で伝えている。クリックした要素のセレクター・スタイル・HTML・スクリーンショット・コンポーネント名が、話した内容と一緒に1つの指示にまとまるので、「どのボタンのことか」をAIが取り違えにくくなる。この作業のために自分で作ったChrome拡張が「ClickSay」だ。

何をしている人か

Frederic Lumiereは、画面の修正をAIのコーディングツールに伝えるためのChrome拡張「ClickSay」を開発している。Product Huntでの名前はFred L.で、ClickSayのメーカー欄に載っているのは本人だけだ。Chrome ウェブストアでの提供元は、本人が創業したLumiere Media, Inc.（米ペンシルベニア州）になっている。Lumiere Mediaのサイトでは、本人は映画制作者で技術者でもあり、ドキュメンタリーの制作・監督・編集を手がけてきたと紹介されている。

AIの使い方

Product Huntのローンチのコメントで、本人は何か月も前から、ターミナル版のClaude Codeで何でも作っていると書いている。フォーラムの投稿でも、ターミナル版のClaude Codeがいちばんのお気に入りだとし、Claude Codeの中に33個のエージェントを持っていると述べている。

ClickSayは、このClaude Codeでの開発の中で、画面の修正を頼むたびに起きていた行き違いから生まれた。公式サイトで説明されている使い方は次の3段階だ。

• 要素をクリックする。 ショートカットを押してページ上の要素をクリックすると、セレクター、スタイル、HTML、スクリーンショット、コンポーネント名をまとめて取り込む。
• 直したい点を話す。 マイクが自動で立ち上がり、「これを大きく」「余白を直して」のように話すだけでよい。複数の要素をまとめて選び、1つの指示で直させることもできる。
• AIに渡す。 取り込んだ情報と話した内容が1つの指示になってクリップボードに入る。Claude Codeをターミナルで使う場合は、手元で動く中継の仕組みを使うと、貼り付けずにClaude Codeのセッションへ直接送れる。

ClickSayの指示は、Claude CodeのほかCodex、Cursor、Lovable、Replit、Bolt.newにも貼り付けて使える。AIに何を任せ、どこを自分で確かめているかの細かな分け方は、公開されている情報では確認できなかった。

日本でまねするなら

• AIに画面の修正を頼むときは、「右上のボタン」のような説明だけでなく、ブラウザの開発者ツールで要素のHTMLとスタイルをコピーして一緒に渡すだけでも、取り違えは減らせる。
• 修正の頼み方が毎回同じなら、「ページのURL・要素・スタイル・直したい点」を並べたひな形を作っておき、それを埋めて渡す形にすると、ClickSayのような指示に近づけられる。
• 声で指示する場合は、パソコンの音声入力でも試せる。社外秘の画面を扱うときは、スクリーンショットや画面の情報をどこに送るのかを確かめてから使いたい。

事業の数字と経緯

ClickSayは2026年にProduct Huntで公開された。Product Huntのメーカー欄に載っているのは本人だけで、ClickSayは本人が1人で開発・運営している。

2026年10月26日時点の公式サイトでは、月5回まで使える無料プランと、回数の制限がない月7ドルのProプランが用意されている。Chrome ウェブストアでの利用者は56人と表示されている。公開されている収益データは確認できなかった。

出典

• https://www.producthunt.com/products/clicksay
• https://clicksay.net
• https://chromewebstore.google.com/detail/cpnmelphcmdcmejmjfnodmpdfifccfhj
• https://lumieremedia.com