KissHag 説明書 🪽

体格差・座り方・手繋ぎ・キス・表情・第三者視線をWebGLの簡易3Dで組み、画像生成AIへ渡すための「参照PNG」と「プロンプト」を作る道具です。

アプリへ戻る 最短手順 PWA化 生成のコツ 困った時

最短手順

キャラA/Bを決める。
名前、身長、体格、肩幅、腕の長さを入れます。必要なら頭サイズ・脚の長さ・腰幅も調整します。
構図・接触を選ぶ。
簡単ポーズプリセットから「横座り手繋ぎキス」「横並びキス」「手にキス」などを選ぶと早いです。
表情と視線を入れる。
トロ目は「閉じ目」ではなく、半分だけ開いたとろん目として出力されます。支配笑い、頬染め、第三者視線もここで指定します。
背景refを読み込む。
背景画像を読み込み、透明度や位置を調整します。PNGに含めるかどうかも選べます。
AI参照用PNGを保存。
AI参照用PNG保存（正方形・全身固定） が基本です。スマホ縦長の影響を受けにくい参照画像になります。
プロンプトをコピーして画像生成へ。
キャラ画像、背景ref、KissHagの参照PNG、コピーしたプロンプトをまとめて入れます。

成功例

左はWebGL参照と送信例、右は生成結果の例です。棒人形は絵柄ではなく、体格差・接触点・座り方・手の位置を伝える設計図として使います。

送信例
キャラ資料＋背景＋KissHag参照PNG＋プロンプトをまとめて送る
KissHag参照PNG
横座り手繋ぎキスの参照PNG
生成結果
ソファ、横座り、手繋ぎ、キスが反映された例
第三者視線の生成例
第三者が背景で見ている構図の例

主な項目

UI密度

上部の かんたん / 通常 / 全部 で表示量を切り替えます。迷ったら「基本だけ」で羽根を畳みます。

ポーズプリセット

ハグ前/後ろ、横座り手繋ぎ、横座りキス、横並びキス、手にキスなどを選べます。

表情

半目、トロ目、閉じかけ、驚き、支配笑い、頬染めを指定できます。トロ目は not fully closed を含む強めの文言で出力されます。

第三者

指定なし/キャラ指定、人数、近い/遠い/隠れて見てる、嫉妬/無表情監視/驚き見守りを指定できます。

背景ref

画像を読み込み、透明度・表示方法・位置を調整できます。PNGに含めるON/OFFもあります。

プリセット保存

ブラウザ内に設定を保存できます。JSONコピーで別環境へ持ち運べます。背景画像ファイル本体は保存されません。

画像生成で崩れにくくするコツ

狙い設定・文言
身長差を守る身長差補正を選びつつ、プロンプトの Do not equalize their heights を残します。
トロ目を閉じ目にされない「A/Bトロ目」を使います。プロンプトに not fully closed と faintly visible gaze が入ります。
手繋ぎを守る手繋ぎの形を指定し、WebGL上で手が接続していることを確認します。
第三者を主役にしない第三者ON時は「背景の観察者、主役ではない」という文言が出ます。人数を増やしすぎると主役がぶれます。
背景を使う背景refを読み込み、PNGにも含めるか、別添付として渡します。背景を強く守りたい時は説明文に場所名も足します。

困った時

症状対処
カメラが勝手に動く設定パネルを開いている間は自動でカメラ操作をロックします。さらに止めたい時は、カメラ欄の カメラドラッグをロック をONにしてください。ドラッグ中に指が外れても止まるよう、pointer cancel / blurも拾う修正済みです。
メニューが勝手に揺れる / 動くスマホのブラウザバー変化や慣性スクロールで揺れやすかったため、アプリ高さを安定化し、設定パネル側は縦スクロールだけを受けるようにしました。PWAでホーム画面から開くとさらに安定します。
見出しが勝手に閉じる見出しの折りたたみは、スクロール移動が一定以上あった時は反応しないようにしました。軽くタップした時だけ開閉します。
更新したのに古い版が出るService Workerのキャッシュが残っている可能性があります。この版では CACHE_NAME を更新済みです。サーバーへ再アップロード後、ブラウザの再読み込みかPWAの再起動を試してください。

PWAとして使う

サーバーへアップするだけでPWA対応になります。
この kisshag フォルダをそのままサーバーに置いて、https://あなたのドメイン/kisshag/ を開いてください。

ブラウザの「ホーム画面に追加」またはアプリ内の PWAインストール ボタンから追加できます。PWAはHTTPS、またはlocalhostで動作します。通常の file:// 直開きではService Workerが使えません。スマホでメニューやカメラ操作を安定させたい時は、PWAとしてホーム画面から開くのがおすすめです。

更新したのに古い表示が残る時
sw.js の CACHE_NAME を変えて再アップロードしてください。例：kisshag-pwa-v2。

おすすめ送信用テンプレ

画像生成に送る時は、プロンプト欄の上に短い日本語メモを足すと、キャラ指定が迷子になりにくいです。

キャラA＝スクーダ
キャラB＝リコル
第三者＝カミル
背景＝深層図書館イメージ新規

添付のWebGL参照PNGは体格差・接触点・座り方・カメラ構図の設計図として厳密に参照してください。

KissHag is a local-first WebGL2 pose reference tool. No external library is required.

スマホでカメラがじわじわ動く時

距離変更は基本的に「カメラ」欄の距離スライダーを使ってください。トラックパッドやスマホの慣性入力で勝手にズームする場合があるため、通常は「ホイール/ピンチズームを有効」をOFFのままにしてあります。

左上の「☰ 設定」が反応しない時は、ページを一度再読み込みしてください。PWA版で古い動きが残る時は、サーバー上の kisshag フォルダを上書きしたあと、ブラウザで再読み込みすると新しいService Workerが入ります。

スマホでカメラとメニューが暴れる時

v10では、カメラ距離は距離スライダー専用に固定しました。ホイール、トラックパッド、ピンチ操作では距離が変わりません。

  1. 左上の ☰ 設定 でメニューを開きます。
  2. メニュー内の × 設定を閉じる、または暗い背景を押すと閉じます。
  3. メニューを閉じた状態でキャンバスをドラッグすると、カメラをぐるぐる回せます。
  4. 距離を変えたい時は、設定内の カメラ → 距離 スライダーを使います。

勝手に寄っていくように見える時は、ブラウザやPWAの古いキャッシュが残っている可能性があります。サーバーへ上書き後に再読み込み、またはPWAを一度閉じて開き直してください。