Cline（クライン）で簡単なWebページ作成を自動化する3ステップ【初心者向け】
A
AI Friends
4日前・6分で読める
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
この記事でわかること
Cline（クライン）は、VSCode（エディタソフト）の中で動くオープンソースのAIコーディングエージェントです。普通のコード補完ツールと違い、あなたが「お問い合わせページを作って」と指示すると、HTMLファイルを作り、CSSでデザインを整え、動作確認まで自動でやってくれます。2026年8月時点で500万インストールを突破し、GitHubで6万以上の星を集めている人気ツールです。初心者がコードを一行も書かずにWebページを完成させられるため、プログラミング学習の最初の一歩に最適です。API料金（月5〜50ドル程度）だけで使えるので、高額なサブスクリプションも不要です。
まず、VSCodeをパソコンにインストールします。公式サイトから無料でダウンロードできます。次に、VSCodeの拡張機能マーケットプレイスで「Cline」と検索してインストールボタンを押します。インストールが完了すると、左側のサイドバーに新しいアイコンが表示されます。
次に、AIモデルのAPIキー（認証用の鍵のようなもの）を用意します。Clineは自分でAIを持っていないため、AnthropicのClaude、OpenAIのChatGPT、GoogleのGeminiなど好きなAIサービスと連携します。初心者にはClaude（月20ドル程度で十分使える）がおすすめです。Anthropicの公式サイトでアカウントを作り、APIキーを取得したら、Clineの設定画面に貼り付けます。これで準備完了です。
Clineのサイドバーを開くと、チャット画面のような入力欄が表示されます。ここに日本語で指示を書き込みます。例えば「シンプルな自己紹介ページを作ってください。タイトル、プロフィール文、SNSリンクを含めてください」と入力してEnterキーを押します。
するとClineが自動で作業計画を立て、「index.htmlとstyle.cssを作成します。よろしいですか？」と確認してきます。2026年版のClineには「Plan/Actモード」という機能があり、実行前に何をするか教えてくれるので安心です。「OK」をクリックすると、実際にファイルが作られ、コードが書き込まれていく様子がリアルタイムで見えます。数秒から数十秒で作業が完了し、「プレビューで確認しますか？」と聞かれます。
Clineが作成したHTMLファイルを右クリックして「Open with Live Server」（拡張機能を追加インストールしておく必要があります）を選ぶと、ブラウザで実際のページが開きます。タイトル、プロフィール、SNSリンクがきれいに配置されているはずです。
もし「文字色を青にしたい」「画像を追加したい」など修正したい点があれば、Clineのチャット欄に「タイトルの色を青に変更して」と書くだけです。Clineが自動でCSSファイルを編集してくれます。このように、何度でも対話しながら理想のページに仕上げられます。完成したら、HTMLファイルをサーバーにアップロードすれば公開できます。初心者でも30分以内に最初のWebページを完成させられるでしょう。
よくある失敗例は、APIキーの入力ミスです。エラーメッセージが出たら、設定画面で余計なスペースや改行が入っていないか確認しましょう。また、指示が曖昧すぎると意図しない結果になります。「おしゃれなページを作って」ではなく「白背景に黒文字、中央揃えのシンプルなページ」のように具体的に伝えるのがコツです。
もう一つのつまずきポイントは、API使用料の予想外の増加です。大きなプロジェクトで何度もやり直すと料金がかさむため、最初は小さなタスクで練習し、慣れてから複雑な作業に挑戦しましょう。Anthropicの管理画面で使用量をこまめにチェックする習慣をつけると安心です。エラーが出て止まってしまった場合は、Clineのチャット履歴を見直して、どの段階で失敗したかを確認し、「さっきのエラーを修正して」と指示すれば、多くの場合は自動で直してくれます。
基本操作に慣れたら、より高度な使い方に挑戦できます。例えば、「このページにお問い合わせフォームを追加して、入力内容をメールで送信する機能を実装して」と指示すれば、Clineがフロントエンドとバックエンドの両方のコードを書いてくれます。JavaScriptやPHPの知識がなくても、動くフォームが完成します。
また、既存のコードの改善にも使えます。古いHTMLファイルをClineに読み込ませて「このコードをモダンなレスポンシブデザインに書き換えて」と頼めば、スマホ対応の最新コードに自動変換してくれます。さらに、「テストコードも一緒に生成して」と指示すれば、品質チェック用のコードまで作ってくれるので、実務レベルの開発にも対応できます。チーム開発では、Clineのチーム向けプラン（月20ドル/ユーザー、最初の10シート無料）を使えば、複数人で同じ設定を共有できて便利です。
この記事は AI Friends からのクロスポストです。
