かみあそび — 現在の仕様
これは何か
HTMLファイル1枚（284KB）だけで動く、ペーパーコラージュを作るアプリです。インストール不要、アカウント不要。ダブルクリックでブラウザが開けばそれで動きます。
素材はすべてその場で描いて作っています。 画像ファイルを1枚も同梱していません。だから軽く、色も文字も自由に変えられます。
おすすめポイント
1. 素材が「作れる」— 選ぶだけではない
普通の素材集は「用意された絵を貼る」だけですが、これは切手なら国・図柄・枠・かたち・色・文字を全部変えられます。組み合わせは数千通りになります。
切手の例：10か国 × 図柄10種 × 枠5種 × かたち3種 × 色 × 文字
2. 本物の作りを調べて再現している
見た目を似せるのではなく、なぜそう見えるのかを調べて構造から作っています。
- 切手 — 旋盤で描く「エンジンターン（ギヨシェ）」の地紋。偽造防止のこの模様がないと途端に安っぽくなる
- コーヒーのシミ — 乾くとき縁のほうが蒸発が速く、毛細管流で色素が縁に運ばれる（コーヒーリング効果）。だから内側は薄く縁だけ濃い
- 光もれ — 色を乗せるのではなく「フィルムがかぶる」現象。暗いところでいちばん目立ち、明るいところはほぼ変わらない
- フィルムの縁 — メーカー名・コマ番号・DXバーコード。文字は潜像で焼かれるので橙色
- フィルター — 「黒が沈みきらない」「明部がなだらかに頭打ち」「暗部と明部で色の転び方が違う」の3点で組んでいる
3. こだわらない人にも、こだわる人にも
写真を入れると自動で自然なフィルム加工がかかります（強すぎる効果や汚れは自動では付きません）。そのままでも成立し、気に入らなければ「🎲 加工しなおす」「🚫 加工をぜんぶ消す」がワンクリック。深掘りしたい人は工房で30以上のつまみを触れます。
素材（11カテゴリ）
| 組 | 中身 |
|---|---|
| 紙もの | だいし(18種) / 切手(10か国) / ラベル(12種) / チケット(10種) / 郵便・図書(5種) / 紙片(5種) |
| はんこ | スタンプ(8種) / 消印・封蝋(3種) |
| かざり | マステ(7種) / リボン(4種) / 幾何学もよう(8種) |
だいしは柄15種 × 質感9種（紙のせんい・ぬの・デニム・コルク・フェルト・木・こくばん…）。
写真工房
- スタイル10種 — ポラロイド / チェキ / 35ミリ / スライド / トイカメラ / 昭和のプリント / 喫茶店 / 夜のネオン / モノクロ / 切手ふう。色もふちもまとめて決まる
- フィルター36種 — フィルム15 / トイカメラ11 / インスタント2 / モノクロ5 / アート3
- ふち10種、種類に合った色が自動で付く（自分で選んだ色は守られる）
- 切りぬき6通り — なぞる / 点をつなぐ / 背景をなぞる / のこす所 / 消す筆 / もどす筆。写真の外にも点が置けます
- 周辺減光・粒子・光もれ7種・にじみ・焼け・キズ・汚れ6項目
その他
- ペン5種 — えんぴつ / マーカー / ふで / クレヨン / 水彩。ふでと水彩は動かす速さで太さが変わります
- もじ — 書体7種、大きさ・色・回転
- おまかせレイアウト — 貼ったものをいい感じに並べ替え、案を出し直せる
- 範囲選択 — 台紙をドラッグでまとめて選択・移動・削除
- 保存 — 作品ファイル（あとで続きから編集）と画像（PNG）
- もどす／すすむ — 50手（写真がある時は24手）
動作環境
- 1ファイル完結
- パソコン / タブレット / スマホ対応（画面幅で自動的に並びが変わります）
- 確認済み：390×844 / 700×1011 / 820×1180 / 1440×900 / 1920×1080
作った感想と説明
紙を切ったり貼ったりして作るいわゆる「ペーパーコラージュ」をウェブで出来るといいなと思って、ガチでウェブアプリ作ってみてる。
レスポンシブデザインでスマホにも対応したいと思ってる。
Claudeでゼロから開発して何をどこまで出来るかという感覚を掴むためでもある。
わざわざペーパーコラージュと呼んでいるのはスマホアプリとかでコラージュで検索すると写真をグリッドに沿って配置するよくあるあれしか出てこないから。
俺がやりたいのはこっちのコラージュなのに。。
最初に作ったやつと比べて、かなり時間をかけてClaudeとやり取りし結果、超進化した。笑
https://naokiti3.com/paper-collage2.0.html
ver.1.0の時に素材がチープすぎると思ったので、写真を使わずにどこまで出来るかやってみてる。
AIで画像を作って追加するのは多分簡単なんだけど、写真を使わない素材のメリットとしては編集できるということ。
素材を編集できる画面を作り仮に素材工房と呼んでる。
台紙から編集できる。
デフォルトでクラフト紙っぽいテイストのものを配置。
スタイルで簡単に複数の組み合わせのテンプレートを使えるようにした。
柄、髪の色、紙の古さ、紙の汚し具合など変更できるようにしてる。
これだけ見ても、本当にコラージュが好きなことが分かってもらえると思う。笑
ただ、汚し機能は写真を使っていないので改善の余地あり。
自分で選ぶのがめんどくさいけど人と被りたくない人用に、素材工房などでランダムで選べる箇所を結構用意してる。
素材工房で気に入ってるポイントは、オリジナルのマスキングテープを作れること。
色、柄、幅、長さ、霧靴、透過度などを自分で決められる。
オリジナルの写真を使えるようにしてもいいかもな。
そしてこの切手を作れる機能もおすすめ。
文字や額面などを変更できるし、写真も使える。
文字と額面を変更し手持ちの写真を使った。
福山駅前にあったミノルムセンの切手にした。
アルファベットだけじゃなく日本語、漢字も使える。
写真に切手っぽい加工をつけれるので、写真だけ浮くみたいなこともない。
今やってて思ったけど、細かい写真の位置の調整がまだ出来なかった。笑
こういう気付きを自分で調整したり機能追加できるの嬉しい。
紙ものを文字変更できる形で実装はコラージュ好きには嬉しいと思う。
そのまま使ってもそれっぽいしね。
アラベスク調の柄とか入れたかったんだけど、現在の開発環境ではひどいやつしか出力されなくてClaudeと喧嘩した。笑
今回は（今のとこ）素材に写真を使わないようにしてるので、幾何学模様は美しいからこれをスタンプのように使えるようにした。
文字入力もできるよ。
これ系のでストレスが溜まるのが、日本語フォントに対応してないやつ。あれ本当嫌よな。笑
おしゃれなフォント色々あるのに日本語打ったら表示されないか明朝体かゴシック体に変換されるっていう。
漢字にも対応したフォントを選べるのはポイント高いんよ。
ペンで落書きすることもできる。
太さと色変更も可能。
写真は追加するタイミングで自動でいい感じに薄くレトロな加工をするようにした。もちろん消すことも可能。
ワンクリックでランダム加工をこの段階でできるようにしてる。
手軽にいい感じにしたいから。
写真を編集する場所も専用で作ってる。
スタイルでワンクリックでフレームとフィルターなどの組み合わせをすぐ使える。
その上で、フレームもフィルターもそれぞれ変更・調整できるようにした。
ここでもランダムで加工してもらえる。
スタイルも含めおまかせにすると、面白い組み合わせになるかも。
フレームの色と柄を変更できるようにしてるので、フィルムみたいなフレームなのにピンクのドット柄みたいなこともできる。笑
コラージュの素材として写真を使いたい場合、直線で切り抜くのが好きなのでその機能も実装。
フリーハンドで切るのもいいね。それもできる。
自動で切り抜くのは現在中途半端。今後に期待。
レイヤーを一覧で見て調整することもできる。
ドラッグアンドドロップ対応。
全体的によく使うショートカットは対応してる。
編集画面でコマンド＋マウスホイールでズームとか、選択してデリートキーで削除など。
素材に影がないとのっぺりするので、全体にほどよく影をつけれるようにした。
作り込めば作り込むほど、デバッグ（動作確認）が必要になってきた。
指示したはずのことがいつの間にか解除されてたり。
コードが複雑になっていく中で、他のコードが邪魔したりしてるみたい。
一応説明してくれるんよ。
あんまり分からんから、説明はざっくりでいいよと伝えた。笑
平日はあまりいじれないので、切りが良い今のタイミングで公開しとく。
コラージュ好きって世の中にどれくらいいるんだろ。
まず、本当に好きなものを自分が納得する形で作りたいと思ってやってみてる。
https://naokiti3.com/paper-collage2.0.html
