画像を切り抜くだけのツールをつくりました。
Image Crop Studioといいます。
できるのはトリミングだけです。
その代わり、1画面で完結するようにしました。
無料で、登録もいりません。
選んだ画像はサーバーに送らず、ブラウザの中だけで処理しています。
制作中のトリミングを、もっと速くしたかった
Web制作をしていると、画像を切り抜いたりサムネイルをつくったりする場面がよくあります。
トリミングできるツール自体はたくさんあります。
ただ、機能が多い分だけ操作に手間がかかることがありました。
やりたいのは切り抜くことだけなのに、そこにたどり着くまでに何回かクリックしている、という状態です。
作業の合間に何度も発生するので、その数秒が積み重なると地味に気になります。
切り抜くだけをもっと速く終えたくて、自分でつくることにしました。
よく使うサムネイルのサイズは、プリセットから1クリックで
投稿するサービスごとに、画像の適したサイズは違います。
毎回サイズを調べたり入力したりするのが手間だったので、よく使いそうなサイズをプリセットとして入れました。
※各サービスの推奨サイズは変わることがあります。
入れているのは、noteの見出し画像、WordPressのサムネイル、YouTubeのサムネイル、Xの投稿画像、Instagramのフィードなどです。
選ぶと、そのサイズの切り抜き範囲がすぐ出ます。
あとは位置を合わせて書き出すだけです。
実際の画面はこちらから見られます。
速さとシンプルさに絞りました
コンセプトは目的のサイズへ最短でたどり着けることです。
そのために機能を絞りました。
フィルターも文字入れも入れていません。
1画面で操作が終わるようにして、画面を行き来しなくていいようにしています。
機能を足すほど便利になるとは限らないと思っています。切り抜くだけなら、切り抜くだけの画面がいちばん速いです。
使う場面が自分の作業の中にあるので、つくったあとも毎回自分で使いながら確認できています。
画像はブラウザの中だけで処理しています
アップロードした画像は、サーバーには送っていません。
選んだ画像をその場でブラウザが読み込んで、切り抜いて、書き出して終わりです。
私のところに画像が届くことはありません。
仕事で扱う画像や、人が写っている写真を切り抜くこともあるので、ここは自分が使う上でも安心できる作りにしておきたかった部分です。
使った技術と構成
開発にはClaude Codeを使いました。
中身はHTML / CSS / JavaScriptです。
コードの管理はGitHubで行っています。
フレームワークは使っていません。
やることが切り抜きに絞られていたので、そのぶん構成もシンプルなままにしました。
まとめ
Image Crop Studioは、自分のWeb制作の作業を速くしたくてつくったツールです。
できることはトリミングだけですが、そのぶん最短で終わるようにしました。
noteやYouTubeなど、よく使うサイズはプリセットから選べます。
私はブログのサムネイルをつくるときに使っています。