【2026年】オリジンキット（Originkit）使い方完全ガイド！無料アニメーションコンポーネント50選をAIで導入

Q: 商用サイトに使えますか？

はい、商用利用可能です。ただし、最新のライセンス条項は [Originkitのサイト](https://www.originkit.dev/) でご確認ください。

Q: MCP接続がうまくいきません

APIキーが正しいか、MCP設定のURLとヘッダー形式を確認してください。Bearerトークンとして `cmp_live_...` を設定します。

「Webサイトに動きのある・かっこいいUIを最短で入れたい」と思ったことはありませんか？

Originkit（オリジンキット）は、無料で使えるアニメーションコンポーネントライブラリです。50種類の動くUIパーツを、コピー・Framer・MCPの3通りで導入できます。

本記事では初心者向けに、Webサイトからのコピー手順から、Cursor・Claude Code等のAIツールへのMCP接続までを実際の画面付きで解説します。

この記事でわかること

Originkitとは何か、なぜ無料で使えるのか
3つの導入方法（Webコピー / Framer / MCP）の違い
MCP経由でCursor・Claude Code・Windsurfから直接コンポーネントを呼び出す手順
実際に使えるコンポーネントの例（テキスト・画像・ボタン等）
料金・制限（1日10回のフェッチ上限など）

Webサイトに「動きのある・かっこいいUI」を最短で入れたい人は、この記事を読めば10分で導入できます。

Originkit（オリジンキット）とは？

Originkitは、無料のアニメーションコンポーネントライブラリ です。50種類の動くUIパーツ（テキストアニメーション、画像ギャラリー、ボタンエフェクト、背景エフェクト等）が揃っていて、コードをコピーするだけで自分のサイトに組み込めます。

結論：コーディング不要でプロ級の動きが入る

普通なら「スクロールするとテキストが煙のように消える」「画像がピクセル単位でバラバラに分解される」这样的動きを作るには、Three.jsやGSAPの知識が必要です。Originkitならコピペだけ で同じことができます。

主な特徴：

完全無料（クレジットカード不要）
50コンポーネント を6カテゴリで提供
3つの導入方法：Webでコピー / Framerにインポート / MCPでAIツールから呼び出し
React・Next.js・Vite・Framer に対応（CSS / Tailwind / CSS Modules 選択可）

3つの使い方を比較

まず、自分に合う方法を選びます。

方法	難易度	向いている人	特徴
Webサイトでコピー	★☆☆（簡単）	コードを貼るだけでいい人	ブラウザでコンポーネントを選び、コードをコピーして貼るだけ。APIキー不要
Framerにインポート	★☆☆（簡単）	Framerでサイトを作っている人	デザインツールFramerにそのままコンポーネントを取り込める
MCP接続（AIツール）	★★☆（設定必要）	Cursor・Claude Code等のAIコーディングを使う人	AIに「Originkitの〇〇を入れて」と頼むだけでコード生成。1日10回上限

初心者におすすめの順番：

まず Webサイトでコピー（一番簡単）
慣れたら MCP接続（作業効率が劇的に上がる）

方法1：Webサイトからコピー（初心者向け）

最もシンプルな方法です。プログラミング知識は不要です。

手順

Originkitのサイトを開く
トップページのギャラリーから使いたいコンポーネントをクリック（例：「Smoky Text」「Black Hole」「Coverflow Gallery」）
コンポーネント詳細ページで 「Copy Code」 ボタンを押す
自分のプロジェクトの該当ファイルに貼り付ける
スタイル（CSS / Tailwind / CSS Modules）を選んでいる場合は、合わせて貼る

メリット：APIキー不要、すぐ使える デメリット：コンポーネントごとに手動で貼る必要がある

方法2：Framerにインポート

Framer（デザインからサイト公開までできるノーコードツール）を使っている場合は、Originkitのコンポーネントをそのままインポートできます。詳細はOriginkitの「Integrations」ページを参照してください。

方法3：MCP接続でAIツールから呼び出す（効率重視）

これがOriginkitの本命 です。Cursor、Claude Code、Windsurf、ClineなどのAIコーディングツールから、自然言語でコンポーネントを呼び出せます。

対応ツール

Cursor
Claude Code
Windsurf
Cline
その他MCP対応ツール

ステップ1：APIキーを取得する

Originkit でアカウント作成またはログイン
Settings > API Integration を開く
APIキーを発行（形式：cmp_live_...）
このキーは 1日10回までコンポーネントを取得可能（深夜0時UTCにリセット）

ステップ2：MCPサーバーを接続する

各AIツールのMCP設定ファイルに、以下のようにOriginkitのMCPサーバーを追加します：

{
  "mcpServers": {
    "originkit": {
      "url": "https://mcp.originkit.dev/vellumai",
      "headers": {
        "Authorization": "Bearer cmp_live_あなたのキー"
      }
    }
  }
}

Cursorの場合：~/.cursor/mcp.json に上記を追記 Claude Codeの場合：claude mcp add コマンドまたは設定ファイルに追加

ステップ3：AIに指示する

MCP接続後、AIツールにこう頼びます：

「OriginkitからBlack HoleコンポーネントをReact + Tailwindで取得して、トップページに組み込んで」

AIが自動でコードを取得し、プロジェクトに実装します。

メリット：

コンポーネントを探す手間が不要
AIが自分のプロジェクトに最適化して組み込む
コピペミスがない

デメリット：

初期設定（MCP接続）が必要
1日10回の取得上限がある

実際のコンポーネント例

Originkitには50種類あります。一部を紹介します。

テキストアニメーション

Smoky Text：文字が煙のように消える
Text Morph：一つの単語が別の単語に変形する
Scramble Text：文字がランダムに入れ替わって意味が整う
Type Writer：タイプするように文字が現れる

画像ギャラリー

Coverflow Gallery：iTunesのカバーフローのような3Dギャラリー
Spiral Images：画像が螺旋状に配置される
Infinity Canvas：無限にスクロールするキャンバス
Swipe Stack：カードをスワイプするスタック

ボタン・エフェクト

Emoji Burst：ボタンを押すと絵文字が弾ける
Link Preview：リンクにホバーするとプレビューが出る
Juice Effect：クリック時に画面が揺れる

背景アニメーション

Snow Fall：雪が降る
Blinking Squares：点滅するマス目
Particle Sphere：粒子が球体を形成する

これらすべてが無料で使えます。

料金と制限

Originkitは 完全無料 ですが、以下の制限があります：

項目	内容
基本利用料	無料（クレジットカード不要）
コンポーネント数	50種類（6カテゴリ）
カタログ閲覧	無制限・APIキー不要
コード取得（フェッチ）	1日10回まで（APIキー必要）
リセット時刻	毎日深夜0時（UTC）
対応スタック	React / Next.js / Vite / Framer
スタイリング	CSS / Tailwind / CSS Modules

1日10回の制限について：コンポーネントを「コードとして取得」する回数が1日10回までです。Webサイトでのコピー（方法1）はこの制限にカウントされません。MCP経由でAIに取得させる場合のみ上限があります。

よくある質問（FAQ）

Q1. 本当に無料ですか？

はい、完全無料です。クレジットカード登録も不要です。APIキーも無料で発行できます。

Q2. 商用サイトに使えますか？

はい、商用利用可能です。ただし、最新のライセンス条項は Originkitのサイトでご確認ください。

Q3. React以外でも使えますか？

公式対応は React / Next.js / Vite / Framer です。Vanilla JSでの利用は、生成されたコードを参考に自分で実装する必要があります。

Q4. MCP接続がうまくいきません

APIキーが正しいか、MCP設定のURLとヘッダー形式を確認してください。Bearerトークンとして cmp_live_... を設定します。

Q5. 1日10回の制限を超えました

翌日（UTC 0時）にリセットされます。それまで待つか、Webサイトからのコピー（方法1）を使ってください。

Q6. コンポーネントのカスタマイズはできますか？

はい、取得したコードは通常のReactコンポーネントなので、色・サイズ・速度などを自由に編集できます。

まとめ：どの方法を選ぶべき？

結論：

今日すぐ試したい → 方法1（Webでコピー）
Framerユーザー → 方法2（Framerインポート）
AIコーディングを本格活用 → 方法3（MCP接続）

Originkitは「無料でプロ級の動きが入る」貴重なツールです。まずは公式サイトを開いて、気になるコンポーネントを1つコピーしてみてください。