Devin（デビン）でWebサイト作成を自動化する3ステップ【初心者向け】
A
AI Friends
2時間前・7分で読める
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
この記事でわかること
Devin（デビン）は、Cognition Labsが開発した自律型AIソフトウェアエンジニアです。普通のAIチャットボットと違って、コードを書くだけでなく、計画を立てて、テストして、実際に動くWebサイトまで作ってくれます。プログラミング初心者の方でも、日本語で「こんなサイトが欲しい」と伝えるだけで、HTMLやCSSといった専門知識がなくても本格的なWebサイトが作れます。2026年4月に料金プランが刷新されて、月額20ドルから使えるようになったので、個人でも気軽に試せるようになりました。従来は月500ドルと高額だったので、大きな変化です。自分でコードを書く時間が大幅に減るため、デザインやコンテンツ作りに集中できるのが最大のメリットです。
まずはDevinの公式サイト（cognition.com）にアクセスして、アカウントを作成します。GitHubアカウントでのログインが推奨されています。なぜなら、Devinが作成したコードを自動的にGitHubリポジトリ（コードの保管場所）に保存してくれるからです。ログイン後、料金プランを選びます。初めての方はFreeプランでも基本機能が試せますが、本格的に使うならProプラン（月20ドル）がおすすめです。次に、GitHubとの連携設定を行います。画面の指示に従って「Connect GitHub」ボタンをクリックし、アクセス許可を承認するだけです。この作業で、Devinがあなたのリポジトリにコードを保存したり、既存のコードを読んだりできるようになります。設定が完了すると、Devinの作業画面（ワークスペース）が表示されます。
ワークスペースの下部に、チャット入力欄があります。ここに日本語で「シンプルな自己紹介サイトを作ってください。プロフィール、スキル、連絡先のセクションを含めて」と入力してみましょう。ポイントは、できるだけ具体的に指示することです。曖昧な指示だと、意図しない結果になることがあります。例えば「かっこいいサイトを作って」だけだと、Devinが何をかっこいいと判断するか分からないので、「青色ベースのシンプルなデザインで」といった具体的な条件を追加すると良いです。入力してEnterキーを押すと、Devinが自動的にプラン（作業計画）を作成します。2026年の新機能「Interactive Planning」により、数秒でプラン案が表示されます。画面には「HTMLファイルを作成」「CSSでデザイン調整」「動作確認」といったステップが箇条書きで示されます。このプランでOKなら「承認」ボタンを押します。修正したい場合は、チャットで「もっとカラフルにして」などと追加指示を出せます。
プランを承認すると、Devinが自律的に作業を開始します。画面右側に、Devinが今何をしているかがリアルタイムで表示されます。「index.htmlを作成中」「styles.cssを編集中」といったメッセージが流れます。コードエディタ画面も見えるので、実際にどんなコードが書かれているか確認できます。作業が完了すると、Devinが「プレビューを確認してください」と通知してくれます。プレビューボタンをクリックすると、ブラウザで実際のWebサイトが表示されます。イメージと違う部分があれば、「ヘッダーの色を緑に変更して」とチャットで指示すれば、すぐに修正してくれます。満足できる仕上がりになったら、「デプロイ（公開）してください」と指示すれば、Devinが自動的にGitHubにコードをアップロードし、必要に応じてホスティングサービス（Vercelなど）への公開まで対応してくれます。これで、あなたのWebサイトが世界中から見られる状態になります。
初心者の方がよくつまずくポイントを3つ紹介します。1つ目は、指示が曖昧すぎて期待と違う結果になることです。対策として、「赤色背景」「3カラムレイアウト」「スマホ対応必須」など、できるだけ具体的な条件を伝えましょう。2つ目は、GitHubとの連携がうまくいかないことです。これは、GitHubのアクセス権限が不足している場合が多いです。GitHub側で「Settings」→「Applications」からDevinの権限を再確認してください。3つ目は、Devinが作業を途中で止めてしまうことです。これは、指示が複雑すぎて処理しきれない場合に起こります。対策として、大きなタスクは小さく分割して、「まずトップページだけ作って」「次にお問い合わせフォームを追加して」と段階的に指示するとスムーズです。エラーメッセージが出たら、そのままDevinにコピペして「このエラーを修正して」と頼めば、大抵は自分で解決してくれます。
基本操作に慣れたら、さらに便利な使い方を試してみましょう。1つ目は「Devin Search」機能の活用です。既存のコードベースに対して、「ログイン機能はどこにありますか？」と日本語で質問すると、該当するファイルや行を教えてくれます。複雑なプロジェクトでコードを探す時間が大幅に削減できます。2つ目は「Devin Wiki」機能です。これは、Devinが自動的にプロジェクトのドキュメントを作成してくれる機能で、「このプロジェクトのwikiを作って」と指示するだけで、各ファイルの役割や使い方をまとめたドキュメントが生成されます。チーム開発で重宝します。3つ目は、テンプレート的な指示の保存です。よく使う指示文（例：「レスポンシブデザインで、SEO対策済みのランディングページを作成」）をメモ帳などに保存しておけば、次回から簡単にコピペで使い回せます。また、2026年2月以降の新機能として、複数のDevinを同時に動かして大規模なプロジェクトを分担させることも可能です。
この記事は AI Friends からのクロスポストです。
