21st.devの部品をClaude Codeで素のHTMLに移す方法｜人気順の読み方と、移植で詰まった5つ【2026年】

21st.devの部品をClaude Codeで素のHTMLに移すとき、僕の会社に必要だったのは、コードを買うことではありませんでした。人気順に並べて「何が見られ、何が保存されているか」を読むことです。借りたのは構図と動きの設計で、コードは静的なHTMLとCSSで自前に書き直しました。

2026年9月16日、僕の会社ではClaude Codeに21st.devを読ませて分解しました。38のタグと全体の上位を取得し、317の型に整理しています。そのうち20本を、Reactに頼らない素のHTMLに移しました。

この記事では、人気順の読み方、素のHTMLへ移す手順、移植で詰まった5つの点、MCPと料金の今を書きます。「21st.devって、Reactを使わないサイトでも役に立つの？」と迷っている方に向けて書きました。

21st.devで僕が借りたのは、コードより「人気の読み方」だった

21st.devで一番役に立ったのは、部品のコードではなく、人気を3つの数で読み分けられることでした。使われた数・見られた数・保存された数です。

21st.devは、React と Tailwind CSS の部品を作り手が持ち寄る共同のカタログです。公式の案内では、部品・テンプレート・部品集が1万2,000件以上あります。

使い方の柱は2本です。探して取り込む「Find」と、文章から画面を作る「Generate」があります。

もう1つ、AIのコーディング道具から同じカタログを使う入口があります。それが Magic MCP（現 21st MCP）です。名前が変わっているので、古い記事を読むときは注意が要ります。詳しくは次の章で書きます。

僕の会社の制作物は、静的なHTMLとCSSと素のJavaScriptが中心です。ReactやTailwindは、そのままでは入れません。だから部品をそのまま取り込む使い方は、最初から選びませんでした。

その代わりに見たのが人気の偏りです。一覧の公開情報を人気順に並べ替えて読むと、「人が実際に使う部品」と「人が見に来る部品」がはっきり分かれていました。この差が、提案するデザインの判断材料になります。

Magic MCP（現 21st MCP）の始め方と料金｜2026年11月の公式で確かめた

21st MCPは、旧称 Magic MCP と同じ道具です。2026年11月4日に公式の案内を読み直したところ、名前が変わっただけで中身は同じと書かれていました。

公式によると、旧パッケージ名の @21st-dev/magic は別名として今も動きます。一方で、旧Magicの管理画面で作ったAPIキーはリセット済みです。

昔の手順のままでは動かないので、公式のMCPのページでキーを新しく発行し直します。

Claude Code につなぐときの公式の手順は、次の1行です。--write を付けると、設定を表示するだけでなく書き込みまで行います。

npx @21st-dev/cli@latest init --client claude

公式が挙げている主な道具は5つです。カタログの検索とロゴの検索は無料で、コードの取得と生成は有料の枠に入ります。

料金は、2026年11月時点の公式料金ページで次のとおりです。金額はドル建てで、円に換算していません。

Builder + AI は、今の公式では四半期払いの額（20・40・80ドル）も載っています。2026年9月に僕の会社で残した記録には年払いの額だけがあったので、ここは今の公式に合わせました。

僕なら、まず無料の範囲で検索だけ使い、コード本体をまとめて読みたくなった時点で Builder を1か月だけ契約します。

MCPそのものの仕組みはMCPとは？MCPサーバーの仕組みと実際につないだ接続先に書きました。

人気順で読むと、317の型は3つの文法に集まった

人気の部品を317の型に整理すると、見た目の文法はほぼ3つに集まりました。「黒地に1本の光」「スクロールを再生ヘッドにする」「触ると縁が光る」です。

2026年9月16日の分解では、38のタグごとに上位を取り、全体の上位と合わせて24の群に分けました。型の数は317です。

移植の難しさで分けると、easy 239・medium 67・hard 11 でした。hard は WebGL や3Dが本質のものです。

カテゴリの件数も、そのとき記録しています。ヒーロー（ページの最初の大きな見せ場）が1,152件、ボタンが2,043件、カードが1,780件でした。件数の多さと人気の高さは、必ずしも一致しません。

人気の数で並べ替えると、偏りがはっきり出ました。使われた数の上位は、ボタンやカード、入力欄といった素体の部品です。見られた数と保存された数の上位は、動く背景や3Dで展開するヒーローでした。

トップページの注目枠も同じ傾向でした。スクロールで画面いっぱいに広がるメディアのヒーローが閲覧9.6k、スポットライトのカードが7.8kです。人が見に来るのは、動きのある見せ場だと読んでいます。

3つの数で何が上位に来たかと、僕の会社での使い道を並べると、次の表になります。

僕は、保存された数を「本当に使いたい」の信号として読んでいます。3つの数を混ぜずに分けて判断するのが、僕の会社の読み方です。

Claude Codeで素のHTMLへ移す手順｜20本を3つの画面幅で検品した

素のHTMLへ移す手順は、「動きを3系統に分け、CSSの変数で書き直す」が基本でした。依存するライブラリは0のまま、20本を移しています。

動きの中身を分けると、ほぼ3系統に収まります。スクロールの進み具合に合わせて形を変えるもの、ずっと流れ続けるもの、カーソルに追いかけるものです。この3つは、CSSの変数とアニメーション、画面に入ったかの検知で足ります。

手順は4つに分けられます。記録にあるレシピの作り方から、僕が4つに整理しました。

1. 人気順の上位から、構図と動きを言葉で書き出す（コードは写さない）
2. 動きを3系統のどれかに当てはめ、CSSの変数1つで表せる形にする
3. 素のHTML1枚に書き、スマホ幅とモーションを減らす設定の両方を入れる
4. 複数の画面幅とスクロールの位置で、実際に描いて確かめる

縁だけが光るカードは、2の考え方がよく分かる例です。カーソルの位置をCSSの変数で渡し、縁の1ピクセルだけを光らせます。下は僕の会社のレシピからの抜粋です。

.card::after{padding:1px;background:radial-gradient(200px circle at var(--mx) var(--my),rgb(var(--glow)/.9),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
@media (hover:none){.card{--on:.6}}

最後の1行は、タッチの端末では光を中央に固定する指定です。スマホにはカーソルがないので、動かない光を最初から見せておきます。

スクロールで広がるヒーローも、進み具合を0から1の数1つにまとめました。数をCSSに渡すだけで、幅も角の丸みも一緒に変わります。こちらも自社のレシピからの抜粋です。

const tr=document.getElementById('track'),root=document.documentElement;let tick=0;
const upd=()=>{tick=0;const r=tr.getBoundingClientRect(),p=Math.min(1,Math.max(0,-r.top/(r.height-innerHeight)));root.style.setProperty('--p',p.toFixed(4))};
if(!matchMedia('(prefers-reduced-motion:reduce)').matches){addEventListener('scroll',()=>tick||(tick=requestAnimationFrame(upd)),{passive:true});upd()}

検品は、画面のない Chrome で実際に描いて行いました。390px・375px・1280px の3つの幅で、スクロールの位置を変えた105枚を見ています。JavaScriptの例外は0件、横スクロールも0件でした。

画面の幅を変えて確かめるやり方は、LPの検品でも使っています。

8つの画面サイズで確かめた例はCSSが反映されない原因とキャッシュの直し方に書きました。

21st.devから素のHTMLへの移植で詰まった5つ

移植で詰まったのは、コード・名前・ライセンス・文字・スマホの5つでした。どれも、分解とレシピの記録に残っている点です。

1. コード本体は無料では取れない

一覧の公開情報には、部品のコード本体が含まれていませんでした。コードは有料の枠にあり、無料ではコピーが1日2回までです。だから動きはデモの見た目から読み、コードは自前で書きました。

2. Magic MCP と Magic UI は別物

旧称の Magic MCP と、Magic UI という部品集は関係がありません。Magic UI は別の作者が公開している別の部品集です。名前が似ているので、設定の手順を読むときに取り違えやすい点でした。

3. ライセンスが書かれていない部品が約45%

取得した部品のライセンスを数えると、MIT系が約55%、未記載が約45%でした。MPL-2.0 や Apache-2.0 も少しあります。未記載の部品は、コードも素材も写さないと決めました。

借りるのは、構図・動きの設計・技法の名前だけです。表示の義務があるライセンスの部品も、静的なLPには入れていません。デモに使われている写真や3Dの素材も、当然使いません。

4. 英語前提の文字の演出は、日本語に合わない

人気の型には、巨大なセリフの英字や、1文字ずつ打つ演出が多くあります。これを日本語にそのまま当てると読みにくくなります。日本語は明朝の大きさ・字間・文節での改行を別に設計しました。

1文字ずつ打つ演出は、文節ごとに出す形に置き換えています。海外の会社ロゴを並べる帯も、業種名・地域名・数字の帯に替えました。構図だけ借りて、中身は日本の中小企業の言葉にしています。

5. スクロールを乗っ取る型は、iPhoneで動きがぶつかる

元の型には、ホイールやタッチの操作を止めて自前でスクロールさせるものがあります。iPhoneの慣性のスクロールとぶつかるので、画面に貼り付ける方式に変えました。戻るスクロールもできます。

スマホでは、ほかにも注意が要りました。ぼかしの効果は1画面3枚までにしています。画面の高さは、アドレスバーでずれない単位に変えました。縁を光らせる指定は、ブラウザごとの書き方を2つ並べています。

21st.devの代わりにコードを読む先と、借りない線引き

コード本体を読みたいときは、21st.devより先に、オープンソースで公開している部品集を見ます。記録にあるのは Aceternity UI・Magic UI・React Bits の3つです。

React Bits は MIT ライセンスで、GitHub にコードが公開されています。背景の部品だけで56種類ありました。ただし、どれを読むときも、写すのではなく動きの仕組みを読むだけにしています。

借りるものと借りないものは、分解の記録に表で残しています。主なものを4行に絞ると、次の表になります。

AIで量産されたように見える特徴も、借りない側に入れています。紫と青のぼかし、虹色のグラデーション、英語の告知ピル、3段階の料金表などです。人気の型でも、そのまま使うと既製品に見えます。

色はデモの配色をそのまま使わず、商材の色1色に置き換えます。重機なら黄色、車ならレッドといった具合です。

ホームページを作る工程の全体は、ホームページの作り方3通りの比較に書きました。

21st.devでまだやっていないこと｜MCPは未接続、Builderは未契約

正直に書くと、21st MCP はまだつないでいません。Builder も契約していないので、コード本体をまとめて読んだこともありません。

ほかにも、記録上まだのものがあります。生成した下書きから作り直し用の仕様書を持ち帰る機能は、試していません。スマホの実機での見え方、動画のプレビューも未確認です。コンパイル済みのデモは7本だけ取得しました。

案件で型を借りた実績も、まだ記録がありません。だからこの記事では、「受注に効いた」とは書けません。分かっているのは、構図と動きなら素のHTMLで再現できたところまでです。

次の手も記録に残しています。Builder を1か月だけ契約し、相性の良い型73個から順にコード本体を読む案です。MCPは検索とロゴ検索が無料なので、つなぐだけでも使い道はあります。

まとめ

• 21st.devで役に立つのは、部品のコードより、人気を「使われた・見られた・保存された」で読み分けられる点
• 2026年9月16日の分解で317の型に整理し、20本を依存0の素のHTMLへ移した（3つの画面幅・105枚で例外0）
• Magic MCP は 21st MCP に改名済み。旧キーはリセットされ、Free のコードのコピーは1日2回まで
• 詰まったのはコード・名前・ライセンス（未記載約45%）・日本語の文字・iPhoneのスクロールの5つ
• 僕なら最初は無料の検索だけで人気順を読み、保存数の多い型を1つ素のHTMLで書き直すところから始めます