AIを仕事の仕組みに変えたい20代へ
社会人1〜3年目が身近な1業務を選び、人とAIの役割を分け、7日で試し、成果を共有する5ステップをまとめました。
Claude Codeを使っていて、地味に効いてくるのが「Webページの読み取り」です。
記事のリサーチ、ライブラリのドキュメント確認、競合サイトのチェック。AIにURLを渡して「これ読んで」とやる場面は、思った以上に多いですよね。ところが何も考えずにそのまま読ませると、ナビゲーションや広告やフッターまで全部トークンに乗ってきて、無駄にコストがかかるし、肝心の中身もぼやけます。
そこで出てくるのが defuddle と jina です。どちらも「Webページを、AIが読みやすいきれいなマークダウンに変換する」道具なんですが、性格がまったく違います。今日はこの2つの違いと、僕なりの使い分け、それからみんながつまずく「XのURLをどう読ませるか」までまとめておきます。
土台の話から。Claude Codeには標準で WebFetch があって、URLを渡すとページを取得し、マークダウンに変換して中身を答えてくれます。
便利なんですが、標準のままだと弱点もあります。
ここを補ってくれるのが defuddle と jina です。「標準の読み取りを強化する2つの選択肢」くらいの感覚で読んでもらえればOKです。
defuddle は、Webページから本文だけを抜き出して、きれいなマークダウンに整えてくれるオープンソースのツールです。広告・サイドバー・コメント欄・ヘッダー・フッターといった「本文じゃない部分」をごっそり削ぎ落としてくれます。
作者は、Obsidianの「Web Clipper」を作っている kepano（Steph Ango）さん。もともとWeb Clipperの中身として作られたエンジンが、単体で使えるよう公開されたものです。定番の Mozilla Readability の代替で、よりミスが少なく、脚注・数式・コードブロックの扱いが安定しているのが売りです。
ポイントは 自分のマシンの中（ローカル）で動く こと。
使い方もシンプルです。
# インストール
npm install -g defuddle
# URLをパースしてマークダウンで出力
npx defuddle parse <https://example.com/article> --markdown
# メタデータをJSONで取り出す
npx defuddle parse page.html --json弱点は、JavaScriptを実行しないこと。受け取ったHTMLから本文を抜くだけなので、中身をJSで後から描画するタイプのサイト（後で出てくるXなど）だと、肝心のコンテンツが取れないことがあります。
jina（Jina Reader）は、Jina AIが提供しているURL変換サービスです。使い方は拍子抜けするほど簡単で、読みたいURLの頭に https://r.jina.ai/ をつけるだけ。
<https://r.jina.ai/https://example.com/article>これだけで、AIフレンドリーなマークダウンが返ってきます。
defuddleと決定的に違うのは、jinaは サーバー側でヘッドレスChromeを動かしてページをちゃんと描画する こと。つまりJavaScriptで後から表示されるコンテンツ（SPA、無限スクロール、そしてX）にも強い。ピーク時に1日100億トークンをさばいているサービスなので、安定感もあります。
挙動はリクエストヘッダーで細かく制御できます。
x-engine: browser … JavaScriptレンダリングを強制する（動的サイト向け）x-respond-with: markdown … 出力フォーマットの指定x-with-generated-alt: true … 画像に自動でキャプション（alt）をつけるx-timeout: 10 … 読み込み待ちの秒数弱点は2つ。
| defuddle | jina（Jina Reader） | |
|---|---|---|
| 動く場所 | ローカル（自分のPC） | Jinaのサーバー |
| 料金 | 完全無料・OSS | 無料枠あり＋有料API |
| JavaScript描画 | しない | する（ヘッドレスChrome） |
| プライバシー | 高い（外に出ない） | URLを外部に送る |
| 得意なページ | 普通の記事・ドキュメント | X・SPA・動的サイト |
| 使い方 | npx defuddle parse <URL> | URLの頭に r.jina.ai/ |
ざっくり言うとこうです。
トークン削減効果はどちらも大きくて、HTMLをそのまま読むのに比べてマークダウン変換で おおよそ8割減 になります（生HTMLで約9,500トークンが、整形後は約1,700トークンというデータも）。リサーチを何十ページも回すなら、この差は無視できません。
実際のところ、僕はこう振り分けています。
r.jina.ai/ をかぶせて取り直す。「無料・プライベート優先で defuddle、描画力が要るところだけ jina」。これが基本方針です。
ここが一番つまずくところ。XのURLをClaude Codeにそのまま渡しても、まともに読めません。 Xは中身をJavaScriptで描画するうえ、近ごろはログインの壁も厚いからです。defuddleも標準WebFetchも、ここは苦手。
なので、Xを読むときは jina + ブラウザ描画 が現実的なおすすめ設定です。
https://r.jina.ai/ をつけるx-engine: browser を指定して、JavaScript描画を強制するcurlで確認するならこんなイメージです。
curl <https://r.jina.ai/https://x.com/><ユーザー名>/status/<ツイートID> \\
-H "x-engine: browser" \\
-H "x-respond-with: markdown" \\
-H "Authorization: Bearer <あなたのJina APIキー>"実際に自分の環境で試してみました。標準のままだと弾かれるXのツイートURLを、jina経由にしたら本文も投稿者も日付もちゃんと取れました。標準WebFetchで「読めません」と返ってきたものが、r.jina.ai/ をかぶせるだけで素通りする感覚です。
ひとつ正直に書いておくと、Xは仕様変更でログイン必須化が進んでいて、jinaを使っても取れないツイートはあります。 万能ではありません。それでも、標準のまま投げるよりは段違いに通りやすい。Xに限らず、SPAや無限スクロール系のサイトはこの「jina + x-engine: browser」を基本セットにしておくと安定します。
ここまでの使い分けを、Claude Code側に最初から仕込んでおくと毎回ラクです。おすすめは次の3段構えです。
jinaはURLにプレフィックスを足すだけでも使えますが、Claude Codeに常設するなら Jina AI公式のリモートMCPサーバー を入れるのがおすすめです。read_url（URL読み取り）や search_web といったツールがそのまま生えて、JS描画込みでXのような動的サイトも読めるようになります。
# 公式MCPサーバーを追加（APIキーは jina.ai/reader で無料取得）
claude mcp add -s user --transport http jina <https://mcp.jina.ai/v1> \\
--header "Authorization: Bearer ${JINA_API_KEY}".mcp.json に直接書くならこうです。
{
"mcpServers": {
"jina": {
"url": "<https://mcp.jina.ai/v1>",
"headers": {
"Authorization": "Bearer ${JINA_API_KEY}"
}
}
}
}defuddleはインストール不要で npx から呼べるので、Claude CodeのBash経由でそのまま使えます。毎回の確認をなくすなら、settings.jsonで事前承認しておくと快適です。
毎回の確認ダイアログを消したいツールを permissions.allow に並べておきます。
{
"permissions": {
"allow": [
"mcp__jina__read_url",
"mcp__jina__search_web",
"Bash(npx defuddle parse:*)",
"WebFetch(domain:r.jina.ai)"
]
}
}APIキーは settings.json に平文で書かず、シェルの環境変数として渡すのが安全です。~/.zshrc などに次の一行を足すだけ。設定側は ${JINA_API_KEY} で参照しているので、これで通ります。
export JINA_API_KEY="取得したキー"キーは jina.ai/reader で無料で取れます。なくても動きますが、その場合は匿名アクセス扱いでレート制限がきつくなります。
settingsは「何ができるか」、CLAUDE.mdは「どう動いてほしいか」の置き場所です。次のような一段落を入れておくと、Claudeが自動で振り分けてくれます。
## Web読み取りの方針
- 普通の記事・ドキュメントは defuddle（`npx defuddle parse <URL> --markdown`）で読む。ローカルで無料・高速、URLを外に出さない。
- JavaScriptで描画する動的サイト・SPA・X（旧Twitter）は Jina MCPの read_url を使う。defuddleや標準WebFetchで本文が取れない場合もこちらに切り替える。
- 秘匿性が高いURL（社内資料・未公開ページ）は外部に送らず defuddle で処理する。これで「普段はローカルのdefuddle、動的サイトとXだけjina」という判断を、毎回指示しなくてもやってくれるようになります。
r.jina.ai/ を足すだけの変換サービス。JS描画ができるのでX・SPAに強い。x-engine: browser ＋ 無料APIキー。ただしログイン壁で取れないこともある。AIに調べ物をさせる時代、「どう読ませるか」は意外と成果を分けます。トークンも節約できて、出力の精度も上がる。地味だけど、入れておいて損のない一手です。
試してみて「ここ詰まった」「こっちの設定が良かった」みたいなのがあれば、気が向いたときにでも感想を聞かせてください！ 同じことを試している人の話を聞くのが好きなので🙌
こういうAI周りの小ネタや、20代の働き方・キャリアの話は、普段は公式LINEで気ままに流しています📲 「これ試したよ！」みたいな雑な感想でも普通に嬉しいので、よかったら覗いてみてください✨ 同年代でこの手の話を肩肘張らずにできる人を、いつも探しているタイプです。都内ならコーヒーでも飲みながら直接話すのも大歓迎なので、気が向いたらLINEから気軽に声かけてください☕️