はじめに
どうも、Caruです！
shadcn/uiで作られたアプリって、どれも同じ見た目になりがちですよね。コピペですぐ使える分デフォルトのまま進めてしまい、お馴染みの配色にLucideのアイコンで、「あ、これshadcnかな(笑)」と感じる人は多いとおもいます。
そこで公式のテーマ作成ツール、createが良さそうなので紹介したいと思います。
ブラウザ上でテーマを細かく組み立てて、新規・既存どちらのプロジェクトにも適用できます。今回はこのcreateの紹介と、自分のおすすめ設定をまとめます。
createで何ができるか
左のパネルで項目を選ぶと、右のプレビューに即座に反映されます。カスタマイズできるのは次の項目です。
- Style: UI全体のスタイル
- Base Color / Theme Color: ベースのグレーとprimary color
- Chart Colors: チャートの配色
- Fonts: 見出しと本文のフォント
- Icons: アイコンセット
- Radius: 角丸の強さ
- Menu / Menu Accent: メニューの見た目とアクセント
特にStyleなんかは用途にあったBase UIのテーマが選べるので、ダッシュボード用途やLPの用途などで使い分けられるのが良いですね。
テーマの適用はGet Codeから
テーマができたら、左下のGet Codeボタンを押します。
新規プロジェクトならそのまま作成コマンドが表示されます。対応フレームワークはNext.js、Vite、TanStack Start、Laravel、React Router、Astroなどで、だいたいの環境はカバーされています。
既存のプロジェクトにも適用できます。Apply Presetでプリセットのどの部分を適用するか選べて、次の3択です。
- Full preset: コンポーネント・テーマ・フォントを含む全部
- Theme only: 色・角丸・影などのテーマトークンだけ。コンポーネントはそのまま
- Fonts only: 見出しと本文のフォントだけ。コンポーネントはそのまま
動いているプロジェクトを壊したくないときはTheme onlyだけ当てる、という使い方ができるのが便利です。
自分のおすすめ設定
私のおすすめはこの組み合わせです。
| 項目 | 設定 |
|---|---|
| Style | Nova |
| Base Color | Neutral |
| Theme Color | Emerald |
| Chart Colors | Neutral |
| Fonts | Figtree |
| Icons | Phosphor Icons |
| Radius | Default |
| Menu | Default / Solid (好みで) |
| Menu Accent | Subtle |
同じものをプリセットとして公開しているので、リンクからそのまま試せます。
ポイントはアイコン
一番効くのはIconsだと思っています。LucideやMUI Iconsはバイブコーディング製のアプリでよく見る組み合わせなので、そのままだと「AIに作らせた画面」感が出やすいです。Phosphor Iconsに変えるだけで、この見慣れた感がかなり薄れます。
フォントの注意点
Figtreeは和文グリフを持っていないので、日本語サイトではそのままだと和文だけフォールバックで表示されます。和文フォントは別途手動で当てるのが良さそうです(ここは自分も模索中です)。
色は控えめに
Base ColorとChart ColorsはNeutralに寄せて、Theme ColorのEmeraldだけ落ち着いた色で色味を出しています。primary colorだけ主張させると、デフォルトのモノクロ感から離れつつ、うるさくならずにまとまり、ボタン等の目立たせたい場所が際立ちます。
まとめ
shadcn/uiの「どれも同じ見た目」問題は、createでフォント・色・アイコン・角丸を一式カスタマイズすれば、かなり解消できます。適用もGet Codeを押すだけで、新規・既存プロジェクトのどちらにも入れられます。
みなさまのお好みのテーマに好みに調整してみて、ぜひシェアしてみてはいかがでしょうか？
参考になったよという方は、Xのフォローやシェアをもらえると嬉しいです！
はじめに
どうも、Caruです！
shadcn/uiで作られたアプリって、どれも同じ見た目になりがちですよね。コピペですぐ使える分デフォルトのまま進めてしまい、お馴染みの配色にLucideのアイコンで、「あ、これshadcnかな(笑)」と感じる人は多いとおもいます。
そこで公式のテーマ作成ツール、createが良さそうなので紹介したいと思います。
ブラウザ上でテーマを細かく組み立てて、新規・既存どちらのプロジェクトにも適用できます。今回はこのcreateの紹介と、自分のおすすめ設定をまとめます。
createで何ができるか
左のパネルで項目を選ぶと、右のプレビューに即座に反映されます。カスタマイズできるのは次の項目です。
- Style: UI全体のスタイル
- Base Color / Theme Color: ベースのグレーとprimary color
- Chart Colors: チャートの配色
- Fonts: 見出しと本文のフォント
- Icons: アイコンセット
- Radius: 角丸の強さ
- Menu / Menu Accent: メニューの見た目とアクセント
特にStyleなんかは用途にあったBase UIのテーマが選べるので、ダッシュボード用途やLPの用途などで使い分けられるのが良いですね。
テーマの適用はGet Codeから
テーマができたら、左下のGet Codeボタンを押します。
新規プロジェクトならそのまま作成コマンドが表示されます。対応フレームワークはNext.js、Vite、TanStack Start、Laravel、React Router、Astroなどで、だいたいの環境はカバーされています。
既存のプロジェクトにも適用できます。Apply Presetでプリセットのどの部分を適用するか選べて、次の3択です。
- Full preset: コンポーネント・テーマ・フォントを含む全部
- Theme only: 色・角丸・影などのテーマトークンだけ。コンポーネントはそのまま
- Fonts only: 見出しと本文のフォントだけ。コンポーネントはそのまま
動いているプロジェクトを壊したくないときはTheme onlyだけ当てる、という使い方ができるのが便利です。
自分のおすすめ設定
私のおすすめはこの組み合わせです。
| 項目 | 設定 |
|---|---|
| Style | Nova |
| Base Color | Neutral |
| Theme Color | Emerald |
| Chart Colors | Neutral |
| Fonts | Figtree |
| Icons | Phosphor Icons |
| Radius | Default |
| Menu | Default / Solid (好みで) |
| Menu Accent | Subtle |
同じものをプリセットとして公開しているので、リンクからそのまま試せます。
ポイントはアイコン
一番効くのはIconsだと思っています。LucideやMUI Iconsはバイブコーディング製のアプリでよく見る組み合わせなので、そのままだと「AIに作らせた画面」感が出やすいです。Phosphor Iconsに変えるだけで、この見慣れた感がかなり薄れます。
フォントの注意点
Figtreeは和文グリフを持っていないので、日本語サイトではそのままだと和文だけフォールバックで表示されます。和文フォントは別途手動で当てるのが良さそうです(ここは自分も模索中です)。
色は控えめに
Base ColorとChart ColorsはNeutralに寄せて、Theme ColorのEmeraldだけ落ち着いた色で色味を出しています。primary colorだけ主張させると、デフォルトのモノクロ感から離れつつ、うるさくならずにまとまり、ボタン等の目立たせたい場所が際立ちます。
まとめ
shadcn/uiの「どれも同じ見た目」問題は、createでフォント・色・アイコン・角丸を一式カスタマイズすれば、かなり解消できます。適用もGet Codeを押すだけで、新規・既存プロジェクトのどちらにも入れられます。
みなさまのお好みのテーマに好みに調整してみて、ぜひシェアしてみてはいかがでしょうか？
参考になったよという方は、Xのフォローやシェアをもらえると嬉しいです！