DXコース ／ AI活用 Web公開ガイド

🌐 Webサイト・アプリの公開方法まとめ

AIで作ったWebサイトやアプリを、実際にインターネットで公開してみよう。
自分のレベルや目的に合った方法を選んでください。

Method Overview

📊 3つの公開方法を比べてみよう

いちばん簡単
✨

① Canvas 共有リンク

GeminiなどのAIで作ったコードを、そのまま共有リンクで公開。ファイルのダウンロード不要。

🚀

② Netlify Drop

HTMLファイルをドラッグ＆ドロップするだけで本格的なURLを取得できる。

🐙

③ GitHub Pages

カリキュラムで学んだGitHubを使って公開。エンジニアの現場でも使われる本格的な方法。

Why publish HTML yourself?

💡 Canvasリンクだけじゃダメなの？

🤔 Canvas共有リンクで十分なケースも多い。でも…

🔗

URLを自分でコントロールできるNetlifyなら独自ドメインの設定も可能。Canvasリンクはいつ消えるか分からない。

💼

実務で通用するスキルになる「Web公開した経験」としてポートフォリオに残せる。

📁

ファイルが手元に残るCanvas上のコードだけに依存しない。ローカルにも保存できる。

🌍

"本物のWebサイト"体験「コード共有」ではなく「Webサービスを公開した」という実感が得られる。

💬 GitHub Pagesを使う理由は？
カリキュラムで学んだことを実際に活かしてみること自体が目的。「動いた！」という経験がいちばんの学習になります。
1

Gemini Canvas 共有リンクで公開

AIで作ったコードをそのままWeb公開する最短ルート

⭐ いちばん簡単
  1. 1

    GeminiでCanvasモードを開く

    gemini.google.com にアクセスし、Googleアカウントでログイン。チャット入力欄の右にある Canvas ボタンをクリックしてCanvasモードに切り替える。

  2. 2

    AIにWebサイト・アプリを作ってもらう

    Canvasモードのチャットに作りたいものを指示する。例：

    あなた ＞ シンプルな自己紹介ページをHTMLで作ってください。
    　名前、自己紹介文、趣味を載せてください。

    Canvasエリアにコードとプレビューが表示される。満足いくまで修正を繰り返してOK。

  3. 3

    「共有」ボタンから公開リンクを発行する

    Canvasの右上にある 共有 アイコン（または ︙ メニュー）をクリック。

    共有設定
    🔗 リンクを知っている全員が閲覧可能
    　→「リンクをコピー」ボタンをクリック
  4. 4

    リンクをコピーして提出・共有する

    発行されたURLをコピーして、課題提出フォームや共有したい相手に送ればOK。

    例：
    https://gemini.google.com/share/xxxxxxxxxxxxxxxx
⚠️ 共有リンクを「オフ」に戻すとURLにアクセスできなくなります。提出後は設定を変えないよう注意しましょう。ChatGPT・Claude・Copilotなど他のAIのCanvas相当機能でも同様に共有リンクを発行できる場合があります。
2

Netlify Drop でHTMLを公開

ドラッグ＆ドロップだけで本格的なURLを取得

🚀 D&Dで完結
  1. 1

    HTMLファイルを用意する

    AIに作ってもらったHTMLコードをテキストエディタ（メモ帳でもOK）に貼り付けて、index.html という名前で保存する。

    📌 Gemini CanvasのコードをHTMLファイルにする方法

    Canvasの右上 共有 → 内容をコピー でコード全体をコピーする。

    🪟 Windows（メモ帳）
    ① スタートメニューから「メモ帳」を開く
    ② コピーしたコードを貼り付け（Ctrl＋V）
    ③ 「ファイル」→「名前を付けて保存」
    ④ ファイル名を index.html と入力し、ファイルの種類を すべてのファイル に変更して保存

    🍎 Mac（テキストエディット）
    ① テキストエディットを開き、メニュー「フォーマット」→「標準テキストにする」でプレーンテキストモードにする
    ② コピーしたコードを貼り付け（⌘＋V）
    ③ 「ファイル」→「保存」でファイル名を index.html にして保存（「.html」拡張子を使用のまま保存）
  2. 2

    Netlify Drop にアクセスする

    app.netlify.com/drop をブラウザで開く。まず右上の Sign up から無料アカウントを作成しておこう（メールアドレスまたはGoogleアカウントで登録可）。

    ⚠️ アカウントなしでもDropは使えますが、24時間後にサイトが自動削除されます。課題提出URLが消えてしまうので、必ず先に登録しておきましょう。
  3. 3

    HTMLファイルをドロップする

    画面中央の点線エリアに index.html をドラッグ＆ドロップするだけ。複数ファイルがある場合はフォルダごとドロップする。

    ┌─────────────────────────────┐
    │ Want to deploy a new site │
    │ without connecting to Git? │
    │ │
    │ 📂 Drag and drop your site │
    │ output folder here │
    └─────────────────────────────┘
  4. 4

    自動生成されたURLをコピーして共有

    数秒でデプロイ完了。ランダムなURLが発行される。

    🎉 Your site is live!
    https://jolly-sundae-a1b2c3.netlify.app
    　→ このURLをコピーして共有！
💡 ログイン済みの状態でDropすると、マイページからサイトの管理・削除・URL名の変更ができます。無料プランでも複数サイトを公開できます。
3

GitHub Pages で公開

カリキュラムで学んだGitHubを実践で活用

🐙 実践スキル
📚

手順はカリキュラムで学習済みです

授業でGitHub Pagesの使い方を学びましたね。復習しながら、今回作ったWebサイト・アプリを実際にGitHub Pagesで公開してみましょう。

GitHubを使う一番の理由は「学んだことを実践してみること」。操作を繰り返すことで、エンジニアの現場で使われるワークフローが自然と身につきます。公開URLをポートフォリオとして残せるのも大きなメリットです。

🎯 発行されるURLの形式：
https://ユーザー名.github.io/リポジトリ名/