- Devin（デビン）は、計画から実装、テスト、プルリクエスト作成まで進めるAIソフトウェアエンジニアです
- 2026年10月時点の個人向けプランは、Free（無料）、Pro（月20ドル）、Max（月200ドル）です
- 始め方は「GitHub連携」→「Askモードで相談」→「Agentモードで実行」の3ステップです
- 簡単なサイトなら、Devin app deploymentsで公開用URLまで作れます
- つまずいたときは、指示を具体的にして、作業を小さく分けるのが近道です
「Webサイトを作りたいけれど、HTMLもCSSも書けない」。そんな悩みに、AIが答えを出し始めています。この記事では、Devinでサイト作成を自動化する流れを3ステップで説明します。料金と注意点も、2026年10月時点の公式情報で確認しました。
Devin（デビン）とは？Webサイト作成に向いている理由
Devinは、Cognitionが開発した自律型のAIソフトウェアエンジニアです。ふつうのAIチャットは、コードの断片を返すところまでです。Devinは、自分でコードを書き、コマンドを実行し、プルリクエスト（変更内容を取り込んでもらうための依頼）まで作ります。
公式ドキュメントの「Your First Session」には、作業の目安も書かれています。3時間ほどで終わる大きさのタスクが向いています。それより大きい作業は、小さなセッションに分けるのが勧められています。
自己紹介ページ、お店の案内ページ、小さなランディングページ（1枚で商品を紹介するページ）なら、ちょうどこの大きさに収まります。コードを自分で書く時間が減るので、文章や写真の用意に力を使えます。
Devinの料金プランは？2026年10月時点の最新情報
料金はDevin公式のセルフサーブプランのページで確認しました。個人が使えるのは次の3つです。
- Free：無料。使える量は限られていて、Devin ReviewとDeepWikiも使えます
- Pro：月20ドル。1日と1週間ごとの利用枠があり、枠を超えた分は追加クレジットで払えます
- Max：月200ドル。1日の上限がなく、週の利用枠がProよりかなり大きくなります
チームで使うTeamsは月80ドルからです。以前のCoreプランを使っていた人は、Freeプランに移されています。残っている追加クレジットは、そのまま使えます。
料金体系は変わりやすいので、申し込む前にDevinの料金ページでも金額を確かめてください。個人でサイトを1つ作るだけなら、Freeで試し、足りなければProにすると無理がありません。
ステップ1：アカウント作成とGitHub連携
Devinのアプリにログインしたら、GitHubとつなぎます。GitHubは、コードの保管場所（リポジトリ）をインターネット上に置けるサービスです。Devinが作ったコードは、ここに保存されます。
GitHub連携の公式ページによると、手順は次のとおりです。
- Devinの「Settings」から「Connections」を開き、「GitHub」の「Add Connection」を押す
- 連携するGitHubの組織（Organization）を選ぶ
- すべてのリポジトリに許可するか、選んだものだけに許可するかを決める
- GitHub側の認可を終えて、Devinの設定で連携が有効になったことを確かめる
この連携には、GitHub組織の管理者権限が必要です。Devinには、コードの読み書きやプルリクエストの操作などの権限が渡ります。権限が気になるときは、サイト専用のリポジトリだけを選んでください。
なお、Devinは新しいリポジトリそのものは作れません。先にGitHubで空のリポジトリを作っておきましょう。
ステップ2：Askモードで相談してから、サイトの作り方を指示する
新しいセッションを始めるときは、モードを選びます。公式ドキュメントでは、内容がまだ固まっていないタスクはAskモードから始めるよう勧められています。
Askモードは、コードを見たり作業の計画を立てたりするだけで、ファイルは書き換えません。ここで「シンプルな自己紹介サイトを作りたい。プロフィール、スキル、連絡先を載せたい」と相談しましょう。
話がまとまったら「Construct a Devin Prompt」を使い、やり取りを1つの指示文にまとめます。「Send to Devin」を押すと、Agentモードで作業が始まります。
指示文には、完成の条件をはっきり書くのがコツです。たとえば次のように書きます。
- 青色ベースのシンプルなデザインにする
- スマホでも見やすいレイアウトにする
- プロフィール、スキル、連絡先の3つのセクションを入れる
「かっこいいサイトを作って」だけでは、何がかっこいいのかをDevinが決められません。日本語の指示でも使えるという説明は、今回見た公式ページには見つかりませんでした。通じにくいと感じたら、英語に切り替えてみてください。
ステップ3：実行して確認し、公開する
Agentモードに移ると、Devinが自分で作業を進めます。終わるとプルリクエストができているので、GitHubで変更内容を確かめましょう。直したいところは、チャットで「ヘッダーの色を緑にして」と頼めば直してもらえます。
公開の方法は2通りあります。1つ目は、Devin app deploymentsです。ゼロから作った小さなアプリを、公開用のURLで見られる状態にします。
公式ページによると、公開できるのはindex.htmlを持つ静的なサイトと、PythonのFastAPIで作ったバックエンドです。静的なサイトは、devinapps.comのサブドメインで見られるようになります。試作品やデモ向けで、公開の前には承認の確認が出ます。
2つ目は、自分で使っているVercelのようなサービスに載せる方法です。公式ページでは、VercelはDevinが認証情報を受け取って公開できる外部ツールの例として挙げられています。本番のサイトは、こちらのほうが管理しやすいと考えられます。
なお、エンタープライズ組織では、app deploymentsは使えません。
つまずきやすい3つのポイントと対策
初心者がつまずきやすい点は次の3つです。
1つ目は、指示があいまいで、思った結果にならないことです。色やレイアウトを具体的に書き、「テストを実行して確認して」のように確かめ方も添えてください。
2つ目は、GitHub連携がうまくいかないことです。公式ページによると、連携の許可範囲は、GitHub組織の設定にある「Devin.ai」の設定画面で変えられます。見たいリポジトリが許可されているか確かめましょう。
3つ目は、作業を一度に頼みすぎることです。「まずトップページだけ」「次にお問い合わせ欄を追加」のように分けると、直す箇所も減ります。エラーが出たら、メッセージをそのまま貼って直してもらいましょう。
応用：Ask DevinとDeepWikiで、できたコードを理解する
サイトができたら、中身を理解しておくと後の修正が楽になります。そこで役立つのが、Ask Devinです。コードについて質問すると、どのファイルのどこを見ればよいかという根拠つきで答えが返ってきます。
DeepWikiは、リポジトリの説明書を自動で作る機能です。構成図やソースへのリンクもつきます。アプリ内の標準の生成レベルは無料と案内されていますが、高いレベルは有料で、利用枠が必要です。
作業を同時に進めたいときは、セッションを分けて並行して動かす方法もあります。サイトの見た目と問い合わせ機能を別々に頼むような使い方です。
よくある質問（FAQ）
Q. プログラミングの知識がなくても使えますか？
簡単なサイトなら、知識がなくても始められます。ただし、GitHubの登録や、プルリクエストの確認は自分で行います。最初は小さなページで流れに慣れましょう。
Q. 無料でどこまで試せますか？
Freeプランは、限られた量のDevinを試せます。2026年10月時点では、使える量の細かい数字は公式ページに書かれていませんでした。足りなくなったらProを検討してください。
Q. 作ったサイトは自由に公開してよいですか？
公開前にコードと見た目を自分の目で確認してください。仕事で使うサイトなら、会社のルールにも従いましょう。
まとめ
- Devinは、計画から実装、プルリクエスト作成まで進めるAIエンジニアです
- 個人向けは、Free、Pro（月20ドル）、Max（月200ドル）です
- GitHub連携の後、Askモードで相談し、Agentモードで実行します
- 簡単なサイトは、app deploymentsで公開できます
- 指示を具体的にして、作業を小さく分けるとうまくいきます
まずはFreeプランに登録して、自己紹介ページを1枚作るところから始めてみてください。