HorizonX ドキュメント
HorizonXとは何か、ライブラリには何が入っているか、そしてFigmaとコードでの使い方を紹介します。
イントロダクション
使い方
HorizonXとは？
HorizonXなら、白紙ではなく実際のデザインからプロジェクトを始められます。何もない状態でAIにWebサイトを頼むと、これまでに学習したものの平均が返ってきます。中央寄せのヒーロー、3枚のカード、平坦なグラデーション。これはモデルの失敗ではありません。土台がないまま作っているだけです。
レイヤーは、その土台です。一つひとつが完成したデザインで、モーション、奥行き、雰囲気まで作り込まれています。そのまま使って調整する、作り方を学ぶ、新しいアイデアの出発点にする。使い方は自由です。ゼロから生成するツールではなく、ひらめきを与え、制作を加速させるライブラリです。
こんなときに
意図の伝わる仕上がりを保ちながら、スピードを上げたいとき。ゼロからデザインするより、質の高い出発点を調整したいときに向いています。
仕組み
手順は3つだけ。2つ目の手順は形式によって変わります。
レイヤーを選ぶ
ライブラリを見て、合うものを開きます。各アセットページには正確な形式が記載されているので、Figma、コード、その組み合わせのどれなのかを事前に確認できます。
コピーまたはダウンロード
Figmaはワークスペースにコピー。HTMLはダウンロードして開くだけ。バンドルなら、必要なファイルをすべて1回でダウンロードできます。
自分のものにする
スタイルを変える、使っているフレームワークに移植する、新しいアイデアのきっかけにする。作り込みはすでに完了しています。仕上げるのは、あなたのクリエイティブディレクションです。
形式：Figmaとコード
すべてのレイヤーが、すべての形式で提供されるわけではありません。Figmaのみ、コードのみ、両方を含むものがあります。各アセットページには正確な形式が最初から表示されるので、何が手に入るかをいつでも把握できます。
Figmaファイル
編集できるデザインを、自分のFigmaワークスペースにそのままコピーできます。レイヤー、スタイル、構造はそのまま。自由にスタイルを変えて、自分のものにできます。
コード（HTML）
単体で動くHTMLファイルです。開いてそのまま公開することも、React、Svelte、Vueなど使っているスタックに移植することもできます。あえて特定のスタックに依存しない形にしています。
バンドル
アセット、仕様書、パッケージ化した書き出しなど、複数のファイルが必要な作品は、1回でまとめてダウンロードできるバンドルとして提供します。
どのAIモデルを前提にしていますか？
特定のモデルに固定しているわけではありません。多くのデザインは、チームが手作業で制作しています。Fableを使ったもの、GPT 5.6を使ったものもあり、提供するものはいま主流のAIツールで問題なく動くよう検証しています。
最終的に品質を決めるのは、各レイヤーを手がけるデザイナーと開発者のチーム、そしてあなたが加えるクリエイティブディレクションです。モデルはその過程で使う道具のひとつにすぎず、難しい部分を担っているわけではありません。
ライブラリの3つのかたち
01テンプレート
フルページや単体のヒーローセクション。全体を調整して使える、完成した出発点です。1画面だけを取り出して使うこともできます。
セクション
スライダー、機能紹介のグリッド、料金表、FAQ、フォームなど、単体で完結したブロックです。プロジェクトに組み込むことも、作り方を学ぶこともできます。
コンポーネント
カード、ナビゲーション、ボタン、マイクロインタラクションなどの小さなパーツ。大きなレイアウトを支える構成要素です。
エディタ：自分の手で作るための機能
HorizonXの半分は、ダウンロードして使うライブラリです。もう半分は、ブラウザで動くエディタです。エディタを開いて好きなところを変えると、結果がその場で更新されます。納得のいく見た目になったら、ファイルとして持ち出せます。
エディターには4つのコレクションがあります。Toolsはインタラクティブなコンポーネント、Texturesは画像や動画へのエフェクト、Shadersは色と動きのアニメーションを扱います。Mockupsはデザインを3D・写真シーンに配置します。各エディターにライブプレビューがあり、制作内容に適した形式で書き出せます。
ブラウザで試せます
アカウントなしでエディタを開き、すべてのコントロールを操作できます。メンバーシップがあれば、プランのエクスポート利用枠の範囲で結果を持ち出せます。
Tools：調整できるインタラクティブなコンポーネント
ツールは完成したファイルではありません。ファイルを生み出すジェネレーターです。ツールを開くと、本物のコンポーネントがページ上で動きます。展開するメニュー、回転するギャラリー、カーソルに反応するボタンなどです。その横には、そのコンポーネントのあらゆる設定項目を並べたパネルがあります。
自分の画像を入れてみましょう。方向、間隔、再生時間、イージングカーブも変えられます。プレビューは録画ではなくコンポーネントそのものなので、画面で確認したものがそのまま書き出されます。
見た目が決まったら、形式を選んで書き出します。どこでも開ける1つのHTMLファイル、Svelteコンポーネント、React JSXから選べます。SvelteとReactの版は、いま確認したのと同じドキュメントから生成されます。そのため、受け取るコードが確認済みのプレビューとずれることはありません。
テクスチャ：手持ちの画像や動画を、別の質感に
テクスチャは、あなたが用意した素材から始まります。コレクションからルックを選び、写真や映像をドロップすると、エフェクトがリアルタイムで描画されます。ポートレートは文字で埋め尽くされた画面に。商品写真は古いブラウン管のような光をまといます。光はハーフトーンのインクや、虹色に輝く箔に変わります。
ルックごとに専用のコントロールがあります。文字セット、グリッド、トーン、カラー、グロー、モーションなどです。スライダーを動かすと、プレビューもすぐに追従します。
書き出せる形式は、ルックと読み込んだ素材によって変わります。静止画はPNGかJPEGで書き出せます。動画素材やアニメーションするルックでは、MP4かPNG連番を選べます。SVGに対応するルックもあり、ASCIIではプレーンテキストも出力できます。WEB PACKには、Webサイトに必要なものがまとめて入っています。Exportパネルには、その組み合わせで実際に使える形式だけが表示されます。
Shaders：アニメーションする色、光、動き
シェーダーは、再生するのではなくリアルタイムで描画されるアートワークです。ヒーローの背後で呼吸するように揺れるグラデーション、カーソルを追うノイズ、見出しの下をうねる波などがその例です。どれも動画ファイルではないため、ループの継ぎ目が見えることも、キャンバスを大きくしてぼやけることもありません。
コントロールはキャンバスの横にあります。パレット、スピード、スケール、グレイン、方向などです。値を変えると、アニメーションがフルフレームレートですぐに反応します。
シェーダーはコンポーネントと同じく、HTML、Svelte、Reactで書き出せます。アニメーションのソースも、プレビューで動いているとおりに含まれます。ランタイムのインストールは不要で、HorizonXに通信する処理もありません。
Mockups：デザインをシーンに配置
Mockupsは3Dモックアップのコレクションです。スマートフォン、ノートパソコン、タブレット、腕時計、カードを扱います。
モックアップを開いてデザインを配置し、アングル、ライティング、背景、フレーム（9:16、4:5、1:1、16:9）を設定します。3Dシーンはキーフレームのタイムラインやモーションプリセットでアニメーションにもできます。Mockupsはすべてのプランに追加料金なしで含まれます。プランがなくてもすべてのモックアップを開いて試せますが、エクスポートにはプランが必要です。
作品を書き出す
エクスポートの選択肢はエディタによって異なります。コンポーネントとシェーダーはコードを渡すため、フレームワーク、Figmaコピー、プロンプトを選べます。テクスチャは完成したファイルを渡します。モックアップはPNGやJPG画像、MP4動画、HTML埋め込みとして書き出せます。エクスポートは「ダウンロード、上限、リセット」で説明しているエディタの利用枠にカウントされます。
HTML
マークアップ、スタイル、アニメーションのソースを1つにまとめたファイルです。ほかにインストールするものはありません。ブラウザで開く、ページに組み込む、サイトを作る人に渡す、どれでも使えます。
SvelteとReact
同じコンポーネントを、あなたのフレームワーク向けに書いたものです。どちらも書き出すたびに、確認済みのドキュメントから生成されます。だから、画面で見たものといつも一致します。
Copy to Figma
コンポーネントとシェーダーでは、Figmaが扱える形で作品をクリップボードにコピーします。ファイルに貼り付けると、そのままデザインを続けられる本物のレイヤーとして配置されます。図形で表現できないアートワークの場合は、フラットな画像として配置されます。
Copy Prompt
コンポーネントとシェーダーでは、いまの設定を、選んだすべての値とともにAIツール向けのテキストとして書き出します。含まれる内容は次のセクションで説明します。
モックアップの画像・動画・HTML
PNG（シーンが対応していれば背景透過）とJPGは長辺4096 pxまで。MP4動画はH.264・音声なしで、長辺1920 px、30または60 fpsまで。クリップのプリセットは3〜15秒で、キーフレームのタイムラインは1〜30秒にできます。HTMLはコンポーネントと同じく、ライブで操作できる埋め込みです。異なるモックアップごとにエディタの利用枠に1件カウントされ、MP4動画は専用の上限にもカウントされます。HTMLはカウントされません。
Copy Prompt：設定をAIツールに渡す
コンポーネントとシェーダーではExportの隣にCopy Promptがあります。現在の設定を平易な言葉にまとめ、Claude、Cursor、ChatGPTなどのAIツールに貼り付けられます。TexturesとMockupsには代わりに専用の書き出しパネルがあります。
プロンプトに含まれる内容
- 作品名と、カタログページにある1行の説明。
- 選んだフレームワーク。推測ではなく、HTML、Svelte、Reactのいずれかで回答が返ってきます。
- すべての設定を、いま選んだとおりの値で。グループ分けはコントロールパネルと同じです。
- 私たちが普段から求める基本ルール。コンテナいっぱいに表示する、高解像度の画面でも鮮明に保つ、システムで「動きを減らす」設定をしているユーザーにはアニメーションを止める、プレースホルダーのない動くコードを出力する、の4点です。
- 元のページへのリンク。モデルに元のソースを参照させられます。
ねらいは、モデルがこれまでに読んだものの平均ではなく、あなたの判断から出発することです。あなたのスタックで作り直す、デザインシステムに合わせてスタイルを変える、私たちが試していない方向にアイデアを広げる。どれでも依頼できます。
プロンプトはエディタがすでに把握している情報から作られます。そのため生成にコストはかからず、アートワークの読み込み中でも使えます。
Figmaのみのアセット（とコードのみのアセット）がある理由
各作品は、最も力を発揮できる形式で制作しています。視覚的な作り込みが多いデザイン重視のレイアウトはFigmaが自然なので、Figmaで提供します。モーション、インタラクション、3Dなど、コード主体やジェネレーティブな作品はHTMLのほうが適しています。すべての形式に中途半端な版を無理に用意するより、そのレイヤーを最大限に活かせる形式で届けます。複数の形式で提供するものもあり、何が含まれるかはアセットページで確認できます。
コードをHTMLのみで提供する理由
HTMLは特定のスタックに依存せず、単体で完結します。1つのファイルがどこでも開けて読みやすく、React、Svelte、Vue、静的ホスティングにもきれいに移植できます。HTMLで提供すれば、フレームワークに縛られずに完成形をそのまま受け取れます。実際に使う環境への移植は、あなたが自由に決められます。サーバーサイドレンダリングやSEOが必要な場合は、お好みのフレームワークに組み込んでください。
インスピレーションか、本番利用か
答えは両方です。ただし、正直にお伝えします。品質は本番レベルです。シニアチームが作り込んだ、洗練された本物のデザインです。一方で、多くのレイヤーはプロジェクトにひらめきを与えたり、すばやく立ち上げたりするためのもので、どんな状況にもそのまま当てはまる部品ではありません。質の高い出発点として使い、あなた自身の方向性を加えてください。
ライセンスと利用範囲
有効なサブスクリプションがあれば、ライブラリ全体を利用できます。個別購入は不要です。HorizonXのプロダクトは商用ライセンスで利用でき、個人、クライアント、商用のプロジェクトで自由に使用・編集できます。ただし、ソースファイルそのものの再販売、再配布、サブライセンスはできません。オープンソースのパックは作者のライセンスのままで、そのライセンスはダウンロードに同梱されています。
ダウンロード数、上限、リセット
どのプランでもライブラリ全体が利用でき、閲覧に制限はありません。以下の利用枠は、ダウンロードやエクスポートをしたときに適用されます。ライブラリのダウンロードは2つの別々の枠を使うため、通常のダウンロードが多い日でもプレミアム枠は減りません。エディタからのエクスポートには専用の利用枠があります。
通常アセット · 日間
コンポーネント、セクション、デザインシステム、パレット、アセットが対象です。1日あたりStarter 10 · Pro 25 · Max 50点までダウンロードでき、毎日リセットされます。
Premiumアイテム · 月間
Premiumバッジ（金色の王冠）が付いた、厳選された最上位の作品が対象です。1か月あたりStarter 5 · Pro 12 · Max 25点まで利用でき、毎月1日にリセットされます。
エディタからのエクスポート・1日あたりと30日あたり
Tools、テクスチャ、Shaders、Mockupsの各エディタからのエクスポートは、異なるアイテム数の利用枠を共有します（プラン別）：Starterは1日最大30件・30日間で100件、Proは60件・200件、Maxは150件・600件。1日は直近24時間です。同じアイテムを30日以内に再エクスポートすると、形式を問わず再カウントされません。同じモックアップのPNGやJPG画像は何枚書き出しても1件と数えます。
モックアップ動画（MP4）・30日ごと
エディタの利用枠とは別に、MP4動画には直近30日間の上限があります。Starterは20本、Proは100本、Maxは400本、トライアルのみの場合は5本です。同じモックアップの2本目の動画を10分以内に書き出しても追加でカウントされないため、やり直しや小さな調整は無料です。Maxのチームでは、メンバーごとにプランの上限で別々にカウントされます。
AIエージェントのエクスポート（MCP） · 日間
AIコーディングエージェントがMCP経由でエクスポートするコンポーネント、テクスチャルック、シェーダー、モックアップのHTML埋め込み（プラン別）：Starterは1日あたり最大30種類・30日間で100種類、Proは60種類・200種類、Maxは150種類・600種類まで。1日の枠はUTCの午前0時にリセットされ、エクスポート済みのものは再びカウントされません。
ほかにも2つ、知っておくと便利なことがあります。取得済みのものを再ダウンロードしても、二重にカウントされることはありません。また、複数のファイルで構成されたプロダクトも1回のダウンロードとして数えます。その月に残っているPremiumダウンロード数は、各Premiumアイテムのページで確認できます。
Tools、テクスチャ、Shaders、Mockupsの各エディタからのエクスポートはLibraryのダウンロード枠を消費しません。AIコーディングエージェントがMCP経由で代わりにダウンロードするLibraryのファイルは、通常のダウンロードとしてカウントされます。
ガイド
AIでFigmaをコードに変換
HorizonXのレイヤーの多くはFigmaのみで提供しています。洗練されたセクションが3〜4つ入ったデザインで、コードは付いていません。Claude CodeなどのAIコーディングエージェントをFigma MCP経由でFigmaに接続すれば、しっかり動くWebサイトに仕上げられます。手順は以下のとおりです。
考え方
FigmaファイルをClaude Codeに共有し、構造化したプロンプトで各セクションをピクセル単位まで忠実に再現させます。既存のセクションを実装し終え、レイアウト、余白、タイポグラフィ、カラーといったビジュアルの言語をつかんだら、同じスタイルで元のデザインと統一感のあるセクションを追加で生成させることもできます。
ワークフロー
書く前に読む
まずはFigma MCPでデザインを読み込むよう、エージェントに指示します。対象は構造、トークン（カラー、タイポグラフィ、余白、角丸）、参考用のスクリーンショットです。この段階ではまだコードを生成させません。MCPから取得できない値があれば、推測で作らずに報告するようエージェントに伝えましょう。
アセットは手動で渡す
Figma MCPが、すべてのアセットを正しく取り出せるとは限りません。画像が欠けたり、圧縮されたり、参照が誤っていたりすることがあります。グラデーション、マスク、シャドウ、ブレンドモード、テクスチャなどの複雑な要素も、正確に再現されない場合があります。そのときはFigmaから直接書き出してください。画像は透過の有無に応じてWebPかPNG、アイコンとロゴはSVGで書き出します。CSSで再現できない複雑なグラデーションやエフェクトもSVGで書き出しましょう。
先にデザインシステムを整える
最初のセクションに取りかかる前に、カラー、タイポグラフィのスケール、余白、角丸、シャドウ、ブレークポイントなどのトークンを抽出し、1か所（Tailwindの設定、CSS変数のファイル、テーマ）にまとめます。名前は役割がわかるように付けましょう。ボタン、見出し、コンテナなど、再利用するパーツはコンポーネント化します。こうしておけば、2つ目以降のセクションも毎回一から作り直すことなく、速く一貫した品質で仕上がります。
1セクションずつ作る
1つのセクションを実装したら、同じ画面サイズで元のFigmaデザインと直接見比べます。余白、フォントサイズ、行の高さ、配置、画像の位置、グラデーション、角丸、レスポンシブの挙動を確認し、違いを直してから次のセクションに進みます。ページ全体を一度に再現させるより、はるかに正確な結果が得られます。
元のデザインの先へ
既存のセクションが完成し、デザインシステムが整ったら、料金表、FAQ、お客様の声、お問い合わせなど、同じビジュアル言語に沿った新しいセクションをエージェントに作らせましょう。用意したトークンとコンポーネントがあるので、速く一貫した仕上がりになります。
ヒント
- FigmaのURLには、ファイル全体ではなく対象セクションの
node-idを含めてください。 - 書き出したアセットは、エージェントに渡す前にわかりやすい名前のフォルダに整理しておきましょう。
- 正しいフォント、レスポンシブのブレークポイント、ホバー時の状態、アニメーションの仕様を伝えましょう。
- 使うスタック（Astro、Next.js、Reactなど）は最初に指定しましょう。指定しないと、エージェントが勝手に決めてしまいます。
再利用できるプロンプトテンプレート
このプロンプトをコピーして、Claude Code（またはFigma MCPを使えるAIコーディングエージェント）に貼り付けてください。FigmaのURLと使うスタックを記入します。
I want you to replicate this Figma section in code with PIXEL-PERFECT fidelity. SOURCE - Figma: [PASTE URL WITH node-id] - This is ONE section of a larger landing page. We will build the remaining sections later, reusing whatever you define here. STACK - [e.g. Astro + Tailwind / Next + CSS Modules / React + styled-components] - Package manager: pnpm PHASE 1: READ (do not write code yet) 1. Use the Figma MCP on the exact node: - get_design_context → structure + reference styles - get_variable_defs → real tokens (colors, typography, spacing, radii) - get_screenshot → reference image to compare against - get_metadata → node hierarchy if the section is complex 2. If a color, spacing or size does not come from the MCP, tell me instead of inventing it. PHASE 2: ASSETS - Images, photos, complex gradients, textures, videos, custom icons, logos, or anything else that cannot be reproduced 1:1 with pure CSS/SVG: STOP and ask me to attach it. List what you need (layer name + purpose). - Pure CSS gradients / shadows / borders: reproduce them from the tokens. PHASE 3: DESIGN SYSTEM - Extract tokens into a single place (Tailwind config / CSS vars / theme): colors, typography, spacing, radii, shadows, breakpoints. - Name them semantically (bg-surface, text-primary, etc.). - Componentize reusable pieces (buttons, chips, headings, containers). PHASE 4: BUILD - Build ONLY this section using the tokens from Phase 3. - Responsive: respect the design's breakpoints. If Figma only shows desktop, tell me and propose mobile behavior before coding. - Semantic, accessible markup (headings, alt, aria). PHASE 5: VERIFY - Compare your result against the get_screenshot reference. - Report remaining differences. - Final visual sign-off is mine.
HTMLレイヤーの使い方
HTMLレイヤーは単体で完結したファイルです。マークアップ、スタイル、スクリプトがすべて1つのファイルに入っていて、どのブラウザでも開けます。最大限に活用する方法を紹介します。
すぐにプレビュー
HTMLファイルをダウンロードして、ブラウザで開きます。それが完成形です。ビルドも依存関係も必要ありません。セクションの見た目と動きを確かめる基準になります。
フレームワークに移植する
HTMLは、あえて特定のスタックに依存しない形にしています。Claude CodeなどのAIコーディングエージェントに渡し、React、Svelte、Vue、Astro、Next.jsなど、使っているフレームワークへの移植を依頼しましょう。エージェントはマークアップを読み、スタイルを抽出し、あなたのコンポーネント構成で再現できます。正確な参考になるよう、HTMLファイルをそのまま渡してください。
デザインシステムを抽出する
Figmaのレイヤーと同じく、移植の前にカラー、タイポグラフィ、余白、角丸などのトークンを抽出させ、プロジェクトのデザインシステムに設定しましょう。こうしておけば、あとでセクションを追加しても見た目の統一感を保てます。
プレースホルダーを置き換える
HTMLレイヤーによっては、仮の画像やデモ用のテキストが入っています。自分のコンテンツ、画像、ブランドに差し替えてください。構造とスタイルはそのままで、変わるのは中身だけです。
ヒント
HTMLファイルに、うまく移植できないアニメーション、インタラクション、サードパーティのスクリプトが含まれている場合は、元のファイルをブラウザで開いて動きを観察し、その挙動をAIエージェントに言葉で説明しましょう。圧縮されたJSを読み解かせるより、説明したほうがうまくいくこともあります。
よくある質問
有効なサブスクリプションには、ライブラリ全体が含まれています。個別購入は不要です。アセットを開くと、形式ごとの操作（Copy Figma、Download HTMLなど）が表示されます。ログインして「ライブラリ」を開き、必要なものを取り入れましょう。
プランごとに、独立した2つの利用枠があります。通常アセットは1日あたり10点（Starter）、25点（Pro）、50点（Max）までダウンロードでき、毎日リセットされます。Premiumアイテム（金色のPremiumバッジが付いたもの）は1か月あたり5点、12点、25点までで、毎月1日にリセットされます。閲覧はいつでも無制限で、再ダウンロードが二重にカウントされることはありません。
はい。サブスクリプションにはHorizonXのプロダクトの商用ライセンスが含まれています。追加料金なしで、個人、クライアント、商用のプロジェクトにファイルを自由に使用・編集できます。オープンソースのパックは作者のライセンスのままで、そのライセンスはダウンロードに同梱されています。
いいえ。ご自身のプロジェクトでは自由に使用・編集できますが、ソースファイルそのものの再販売、再配布、サブライセンスはできません。
はい。新作を定期的にリリースしています。追加されたものはすべて、サブスクリプションが有効な間、追加料金なしで利用できます。
いいえ。登録しなくても、ツール、テクスチャ、シェーダー、モックアップを開いてすべてのコントロールを操作できます。結果を持ち出すにはメンバーシップが必要です。
いいえ。インストールするものも、外部に通信する処理もありません。シンプルな作品は、プレーンなマークアップとCSSで書き出されます。本格的なタイムラインが必要な作品には、アニメーションのソースが含まれます。これはプレビューで動いていたものと同じソースです。
いいえ。モックアップのエクスポートは、ライブラリの1日あたりやプレミアムの月間ダウンロード上限を使いません。異なるモックアップごとに、Tools、テクスチャ、Shadersと共有するエディタの利用枠に1件カウントされ、MP4動画には専用の上限もあります。
直近30日間で、Starterは20本、Proは100本、Maxは400本、トライアルのみの場合は5本です。同じモックアップの2本目の動画を10分以内に書き出しても追加でカウントされません。Maxのチームでは、メンバーごとにプランの上限で別々にカウントされます。