Web制作を学び始めてしばらくすると、必ずぶつかるのが CSS沼。クラス名が長くなって管理が大変ファイルを分けてもどこで使われているかわからないデザイン修正のたびにCSSを追いかけるのが面倒僕も数ヶ月前まで、この沼にハマっていました…。でも、Tailwind CSS を導入したことで、状況がガラッと変わったんです。今回は、導入して実感した 3つのメリット をまとめます。1. ファイルが整理される従来のCSSだと…/* style.css */ .header-title { font-size: 32px; font-weight: bold; margin-bottom: 16px; } .card { border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 16px; } ページが増えると、CSSファイルも複雑化…。どこで使われているか分からず、修正が怖くなることも。Tailwindを使うと…<h1 className="text-2xl font-bold mb-4">記事タイトル</h1> <div className="rounded-lg shadow-md p-4"> <p>カードコンテンツ</p> </div> CSSファイルを追わなくても、HTML/JSXのクラスだけでスタイルが完結「この要素はどんなデザインか」が一目で分かる2. 再利用可能なコンポーネント設計ができるTailwindを使うと、同じデザインパターンをコンポーネント化して再利用できます。// Card.js export default function Card({ children }) { return <div className="rounded-lg shadow-md p-4">{children}</div> } // 使用例 <Card>記事の内容</Card> デザインの統一が簡単修正はコンポーネント1箇所でOKプロジェクト規模が大きくなっても保守性が高いshadcn/uiなどのUIライブラリと組み合わせると、さらに効率的にコンポーネント設計ができます。3. 保守性が格段にアップTailwind導入前は、ちょっと色を変えたり余白を調整するだけで、複数ファイルを修正する必要がありました。Tailwindだと、クラスを置き換えるだけで反映されるので、後からの修正が圧倒的に楽。また、既存のデザインパターンを壊す心配が減ります。まとめ：Tailwindは学習も実務も効率化Tailwind CSSを導入して実感した3つのメリットは…CSSファイルが整理される → 見通しがよくなる再利用可能なコンポーネント設計 → デザイン統一が簡単保守性アップ → 修正や変更が怖くない「CSSで悩む時間」を減らすと、機能開発やUI改善に集中できるので、学習モチベも上がります。

Webサイトを作るとき、記事やお知らせをどう管理するかは大事なポイント。HTML直書きだと更新が大変…。そこで使えるのが microCMS。管理画面から記事を投稿すれば、サイトに自動反映される！ステップ 1：microCMSでAPIを準備microCMSに無料登録「ブログ」サービスを作成フィールド（タイトル、本文、アイキャッチ画像など）を設定APIエンドポイントをコピーステップ 2：Next.jsでデータを取得シンプルなサンプルコード👇// pages/index.js export async function getStaticProps() { const res = await fetch( `https://YOUR_SERVICE.microcms.io/api/v1/blog`, { headers: { 'X-API-KEY': process.env.MICROCMS_API_KEY } } ) const data = await res.json() return { props: { blogs: data.contents } } } export default function Home({ blogs }) { return ( <div> <h1>ブログ一覧</h1> <ul> {blogs.map(blog => ( <li key={blog.id}>{blog.title}</li> ))} </ul> </div> ) } ステップ 3：完成イメージmicroCMSの管理画面から記事を投稿数分後にはサイトのトップページに新しい記事が表示されるHTML編集不要！まとめmicroCMSを使うと「更新作業」をオーナーさん自身でもできるWeb制作者は「設計・デザイン」に集中できるカフェやサロンのHPに「お知らせ」や「キャンペーン情報」を載せるのに相性バッチリ！

導入前回は「SSG（静的生成）」についてまとめました。今日はそれとよくセットで語られる SSR（Server Side Rendering） のお話。SSGとSSR、名前が似ているけど仕組みも用途も違うので、初心者のうちにざっくり理解しておくと便利だと思いました☆SSRってなに？ページを「アクセスがあった瞬間」にサーバーでレンダリングする仕組み最新のデータを表示したいときに便利リアルタイム性が大事なサービス（ニュースサイトやダッシュボード）でよく使われるつまり、SSG = 事前に作っておくSSR = リクエストごとに作るこんなイメージです。かんたんコード例// pages/index.js export async function getServerSideProps() { const res = await fetch("https://api.example.com/data") const data = await res.json() return { props: { data } } } export default function Home({ data }) { return ( <div> <h1>SSRのページ</h1> <p>APIから取得したデータ: {data.message}</p> </div> ) } この getServerSideProps がSSRのポイント。ページがリクエストされるたびに実行されて、APIから最新データを取ってきてくれます。まとめSSRは「アクセスごとにサーバーでHTMLをつくる」仕組み最新情報を見せたいときに使うSSGとSSRを使い分けられるのがNext.jsの強み✨

Next.jsで学ぶSSG（Static Site Generation）ってなに？Web制作を学び始めたばかりの私は、Next.jsに出会って「SSR」「SSG」「ISR」というカタカナ用語の嵐に圧倒されました。今回はその中から SSG（静的サイト生成） について、初心者目線でサクッとまとめてみます。SSGってどんなもの？SSGは「ページをあらかじめ作っておく」仕組みです。ユーザーがアクセスしたときには、もう出来上がったページをそのまま返すだけなので、めちゃくちゃ速い。イメージとしてはこんな感じ↓SSR → 注文を受けてからその場で料理を作るレストランSSG → すでに作り置きしてある料理をすぐに出す食堂要は「スピード重視」で、シンプルなサイトやブログに向いているやり方です。実際にやってみた感想Next.jsでSSGを使うときは、getStaticProps という機能を使います。export async function getStaticProps() { return { props: { message: "これはビルド時に生成されたページです！" }, } } これだけで「サイトをビルドした時点で固定されたページ」が完成。ページを開いた瞬間にサクッと表示されるのを見て、「おお、速い！」とちょっと感動しました。SSGが得意なところ・苦手なところ得意なところ表示が速い サーバーの負担が少ないSEOにも強い苦手なところ更新のたびに再ビルドが必要リアルタイムで変わるデータには向いていないまとめ初心者の私が感じたのは、ポートフォリオやブログ → SSGがピッタリリアルタイム性が必要なチャットやダッシュボード → 別の方法が良いということです。Next.jsはいろんな仕組みがありますが、まずはSSGから触ってみると「仕組みが分かりやすくて楽しい」と思いました。

はじめまして！ChunTechBlogです。今回は、私が実際に経験したお名前.comで取得ドメインをVercelに接続する手順 を、初心者目線で解説します。なぜDNS設定が必要かWeb制作を学び始めてすぐ、私は自分のサイトを公開したいと思いました。ドメインはお名前.comサイトはVercelでホスティングすることに。ところが、ドメインを取得しただけでは、ブラウザでドメインを入力しても「サイトが見つかりません」と出るだけ。ここで登場するのが DNS設定 です。DNSは簡単に言うと、「ドメインという名前」と「サーバーの住所」をつなぐ仕組み。この設定を正しく行うことで、世界中の誰でもあなたのサイトにアクセスできるようになります。私がつまずいた最初の壁、初めてDNS設定を見たとき、正直こう思いました。「Aレコード？CNAME？MX？…何それ？」まったく意味が分からず、設定画面を前に何度も迷子になりました。ですが、Vercelの管理画面に必要な情報がちゃんと表示されており、落ち着いて手順を追えば大丈夫だと気づきました。Vercelとお名前.comをつなぐ手順私が実際に行ったステップは以下の通りです。1. お名前.comドメイン管理画面にログイン　お名前.comログインし、対象のドメインを選択します。2. 「DNS関連機能の設定」→「DNSレコード設定」へ　管理画面の案内に従い、DNS設定画面に進みます。3. VercelでCNAMEを確認　Vercelの管理画面で、接続したいドメインの「DNSレコード情報」を確認します。4. お名前.comにCNAMEとして追加　　お名前.comのDNS設定画面で、CNAMEレコードとして追加します。　ポイントは **「wwwあり」と「wwwなし」両方」を設定することです。　wwwなしの場合はAレコードでVercelのIPを設定するか、Vercel側でリダイレクト設定します。5. 反映を待つ　DNSの反映には数十分～数時間かかることがあります。　　私も最初、「設定間違えた？」と焦りましたが、数十分後には無事接続完了しました。　　私が経験したトラブル＆対策　反映まで時間がかかる　→ TTL（反映時間）があるため、焦らず待つのがポイント　wwwあり/なしの設定漏れ　→ 両方設定しておかないと、アクセスできないURLが出てくる　CNAMEのコピー間違い　→ Vercelの管理画面の文字列を正確にコピーまとめ初めてのDNS設定は、言葉や画面が難しく見えて怖いですが、やってみると意外とシンプルです。ポイントは、・手順通りに入力する・反映には少し時間がかかる・wwwあり/なしの両方を設定するこの3つを押さえれば、初心者でもVercelとお名前.comをつなげることができます。

はじめまして！当ブログをご覧いただき、ありがとうございます。このブログは、副業でWeb制作を学んでいる初心者の私が、学んだことを整理し、記録し、共有するための場所です。ブログを開設した理由私は、独学でWeb制作やプログラミングを学び始めて数ヶ月の「開発初心者」です。毎日のように新しいことを覚えながらも、振り返ると「どうやって解決したっけ？」「前にやったけど忘れてる…」ということが多く、情報の整理や備忘録の必要性を強く感じていました。このブログでは、自分自身のためのアウトプットとして、また同じように学んでいる方の参考になればと思い、記事を書いていくことにしました。取り扱うジャンル・Web制作（HTML/CSS/JavaScript）・Next.jsやmicroCMSなどのモダンフレームワーク・実際に詰まったエラーやその解決方法・副業で得た知見や失敗談・勉強に役立つツールや便利なサービスの紹介どんな人に読んでもらいたいか？特に、次のような方に読んでもらえるとうれしいです。・これからWeb制作を始めたいと思っている方・独学で学習している初学者・エラーでつまずいて「ググっても出てこない」と感じている方・副業でWeb系スキルを伸ばしたい方さいごにこのブログが、誰かの「ちょっとした助け」になれば嬉しいです。マイペースな更新になりますが、どうぞよろしくお願いします！