ビルダーは提供されたフォントのfvar軸とcmap文字カバレッジを読み取り、その後、承認されたフォントをオフラインのサンプルツールに埋め込みます。ブラウザのコントロールで実際の軸が公開され、エクスポートにはPNG、ライブテキストSVG、および編集可能な設定JSONが含まれます。
- 必要なもの
- Python 3 · browser
v1.0.0 · 2026年10月25日 更新 · 351 KB · 個人やクライアントの仕事に使えます。パッケージの再販や共有はご遠慮ください。
できること
実際のインタラクティブ操作ができるポータブルなオフラインHTMLツール
編集可能なJSON設定とタスク専用ビルダー
向いている用途
- タイポグラフィの探求、ブランドタイポグラフィの研究、およびポータブルなフォントサンプル。
向いていない用途
- フォントライセンスのクリアランス、静的フォントから可変フォントへの変換、またはすべてのSVGビューアでの同一レンダリング。
仕組み
ローカルレンダラーを同梱
実際の入力を準備する
含まれるOFLフォント、またはライセンスされた可変フォント。
サポート対象の操作を適用する
埋められる可変フォントに置き換えます。サンプルテキストの1行を編集します。そのフォントに存在する軸のみを調整し、結果をエクスポートします。
結果をビルドして確認する
ブラウザでoutput/index.htmlを開きます。実際の操作を試し、書き出された成果物をダウンロードしてください。ビルダーはウェブサイトをデプロイしません。
ワークフローの仕組み
Variable Type Specimen Lab の仕組み
ビルダーは提供されたフォントのfvar軸とcmap文字カバレッジを読み取り、その後、承認されたフォントをオフラインのサンプルツールに埋め込みます。ブラウザのコントロールで実際の軸が公開され、エクスポートにはPNG、ライブテキストSVG、および編集可能な設定JSONが含まれます。
スキルに含まれるもの
変更できること
- 埋められる可変フォントに置き換えます。
- サンプルテキストの1行を編集します。
- そのフォントに存在する軸のみを調整し、結果をエクスポートします。
納品前に確認すること
- ビルダーは実際のフォント軸、値の範囲、および文字カバレッジをチェックします。
- 実際のPNG/SVGエクスポートとブラウザ内の長いテキストを検査してください。ビューアのフォントサポートは異なる場合があります。
パッケージ内のファイルを見る
この版に含まれる主な制作ファイルと、それぞれの実際の役割を紹介します。完全なダウンロードには、手順書と適用されるライセンス表記も含まれます。
実際のfvar軸とcmapグリフカバレッジを読み取り、その後、ライセンスされたフォントをオフラインで使用するために埋め込みます。
scripts/project.py実際のフォント軸を適用し、欠落した文字をチェックして、ライブテキストSVGまたはラスターPNGをエクスポートします。
scripts/studio.jsローカル検証、保護された出力、成果物の構築。
scripts/build.py実際にサポートされた操作を備えた実行可能なサンプル。
examples/project.jsonメカニズム固有の制限と視覚確認の基準。
references/production.md
このスキルを使う理由
このパッケージから始める
ビルダーは提供されたフォントのfvar軸とcmap文字カバレッジを読み取り、その後、承認されたフォントをオフラインのサンプルツールに埋め込みます。ブラウザのコントロールで実際の軸が公開され、エクスポートにはPNG、ライブテキストSVG、および編集可能な設定JSONが含まれます。このパッケージは、プレーンなプロンプトから設計する必要がないよう、動作する例、制限された入力、およびエクスポートルートを提供します。
方法を比較
プロンプト、自作スキル、このワークフローの違いは？
プロンプトから始める
アシスタントは、通常の依頼からでも制作できます。ただし、そのプロジェクトの要件、見た目のルール、素材、出力形式、確認手順は別途決める必要があります。
自分でスキルを作る
再利用する指示、初期設定、ファイル構成、チェック項目を自分で選び、維持します。独自のルールや連携が必要な制作工程に向いています。
PopNow 向けに制作したワークフロー
このワークフローは PopNow 向けに開発されました。ソースファイル、同梱の依存ツール、適用される表記はパッケージに含まれています。以下で説明する機能範囲は、この版のものです。
ガイド確認日：2026年10月25日
費用はいくらかかりますか？
同梱のプロシージャルまたはフォントベースのサンプルは、メディア生成なしでローカルに実行されます。計算時間や使用するエージェント・外部ビューアはPopNowの生成料金の対象外です。後から依頼する新しいオプションのメディアには、別途見積もりが必要です。
提供される手順はローカルで実行します。新しい素材をリクエストするかどうかは、別途選べます。 スキルは無料です。新しい素材は生成前に見積もります。
スキルパッケージ
アカウントのダウンロード枠内で無料でインストールできます。パッケージのライセンスでは、自分やクライアントの制作物への利用が認められますが、再配布は認められません。
既存素材とローカル作業
適切な素材の再利用、ファイル編集、ローカルでの組み立てでは、PopNow の生成モデルを呼び出しません。処理は自分のコンピューターと必要なランタイムで行います。
アシスタントとホスティング
サブスクリプション、クラウド上のコンピューター、デプロイ、その他の事業者の料金は、それぞれのサービスの費用です。このスキルをインストールしても、それらのサービスは含まれません。
PopNow の請求の仕組み
PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
ダウンロード枠と現在のアカウント条件が適用されます。無料パッケージでも、生成を無制限に無料で利用できるわけではありません。
使い方
こう頼む
PopNow のスキル「Variable Type Specimen Lab」（variable-type-specimen-lab）を使って、次のことをしてください：実際の可変フォントを検査し、サポートされている軸を調整して、グリフチェック付きのライブテキストのサンプルをエクスポートします。バンドルされたプロジェクトから開始し、要求された編集を行い、実際の出力を確認してください。
次はこれ
埋められる可変フォントに置き換えます。
サンプルテキストの1行を編集します。
用意しておくもの
- 含まれるOFLフォント、またはライセンスされた可変フォント。
- フォントTools WOFFサポートを備えたPythonで再構築し、最新のブラウザを使用します。
似ているスキル
すべて見る →
Webジグソー写真プレイグラウンド
+25写真を、ドラッグ・スナップ・キーボード操作ができる遊べる曲線ピースのパズルに変えます。
Web飲料ブランドのウェブサイト テンプレート
+25ショップ、ケース作成、取扱店マップ、デモ用チェックアウトを 1 ファイルに収めた、明るい飲料・スナックのブランドサイト。
Webスクロールする紙の世界
+25重なり合う紙の風景を歩き、3つの思い出を集めて小さな旅の記録を作ります。
Webスニーカーショップ サイトテンプレート
+25カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
Webフラクタルズームアート
+25計算されたフラクタルを探索し、クローズアップを選んで、その正確なビューをアートワークと再利用可能なブリーフとして書き出します。
Webスクラップブック風ポートフォリオサイト
+25紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
Webフーリエ線オービット
+25回転するフーリエ円で閉じた図形を再構成し、選択した調波精度で書き出します。
Webポップアップ・フォールド・デザインラボ
+25左右対称の紙リンケージを開き、取り付けジオメトリを調整し、実測の折り筋プルーフを書き出します。
Webレコードのミニサイト
+25アルバムを触って楽しむジャケットに変え、両面の試聴と回転するレコードを添えます。
Webハードウェア製品のサイト
+25銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
Web旅行会社のウェブサイト テンプレート
+25ツアー、ガイド、ロッジのための写真中心のサイト。旅の検索、予約リクエスト、旅選びのクイズつき。
Webフリーランスデザイナーのサイト
+25定額パッケージを売る、大胆な 1 人スタジオのサイト。プランのページ、事例、依頼フォーム付き。
Webグラスモーフィズムのサイトテンプレート
+25ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
Webフォトエラスティック・ストレス・スタジオ
+25ポータブルなオフラインスタジオで、編集可能な荷重と偏光子角度により、光り輝く応力縞のアートワークを作成します。
Web直交ワード スカルプチャー
+25押し出した2つの単語を交差させ、垂直方向の視点から異なる読みになる一つの立体を作ります。
Web3D アバター作成ツール
+25ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
Web研究者 CV サイト
+25研究、教育、学術貢献を整理し、出版種別の絞り込みと BibTeX 出力を行います。
Webカレンダーヒートマップ
+251 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
Web農業製品サイト
+25作物と対応地域で機器を絞り、明示された仕様を比較して問い合わせ資料を作ります。
WebAI SaaS ランディングページ
+25温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
Webアニメーション付きヒーローセクション
+25見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
Webアーケード風個人サイト
+25作品を小さなゲームルームのカートリッジにして、キーやタッチで選んで開きます。
Web建築ポートフォリオサイト
+25プロジェクトの絞り込み、面積単位の切り替え、候補リストの印刷に対応します。
Webオーディオ製品サイト
+25製品仕様を比較し、手元の音声ファイルで実際に A/B 試聴できます。
Web音声スペクトラム解析
+25手元の音声を解析し、実測スペクトラム、主周波数、信号レベルを表示します。
Web事例紹介サイトテンプレート
+25根拠と指標を結び付け、前後の変化と不足データを確認できます。
Webキャッシュフローボード
+25取引ごとの残高を計算し、期首残高と入出金から期末残高を照合します。
Web映画のようなスクロール物語
+254幕の大きな写真、穏やかな動き、ワイド画面切り替えで写真の物語を伝えます。
WebCMS マーケティングサイト
+25記事の JSON を編集し、項目を検証して安全にプレビュー・出力できます。
Webカンファレンス登壇者ページ
+25テーマと講演時間で絞り込み、司会者向け紹介文と機材リストを出力できます。
Web思い出の星座マップ
+256枚の写真を星座のようにつなぎ、自由に探索したり順番に思い出をたどったりできます。
Web建設会社サイトテンプレート
+25数量と単価から概算を計算し、予備費を分けて明細を出力できます。
Webコンサルティングサイト
+25目的、期間、チーム規模に合う形式を探し、相談概要を出力できます。
Webコンバージョンファネル
+25同じ利用者群の段階別転換率と離脱数を計算し、確認用の表を添えます。
Webシェーダーのヒーロー付きの代理店サイト
+25下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
Web顧客オンボーディング
+25前提条件に沿って設定を進め、担当者、重み付き進捗、保存可能な一覧を示します。
Webダークモード SaaS ランディングページ
+25動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
Webデザインシステム展示
+25色のトークンを編集し、実際のコントラスト比を計算して CSS と JSON に出力します。
Webデザイナーのポートフォリオサイト
+25落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
Web開発者ジャーナル
+25構造化した記事を検索できる技術ブログにし、コード表示と RSS 出力を付けます。
Webエンジニア向けポートフォリオサイト
+25事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
Web電子書籍ランディングページ
+25オリジナルの章を試し読みし、文字サイズと読書進捗を調整できます。
Web編集できる予算表
+25数量、単価、実績を編集し、予算残額を再計算して書き出します。
Web雑誌風の SaaS サイト
+25ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
Webイベント参加率チャート
+25申込数、来場数、定員を比較し、加重参加率と欠席数を計算します。
Webイベントサイトテンプレート
+25セッションを絞り込み、時間の重複を確認して予定をカレンダーに出力できます。
Web実験比較チャート
+25標本数、転換率の差、Wilson 区間を示し、結果の不確実性を見える形にします。
Web財務レポートポータル
+25年度と種類で資料を探し、指標を比較してデータを出力できます。
Webフライト検索プロトタイプ
+25手元の便一覧を路線、日付、人数で絞り、総額、所要時間、経由数を比較します。
Webインタラクティブなアーキテクチャ図
+25検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
Web小さな体験型ミュージアム
+253つの展示室を巡り、日用品を拡大して見ながら自分だけの鑑賞記録を集めます。
Webインテリアデザインサイト
+25部屋の寸法、予算、優先事項から、出力できる計画書を作成します。
Webジュエリーショップサイト
+25素材とサイズの組み合わせを確認し、問い合わせリストを出力できます。
Webナレッジグラフ エクスプローラー
+25プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
WebKPI ダッシュボードのテンプレート
+25変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
WebAI モックアップからのランディングページ
+25まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web公開待機リストと紹介コード
+25固定の紹介コードと端末内の待機列を、明示されたデモとして試せます。
Web法律事務所サイトテンプレート
+25相談内容と管轄に応じて、印刷できる相談準備リストを作成します。
WebWeb マガジンサイト テンプレート
+25記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
Web会員料金計算ツール
+25人数、期間、追加機能から料金を正確に計算し、プランを比較します。
Web非営利キャンペーンサイト
+25目標額と費用の前提を示し、参加時間でボランティア活動を探せます。
Webオンライン講座ページ
+25前提知識を確認し、講座内容から週ごとの学習計画を作成します。
Web業務タスクボード
+25優先度、担当者、期限で作業を整理し、明確な状態遷移で進めます。
Webパーティクルアニメーションのヒーロー
+25温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
Web個人ブランドのウェブサイト
+25細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
Webペットショップのウェブサイト テンプレート
+25カタログ、バリエーション、カート、補充プランナー、デモ用チェックアウトを 1 つの HTML ファイルに収めた、動くペット用品ショップ。
Web写真ストーリー編集ツール
+25写真の順番、切り抜き、物語の見出しを編集し、同じ構成を書き出して復元できます。
Web写真ステッカー遊び場
+25写真ステッカーをドラッグやキーで配置し、回転や取り消しを使ってPNGコラージュに保存。
Web写真ポートフォリオ
+25シリーズ別の写真閲覧、キーボード対応の拡大表示、コンタクトシート印刷に対応します。
Webポッドキャストのウェブサイト テンプレート
+25再生できるヒーロー、エピソードのアーカイブ、ゲストのページ、ページをまたいでも再生が続くプレーヤーを備えた番組サイト。
Web手描き風の料金表セクション
+25傾いたインクのカード、年額切り替え、ダークモードを備えた、ノートのような料金表。1 つのオフラインファイル。
Web製品連携ディレクトリ
+25機能と認証方式で連携を探し、設定チェックリストを作成します。
Webシネマティックな製品ローンチページ
+25映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
Web不動産サイトテンプレート
+25予算と寝室数で物件を絞り込み、比較リストを印刷できます。
Web論文のウェブサイト
+25論文のプロジェクトページ。インタラクティブな図 1、結果、限界、ワンクリックの引用つき。
Web売上構成ダッシュボード
+25期間別の売上を照合し、金額と構成比を切り替えて商品や販路を比較します。
Web売上推移レポート
+25実際の売上、前期比、移動平均を表示し、欠けている日付を明示します。
Web管理画面ダッシュボード テンプレート
+25グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
WebSaaS ランディングページ テンプレート
+25実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
Web検索できるデータ表
+25CSV を検索、数値順ソート、ページ送り、安全な書き出しができる表にします。
Webサービス状態ボード
+25正常、障害、古い確認結果を区別し、サービスの現状と障害履歴を示します。
Webスポーツクラブのウェブサイト テンプレート
+25時間割、コーチのページ、会員制度、コートの配置図、予約を 1 つのファイルにまとめた、クラブ、ジム、スタジオのサイト。
Webお客さまの声の壁セクション
+25お客さまの声を組石のように並べるか、ゆっくり流れる壁にするセクション。掲載の了承を得た声だけを出します。
Web旅行日程サイト
+25日ごとの予定を整理し、重複や移動時間不足を検出して既知の費用を集計します。
WebUX ケーススタディ集
+25課題、制約、判断を根拠とともに示し、確認済みの成果と提案を分けます。
Webワークフロー自動化のランディングページ
+25グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
Webライターのポートフォリオサイト
+25掲載媒体やテーマで作品を検索し、読書リストと紹介文を保存できます。
Webインタラクティブなグリッドのヒーロー
+25ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
よくある質問
文字が欠落している場合、どうなりますか？
ビルダーはフォントのcmapを確認し、サポートされていない開始テキストを拒否します。ブラウザは欠落した文字について警告し、そのテキストのワークアートエクスポートを無効にします。別のフォントにサイレントに置き換えることはありません。
同梱のサンプルに有料の生成は必要ですか？
いいえ。付属のアセットやプロシージャル入力はローカルで実行されます。新しい画像・クリップ・音声を依頼する場合は、PopNowで正確な見積もりと事前承認を得てから生成してください。APIのUSDとOAuthウェブサイトクレジットは別管理です。
Variable Type Specimen Lab には何が用意されていますか？
実際のfvar軸とcmapグリフカバレッジを読み取り、その後、ライセンスされたフォントをオフラインで使用するために埋め込みます。 実際のフォント軸を適用し、欠落した文字をチェックして、ライブテキストSVGまたはラスターPNGをエクスポートします。 ローカル検証、保護された出力、成果物の構築。 実際にサポートされた操作を備えた実行可能なサンプル。 メカニズム固有の制限と視覚確認の基準。
Variable Type Specimen Lab のどの部分に費用がかかる可能性がありますか？
同梱のプロシージャルまたはフォントベースのサンプルは、メディア生成なしでローカルに実行されます。計算時間や使用するエージェント・外部ビューアはPopNowの生成料金の対象外です。後から依頼する新しいオプションのメディアには、別途見積もりが必要です。 PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
Variable Type Specimen Lab は、プロンプトや自作スキルとどう違いますか？
ビルダーは提供されたフォントのfvar軸とcmap文字カバレッジを読み取り、その後、承認されたフォントをオフラインのサンプルツールに埋め込みます。ブラウザのコントロールで実際の軸が公開され、エクスポートにはPNG、ライブテキストSVG、および編集可能な設定JSONが含まれます。このパッケージは、プレーンなプロンプトから設計する必要がないよう、動作する例、制限された入力、およびエクスポートルートを提供します。