React（Next.js）＋Tailwind CSS＋TypeScriptの初学者ですが、試行錯誤しながら自分でWebサイトをデプロイしてみました！
この記事では、その制作の流れを備忘録として残しておきます。
これから同じように作ってみたい方の参考にもなればうれしいです。
れっつごー！完成したサイト
https://juku-mei.netlify.app
※今回は「全て0円での運用」を目指したため、ドメイン取得は行っていません。
使用したツール・技術
| ツール/技術 | 用途 |
|---|---|
| Notion | 原稿作成・進捗管理 |
| Figma | ワイヤーフレーム・デザイン |
| Illustrator | 地図・キャラクター作成 |
| React / Next.js / Tailwind CSS | サイト構築・ページ遷移・コーディング |
| Netlify | サイト公開・ホスティング |
| microCMS | お知らせ管理（CMS） |
全体の流れ
0.打ち合わせ・原稿作成・ワイヤー・デザイン
- 打ち合わせ
サイトの目的やターゲット、掲載する内容を明確にします。
※今回は父が個人運営する学習塾だったので、和気あいあいと話が進みました😊 - 原稿作成
テキストは先にNotionで用意。ライティングはchatGPTにも大変お世話になりました。 - 似顔絵+マスコットキャラクター作成
illustratorで、塾長の似顔絵とマスコットキャラクターを作成しました。 - ワイヤーフレーム作成
Figmaでざっくりと配置を決めました。 - トップページデザイン
色やフォント、パーツの配置を決定しつつ、「コンポーネント化できそうな部分」もこの段階でぼんやり考えておきました。
1.GitHub + Netlifyでホスティング環境を用意＆仮ページ準備
まずはGitHubでリポジトリを作成し、Netlifyと連携してホスティング環境を用意しました。
※この段階で仮ページ準備
この段階ではまだ本番のサイトは完成していないため、仮のindex.html ページを用意してアップロード。
キー部分のデザインはCanvaで作成しました。
また、Search Console に登録して、早めにインデックスされるよう準備しておきました。
2.Next.js で開発環境を構築
本番用の開発には Next.js を使用。npx create-next-app@latest コマンドでプロジェクトを初期化し、必要なディレクトリ構成や依存パッケージを整えました。
今回は Tailwind CSS も導入し、効率よくスタイルを当てられるようにしています。
3.ヘッダー・フッター・ボタンなど共通コンポーネントを作成
どのページにも共通で使うヘッダー・フッター・ボタンなどのUIパーツを先に作成。
デザインの統一性を保ちつつ、再利用しやすいようにコンポーネント分割して管理しています。
共通化することで公開後に運用しやすくなります。
4.コーディング（トップページ）
サイト全体の第一印象になる部分なので、情報構成やビジュアルの見せ方にも気を配りました。
Tailwindも初挑戦だったので、クラスでCSSを充てる感覚がとても新鮮でした。
5.コーディング（サブページ）
アクセスや塾についてなど、必要なサブページを順に作成。
デザインは作っていなかったので、実装しながら「よしなに」作りました。
今回はトップも合わせて合計5ページ作成。（※お知らせのぞく）
6.microCMS をセットアップ
お知らせははmicroCMSで管理するようにしました。
小さな会社サイトでしたら、無料のHobbyプランでも十分です。
参考Link：Hobbyプランを法人のウェブサイトで使うことは可能ですか？
7.GitHubリポジトリにプッシュ
最後にGitHubのリポジトリにコードをプッシュしました。
NetlifyはGitHubと連携しているため、自動的にデプロイが行われ、公開もスムーズに完了しました。
公開完了！
これでサイトの初期公開が完了！
無料ツールのみで構築しつつ、運用や拡張性も考慮した仕組みにしています。
ゼロからつくるのは正直たいへんでしたが、その分「動いた！」ときの感動は大きかったです。
Netlify + GitHubの連携やmicroCMSの設定など、手を動かしてこそ学べることばかりでした。
また別の記事で、もう少し具体的な実装についても書いていく予定なので、のんびりお付き合いいただけたら嬉しいです～！