写真を並べるだけで、ビフォーアフターの1枚画像がつくれるツールをつくりました。
Photo Timelineといいます。
無料で、会員登録もいりません。
ブラウザで開いてすぐ使えるので、スマホからでも大丈夫です。
ここでは、どうしてこれをつくろうと思ったのかと、つくるときに考えたことを書いていきます。
つくったきっかけは、自分の美容記録でした
私は美容ケアの変化が一目でわかるように、before・afterのコラージュ画像を自分でつくっていました。
そのときに使っていたのがibisPaintです。（スマホ）
お絵かき用のアプリで、写真を2枚並べたり、文字を入れたりするのに一手間かかりました。
しかも、思ったように綺麗に仕上げられませんでした。
有名なCanvaでも作っていました。これも正直時間がかかります。
毎回そこでストレスを感じていたので、ビフォーアフターの写真を自分で簡単につくれるものがほしいと思ったのが、つくり始めたきっかけです。
つくっていくうちに、これは美容だけの話ではないなと思うようになりました。
筋トレの成果も、子どもの成長も、同じように「前と今」を並べたくなるものです。
なので途中から、変化を手軽に写真で残せるツールという方向でまとめることにしました。
どんなことができるのか
やることは3つだけです。
写真を選んで、並べて、ダウンロードする。
それだけで、時系列に並んだ1枚の画像ができあがります。
使い方
- スライダーでレイアウト枚数（1〜10枚）を選ぶ
- 写真をドラッグ&ドロップ。サムネイルをドラッグで並び替え
- タイトル・日付・経過ラベルを入力（日付はON/OFF可）
- 枠あり／枠なしを切り替え。枠なしは写真のみ全面表示
- 出力サイズ・形式を選んで保存・ダウンロード
写真はドラッグ＆ドロップで入れ替えられます
順番を間違えても、掴んで動かすだけで並び替えができます。
パソコンからでもスマホからでも操作できるようにしました。
日付やラベルを写真ごとに入れられます
「1ヶ月目」「3ヶ月目」のような文字を、写真の上に入れられるようにしています。
記録として残すときは、この日付があるかないかで後から見返したときの意味がかなり変わります。
オリジナルの画像が作れる
選択肢を多くしてオリジナルの画像が作れるようにしました！
今まで掲載していた画像は、ビフォーアフターの文字入り、2写真、横並び、枠あり、出力サイズがnoteサイズです。
選択できるのが
・枚数
・横並び縦並び
・ビフォーアフターの記載有無
・写真の並び順
・タイトル入力（枠ありのみ）
・写真ごとの日付、経過ラベル、日付の表示有無
・日付の背景色
・テキストカラー
・背景色（枠ありのみ）
・枠の有無
・出力設定（サイズ・ファイル形式）
Instagram、note（横長）、ブログ、縦長4：5
画像の大きさやレイアウトに合わせて色々選択できます！
👇枠なし
枠なし日付色変更、経過ラベルなし
保存はそのままダウンロードです
できあがった画像は、ボタンひとつで端末に保存できます。
SNSに載せるにしても、自分のフォルダにしまっておくにしても、1枚の画像になっていると扱いやすいです。
実際に触ってみるのがいちばん早いと思うので、置いておきます。
使った技術と構成
フロントはHTML / CSS / JavaScriptです。
画像を1枚に合成している部分はCanvasを使っています。
選んだ写真をCanvas上に描画して、そこに日付やラベルの文字を重ね、最終的に1枚の画像として書き出す流れです。
開発環境はDockerで用意して、コードの管理はGitHubで行いました。
公開はFTPでサーバーにアップロードしています。
フレームワークは使っていません。
やりたいことが「画像を並べて書き出す」に集中していたので、素のJavaScriptとCanvasで足りると判断しました。
大変だった点
簡単なグラフを書くくらいしかCanvasを使ったことがなかったので苦労しました。
プレビューと実際に出力される画像が一致しないのです。
AIに聞きながら試行錯誤しました。
Canvasについては別の記事にしているのでご参照ください。
つくるときに考えた2つのこと
写真を外に出さない作りにしました
このツールは、使う人が自分の写真を一時的にアップロードすることになります。
なので個人情報の取り扱いは、最初から気をつけようと思っていました。
写真は個人情報にあたります。
顔が写っていなくても、体の写真や部屋の背景から個人が特定される可能性はあります。
そこで、サーバー側のデータベースには一切保存せず、ブラウザの中だけで処理が完結する作りにしました。
選んだ写真はその場でブラウザが読み込んで、そのまま合成して、ダウンロードして終わりです。
私のところに写真が届くことはありません。
写真をサーバーに送らない設計にしたので、使い終わってページを閉じれば、選んだ写真はどこにも残りません。
仕上がりは他の事例を見てから決めました
自分の感覚だけでつくると、自分にしか使えないものになりそうだと思いました。
なので、他の人がつくっているビフォーアフター画像を一通り見るところから始めました。
見ていたのは、文字をどこに入れているか、文字の色は何色か、写真は何枚並べているか、といった部分です。
そこである程度パターンを掴んでから、レイアウトの形に落とし込みました。
手を動かす前にこの時間をとったことで、後から作り直す回数は少なく済んだと思います。
まとめ
Photo Timelineは、自分が美容ケアの記録で困っていたところから始まったツールです。
お絵かきアプリで毎回コラージュをつくるのが手間だったので、写真を選んで並べるだけで終わるものをつくりました。
写真をサーバーに保存しない作りにしたのは、個人情報を預かりたくなかったからです。
ダイエットの記録でも、子どもの成長でも、推し活の記録でも、変化を並べたい場面なら同じように使えると思います。
私は今も自分の美容記録に使っています。
同じような画像編集アプリで、簡単にトリミングできるアプリも作ったので、興味ある方は試してみてください！
こちらも完全無料、登録不要です！！！
