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