Clineとは？料金・使い方と、最初のWebページを作る手順

この記事では、Clineでできること、料金の仕組み、ほかの開発支援との選び方、VS Codeでの始め方、最初に静的なWebページを作る依頼例、確認・停止・復旧までを整理します。操作例は公式資料に基づくチュートリアル案であり、当メディアがClineを実行して得た所要時間・利用料金・制作実績ではありません。

公式情報確認日：2026年11月4日

Clineとは？チャットでコードを聞く方法との違い

通常のチャットでは、回答されたコードを人がコピーし、ファイルへ入れて実行します。Clineは、許可された作業フォルダの情報を参照し、ファイル変更や実行結果を扱いながら次の作業を進められます。複数のファイルを直す作業や、エラーを確認して修正する往復を支援する点が特徴です。

ClineはAIモデル自体の名前ではありません。Cline公式サイトは、複数のモデル・プロバイダーと組み合わせる構成や、ファイル編集、ターミナル、MCP連携などを案内しています。どのモデルへ送信するかで、料金・速度・出力・情報の扱いは変わります。

Clineの料金：本体・AI利用・ClinePassを分ける

「Cline本体が無料」でも、作業全体が無料になるとは限りません。個人向けオープンソース版の利用と、AI推論の利用料、任意のサブスクリプション、組織向け管理機能を分けて考えます。

本体と従量課金の区別は公式料金ページ、月額プランの対象と条件はClinePass公式ページで確認できます。米ドル表示をそのまま円価格とは扱わず、為替、税、決済時の条件も確認してください。過去記事にある初回クレジットや期間限定価格を、現在も全員に適用される条件としては使いません。

1ページ作ると何円かかる？

一律には決まりません。同じページでも、読むファイル量、モデル、生成量、修正回数、キャッシュ、ツールの往復で費用が変わります。従量課金では入力と出力の単価を分け、各回の使用量を積み上げます。Cline側の表示と、実際のプロバイダーの請求・使用量も照合してください。

最初は「対象は空の練習用フォルダ」「HTMLとCSSだけ」「修正は一つずつ」と範囲を狭めます。予算通知と実行停止の仕組みは別の場合があるので、設定名だけで請求上限が保証されるとは考えません。

VS Code・CLI・Desktopはどれを選ぶ？

ここではコードと差分を画面で見ながら進めやすいVS Code拡張を中心に説明します。ほかの入口もあるため、「ClineはVS Codeでしか使えない」とは整理しません。

公式インストール案内で入口別の手順を確認できます。この記事ではCLIのコマンドや既定値をVS Codeへ流用しません。導入済みのバージョンで実際の承認設定を見てください。

Cursor・GitHub Copilotとの違いと選び方

比較は「どれが絶対に優秀か」ではなく、既存環境、モデルの選択、権限、料金管理で行います。Cline以外にもエージェント機能があるため、ほかの製品を単なるコード補完と決めつけないことが重要です。

現在の製品情報はCursor公式とGitHub Copilot公式説明で確認してください。この表は同条件の性能・費用テストではありません。すでにチーム標準がある場合は、置き換える前に小さな同一課題で修正回数と確認工数を比べます。

ClineをVS Codeへ導入する手順

1．練習用フォルダと元データの退避を用意する

最初から公開サイトや顧客案件を開かず、空の練習用フォルダを作ります。VS Codeでそのフォルダだけを開き、変更してよい範囲を決めてください。既存案件を使う場合は、Gitの作業ブランチやバックアップを用意し、現在の未保存変更も確認します。

2．公式のCline拡張を追加する

VS Codeの拡張機能画面を開き、「Cline」を検索します。WindowsではCtrl＋Shift＋X、MacではCommand＋Shift＋Xが入口です。公式案内から到達した拡張を確認して追加し、Clineのパネルを開きます。似た名前の拡張やフォークを、本体の別プランと混同しないようにしてください。

3．モデル・プロバイダーと料金条件を確認する

設定から利用するプロバイダーとモデルを選び、案内される認証方法で接続します。Cline Provider、ClinePass、自分のAPIキーでは支払いと対象モデルが異なります。APIキーは専用の設定欄へ入力し、プロンプト・HTML・Gitへ書き込まないでください。

4．自動承認を確認して、Planから始める

公式資料には、操作の種類ごとに承認を省略する設定があります。「Clineなら必ず毎回止まる」とは限りません。最初はファイル変更、コマンド、ブラウザ、外部ツールの自動承認を広げず、実際の設定を見て進めます。詳細は公式の自動承認ガイドで確認してください。

最初のWebページを作る依頼例

初回は、外部ライブラリ、ログイン、決済、問い合わせ送信を含まない静的ページが適しています。構成案は生成できますが、架空の顧客の声や実績、実在しない会社情報は足さない条件にします。次は説明用の架空サービス「サンプル整理室」の紹介ページを作る依頼例です。

Plan：成果物と、変更してよい範囲を決める

練習用フォルダの中に、架空サービス「サンプル整理室」の
1ページ紹介サイトを作りたいです。最初は計画だけ示してください。
成果物はindex.htmlとstyle.cssの2ファイルです。
構成は見出し、サービス説明、利用の流れ、FAQ、ページ内リンク。
HTML/CSSだけで作り、外部ライブラリ・外部フォント・画像通信は使いません。
実績・口コミ・価格・会社情報は作らず「説明用サンプル」と明示します。
フォーム送信・公開・デプロイ・パッケージ追加・ファイル削除はしません。
390pxと1280pxで読みやすく、キーボードでもリンクを操作できる設計にします。
作成ファイル、確認手順、不足情報を挙げ、編集前に確認してください。

計画では、2ファイル以外を変更しないか、不要な通信やインストールがないかを見ます。公式のPlan & Actの説明では、調査・計画と実装を分けています。実際に見えているモードと実行許可を確認し、計画へ合意した後に実装へ進みます。

Act：承認した範囲で作り、差分を見る

合意した計画に沿い、練習用フォルダ内の2ファイルだけ作成してください。
追加の操作が必要なら、その理由と影響を先に説明してください。
完了時は、作成したファイル、実行した確認、その結果、未確認を分けて報告。
見た目の確認を実行していない場合は「確認済み」と書かないでください。

ファイル生成の通知が出たら、エディタで実際のファイルと差分を確認します。ページを開く方法は、ローカルHTMLを開くか、組織で許可されたプレビューを使います。新しい拡張やサーバーの導入が必要なら、その必要性を確認してから進めてください。

完成の判断：ファイルができただけで終わらせない

修正依頼は「もっと良くして」ではなく、「390pxでFAQの文字が右へはみ出す。本文は変えず余白と折り返しだけ直す」のように範囲を指定します。この方法なら、変更ごとに何が直ったかを確認できます。

使い慣れた後の活用：ルール・MCP・反復作業

初回の小さな制作が確認できたら、既存ページの変更、テスト追加、README整理へ広げます。毎回守る命名や確認事項はプロジェクトのルールへ残し、個別の依頼と区別します。「いつでも公開してよい」といった広すぎる権限はルールへ含めないでください。

MCPは外部ツールへの接続手段であり、追加すれば安全性や成果が自動的に高まるものではありません。最初は読み取りだけ、必要な対象だけに絞り、書き込み・送信・デプロイは別の承認にします。実装の考え方はMCP連携の手順と成功確認も参照できますが、製品別の設定はClineの現行案内に従ってください。

止まった・費用が増えた・変更を戻したいとき

Clineのチェックポイント機能は、ファイル変更を戻すための仕組みです。ただし、外部へ送信した情報、公開済みの変更、API利用料金まで取り消せるわけではありません。バックアップ、バージョン管理、権限の制限を併用します。

エディタ上で動くことと、すべての処理が自分のPCだけで完結することは別です。クラウドモデルや外部ツールを使えば情報が外へ送られる場合があります。個人情報・秘密情報を含まない練習用フォルダから始め、送信先と契約条件を確認してください。

Clineでよくある質問

日本語で指示できますか？

日本語を扱えるモデルへ日本語で依頼する方法があります。ただし、対象ファイル、目的、変更範囲、完成条件を具体化する必要があります。日本語対応だけで正確さが保証されるわけではありません。

無料のAIモデルなら費用は完全に0円ですか？

利用枠、提供期間、接続先、PCの実行環境などによります。本体無料、モデル無料枠、ローカル実行は別の条件です。利用画面と提供元の現行条件で確認してください。

プログラミング未経験でも公開サイトを任せられますか？

練習用ページを作る入口にはなりますが、公開前の品質・セキュリティ・保守まで自動で解決するわけではありません。特にログイン、個人情報、決済は別の設計とレビューが必要です。