こん太 りんく たぬ姉

ゆっくり解説
GitHub・Vercel・ドメイン・Cloudflare

小学生から還暦まで！ 画面を見ながら一緒にやってみよう

🐙
STEP 1
GitHub
▲
STEP 2
Vercel
🌐
STEP 3
ドメイン取得
🟠
STEP 4
Cloudflare
1

🐙 GitHub（ギットハブ）とは？

コードを保存する「無料の倉庫」です
りんく
GitHubはね、プログラムのファイルをインターネット上に保存しておける場所だよ。
無料で使えて、ここにファイルを置くだけでアプリが自動で公開されるんだ！
りんく
① アカウントを作る（無料・5分）
たぬ姉
まず github.com を開いて、「Sign up」ボタンを押してね。
メールアドレスとパスワードを入れるだけ！
たぬ姉
github.com
Sign in Sign up
Build and ship software
Join over 100 million developers
「Sign up」→ メール・パスワード・名前を入れて「Continue」をクリック
② テンプレートをコピーする
こん太
ログインしたら、このテンプレートページを開いてね。
緑色の 「Use this template」 ボタンがあるよ！
こん太
github.com / kimito-link / web-ios-android
kimito-link / web-ios-android Public
📋 Use this template ▾ ⭐ Star 🍴 Fork
📁 .github CI/CD設定
📁 site Webページ
📄 app.config.json ← ここだけ変える
📄 CLAUDE.md AI向け説明書
「Use this template」→「Create a new repository」をクリック
たぬ姉
「Repository name（リポジトリ名）」はアプリの名前にするといいよ。
あとでドメインと合わせると覚えやすい！
Private（プライベート）を選ぶとコードを非公開にできるよ。
たぬ姉
github.com / new
新しいリポジトリを作る
オーナー
yourname ▾
リポジトリ名（アプリの名前）
my-awesome-app
Create repository
名前を入れて「Private」を選び、「Create repository」をクリック
2

▲ Vercel（バーセル）とは？

GitHubと連携してWebサイトを自動で公開してくれる無料サービス
りんく
Vercelはね、GitHubにファイルを置くと自動でWebサイトを公開してくれるサービスだよ。
個人利用は無料！ むずかしい設定はほぼなし！
りんく
① Vercelに登録する（GitHubアカウントでOK）
こん太
vercel.com を開いて、「Continue with GitHub」をクリックするだけ！
GitHubのアカウントで自動でログインできるよ。新しいパスワードは不要！
こん太
vercel.com
▲ Vercel
Deploy your project in seconds
🐙 Continue with GitHub
GitHubのアカウントで続ける（新規登録不要）
「Continue with GitHub」をクリック → GitHubの許可画面が出たら「Authorize」をクリック
② GitHubのリポジトリを選ぶ
たぬ姉
ログインすると「Add New Project」という画面が出るよ。
さっき作ったリポジトリを選んで 「Import」 を押すだけ！
たぬ姉
vercel.com / new
新しいプロジェクト
GitHubのリポジトリをインポート
📁
yourname / my-awesome-app
更新: たった今
Import
設定はそのままでOK
🚀 Deploy
リポジトリの「Import」→ そのまま「Deploy」をクリック
③ 公開完了！
りんく
1〜2分待つと公開完了！
yourname.vercel.app というURLでWebサイトが見られるよ。
次はこれを自分のドメインにつなごう！
りんく
vercel.com / dashboard
🎉

デプロイ成功！

あなたのWebサイトが公開されました

https://my-awesome-app.vercel.app
このURLをブラウザで開くとサイトが見える！
3

🌐 ドメインとは？

「自分だけのURL」を買う（例：my-app.com）
こん太
ドメインは インターネット上の「住所」 みたいなもの。
「.com」や「.jp」で終わる文字列のことだよ。
年間1,000〜2,000円くらいで買えるよ！
こん太
① Xserverドメインで検索する
たぬ姉
xserver.ne.jp/domain を開いて、
欲しいドメイン名を入力して「検索」を押してね。
使えるかどうかすぐわかるよ！
たぬ姉
xserver.ne.jp/domain
Xserverドメイン
国内最大級のドメイン登録サービス
my-awesome-app.com ✅ 取得可能
初年度 1,628円 / 次年度〜 1,628円/年
好きな名前を入力 →「検索する」→「カートに追加」→ 購入手続きへ
② ネームサーバーをCloudflareに変える
りんく
ドメインを買ったら、「ネームサーバー」の設定を変える必要があるよ。
むずかしそうだけど、コピペするだけ！ 次のSTEPでやり方を説明するね。
りんく
xserver.ne.jp / domain / settings
ドメイン管理 ＞ my-awesome-app.com
ネームサーバーの設定
現在の設定：
ns1.xserver.ne.jp
ns2.xserver.ne.jp
↓ これをCloudflareのネームサーバーに変更する
📋 Cloudflareから届く2行の文字列をここに貼り付ける（次STEPで説明）
4

🟠 Cloudflare（クラウドフレア）とは？

ドメインとVercelをつなぐ「交換台」。速く・安全にしてくれる無料サービス
たぬ姉
Cloudflareは「ドメイン」と「Vercelのサイト」をつなぐ橋みたいなもの。
悪い人からの攻撃を防いでくれたり、サイトを速くしてくれたりもするよ。無料！
たぬ姉
① Cloudflareに登録してドメインを追加
こん太
cloudflare.com でアカウントを作って、
「Add a Site（サイトを追加）」から買ったドメインを入れてね。
プランは Free（無料） でOK！
こん太
dash.cloudflare.com
サイトを追加する
my-awesome-app.com
追加 →
Pro
$20/月
Free ← これ！
$0 / 無料
Business
$200/月
ドメインを入力 →「追加」→ プランは「Free」を選んで「Continue」
② ネームサーバーをコピーしてXserverに貼る
りんく
Cloudflareが 2行の文字列（ネームサーバー） を教えてくれるよ。
それをコピーして、Xserverの管理画面に貼り付けるだけ！
反映に最大24時間かかるけど、だいたい数時間でOKになるよ。
りんく
dash.cloudflare.com / ネームサーバーを変更
📋 このネームサーバーをコピーしてXserverに貼る
ネームサーバー 1
vida.ns.cloudflare.com
ネームサーバー 2
walt.ns.cloudflare.com
※ 実際の文字列はあなたのドメインによって異なります
この2行をコピー → Xserverの「ネームサーバー設定」に貼り付け → 保存
③ VercelとドメインをDNSでつなぐ
こん太
Cloudflareの「DNS」という画面で、
Vercelの「76.76.21.21」というIPアドレスを登録するよ。
Vercelの設定画面に「Add this record」って書いてあるから、それを見ながら入力してね！
こん太
dash.cloudflare.com / DNS / レコード
タイプ 名前 内容（Value）
A @ 76.76.21.21
CNAME www cname.vercel-dns.com
↑ この2行を追加する。Vercelの管理画面にコピペ用の値が表示されます。
Vercelの「Domains」設定 → DNSレコードの値をCloudflareに入力 → 保存
④ 完成！独自ドメインでサイトが見える
りんく
数時間待つと https://my-awesome-app.com で
あなたのサイトが見られるようになるよ！
🔒 鍵マーク（HTTPS） もCloudflareが自動でつけてくれるから安全！
りんく
🔒 https://my-awesome-app.com
🎉

独自ドメインで公開完了！

https://my-awesome-app.com でサイトが見えます

🔒 SSL証明書も自動で設定済み

🐙
GitHub
コードを保存
→
▲
Vercel
自動で公開
→
🌐
ドメイン取得
自分のURL
→
🟠
Cloudflare
つなぐ＋守る
→
🎉
公開完了！
たぬ姉
わからなくなったら、エラー画面のスクショを撮ってAIに貼るだけで解決できるよ！
Claude・Cursor・ChatGPTなど何でもOK 🤖