各内部境界は一度生成され、隣接する2つのピースから逆方向に再利用されます。SVGクリップが曲線ピースの中の元の写真を保持し、ローカルのインタラクションレイヤーが移動、スナップ距離、完成状況を追跡します。所有する写真は生成呼び出しなしでローカルで組み立て・遊べます。足りないパズル画像は、正確な見積もりと承認を経てPopNowが作成できます。ピース数が多いほどローカルのレンダリングとインタラクションの負荷が増します。
- PopNow で生成
- 画像
- 必要なもの
- Python 3
適切な入力素材があれば、生成は任意です。
v1.0.0 · 2026年10月25日 更新 · 11.2 MB · 個人やクライアントの仕事に使えます。パッケージの再販や共有はご遠慮ください。
できること
遊べるローカルHTMLパズル
完成写真PNGと編集可能なSVGクリップパス
ピースのジオメトリ、コピーした写真、持ち運び可能なブリーフ
向いている用途
- 個人写真パズルと楽しい記念品
- 検証可能な完成状態を持つインタラクティブなイラスト
向いていない用途
- レーザー加工対応の切断公差
- 制約のないコラージュ配置
仕組み
ローカルレンダラーを同梱
入力を選択
詳細な写真を選び、パズルのグリッドを設定します。
レンダリングして確認
共有ピースジオメトリを構築し、ローカルHTMLを開きます。
調整とエクスポート
遊んだり、完成画像を確認したり、編集可能なクリッピングパスを書き出したりします。
ワークフローの仕組み
ジグソー写真プレイグラウンド の仕組み
各内部境界は一度生成され、隣接する2つのピースから逆方向に再利用されます。SVGクリップが曲線ピースの中の元の写真を保持し、ローカルのインタラクションレイヤーが移動、スナップ距離、完成状況を追跡します。
スキルに含まれるもの
変更できること
- rows: 2〜8、columns: 2〜10
- tab_depth: 小さい方のピース寸法の0.10〜0.23
- snap_distance: 8〜40 SVGユニット
- ソース写真とシャッフルシード
納品前に確認すること
- ピース数は rows × columns と一致し、すべての識別子が一意です。
- すべてのピースは共有エッジから構築された閉じたパスです。
- 保存されたブリーフはPNGとSVGを再現し、安全でない置換は拒否されます。
パッケージ内のファイルを見る
この版に含まれる主な制作ファイルと、それぞれの実際の役割を紹介します。完全なダウンロードには、手順書と適用されるライセンス表記も含まれます。
ドメインアルゴリズムと不変条件チェック。
scripts/recipe.py実行・編集可能なサンプルパラメータ。
examples/brief.jsonパラメータの意味、証明の解釈、制限事項。
references/design-notes.md
このスキルを使う理由
このパッケージから始める
パッケージは適合するエッジジオメトリ、ソース画像のクリッピング、実際のパズル状態を提供します。パズルのオーバーレイを描くだけや、無関係なステッカーを自由に動かすだけのものを超えます。
PopNow で補えるもの
このワークフローで不足する画像には PopNow を使えます。すでに所有している十分な素材はそのまま活用し、新しい素材をここで説明する編集・組み立て工程に戻して仕上げます。
方法を比較
プロンプト、自作スキル、このワークフローの違いは？
プロンプトから始める
アシスタントは、通常の依頼からでも制作できます。ただし、そのプロジェクトの要件、見た目のルール、素材、出力形式、確認手順は別途決める必要があります。
自分でスキルを作る
再利用する指示、初期設定、ファイル構成、チェック項目を自分で選び、維持します。独自のルールや連携が必要な制作工程に向いています。
PopNow 向けに制作したワークフロー
このワークフローは PopNow 向けに開発されました。ソースファイル、同梱の依存ツール、適用される表記はパッケージに含まれています。以下で説明する機能範囲は、この版のものです。
ガイド確認日：2026年10月25日
費用はいくらかかりますか？
所有する写真は生成呼び出しなしでローカルで組み立て・遊べます。足りないパズル画像は、正確な見積もりと承認を経てPopNowが作成できます。ピース数が多いほどローカルのレンダリングとインタラクションの負荷が増します。
適切な入力素材があれば、生成は任意です。 スキルは無料です。新しい素材は生成前に見積もります。
スキルパッケージ
アカウントのダウンロード枠内で無料でインストールできます。パッケージのライセンスでは、自分やクライアントの制作物への利用が認められますが、再配布は認められません。
既存素材とローカル作業
適切な素材の再利用、ファイル編集、ローカルでの組み立てでは、PopNow の生成モデルを呼び出しません。処理は自分のコンピューターと必要なランタイムで行います。
新しい AI 画像・動画・音声
実際のモデル、入力、数量、長さ、解像度に応じて見積もります。別案、修正、任意の品質向上処理によって、生成リクエストが増える場合があります。
アシスタントとホスティング
サブスクリプション、クラウド上のコンピューター、デプロイ、その他の事業者の料金は、それぞれのサービスの費用です。このスキルをインストールしても、それらのサービスは含まれません。
まず、作りたい版の費用を確認
アシスタントは、利用できるモデルを調べ、実際のリクエストを先に見積もれます。追加する任意の処理は自分で選び、生成前に支出を承認します。
アシスタントへの依頼例
私のプロジェクトに PopNow のスキル「ジグソー写真プレイグラウンド」を使ってください。再利用できる入力素材を列挙し、不足するメディアだけを見積もり、見積もりの合計額とまだ見積もりのない工程を示してください。任意の追加処理を分け、有料処理を始める前に私の承認を待ってください。
PopNow の請求の仕組み
PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
ダウンロード枠と現在のアカウント条件が適用されます。無料パッケージでも、生成を無制限に無料で利用できるわけではありません。
使い方
こう頼む
PopNow のスキル「ジグソー写真プレイグラウンド」（jigsaw-photo-playground）を使って、次のことをしてください：詳細な写真を選び、パズルのグリッドを設定してください。同梱の例を出発点に使い、実際のアートワークと編集可能な入力を返してください。
次はこれ
columns: 5 → 6、seed: 17 → 11 を使って、見た目が明らかに異なるバージョンを再構築してください。
実際の証明ファイルとアルゴリズム台帳を使って結果を説明してください。
用意しておくもの
- 所有している、または使用を許可された写真
- 希望する行数、列数、難易度
- Python 3.10以上、Pillow、NumPy、プレイ用ブラウザー
似ているスキル
すべて見る →
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ポータブルなオフラインスタジオで、編集可能な荷重と偏光子角度により、光り輝く応力縞のアートワークを作成します。
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ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
よくある質問
ピースは本当に組み合さりますか？
隣接するピースは同じ曲線境界を逆向きに再利用するため、デジタル上のパスは一致します。ピースをターゲットの近くまでドラッグするとスナップし、インターフェースが配置済みピース数を追跡します。
ドラッグせずに遊べますか？
はい。Tabでピースを選択し、矢印キーで移動し、Enterでスナップを試みます。シャッフル、選択をスナップ、完成画像を表示のボタンもあります。
このワークフローに依存するコストは何ですか？
所有する写真は生成呼び出しなしでローカルで組み立て・遊べます。足りないパズル画像は、正確な見積もりと承認を経てPopNowが作成できます。ピース数が多いほどローカルのレンダリングとインタラクションの負荷が増します。
ジグソー写真プレイグラウンド には何が用意されていますか？
ドメインアルゴリズムと不変条件チェック。 実行・編集可能なサンプルパラメータ。 パラメータの意味、証明の解釈、制限事項。
ジグソー写真プレイグラウンド のどの部分に費用がかかる可能性がありますか？
所有する写真は生成呼び出しなしでローカルで組み立て・遊べます。足りないパズル画像は、正確な見積もりと承認を経てPopNowが作成できます。ピース数が多いほどローカルのレンダリングとインタラクションの負荷が増します。 PopNow API キーを使う接続は、API キー方式の MCP 接続も含め、独立した米ドル（USD）建ての API 残高から支払います。OAuth で認可した ChatGPT または Claude 接続では、ウェブサイトのクレジットを使います。この二つの残高は別々です。利用中の接続に表示される見積もりを基準に承認してください。
ジグソー写真プレイグラウンド は、プロンプトや自作スキルとどう違いますか？
パッケージは適合するエッジジオメトリ、ソース画像のクリッピング、実際のパズル状態を提供します。パズルのオーバーレイを描くだけや、無関係なステッカーを自由に動かすだけのものを超えます。