はじめに
Webサイトのデザインやページ作成はできるけど、「ネットに公開する」ところで手が止まってしまう。そんな経験はありませんか？
この記事は、まさにそんな状態だった自分自身のための備忘録であり、同じように悩んでいる人に向けたガイドです。想定しているのは、
- Webサイトのページ作成はできるけど、ネット公開までの方法がわからない人
- 自作Webサイトをネットに公開したいけど、やり方がわからない人
こうした方々です。
最終的にできあがるのは、自分でデザイン・作成した個人サイトを独自ドメイン（例：myname.com）で公開し、GitHubに変更をPushすると自動で本番環境に反映される仕組みです。
なぜWordPressを使わなかったのか
今回、あえてWordPressのようなCMSを使わない方法を選びました。理由はシンプルで、
- 自分の個人サイトを作りたかっただけで、記事投稿機能や管理画面は必須ではなかった
- HTML・CSS・JavaScriptでローカルにページをデザインすることまではできても、それを実際にネット上に公開する方法を知らなかったので、そこを学びたかった
という2点です。CMSに頼らず、公開までの一連の流れを自分の手で理解したいという狙いがありました。
全体の流れ
先に全体像を示しておきます。今回行ったのは、大きく分けて次の6つのステップです。
- Webページのデザイン・コード作成
- GitHubに保存
- Vercelで公開
- お名前.comで独自ドメイン取得
- DNS設定・Vercelへの紐付け
- SEO対策
それぞれの詳細を、実際に行った手順に沿って紹介していきます。
実際に行った手順
1. Webページのデザイン・コード作成
今回はデザインツールとして「Figma Make」を利用しました。
Figma Makeは、AIとのチャットベースのやり取りで画面のベースを生成してくれるツールです。まずは大まかな構成をAIに生成してもらい、そこから
- 画面に動き（アニメーションやインタラクション）を追加する
- レイアウトや余白などのデザインを微調整する
といった指示を追加で出しながら、少しずつ理想の形に近づけていきました。
デザインが完成したら、Figma Makeのエクスポート機能を使ってソースコードを取得します。ここでWebページのコード（HTML/CSS/JavaScriptやコンポーネントファイル一式）が手元に揃った状態になります。
2. GitHubに保存
次に、作成したコードをGitHubで管理できるようにします。
- GitHub上にリモートリポジトリを新規作成する
- そのリポジトリをローカル環境にクローンする
- クローンしたフォルダの中に、Figma Makeで作成したソースコードを配置する
commitしてpushし、変更内容をリモートリポジトリに反映する
この時点で、自分のコードがGitHub上のリポジトリで管理されている状態になります。ここまでできれば、次のVercelとの連携もスムーズです。
3. Vercelで公開
コードの公開には「Vercel」というホスティングサービスを利用しました。手順は以下の通りです。
- Vercel公式サイトにアクセスする
- Vercelアカウントを作成する
- 案内に従って、GitHubアカウントと紐付ける
- Vercelのダッシュボードで「Add New」→「Project」を選択する
- 表示されたGitHubのリポジトリ一覧から、公開したいリポジトリを選び「Import」する
- ビルドとデプロイが完了すると、
プロジェクト名.vercel.appのような仮のURLが発行される - 発行されたURLにアクセスし、実際にサイトが表示されることを確認する
ここで嬉しいポイントがあります。一度この連携を済ませてしまえば、以降はGitHubの対象ブランチ（多くの場合はmain）にpushするだけで、Vercel側が自動的に再デプロイしてくれるようになります。つまり「コードを直してpushすれば、勝手に本番サイトが更新される」という状態が実現します。
4. お名前.comで独自ドメイン取得
プロジェクト名.vercel.app のままでも公開はできますが、せっかくなので独自ドメイン（myname.comのような形式）を取得します。今回はドメイン取得サービスとして「お名前.com」を利用しました。
5. DNS設定・Vercelへの紐付け
取得した独自ドメインを、Vercelで公開しているサイトに向けるための設定を行います。具体的には、お名前.com側でDNSレコード（AレコードやCNAMEなど）を設定し、Vercel側のドメイン設定と紐付ける作業です。
6. SEO対策
最後に、検索エンジンからの見つけやすさを意識して、以下のような基本的なSEO対策を行いました。
h1〜見出しタグの構成を確認し、正しい階層になっているかチェックする- meta descriptionsを追加する（ブラウザ表示用、SNSなどでの共有リンク用、Twitter用のそれぞれに対応）
imgタグにalt属性を追加する
苦戦したポイント・解決方法
実際にやってみると、いくつかつまずくポイントがありました。
VercelのURLとお名前.comで取得したドメインがなかなか紐づかない
原因は、お名前.comから届いていた「メールアドレス確認依頼」のメールに気づいていなかったことでした。確認が完了していなかったため、そもそもドメインが正式に取得できていない状態だったのです。メールの見落としには注意が必要です。
ドメイン設定で「Aレコード」「CNAME」の意味がわからなかった
DNS設定の画面で出てくる「Aレコード」や「CNAME」といった用語の意味がわからず、最初は戸惑いました。これらはドメインとサーバー（今回で言うとVercel）を紐付けるための設定項目で、Vercel側の案内に従って値を入力することで対応できました。
ネット公開から1週間後に、突然表示できなくなった
無事に公開できたと思っていたら、1週間ほど経った頃に急にサイトが表示されなくなるというトラブルが発生しました。
原因は、お名前.comから届いていた「2段階認証設定の依頼」のメールに気づいておらず、それによってドメインの利用に制限がかかってしまっていたことでした。ここでも、サービスからの通知メールをしっかり確認することの大切さを痛感しました。
新しく学んだこと
今回の一連の作業を通じて、次のようなことを学びました。
- VercelとGitHubを連携させることで、GitHubに
pushするだけでサーバーへの自動デプロイが実現できること - 独自ドメインの取得方法と、取得したドメインとURLを紐付ける方法
- meta descriptionsやaltタグなど、SEO対策の基礎
まとめ
今回、WordPressのようなCMSを使わずに、Figma Makeでデザインしたコードを、GitHub・Vercel・お名前.comを組み合わせて独自ドメインで公開するところまで実現できました。GitHubにpushすれば自動でサイトが更新される環境も整い、以降の運用もかなり楽になりそうです。
次にやってみたいこととしては、
- サイトの継続的な更新
- 独自ドメインを使ったメールアドレスの運用
- アクセス解析の導入
などを考えています。同じようにWebサイトの公開方法で悩んでいる方の参考になれば嬉しいです。
コメント