『画像を960x540以下にリサイズできるシンプルWebアプリ』
Resizerは、画像をアップロードすると自動で960×540以内に縮小し、ダウンロードできるWebアプリです。
処理はすべてブラウザ内（クライアントサイド）で完結するため、安全かつ高速に利用できます。
Next.jsとTailwind CSSを用いて実装しました。
- アップロードした画像を自動で960×540以内に縮小
- 縦横比を維持してリサイズ
- ワンクリックでダウンロード
- サーバーに画像を保存せずブラウザ内で処理
授業で提出するスクリーンショットが 960×540以下でないとアップロードできない という制約があり、
画像のサイズ調整に毎回時間がかかってしまっていました。
「もっと手軽にリサイズできたらいいのに」という想いから、このWebアプリを作りました。
課題提出だけでなく、SNS投稿や資料作成でも役立つと思い、シンプルなUIと安全設計にこだわっています。 ぜひ、多くの方に使っていただけると嬉しいです。
- Next.js
- React
- Tailwind CSS
https://resizer-mahirok.vercel.app
このWebアプリは、ChatGPTやGitHub CopilotといったAIツールのサポートを受けながら開発しました。
コードの雛形やエラーの解決にAIを活用しつつ、自分自身で理解・修正を重ねながら完成させています。
A simple web app to resize images to 960×540 or smaller.
Resizer is a web application that automatically resizes uploaded images to fit within 960×540 pixels, while keeping the aspect ratio.
All processing is done client-side in the browser, ensuring both safety and speed.
It was built with Next.js, React, and Tailwind CSS.
- Automatically resize uploaded images to fit within 960×540
- Preserve aspect ratio
- One-click download of resized images
- Safe: no server storage, all processing happens inside the browser
In my university classes, I often had to submit screenshots with a strict requirement:
images had to be 960×540 or smaller.
Resizing them manually every time was frustrating and time-consuming.
That experience motivated me to create Resizer — a tool that instantly resizes images for submission.
This app is not only helpful for school work, but also for preparing images for social media posts and documents.
I focused on keeping the interface simple and the processing safe.
This project was developed with the assistance of AI tools such as ChatGPT and GitHub Copilot.
I used AI for scaffolding and debugging, while making my own adjustments and improvements to complete the project.
Through this process, I deepened my understanding of both coding and web deployment.
- Next.js
- React
- Tailwind CSS
https://resizer-kohl.vercel.app/