使い方（ツールリファレンス）
上部のタブで「🎲 おまかせ生成」と「✏️ 手描き」を切り替えられます。両モードの状態は独立して保持されます。各機能を表でまとめました。
① おまかせ生成モード
点を散らして幾何学模様を自動生成し、クリックで細部を編集するモードです。
| ツール | できること |
|---|---|
| 🎲 ランダム生成 | 幾何学模様を一発作成。何度でも押し直せます |
| 🧱 追加 | クリックした場所に新しいブロックを1つ足します |
| 🔨 割る | クリックしたブロックを2つに分割します（向きはランダム） |
| 🔗 つなげる | 押したままなぞると、触れたブロックがくっついて1つの大きな色面になります |
| 🧹 消す | クリックしたブロックを消し、まわりがその場所を埋めます |
| 🎨 色を変える | クリックで選択色に。押したままなぞると連続して塗れます |
| 💧 スポイト | クリックした場所の色を、選択中の色チップに取り込みます |
| 🪟 ステンドグラス / 💎 結晶 / 🫧 細胞 | スタイル切替。配置はそのまま見た目だけ変化します |
| 🎚 スライダー | セル数・枠の太さ・乱れ・形（縦長⇔横長）を調整。セル数と乱れは作り直さずその場で変化 |
| ▦ 配置 | 点の並びを 正方格子／六角形／レンガ／ランダム から選べます |
② 手描きモード
線で囲った部分がガラス1枚になり、選んだ色で塗るとステンドグラス風の質感がつきます。線で囲って離すと内側が自動で塗られます。
| ツール | できること |
|---|---|
| ✒️ 線を描く | ドラッグで自由な線。囲って始点の近くで離すと、囲んだ内側を自動で塗ります |
| ➖ 直線 | 始点から終点まで直線。「角度」でスナップ(15°)を選ぶと水平・斜めがきれいに引けます |
| ⭕ 円 | ドラッグで円・楕円。「正円」で真円に固定。描いた内側を自動で塗ります |
| 🧽 消しゴム（線をなぞって消す） | なぞった線を消します |
| 🧽 消しゴム（塗りをなぞって消す） | なぞった部分の塗りだけ消します（線は残ります） |
| 🧽 消しゴム（クリックで交点まで消す） | 線をクリックすると交点まで消去。線から離れた色面をクリックすると、その色面だけ消えます |
| 🪣 塗る | 線で囲った内側をタップして選択色で塗ります。囲えていない場所は塗られず案内が出ます |
| 💧 スポイト | タップした場所の色を、選択中の色チップに取り込みます |
| 🖼 下絵 | 画像を薄く表示してなぞれます。濃さ調整・消去可。下絵は表示だけで送信されません |
③ 共通機能
| 機能 | できること |
|---|---|
| 🎨 パレット | 色チップはタップで選択／再タップで色変更。配色テーマ・🎲・＋－で色数も調整できます |
| ✓ 反映 | 色チップの色は選ぶと自動で画面に反映されます。色を追加・削除したときだけ、このボタンで反映してください（おまかせ生成モード） |
| 🖼 背景 | 白／透明／カスタム色。「透明」で保存すると透過PNGになります |
| ✨ 質感 | 影・ガラスの濃淡のON/OFF。「なし」でフラットなベタ塗りになります |
| 💾 保存 | PNGで書き出し。保存サイズは標準(900px)〜最大(3600px・印刷向き)から選べます |
| 📸 スナップショット | 今の状態を履歴に残し、あとでまとめて保存できます（📌キープ／✕削除） |
| ↩ ↪ 戻す・進める | 操作を1手ずつ戻す／進める。手描きの線と自動塗りはまとめて1手で戻ります |
| ⛶ 全画面 | キャンバスを全画面表示にします |
| 非表示 | 右のパネルを隠して、キャンバスを大きく表示します |
ステンドグラス風模様の作り方と使い道
1. きれいに作るためのコツ
スライダーやパターンの使い分けを知っておくと、意図した見た目に近づけやすくなります。
- セル数で密度を決める … セル数を少なく（20〜60程度）すると大きいブロックが並び、ステンドグラスらしい堂々とした印象になります。多く（200以上）するとモザイクのような密な表現になります。「セル数スライダーを動かしても模様が作り直されず色が保持される」ので、作りながら調整できます。
- 枠の太さで印象が変わる … 枠を太くするとステンドグラスの鉛枠のような重厚感が出ます。0にするとセルがぴったり隙間なく並んだモザイク状になります。結晶スタイルは枠の太さが効かない仕様なので、他のスライダーと組み合わせて調整します。
- 配置パターンの使い分け … 「正方格子」は縦横に整然と並ぶ整理された印象です。「六角形」はハニカム状に並び、自然物・幾何学的なデザインに向いています。「レンガ」は横長の目地が特徴的で、建物の壁や煉瓦の質感に近い表現ができます。「ランダム」は不規則で自然石風になります。
- 乱れで有機的な崩しを加える … 「乱れ」を0にするとセルが格子状に並ぶ人工的な印象になります。70〜90程度にすると自然なばらつきが生まれます。「乱れ」は既存の模様を作り直さず散らし直すので、色や形を保ったまま調整できます。
- 配色テーマとランダム生成の組み合わせ … 配色テーマを選んでから「🎲 ランダム生成」を押すと、そのテーマの色で模様が一発作成されます。「🎲（配色を変える）」ボタンで色だけ引き直せるので、形を保ったまま色の当たりを探せます。
2. クリック編集で微調整する
ランダム生成で大まかな形を作ったあと、クリック動作を切り替えて細部を調整できるのがこのツールの特徴です。上のバーにある「クリックで」の操作モードを使い分けましょう。
- 追加（🧱） … クリックした場所に新しいブロックを1つ足します。空白に感じる部分にセルを追加して密度を増やすのに使います。
- 割る（🔨） … クリックしたブロックを2つに分割します。大きすぎるセルを小さく割りたいときに使います。割れ方は毎回ランダムな向きになります。
- つなげる（🔗） … 押したままなぞると触れたブロックが同じグループになり、境界線が消えて1つの大きなブロックとして扱われます。ステンドグラスで大きな色面を作りたいときに便利です。
- 色を変える（🎨） … クリックしたブロックを選択中の色に塗り替えます。押したままなぞると連続して塗れます。
- スポイト（💧） … クリックした場所の色を選択中の色チップに取り込みます。隣に似た色を並べたいときに役立ちます。
なお、色チップの色は選ぶと自動で画面に反映されます。色の数を追加・削除したときだけ画面に反映されないことがあるので、その場合は「パレットの色を画面に反映」ボタンを押してください。このボタンがオレンジ色に点滅しているときは未反映のサインです。
3. 透過PNGの活用と印刷時の注意
背景を「透明」にして保存すると、透過PNGで書き出せます。ステンドグラス・結晶・細胞のいずれのスタイルも、透過にしてもセルは不透明で残ります。
印刷で使う場合は次の点に注意してください。
- 書き出しサイズを大きく選ぶ … 保存欄のサイズ選択で「大（1800px）」「特大（2700px）」「最大（3600px・印刷向き）」を選んでください。小サイズのまま拡大して入稿すると、印刷がぼやけます。グッズ入稿では「最大」を選んで使用サイズを確認するのが安全です。
- RGB→CMYKの色変化に注意する … ブラウザで見える色（RGB）と印刷後の色（CMYK変換後）は異なります。ビビッドな鮮やかな色ほど印刷でくすみやすいです。入稿前にテスト印刷で実際の色を確認してから本注文することをおすすめします。
- 塗り足しを確認する … 印刷会社のテンプレートには仕上がり線の外側に塗り足しが必要な場合があります。画像をテンプレートに当てはめ、端まで模様が届いているか確認してから入稿してください。
4. 商用利用と著作権について
このツールで生成した画像は商用・非商用を問わず自由にご利用いただけます。同人誌・グッズ・SNS素材・販売用イラスト等への使用にクレジット表記は不要です。
このツールはすべての処理をブラウザ内で完結しています。生成した画像データはどのサーバーにも送信されず、あなたのデバイスの外に出ることはありません。
よくある質問
Q. 生成した画像は商用利用できますか？
A. このツールで作った画像はご自身の作品・グッズ・同人誌などに自由にご利用いただけます（クレジット不要）。
Q. 画像はサーバーに送られますか？
A. いいえ。すべてあなたのブラウザ内で処理され、どこにもアップロードされません。
Q. スマホでも使えますか？
A. はい。タップでセルを追加できます。
Q. 透過（背景透明）で保存できますか？
A. はい。背景を「透明」にして保存すると、透過PNGで書き出せます。