オフラインキャンバスは、解析的な取り付け位置から2枚のブックパネルと左右対称の三角V字折りを投影します。開き角でモデル化された立ち上がりが変化し、パネルと取り付けの操作でジオメトリが更新されます。SVG書き出しにより、名前付きのカット＆折り筋デザインプルーフが得られます。
- 必要なもの
- Python 3 · browser
v1.0.0 · 2026年10月25日 更新 · 32 KB · 個人やクライアントの仕事に使えます。パッケージの再販や共有はご遠慮ください。
できること
実際のインタラクティブ操作ができるポータブルなオフラインHTMLツール
編集可能なJSON設定とタスク専用ビルダー
向いている用途
- 紙メカニズムの検討とポップアップ構成の初期プルーフ。
向いていない用途
- 任意の自動ポップアップ設計、のりしろ（タブ）計画、物理的な折り可能性の保証。
仕組み
ローカルレンダラーを同梱
実際の入力を準備する
付属オフラインツール用のブラウザ。
サポート対象の操作を適用する
ブックの開き角を変更します。パネル幅と取り付け距離を設定します。SVGの折りプルーフを保存するか、プロジェクトJSONを復元します。
結果をビルドして確認する
ブラウザでoutput/index.htmlを開きます。実際の操作を試し、書き出された成果物をダウンロードしてください。ビルダーはウェブサイトをデプロイしません。
ワークフローの仕組み
ポップアップ・フォールド・デザインラボ の仕組み
オフラインキャンバスは、解析的な取り付け位置から2枚のブックパネルと左右対称の三角V字折りを投影します。開き角でモデル化された立ち上がりが変化し、パネルと取り付けの操作でジオメトリが更新されます。SVG書き出しにより、名前付きのカット＆折り筋デザインプルーフが得られます。
スキルに含まれるもの
変更できること
- ブックの開き角を変更します。
- パネル幅と取り付け距離を設定します。
- SVGの折りプルーフを保存するか、プロジェクトJSONを復元します。
納品前に確認すること
- ビルダーは取り付け寸法がパネルに収まるかを確認します。
- 実際のツールで開き角の変化、SVGの単位、プロジェクトの復元を確認します。
パッケージ内のファイルを見る
この版に含まれる主な制作ファイルと、それぞれの実際の役割を紹介します。完全なダウンロードには、手順書と適用されるライセンス表記も含まれます。
制限付きの折りジオメトリを検証し、オフラインのインタラクティブツールを組み立てます。
scripts/project.py折りを投影し、キャンバス内にジオメトリを収め、SVGまたはプロジェクト設定を書き出します。
scripts/studio.jsローカル検証、保護された出力、成果物の構築。
scripts/build.py実際にサポートされた操作を備えた実行可能なサンプル。
examples/project.jsonメカニズム固有の制限と視覚確認の基準。
references/production.md
このスキルを使う理由
このパッケージから始める
オフラインキャンバスは、解析的な取り付け位置から2枚のブックパネルと左右対称の三角V字折りを投影します。開き角でモデル化された立ち上がりが変化し、パネルと取り付けの操作でジオメトリが更新されます。SVG書き出しにより、名前付きのカット＆折り筋デザインプルーフが得られます。パッケージには動作サンプル、制限付き入力、書き出し経路が含まれ、平文のプロンプトから一から設計する必要がありません。
方法を比較
プロンプト、自作スキル、このワークフローの違いは？
プロンプトから始める
アシスタントは、通常の依頼からでも制作できます。ただし、そのプロジェクトの要件、見た目のルール、素材、出力形式、確認手順は別途決める必要があります。
自分でスキルを作る
再利用する指示、初期設定、ファイル構成、チェック項目を自分で選び、維持します。独自のルールや連携が必要な制作工程に向いています。
PopNow 向けに制作したワークフロー
このワークフローは PopNow 向けに開発されました。ソースファイル、同梱の依存ツール、適用される表記はパッケージに含まれています。以下で説明する機能範囲は、この版のものです。
ガイド確認日：2026年10月25日
費用はいくらかかりますか？
同梱のプロシージャルまたはフォントベースのサンプルは、メディア生成なしでローカルに実行されます。計算時間や使用するエージェント・外部ビューアはPopNowの生成料金の対象外です。後から依頼する新しいオプションのメディアには、別途見積もりが必要です。
提供される手順はローカルで実行します。新しい素材をリクエストするかどうかは、別途選べます。 スキルは無料です。新しい素材は生成前に見積もります。
スキルパッケージ
アカウントのダウンロード枠内で無料でインストールできます。パッケージのライセンスでは、自分やクライアントの制作物への利用が認められますが、再配布は認められません。
既存素材とローカル作業
適切な素材の再利用、ファイル編集、ローカルでの組み立てでは、PopNow の生成モデルを呼び出しません。処理は自分のコンピューターと必要なランタイムで行います。
アシスタントとホスティング
サブスクリプション、クラウド上のコンピューター、デプロイ、その他の事業者の料金は、それぞれのサービスの費用です。このスキルをインストールしても、それらのサービスは含まれません。
PopNow の請求の仕組み
PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
ダウンロード枠と現在のアカウント条件が適用されます。無料パッケージでも、生成を無制限に無料で利用できるわけではありません。
使い方
こう頼む
PopNow のスキル「ポップアップ・フォールド・デザインラボ」（pop-up-fold-design-lab）を使って、次のことをしてください：左右対称の紙リンケージを開き、取り付けジオメトリを調整し、実測の折り筋プルーフを書き出します。同梱プロジェクトから始め、依頼された編集を行い、実際の出力を確認してください。
次はこれ
ブックの開き角を変更します。
パネル幅と取り付け距離を設定します。
用意しておくもの
- 付属オフラインツール用のブラウザ。
- 実際に製作する場合は紙と物理プロトタイプ。
似ているスキル
すべて見る →
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定額パッケージを売る、大胆な 1 人スタジオのサイト。プランのページ、事例、依頼フォーム付き。
Webグラスモーフィズムのサイトテンプレート
+25ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
Webフォトエラスティック・ストレス・スタジオ
+25ポータブルなオフラインスタジオで、編集可能な荷重と偏光子角度により、光り輝く応力縞のアートワークを作成します。
WebVariable Type Specimen Lab
+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ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
よくある質問
SVGは自動カットにそのまま使えますか？
これはこの折り族向けの実測デザインプルーフです。紙の厚み、のりしろ、干渉、カットの安全性、スケールについては、製作前に物理テストが必要です。
同梱のサンプルに有料の生成は必要ですか？
いいえ。付属のアセットやプロシージャル入力はローカルで実行されます。新しい画像・クリップ・音声を依頼する場合は、PopNowで正確な見積もりと事前承認を得てから生成してください。APIのUSDとOAuthウェブサイトクレジットは別管理です。
ポップアップ・フォールド・デザインラボ には何が用意されていますか？
制限付きの折りジオメトリを検証し、オフラインのインタラクティブツールを組み立てます。 折りを投影し、キャンバス内にジオメトリを収め、SVGまたはプロジェクト設定を書き出します。 ローカル検証、保護された出力、成果物の構築。 実際にサポートされた操作を備えた実行可能なサンプル。 メカニズム固有の制限と視覚確認の基準。
ポップアップ・フォールド・デザインラボ のどの部分に費用がかかる可能性がありますか？
同梱のプロシージャルまたはフォントベースのサンプルは、メディア生成なしでローカルに実行されます。計算時間や使用するエージェント・外部ビューアはPopNowの生成料金の対象外です。後から依頼する新しいオプションのメディアには、別途見積もりが必要です。 PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
ポップアップ・フォールド・デザインラボ は、プロンプトや自作スキルとどう違いますか？
オフラインキャンバスは、解析的な取り付け位置から2枚のブックパネルと左右対称の三角V字折りを投影します。開き角でモデル化された立ち上がりが変化し、パネルと取り付けの操作でジオメトリが更新されます。SVG書き出しにより、名前付きのカット＆折り筋デザインプルーフが得られます。パッケージには動作サンプル、制限付き入力、書き出し経路が含まれ、平文のプロンプトから一から設計する必要がありません。