
#153 ブックマークじゃ物足りない。AIと作ったWeb収集ツールが便利すぎた
AIと一緒に、Webサイト制作が捗るChrome拡張機能を作ってみました。
今回は、先日Xでご報告した、
AIと一緒に作ったChrome拡張機能についてのお話です。
ウェブサイト作成の参考に「気に入ったwebデザインを保存する」Chrome拡張機能を作っています。
— ちーみつ (@chi3_jp) September 20, 2025
スクショ・カラーパレット・URL自動取得、タグを設定して探しやすく、など。
移動中にChatGPTと音声でやりとりし、必要なファイルと指示文作ってもらってからCodexCLIを使う。#バイブコーディング pic.twitter.com/QJZqkn4gsD
プログラミングの知識がなくても、
「こんなものが作れるんだ」という一つの例として、
楽しんで読んでいただけたら嬉しいです。
きっかけは、Webサイト制作の「あとで見る」
バイブコーディングでWebサイトを作ることがあるのですが、
「このサイトのデザイン、素敵だな」
「このレイアウト、参考にしたいな」
と思うこと、ありますよね。
私も普段から、
そういったサイトをメモするようにしているのですが、
ブックマークだけだと、
どんなサイトだったか忘れてしまうことも。
「スクリーンショットと一緒に、
もっと感覚的に保存できないかな?」
そんな思いつきから、
この拡張機能の開発は始まりました。
AIと作った、こだわりの機能
基本的な機能はブックマークと似ていますが、
AIに相談しながら、
いくつかこだわりの機能を加えてみました。
こだわったのは、以下の4つです。
スクリーンショットを自動保存
気になったサイトを、見たまま保存できます。カラーパレットを自動生成
サイトで使われている色の組み合わせを、
自動で抽出して保存します。タグで、すばやく絞り込み
保存する時に「クール」「かわいい」といったタグを付けておけば、
あとで簡単に見つけ出せます。データのバックアップと復元
大切なデータを守るための、
バックアップ機能も用意しました。
書いている途中で、ひらめいたアイデア
そして、このメルマガを書いている今、
新しいアイデアがひらめきました。
保存したサイトのデザインを、
AIに指示して作ってもらうための「指示文」。
これを自動で生成できたら、
もっと便利になるかもしれません。
この拡張機能は、
これからも少しずつ育てていこうと思います。
「便利」を、自分の手で。
「プログラミングが分からなくても、
AIと一緒なら、自分の手で『便利』を形にできる」
ということが、少しでも伝わったら嬉しいです。
そして、この拡張機能、
もし「使ってみたい」という方がいらっしゃいましたら、
メルマガ登録の特典として、
無料でプレゼントしようと思います。
最後に
AIは、専門知識がなくても、
私たちの「こうだったらいいな」を
形にする手伝いをしてくれます。
あなたもAIと一緒に、
何か新しいものを作ってみませんか?
最後まで読んでいただきありがとうございます。
関連記事
🎁メルマガ無料登録プレゼント
私が自作したChrome拡張機能時短ツールやMidjourney srefコード集など、登録特典をプレゼント中です