Web系エンジニア実践例｜情報収集から個人開発まで完全AI化の手法

環境

• MacOS Apple M4 Max Sequoia 15.1

この記事を読むことで得られるメリット

• AIを活用した情報収集から発信までの効率的なワークフローを構築できる
• 技術情報のキャッチアップ時間を大幅に短縮できる
• ブログ記事やYouTube動画制作の工数を削減できる
• 個人開発におけるAIツールの実践的な活用法を習得できる
• 各種AIツールのコストパフォーマンスを把握し、適切な投資判断ができる

この記事を読むのにかかる時間

約15分

要約

現代のクリエイターにとって、AIを活用したワークフロー効率化は必須のスキルとなっている。本記事では、情報収集から発信まで「インプット」と「アウトプット」の2つのフェーズに分け、具体的なAI活用事例とコストを詳しく紹介する。n8nによる情報収集自動化からCursorを使った個人開発まで、実際に運用している効率化ノウハウを公開する。

インプットフェーズ - 情報収集・処理

1. 情報収集の自動化

課題: 毎⽇の技術情報キャッチアップが⼤変（購読サイトが多い、サイト内でも興味のある内容は実際2割とか）

AI活用: n8nによる情報収集ワークフロー自動化

• RSS監視: テックブログ、企業の技術ブログ、ニュースサイトなど購読
• フィルタリング: キーワードベース（AI、MCP、LLMなど）でDiscordに通知

RSSやシェル、LinuxなどAI時代でも使われる技術はえらい

こういったワークフローを構築して、RSSを活用して自分の関心のある情報を受動的に購読できるようにしている

Discordへの通知

通知される内容は、通知前に生成AIを通してフィルタリングしている（関心のあるキーワードが記事タイトル、本文に含まれているか）

この段階では情報収集のみで、実際のインプットはまだ完了していません

2. 情報の強化・整理

課題:

• 複数のソースから情報を強化したい（⼀次情報が欲しい
• 理解しやすいように整理して効率的にインプットしたい

AI活用: NotebookLM、Claudeのリサーチモードを活用

• 情報強化: 他ソースを追加して情報の量と質を向上
• 要約処理: ⾃分が関⼼の強い情報、重要な情報の抽出と整理
• 有益そうなサイトがあれば購読リストに追加（好循環）

音声、動画、マインドマップ、レポートなど様々な形式で情報を整理することができる。

個人的には音声をよく利用しており、形式や長さ、音声を生成する際にどういった箇所を重視して作成するか、など指定できる

ここまででインプットフェーズ完了

アウトプットフェーズ - コンテンツ制作・発信

1. ブログ記事作成

課題:

• 技術記事の構成、執筆に時間がかかる
• 記事のネタになりうるメモ書きを整理するのが⾯倒くさい

AI活用:

• 乱雑なメモ書きの整理‧構造化、⾻格作成
• 必ず⾃分の経験を⼊れる（全部⽣成AI×）
  • ⾃分の経験も全てClaudeに⼊れておく（もちろん安全な情報だけ）
• microCMS MCPで⼊稿（場合による。直接管理画⾯にメモ書いてたりするので、使う頻度は少ない）

Claudeのプロジェクト機能

それぞれのタスクに特化した前提知識をプロジェクトの指示として、LLMに与えることができる。近頃は何をやるにしてもほとんどAIに壁打ちさせることがほとんどになった

2. YouTube動画制作

課題:

• 動画制作の⼯数が多く、継続投稿のハードルが⾼い
• 動画概要欄とかタイトルを考えるのが⼤変

AI活⽤: Screen Studio / Vrew / nano banana / Canva / Claude

画面録画・編集

• ツール: Screen Studio
• 機能: ⾃動ズーム‧強調‧エフェクト⽣成

特にエディターなどを映す際に、ソースコードの特定の箇所などを毎回ズームを手動で編集しないといけないのが苦痛すぎた点を解消できるのが強い

参考：https://maasaablog.com/blog/lag-qnv-0/

字幕生成

• ツール: Vrew
• 機能: 音声認識による自動字幕生成、AI音声による動画時間の短縮（テキストだけ用意すればそこからすぐに動画が作成可能）

サムネイル作成

• ツール: nano banana / Canva Pro
• 機能: AIによる魅力的なデザイン生成

Canva AIを使うと、プロンプトにあった画像を4つも生成してくれる

プロンプトでは、作成する画像の作成理由、背景、内容、縦横比などを指定

copyI want to create a hero image for a product site with the following concept:

Since the image of mountain climbing is close to what I want, please use that.

I want a grand illustration like a tiny human climbing a huge mountain.

No text is needed within the image.

Create it in an illustrative style.

The background color of the page where the image will be placed is #1D1C14, so use a color scheme that matches it.

Aspect ratio: 16:9

----

Never hesitate. Build today.
There is no sudden growth. Only quiet accumulation exists. Unwavr is a minimalist accumulation dashboard designed solely for steady progress toward long-term goals—to remain unwavering, unshaken, and unhesitating.

動画タイトルおよび概要欄、ハッシュタグ作成

• ツール: Claude
• 機能: Claudeで専用のプロジェクトを用意し、カスタム指示書でタイトル文字列長や概要欄のフォーマットなどを指示しつつ、壁打ちしながら作成

3. SNS運用（X/Twitter）

課題:

• 毎⽇継続的に⾏う情報発信を効率化したい
• Xのアルゴリズムを踏まえた上で発信内容を構成したい
• 技術ブログの流⼊について、オーガニック検索が多く、ソーシャルが少ないので増やしたい

AI活用:

• Claudeでポスト内容（⽬を引きそうなタイトル、魅⼒的な140字の本⽂、ハッシュタグな

  ど）壁打ち

• Xのアルゴリズムにとって望ましい条件などはClaudeに与えておく

個人開発（バイブコーディング）

現状のバイブコーディングに関するt-wadaさんのポストが納得感がすごい:

「Vibe Coding は『自分だけが使う、自分がいちばん欲しいソフトウェアをだれでも作れるようになった』ことが革命的かつ真骨頂」

https://x.com/t_wada/status/1948590698762305714

個人的には「緊急性は低いが個人にとって重要なタスク」の実行に最適という印象

課題: アイデアはあるが開発に時間がかかるので後回しになる

AI活用:

1. 要件整理: AIエージェントのルールファイルで機能仕様書作成
2. GitHub Issue: 詳細な機能ごとの要件を記述（次から次へと出てくる改善点を一旦保存しておく）
3. AI開発: Cursorで自動コード生成・自動テスト・デバッグ、レビュー
4. 並行作業: AI作業中に別タスクのインプット処理などする
5. 継続改善: ルールファイルの継続的ブラッシュアップ
   1. UI/UXに関するガイドライン（インタラクティブな表現、一括操作、ホバー時のエフェクト、レスポンシブデザイン、アクセシビリティ等）
   2. Webサービス開発の共通ノウハウ・前提条件の蓄積することで他サービス開発時の転用による爆速開発につながる

UI/UXのルールファイルして定義して使用している部分を抜粋

.cursor/rules/ui-ux.mdc

copy## ローディング
- ローディングは画面全体ではなく、再描画が必要な部分的に適用すること

## データ入力
- フォーム等でデータの入力に関して、カーソールが外れたら自動で保存をするようにすること

## 一覧表示
- 一覧ページは基本的にテーブルで作ってください。テーブルの列で条件フィルター（昇順、ステータスなどの条件での絞り込み）できるようにすること

- 一覧ページはページネーション（1ページあたり何件表示するかどうかの条件指定も含め）
  - バックエンドAPIでデータを取得する場合はバックエンドでページネーションを実装。フロントエンドのみの場合はフロントエンドでページネーションを実装すること

  - 1ページあたりの初期値（例: 20）と選択肢（10/20/50/100など）
  - 全件数表示」「前へ/次へ」「ページ番号表示」「件数セレクタ」
- 複数選択操作を可能にすること
  - テーブルの先頭列にチェックボックス列＋選択一括操作パネルを追加

## フォーム、ダイアログ
- フォームやダイアログを閉じるためのテキストは×のアイコン等、テキスト以外で視覚的にわかりやすいようにすること
- フォームやダイアログは範囲外をクリックしたら閉じるようにすること
- confirmやalertはブラウザ標準ではなくオリジナルのコンポーネントを作成すること
- イージングで動きに余韻を残すような表示でリッチなアニメーションをつけること

開発例:

• パーソナルタスク管理システム（AI活用するようになってやること増えた・・・）
• ブラウザ拡張機能（既存ツールの機能不足解決）
  • 開発自体はもちろん、Chrome ウェブストアで審査を通すためのノウハウなども踏まえた上でポイントなど教えてもらう
• VSCodeなどエディター拡張機能
• 技術ブログのUI/UX改善

総コスト分析

月額料金サマリー

まとめ

AIを活用したワークフロー効率化により、情報収集から発信まで大幅な時間短縮を実現している。インプットフェーズでは自動化された情報収集と整理により質の高いインプットを効率的に行い、アウトプットフェーズでは各種AIツールを駆使してコンテンツ制作を加速している。

個人開発におけるバイブコーディングの活用も、AIエージェントとルールファイルの組み合わせにより「緊急性は低いが重要なタスク」の実行を可能にしている。

月額約17,500円の投資で得られる効率化効果を考えると、現代のクリエイターにとってAI活用は必須の投資といえるだろう。お金はかかってしまうが、それ以上のリターンを得られる時代である。