ポン出しサムネメーカー

禁止事項

• 本アプリケーションで利用させていただいている素材自体の抜き出し（フォント・背景画像など。）、それ自体の素材としての再配布
• ロゴの商標登録（フォントの規約でNGされていることが多いため。）

フォントについて

導入したフォントは、Googleフォントか、あるいは商用利用可能で、かつ表現内容に指定のないものを選んでいます。必要があれば、各フォントの規約も読みに行って各自ご確認ください。（クレジットをコピー、から使用したフォントを確認することができます。）

その他

当ツールで作ったものは、各人の責任でお使いください。

制作：栖王ヴァルハラ３丁目　頻子

企画協力・立案・デバッグ・画像提供：ほーむorあうぇい　あきら

差し入れ欄

当アプリは個人でメンテナンス・開発しています。アップデートは気まぐれです。まあ、気が向いたらハーゲンダッツをおごってください。

ギフティーへのリンク

シェア

THANK YOU

基本操作

• レイヤー選択: キャンバスをクリックしてレイヤーを選択
• プレビュー: メイン画像(560×420px)とサムネイル(300×300px)を同時生成
• リアルタイム更新: 設定変更時に自動で画像を更新

レイヤー管理

• レイヤー追加: 右下の「+テキスト」「+画像」ボタンで追加
• レイヤー順序: ドラッグ&ドロップで順序変更（上が前面）
• 表示切替: 目のアイコンで表示/非表示切替
• 削除: ゴミ箱アイコンでレイヤー削除
• 自動選択: 新しいレイヤーは自動的に選択・編集状態に

テキストレイヤー

• テキスト編集: レイヤー選択時に右側パネルで編集
• フォント: Google Fonts含む日本語・英語フォント対応（フォントによって太字自動適用）
• エフェクト: 影、アウトライン、グロー、エンボス
• 配置: 左寄せ、中央寄せ、右寄せ（左右寄せ時は背景とのマージン自動追加）
• 下線・背景: 下線エフェクト、背景ボックス（透明度・ぼかし調整可能）
• 改行対応: テキスト内での改行サポート

画像レイヤー

• 画像追加: ファイル選択またはドラッグ&ドロップ
• 位置調整: X/Y座標で精密配置
• サイズ調整: スケール調整でサイズ変更
• 透明度: 透明度調整
• エフェクト: 影、光彩効果
• 縁取り: 画像の縁取り表示

フレーム機能

• フレーム追加: 多種類のフレームスタイル
• 基本フレーム: シンプル、太線、二重線、点線、角丸、カットコーナー
• 装飾フレーム: 影付き、グラデーション、映画風、ウィンドウ風、ポラロイド風
• 特殊フレーム: 破れた紙、ブラシストローク、ネオングロー、フィルムストリップ
• 調整: フレーム幅、色、位置調整

背景設定

• パターン: 多種類の背景パターン（ソリッド、ドット、ストライプ、グラデーション、チェッカー、ウェーブ、円、グリッド、六角形、ジグザグ、ノイズ、星、ダイヤモンド、スケール、スパイラル、ハート、スラッシュなど）
• カラー: メインカラー・サブカラーで2色指定
• サイズ調整: パターンサイズ調整
• オフセット: パターン位置調整
• 画像背景: プリセット画像・カスタム画像のアップロード対応
• 背景エフェクト: ぼかし、明度、コントラスト、セピア、グレースケール、色相回転

カラーパレット

• クリック: メインカラーを設定
• 右クリック: サブカラーを設定
• Shift+クリック: フレーム色を設定
• テーマ切替: ノーマル、パステル、ビビッド、モノクロ、アース

ランダム生成機能

• 統合ランダム: テキスト、背景、フレーム、画像を一括ランダム生成
• フォント重み: フォントに応じて適切な太さを自動選択
• 英語判定: 英語のみテキストには英語フォントを優先適用
• 背景画像: プリセット画像からランダム選択（抽選式）

ショートカットキー

• Ctrl+Z: 元に戻す（アンドゥ）
• Ctrl+Y / Ctrl+Shift+Z: やり直し（リドゥ）
• Ctrl+S: 画像保存（ブラウザの保存機能）

その他の機能

• アスペクト比切替: 4:3、16:9、1:1の比率対応
• DLsite対応: DLsite用サイズでの一括ダウンロード
• クリア機能: 全データ初期化
• SNSシェア: X・Blueskyでシェア
• クレジット表示: 使用フォント・素材のクレジット情報を自動生成・コピー

使い方のコツ

• レイヤー順序: フレーム → 画像 → テキストの順で描画（レイヤーリストは上が前面）
• コントラスト: 背景と文字の色を対比させて見やすく
• アンドゥ活用: 最大20回の履歴保存、気軽に試行錯誤可能
• バッチ処理: ランダム生成などの一括操作は重複状態を自動スキップ

技術仕様

• 出力サイズ: メイン画像とサムネイルを同時生成
• 対応ファイル: PNG, JPG, GIF, WebP（画像アップロード）
• 状態管理: アンドゥ・リドゥ履歴（重複状態は自動除外）
• モジュール構成: ES6モジュール（PatternGenerator, CanvasRenderer, EventHandler, StateAccess, ColorUtils）
• パフォーマンス: DOM要素キャッシュシステム、描画最適化