「機能は動いたけど、見た目がいまいち。。。」
「でも、CSSを勉強してオシャレにするセンスも時間もない。。。」
個人開発者の多くが抱える悩みが「デザイン」です。
しかし、安心してください。現代の開発では、デザインの才能はあまり必要ありません。「良い道具」を知っているかどうかだけで決まります。
今回は、前回作ったNext.jsアプリを、一瞬でプロっぽい見た目に変える魔法の道具「Tailwind CSS」と「shadcn/ui」について解説します。
1. そもそも「CSS」を書くのは大変
通常、Webサイトのデザインを作るには「CSS（スタイルシート）」という言語を書く必要があります。
しかし、これは初心者にとってかなり面倒な作業です。
- ファイルを行ったり来たりしないといけない（HTML ⇄ CSS）。
- クラス名（
.button-primary-activeなど）を考えるのが大変。 - スマホ対応（レスポンシブ）のために計算が必要。
これを解決するために生まれたのが、今回紹介するツールです。
本来なら、実績のあるWEBデザイナーへの依頼が一番安心ですが、個人開発の初期導入フェーズでは予算の捻出に苦労する方も多いと思います。
WEBデザイナーほどオシャレになるわけではありませんが、シンプルで統一感のある安っぽくないデザインならこれらのツールで十分に実現可能です。
2. 魔法のシール：Tailwind CSS とは？
Tailwind CSS（テイルウィンド・シーエスエス）は、一言で言うと「あらかじめ用意されたデザイン用シール」です。
従来のCSSでは「赤いボタン」を作るために、別ファイルに色やサイズコードを書いていました。
しかしTailwindでは、HTMLの中に直接魔法の言葉（クラス名）を書くだけでデザインが反映されます。
📝 具体例：赤いボタンを作りたい時
- 今まで：
style.cssを作って、background-color: red; color: white; padding: 10px;...と書く。 - Tailwind：
bg-red-500 text-white p-2と書くだけ。
「背景を赤く（bg-red-500）」「文字を白く（text-white）」「余白を入れる（p-2）」というシールをペタペタ貼っていく感覚で、爆速でデザインが作れます。
前回の記事で、Next.jsのインストールの際に「Tailwind CSSを使いますか？ 👉 Yes」と答えましたよね？
※ インストールバージョンによって異なります
つまり、あなたの環境ではすでにこの魔法が使える状態になっています。
3. 高級家具セット：shadcn/ui とは？
Tailwind CSSのおかげで色は簡単に塗れるようになりました。
でも、「かっこいいボタン」や「使いやすい入力フォーム」の形そのものを作るのは、やはりセンスが必要です。
そこで登場するのが、現在エンジニア界隈で絶大な人気を誇る「shadcn/ui（シャドシーエヌ・ユーアイ）」です。
これは「ライブラリ」ではない
ここが少し特殊なのですが、shadcn/uiは一般的なインストール型の部品集（ライブラリ）ではありません。
「完成されたコードを自分のプロジェクトにコピー＆ペーストして使う」というスタイルのツールです。
例えるなら、家具屋で既製品の椅子を買うのではなく、「プロが作った椅子の設計図と材料キット」をもらってくるようなものです。
自分の家（プロジェクト）の中で組み立てるので、後から「角をなめらからにしたい（カスタマイズしたい）」と思った時に、自由自在に改造できるのが最大の特徴です。
4. なぜこのセットが「最強」なのか？
Next.js、TypeScript、Tailwind CSS、そして shadcn/ui。
この組み合わせは「Vercel Ship」などのカンファレンスでも頻繁に登場する、いわば現代のWeb開発の「鉄板構成」です。
| ツール名 | 役割（例え） | メリット |
|---|---|---|
| Tailwind CSS | デザイン用シール | CSSファイルを書かなくていい。 スマホ対応が楽。 |
| shadcn/ui | 高級組み立て家具 | コピーして使うので所有権が自分にある。 デザインがシンプルで美しい。 |
| Next.js + TS | 家と設計図 | これらのツールと相性抜群。 設定なしですぐ使える。 |
他の選択肢（メジャーなUIライブラリ）
もちろん、他にも有名なデザインツールはあります。
- MUI (Material UI)： Googleっぽいデザイン。歴史が古く機能は多いが、データサイズが重くなりがち。
- Chakra UI： 使いやすいが、少しカスタマイズに癖がある。
- Bootstrap： 一昔前の定番。「あ、Bootstrapで作ったな」とバレやすいデザイン。
これらと比較しても、現在は「軽量・自由・今っぽい」という点で shadcn/ui が頭一つ抜けています。
5. 実践！導入の流れを確認しよう
それでは、前回の my-first-app に shadcn/ui を入れて、「いい感じのボタン」を表示させてみましょう。
いきなりコマンドを打つ前に、これからやる作業の全体像を把握してください。
🗺️ これからやる作業マップ
- 土台の確認： デザインシール（Tailwind CSS）が入っているか確認します。
- カタログの取り寄せ： プロジェクトに「shadcn/ui」を使えるように初期設定します。
- 家具の注文： カタログから「ボタン」という部品を選んでダウンロードします。
- 配置： 画面（page.tsx）にボタンを置いて表示させます。
STEP 0: Tailwind CSSの準備確認
shadcn/uiを使うには、土台としてTailwind CSSが必須です。
前回のNext.jsインストール時に「Tailwind CSS」を Yes にしていれば入っているはずですが、念のため確認しましょう。
確認方法：
VSCodeでプロジェクトを開き、src/app/globals.css というファイルを開きます。
1,2行目あたりに以下のコードが入っていれば、Tailwind CSSを使える状態ですので、そのままSTEP1に進んでください。
@import "tailwindcss";⚠️ 上記の記述が無い場合
もし記述が見当たらない場合は、後から追加することもできますが、複数ファイルを修正する必要があります。
復習がてら、前回の記事を見てプロジェクトを作り直すのが確実です。
（別名で新規作成してもいいし、フォルダごと削除して、もう一度my-first-appを作成してもOK）
STEP 1: shadcn/ui の初期設定（カタログの取り寄せ）
次は、shadcn/uiを使える状態にするための「初期化コマンド」を実行します。
これは、「家具を置くためのルール決め」のような作業です。
ターミナルに以下を入力してEnterを押してください。
npx shadcn@latest init実行すると、いくつか質問されます。デザインの好みを聞かれているだけなので、迷ったら全て「Enter（デフォルト）」で大丈夫です。
| 質問内容（英語） | 意味と推奨回答 |
|---|---|
| Which style would you like to use? | New York デザインの雰囲気です。「New York」は洗練された細い線が特徴で、今の主流です。 |
| Which color would you like to use as base color? | Zinc (またはお好みで) メインとなるテーマカラーです。後で詳しく解説します。 |
| Do you want to use CSS variables...? | Yes 色の調整が楽になる設定です。必ずYesにしましょう。 |
🎨 カラー設定（Base Color）の選び方
「Zinc, Slate, Stone...」といきなり言われてもイメージが湧かないと思います。 これは、「白・黒・グレーの色味」をどうするか？という質問です。
導入後に app/globals.css の中の数値を書き換えることで、自分の好きなカラーにできるのであまり深く考えずに選択してOKです。
Success! と出れば、カタログの準備は完了です。
STEP 2: ボタン部品の追加（家具の注文）
shadcn/uiは「全部入り」ではなく、「欲しい家具だけ個別にダウンロードする」方式です。
今回は「ボタン」が欲しいので、以下のコマンドで注文します。
npx shadcn@latest add buttonこれを実行すると、自動的に components/ui/button.tsx というファイルが生成されます。
これが「プロが作ったボタンの設計図」です。中身を見てみると、Tailwind CSSでびっしりとデザインが書かれているのが分かります。
STEP 3: 画面に表示する（配置）
最後に、前回記事で作成した（src/app/contract/page.tsx）を以下のように変更してみましょう。
// src/app/contact/page.tsx
import { Button } from "@/components/ui/button"
export default function Contact() {
return (
<main className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
{/* フォーム全体を囲むカード */}
<div className="w-full max-w-md bg-white p-8 rounded-xl shadow-lg border border-gray-200">
<h1 className="text-2xl font-bold text-gray-800 mb-6 text-center">
お問い合わせ
</h1>
<div className="space-y-4">
{/* お名前 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">お名前</label>
<input
type="text"
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-400 outline-none"
placeholder="山田 太郎"
/>
</div>
{/* メールアドレス */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label>
<input
type="email"
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-400 outline-none"
placeholder="example@mail.com"
/>
</div>
{/* 内容 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">お問い合わせ内容</label>
<textarea
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-400 outline-none h-32"
placeholder="ここに内容を入力してください"
></textarea>
</div>
{/* 送信ボタン：ここだけshadcn/uiのButtonコンポーネントを使用 */}
<Button className="w-full font-bold py-6">
送信する
</Button>
</div>
</div>
</main>
);
}保存してブラウザ（http://localhost:3000）を見てください。
マウスを乗せると色が変わり、クリックすると波紋が広がるボタンが表示されていれば成功です！
まとめ
今回は、デザインの強力な味方を紹介しました。
- Tailwind CSS： 色や形を自由に調整できる魔法のシール。
- shadcn/ui： コピペで使える、使いやすい家具セット。
これらを使えば、デザインに悩む時間をだいぶ削れます。
あるものを組み合わせて、パズル感覚で画面を作っていきましょう。
さて、これで「アプリを作る準備」は整いました。
次回は、今回書いたコードが消えてしまわないように、「Git（ギット）」と「GitHub（ギットハブ）」を使って、インターネット上の倉庫に保存する方法を解説します。