45種類の画像・PDFツールをブラウザだけで使える「Filewisp」を作った
はじめに
開発をしていると、コードを書く以外にも地味なファイル作業がよく発生します。
たとえば、以下のような作業です。
| 場面 | よくある作業 |
|---|---|
| READMEを書く | スクリーンショットを圧縮する |
| QiitaやZennを書く | 画像サイズを調整する |
| 仕様書を共有する | PDFを画像に変換する |
| 資料を提出する | 複数画像をPDFにまとめる |
| Webで画像を使う | PNG/JPG/WebPを変換する |
一つひとつは小さい作業ですが、毎回画像編集アプリを起動したり、オンラインツールを探したりするのが少し面倒でした。
そこで、画像変換・画像圧縮・PDF変換など、よく使うファイル作業をまとめたWebツール集 Filewisp を作りました。
現在は、画像変換・画像加工・PDF系ツールを中心に 45種類のツール を公開しています。
作ったもの
Filewisp は、画像変換・画像圧縮・PDF変換などをブラウザ上で行えるWebツールです。
主な特徴は以下です。
| 項目 | 内容 |
|---|---|
| サービス名 | Filewisp |
| URL | https://ai-image-tools.com/ |
| ツール数 | 45ツール |
| 主な用途 | 画像変換、画像圧縮、画像加工、PDF変換、PDF結合など |
| 対象ユーザー | エンジニア、ブロガー、資料作成者、一般ユーザー |
| 利用方法 | ブラウザでアクセスしてファイルを選ぶだけ |
| 登録 | 不要 |
| インストール | 不要 |
なぜ作ったか
個人開発や技術記事の作成中に、画像やPDFを少しだけ調整したい場面がよくあります。
たとえば、Qiitaの記事にスクリーンショットを貼るとき、画像が大きすぎると読み込みが重くなります。
また、GitHubのREADMEに載せる画像を軽くしたいときや、PDF資料の一部を画像として使いたいときもあります。
そのたびに、以下のような小さなストレスがありました。
| 課題 | 面倒なこと |
|---|---|
| 画像を軽くしたい | 画像編集ソフトを開く必要がある |
| 形式を変換したい | 毎回変換サイトを探す |
| PDFを画像化したい | OS標準機能だけだとやりにくい |
| 複数画像をPDF化したい | 専用アプリが必要になる |
| 仕事中に使いたい | ファイルを外部に送るのが少し不安 |
そこで、よく使う画像・PDF作業をまとめて、ブラウザだけで完結できるようにしました。
エンジニアが使いそうなユースケース
Filewispは一般ユーザー向けでもありますが、特にエンジニアが日常的に使う場面を意識しています。
README用画像の圧縮
GitHubのREADMEにスクリーンショットを貼るとき、画像が重いと表示が遅くなります。
そのため、画像圧縮ツールで軽くしてからREADMEに貼るような使い方を想定しています。
| 変換前 | 変換後 |
|---|---|
| 容量が大きいスクリーンショット | 軽量化した画像 |
| そのまま貼ると重い画像 | READMEに貼りやすい画像 |
| 表示に時間がかかる画像 | ページ表示が軽くなる画像 |
READMEはポートフォリオや個人開発の紹介でもよく使うので、画像を軽くしておくと見やすくなります。
QiitaやZennの記事用スクショの調整
技術記事を書くとき、スクリーンショットをそのまま貼ると横幅が大きすぎたり、不要な余白が入ったりすることがあります。
その場合は、以下のような流れで使えます。
| 手順 | 内容 |
|---|---|
| 1 | スクリーンショットを撮る |
| 2 | Filewispでリサイズする |
| 3 | 必要なら圧縮する |
| 4 | QiitaやZennにアップロードする |
記事作成中に画像編集アプリを開かずに済むので、作業の流れを止めにくいです。
PDFを画像として共有する
仕様書や資料の一部をチャットや記事に貼りたいとき、PDFのままだと扱いにくいことがあります。
その場合は、PDFをJPGやPNGに変換して画像として使えます。
| 変換前 | 変換後 | 使い道 |
|---|---|---|
| PDF資料 | JPG画像 | チャット共有 |
| PDF資料 | PNG画像 | 記事やREADMEに掲載 |
| 複数ページPDF | ページごとの画像 | 必要なページだけ共有 |
| 提出用PDF | 軽量化PDF | アップロード制限対策 |
現在使える45種類のツール
Filewispでは、画像変換・画像加工・PDF系のツールを中心に、現在 45種類のツール を公開しています。
大きく分けると、以下の3カテゴリです。
| カテゴリ | 内容 |
|---|---|
| 画像変換 | JPG、PNG、WebP、HEIC、AVIFなどの形式変換 |
| 画像加工 | 圧縮、リサイズ、切り抜き、回転、透かし追加など |
| PDFツール | PDF変換、結合、分割、圧縮、画像化など |
画像変換系ツール
画像変換系では、よく使う画像形式を中心に変換できるようにしています。
| 機能 | 用途 |
|---|---|
| JPG → PNG | 編集しやすい形式にしたいとき |
| PNG → JPG | ファイルサイズを軽くしたいとき |
| WebP → JPG | WebP非対応の環境向けに変換したいとき |
| JPG → WebP | Web公開用に軽くしたいとき |
| PNG → WebP | 透過画像をWeb向けに軽くしたいとき |
| HEIC → JPG | iPhone写真を扱いやすくしたいとき |
| HEIC → PNG | iPhone写真を編集用に変換したいとき |
| AVIF → JPG | 新しめの画像形式を一般的な形式にしたいとき |
| AVIF → PNG | AVIF画像を編集しやすくしたいとき |
| GIF → JPG | GIFを静止画として使いたいとき |
| BMP → PNG | 古い画像形式を扱いやすくしたいとき |
| TIFF → JPG | 重い画像を共有しやすくしたいとき |
| SVG → PNG | SVGを画像として使いたいとき |
| ICO → PNG | favicon素材を確認・変換したいとき |
画像形式は用途によって向き不向きがあるため、状況に応じて変換できるようにしました。
画像加工系ツール
画像加工系では、記事作成や資料作成でよく使う処理を中心に用意しています。
| 機能 | 用途 |
|---|---|
| 画像圧縮 | READMEや記事用画像を軽くする |
| JPG圧縮 | 写真系の画像を軽量化する |
| PNG圧縮 | PNG画像の容量を抑える |
| WebP圧縮 | WebP画像をさらに軽くする |
| 画像リサイズ | 表示サイズを整える |
| 画像切り抜き | 不要な部分を削る |
| 画像回転 | 向きを調整する |
| 画像反転 | 左右・上下を反転する |
| グレースケール変換 | モノクロ画像に変換する |
| 透かし追加 | 画像にウォーターマークを入れる |
特に画像圧縮とリサイズは、QiitaやZennの記事作成、README作成で使いやすいと思っています。
PDF系ツール
PDF系では、提出前や資料整理で使いそうな処理を中心にしています。
| 機能 | 用途 |
|---|---|
| 画像 → PDF | 複数画像をPDF化 |
| JPG → PDF | JPG画像をPDF化 |
| PNG → PDF | PNG画像をPDF化 |
| PDF → JPG | PDFページを画像化 |
| PDF → PNG | PDFページを高画質画像化 |
| PDF結合 | 複数PDFをまとめる |
| PDF分割 | 必要なページだけ分ける |
| PDF圧縮 | 提出前に軽量化する |
| PDF回転 | 向きが違うページを直す |
| PDFページ削除 | 不要なページを削除する |
PDFはちょっとした編集でも専用アプリが必要になりがちなので、ブラウザで簡単に扱えるようにしたいと考えました。
技術構成
フロントエンドは Next.js App Router + TypeScript + Tailwind CSS で作成しています。
ツール数が増えても管理しやすいように、ページやUIをできるだけ共通化しています。
app/
tools/
[slug]/
page.tsx
src/
components/
ToolPageLayout.tsx
FileDropzone.tsx
PrimaryButton.tsx
StatusMessage.tsx
data/
tools/
image-tools.ts
pdf-tools.ts
構成イメージは以下です。
実装で意識したこと
1. ツールページを共通化する
45種類のツールをすべて個別に作り込むと、UIや説明文の管理が大変になります。
そのため、共通レイアウトを使って、ツールごとの差分はデータ側に寄せる方針にしました。
| 共通化したもの | 理由 |
|---|---|
| ページレイアウト | UIを揃えるため |
| ファイル選択エリア | 操作感を統一するため |
| 実行ボタン | ツールごとの差を減らすため |
| ステータス表示 | エラーや完了表示を共通化するため |
| 関連ツール表示 | 他のツールへ回遊しやすくするため |
2. ユーザーが迷わないUIにする
高機能な画像編集ツールではなく、
「このファイルをこの形式にしたい」
「この画像を軽くしたい」
という目的にすぐ進めるUIを意識しました。
基本的な操作は以下の流れです。
操作をできるだけ単純にすることで、初めて使う人でも迷いにくい形を目指しています。
3. ブラウザだけで使えるようにする
一回だけ画像を変換したい、PDFを軽くしたい、という用途ではインストール不要の方が使いやすいと考えました。
また、登録不要ですぐ使える形にすることで、作業中に余計な手間が発生しないようにしています。
| 方針 | 理由 |
|---|---|
| インストール不要 | すぐ使えるようにするため |
| 登録不要 | 作業の邪魔をしないため |
| ブラウザ操作 | OSに依存しにくくするため |
| シンプルな画面 | 迷わず使えるようにするため |
SEO面で意識したこと
個人開発として作っているので、SEOも意識しています。
ツール系サイトでは、トップページだけではなく、各ツールページ単位で検索流入を狙うのが重要だと考えています。
SEO面では、以下のような点を意識しています。
| 対応したこと | 目的 |
|---|---|
| ツールごとにページを分ける | 検索キーワードに合わせる |
| 日本語・英語ページを用意する | 対象ユーザーを広げる |
| FAQを入れる | 検索意図に答えやすくする |
| ガイド記事を用意する | ツール以外の流入も狙う |
| sitemapを整備する | クロールされやすくする |
| 関連ツール導線を置く | サイト内回遊を増やす |
個人開発として学びがあったこと
今回作ってみて、単にツールを作るだけではなく、以下のような点も重要だと感じました。
| 学び | 内容 |
|---|---|
| ツール数が増えるほど設計が重要 | 45ツールになると共通化しないと管理が大変 |
| UIの統一感が大事 | ツールごとに操作感が違うと使いにくい |
| SEOはページ設計から考える必要がある | 後から足すより最初から設計した方が楽 |
| 説明文も大事 | ツールだけ置いても検索にもユーザーにも弱い |
| スマホ対応も重要 | 画像・PDF系はスマホ利用も意外とありそう |
特に、45種類まで増やすと、コンポーネント設計やデータ管理の重要性を感じました。
今後やりたいこと
今後は、さらに実務で使いやすい方向に改善していきたいです。
| やりたいこと | 内容 |
|---|---|
| 対応形式の追加 | さらに多くの画像形式に対応する |
| PDF系ツール強化 | 分割、ページ削除、回転などを改善する |
| スマホ対応改善 | スマホでも使いやすいUIにする |
| 英語ページ改善 | 海外ユーザーにも使いやすくする |
| 処理速度改善 | 大きいファイルでも扱いやすくする |
| SEO改善 | 各ツールページの説明を充実させる |
| UI改善 | 目的のツールを探しやすくする |
まとめ
画像やPDFの変換・圧縮・調整は、開発中や技術記事作成中に地味に発生します。
毎回アプリを開いたり、別のオンラインツールを探したりするのが面倒だったので、ブラウザだけで使えるツール集として Filewisp を作りました。
現在は、画像変換・画像加工・PDF変換を中心に 45種類のツール を公開しています。
README作成、Qiita/Zennの記事作成、資料作成、スクリーンショット整理などで使いやすいツールにしていきたいです。