WEBアプリ
コラージュアプリ
- TARGET
ターゲット - ・ビフォーアフターや変化の記録を写真で手軽に残したい人 ・SNS・ブログ等で比較画像を公開したい人 ・美容の記録のほか、筋トレの成果や子どもの成長の記録にも向く
- PURPOSE
目的 - ・写真をアップして、変化が分かる形に並べたりコラージュにしたりできるアプリ ・ビフォーアフターやコラージュを手軽に写真で残せる
- DURATION
製作期間 - 1週間
- TECH
使用技術 - HTML/CSS / JavaScript / Docker / GitHub
- DESIGN
デザインの意図 - コラージュやビフォーアフターの仕上がりの見せ方にこだわり、他の事例を見ながら文字の入れ方・文字の色・写真の枚数を検討した。記録として後から見返したときに分かりやすい形を意識している。 デスクトップでは右にプレビュー画面、左に操作画面を設置して、実際にどう出力されるのか見ながら操作できるようにした。 画像をただコラージュするアプリはみたことがある。日付や矢印を後から別の画像編集サイトで追加しなくてはいけないことになる。 画像の枚数、枠の有無、テキストの有無、出力サイズなどを選択できるようにして、作れる画像の範囲を大きくした。
Episode
制作エピソード
制作に関するエピソード
「美容記録を残したかったのがきっかけ」
ChatGPT→Claude Design を使ってデザインの作成、Claude Code を使ってコーディングを行いました。
私は美容ケアの変化が一瞬でわかるように、コラージュ画像を作ったりしていました。
その際、画像編集サイトを使用していましたが（ibisPaint）編集に一手間かかっていたのと綺麗にできなかったのがストレスでした。
なのでビフォーアフターの写真を自分で簡単に作りたかったのが、作り始めたきっかけです。
作っていくうちに、美容だけでなく筋トレの成果や子どもの成長の記録にも使えると考え、そうした変化を手軽に写真で残せる方向でまとめました。
「写真を外に出さない作りにした」
写真を一時アップロードするため、ユーザーの個人情報の取り扱いに注意することを念頭におきました。
写真は個人情報にあたるので、サーバー側のデータベースには保存せず、ブラウザ上だけで処理が完結するようにしました。
「仕上がりは他の事例を見て作り込んだ」
仕上がりのイメージを固めるために、他の人が作っているビフォーアフター画像を一通り見て、文字の入れ方・文字の色・写真の枚数といった要素を検討してから形に落としこみました。