shadcn/uiの「どれも同じ見た目」はcreateで解決できそう

はじめに

どうも、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だけ当てる、という使い方ができるのが便利です。

自分のおすすめ設定

私のおすすめはこの組み合わせです。

同じものをプリセットとして公開しているので、リンクからそのまま試せます。

ポイントはアイコン

一番効くのはIconsだと思っています。LucideやMUI Iconsはバイブコーディング製のアプリでよく見る組み合わせなので、そのままだと「AIに作らせた画面」感が出やすいです。Phosphor Iconsに変えるだけで、この見慣れた感がかなり薄れます。

フォントの注意点

Figtreeは和文グリフを持っていないので、日本語サイトではそのままだと和文だけフォールバックで表示されます。和文フォントは別途手動で当てるのが良さそうです(ここは自分も模索中です)。

色は控えめに

Base ColorとChart ColorsはNeutralに寄せて、Theme ColorのEmeraldだけ落ち着いた色で色味を出しています。primary colorだけ主張させると、デフォルトのモノクロ感から離れつつ、うるさくならずにまとまり、ボタン等の目立たせたい場所が際立ちます。

まとめ

shadcn/uiの「どれも同じ見た目」問題は、createでフォント・色・アイコン・角丸を一式カスタマイズすれば、かなり解消できます。適用もGet Codeを押すだけで、新規・既存プロジェクトのどちらにも入れられます。

みなさまのお好みのテーマに好みに調整してみて、ぜひシェアしてみてはいかがでしょうか？

参考になったよという方は、Xのフォローやシェアをもらえると嬉しいです！