PR
「Webサイトを作りたいけど、プログラミングなんて無理…」そう思って、何年も諦めてきた人に伝えたいことがある。
もうその言い訳は、通用しない時代になった。
Gemini 3.1 Proという最新AIに「こんなサイトを作って」と日本語で命令するだけで、HTMLコードが自動で生成される。それをGitHubに放り込めば、世界中に公開されたWebサイトが完成する。コードを書く必要は、一切ない。
コードを書かない時代が、もう来ている
「ノーコード」という言葉を聞いたことがあるだろうか。文字通り、コードを書かずにWebサービスやサイトを作る手法のことだ。
数年前まで、ノーコードツールといえば「自由度が低い」「本格的なものは作れない」という印象が強かった。しかし今は違う。生成AIの登場によって、ノーコードの概念そのものが書き換えられた。
AIに指示（プロンプト）を出すだけで、プロのエンジニアが数時間かけて書くようなHTMLコードが、数十秒で生成される。これはもはや「ツールで補助する」レベルの話ではなく、AIがエンジニアの仕事を代替しているという現実だ。
「プログラミングできないと無理」という思い込みを捨てよう
日本では今でも「Webサイト＝専門知識が必要」というイメージが根強い。確かに、5年前ならその通りだった。HTMLを覚え、CSSを学び、JavaScriptで動きをつける——それだけで半年以上かかることもあった。
だが2025年以降、その前提は崩れた。必要なのは「何を作りたいか」を言語化する力だけだ。コードの書き方より、アイデアを言葉にする力のほうが、圧倒的に重要になっている。
むしろプログラミングを学ぶ時間があるなら、AIへの指示の精度を上げる練習に使ったほうが、今の時代には何倍もリターンが大きい。
AIに命令するだけでサイトが生まれる現実
Gemini 3.1 Proは、Googleが開発した最先端の生成AIだ。テキスト生成はもちろん、コード生成においても非常に高い精度を持っている。
「シンプルでおしゃれなプロフィールサイトを作って。スマホでも綺麗に見えるようにして。HTMLファイル1つにまとめて」——この程度の指示で、実際に動くWebサイトのコードが出力される。
しかもGitHub Pagesという無料サービスを使えば、そのコードをアップロードするだけで、独自ドメインなしでも世界中からアクセスできるURLが発行される。費用はゼロ。必要なのは、Googleアカウントと数十分の時間だけだ。
準備するのはGoogleアカウントとGitHubアカウントだけ
難しそうに聞こえるかもしれないが、この手順に必要なツールはたった2つだ。どちらも無料で、アカウント作成は5〜10分で完了する。
Gemini 3.1 Proにアクセスする方法
Geminiは、Googleアカウントがあればブラウザからすぐにアクセスできる。gemini.google.comにアクセスし、Googleアカウントでログインするだけだ。
Gemini 3.1 Proは、2025年時点でGoogle One AIプレミアムプラン（月額2,900円）に加入することで利用できる。ただし、無料版のGeminiでも今回の手順は十分に実行可能だ。まずは無料版で試してみることをおすすめする。
重要なのは、Geminiに指示を出す際に「1つのHTMLファイルにすべてまとめて」と明記することだ。これにより、CSSやJavaScriptも含めたすべてのコードが1ファイルに収まり、初心者がつまずきやすい「ファイルの連携エラー」が起きない。
GitHubアカウントの作り方（5分で完了）
GitHubは、世界中のエンジニアが使うコード管理サービスだ。「エンジニア向けのサービスなんて難しそう」と思う必要はない。今回の用途では、ファイルを保管してネット上に公開する場所として使うだけだ。
github.comにアクセスし、メールアドレスとパスワードを登録すれば、無料アカウントが作成できる。GitHub Pagesという公開機能は、無料プランでも使用可能だ。有料プランへのアップグレードは一切不要なので安心してほしい。
ステップ1：Geminiに「魔法の指示」を出す
アカウントの準備ができたら、いよいよ本番だ。Geminiに指示を出してコードを生成させる。このステップが、今回の手順の中で最もクリエイティブで、最も楽しい工程だ。
コピペするだけの最強プロンプトテンプレート
以下のテンプレートをコピーし、カッコ内を自分の希望に書き換えてGeminiに送ろう。
【コピペ用プロンプト】
「Webサイトを作りたいです。HTMLやCSSの知識はないので、以下の条件で『一つのHTMLファイル』として完成したコードを出力してください。
1. サイトの内容：（例：自分のプロフィールと趣味の紹介）
2. 雰囲気：（例：シンプルで清潔感のある、淡いブルー基調のデザイン）
3. 必須機能：（例：スマホでも綺麗に見える、動きのあるボタン、SNSリンク）
4. 重要：CSSもJavaScriptもすべて、HTMLファイル1つの中に書き込んでください。」
このプロンプトのポイントは、「1つのファイルにまとめて」という一文だ。これがないと、Geminiは複数のファイルに分けてコードを生成することがある。初心者がファイルを連携させるのは難しいため、必ずこの一文を入れること。
「1ファイルにまとめて」が初心者最大のコツ
Webサイトは通常、HTML・CSS・JavaScriptという3種類のファイルで構成される。これらが連携して初めて、デザインや動きが反映される仕組みだ。
しかし初心者がこの連携を正しく設定するのは意外と難しい。ファイルのパスが間違っているだけで、デザインが崩れたり、動きが止まったりする。
「1ファイルにまとめて」という指示は、この複雑さをゼロにするための魔法の言葉だ。HTMLファイルの中にCSSとJavaScriptを埋め込む形式（インライン記述）にすることで、ファイルを1つ管理するだけでサイト全体が完結する。
ステップ2：コードをindex.htmlファイルに変換する
Geminiがコードを出力したら、次はそれをファイルに変換する作業だ。ここも難しい操作は一切ない。
メモ帳に貼るだけ——拡張子を.htmlにする唯一のルール
手順はシンプルだ。
1. Geminiが出力したコードの右上にあるコピーボタンをクリックする
2. Windowsなら「メモ帳」、Macなら「テキストエディット」を開く
3. コピーしたコードを貼り付ける
4. ファイルを保存するとき、ファイル名を「index.html」にする
この「index.html」というファイル名が重要だ。Webサーバーは「index.html」というファイルをトップページとして自動認識する。これはWebの世界の共通ルールなので、必ずこの名前で保存すること。
Windowsのメモ帳で保存する場合、「ファイルの種類」を「すべてのファイル」に変更してから保存しないと、自動的に「.txt」がついてしまうので注意しよう。
ブラウザでプレビューして確認する方法
保存したindex.htmlファイルをダブルクリックすると、ブラウザが起動してサイトがプレビュー表示される。
「思っていたデザインと違う」「ボタンの色を変えたい」「文字が小さい」——そんなときは、Geminiに追加の指示を出すだけでよい。「ボタンをもっと丸くして」「フォントサイズを大きくして」と伝えれば、修正済みのコードが出力される。これを何度でも繰り返せる。
満足のいくデザインに仕上がったら、次のステップへ進もう。
ステップ3＆4：GitHubにドロップして世界公開する
いよいよ最後のステップだ。完成したindex.htmlをGitHubにアップロードし、世界中からアクセスできる状態にする。
ドラッグ＆ドロップで投げるだけのアップロード手順
1. GitHubにログインし、右上の「＋」ボタンから「New repository」を選ぶ
2. Repository nameを「自分のユーザー名.github.io」の形式で入力する（例：yamada.github.io）
3. 「Public」を選択し、「Create repository」をクリック
4. 作成されたリポジトリのページで、index.htmlをブラウザ画面にドラッグ＆ドロップする
5. 画面下部の「Commit changes」をクリックして保存
これだけでアップロードは完了だ。コマンドラインもターミナルも、一切使わない。
GitHub Pagesで公開スイッチをオンにする
アップロードが完了したら、公開の設定をする。
1. リポジトリの「Settings」タブをクリック
2. 左側メニューの「Pages」を選ぶ
3. Branch を「main」に変更し、「Save」をクリック
4. 3分ほど待つと、画面上部にURLが表示される
このURLにアクセスすれば、あなたのWebサイトが世界中に公開されている。リポジトリ名を「ユーザー名.github.io」にした場合、URLは「https://ユーザー名.github.io」という形式になる。
無料で、広告なしで、独自ドメインがなくても、本物のWebサイトが公開された瞬間だ。
eddie’s Advice
「完成度より公開数」——これが、AI時代に結果を出す人の共通点だ。
完璧なサイトを1つ作ろうとして3ヶ月かかるより、70点のサイトを3つ公開したほうが、圧倒的に多くのことが学べる。アクセスが来て初めて気づくこと、他人の反応で見えてくること、実際に動かしてわかる改善点——これらはすべて、公開しなければ永遠に手に入らない情報だ。
AIはあなたの「完成させる速度」を劇的に上げてくれる。だからこそ、今まで以上に「まず出す」という判断が重要になる。完璧主義はAI時代においては最大のブレーキだ。荒削りでいい。動けばいい。公開してから磨けばいい。
AIに頼む力と、すぐに出す勇気——この2つを持った人が、これからのWeb時代を制する。
結論：今日から「AIに頼む人」になろう
今回紹介した手順をまとめると、こうなる。
1. Geminiに「1ファイルにまとめて」と指示してコードを生成
2. メモ帳に貼り付けて「index.html」で保存
3. GitHubにドラッグ＆ドロップでアップロード
4. GitHub Pagesで公開スイッチをオン
所要時間は、慣れれば30分以内だ。プログラミングの勉強は一切不要。必要なのは、「こんなサイトが作りたい」というアイデアと、それを言葉にする力だけだ。
もしこの記事を読んで「自分でもできそう」と感じたなら、今すぐGeminiを開いてほしい。サイトを作るより、最初の一文を打ち込む勇気のほうが、ずっと大切だ。
ランディングページを作りたい、ポートフォリオを公開したい、副業のためのWebサービスを試したい——そのすべてが、今日から始められる。AIに頼んでいい。AIを使い倒していい。それが、2025年以降の正しいWeb活用の形だ。
より本格的なWebサイト制作やブログ運営に挑戦したくなったら、国内トップクラスのレンタルサーバーも検討してみよう。無料のGitHub Pagesから一歩進んで、独自ドメイン＋レンタルサーバーという本格構成にすることで、収益化や本格的なブログ運営への道も開ける。
＼初心者でも安心のサポート体制！／
簡単なランディングページやプロフィールサイトなら、ノーコードのホームページ作成サービスも便利だ。
コメント