制作実績
実務案件は案件名を伏せて、業種とサイト種別だけにしています。載せているのは直近の一部です。自主開発はWebアプリを公開しています。
自主開発の一覧
image-resize
公開中画像リサイズ・トリミング
複数枚の一括リサイズと、ドラッグで範囲を決めるトリミングができます。出力サイズをpxで指定すると選択枠がその比率に固定されるので、支給素材を次々と同じサイズで切り出せます。処理はすべてブラウザ内で完結します。
- TypeScript
- React
- Vite
- Cloudflare Workers
image-to-webp
公開中画像→WebP変換
PNGやJPEGをまとめてWebPに変換します。品質スライダーで圧縮の強さを決められ、変換前後のファイルサイズと削減率がその場で出ます。透過は保持したまま、ZIPで一括ダウンロードもできます。ファイルはサーバーに送りません。
- TypeScript
- React
- Vite
- Cloudflare Workers
image-to-pdf
公開中画像→PDF変換
複数の画像をドラッグするだけで1つのPDFにまとめます。並べ替えてから変換でき、ページサイズは画像そのままかA4を選べます。JPGとPNGは再エンコードせず埋め込むので画質が落ちません。変換は手元のブラウザだけで終わります。
- React
- TypeScript
- Vite
- Cloudflare Workers
pdf-to-jpg
公開中PDF→JPG変換
PDFを1ページずつJPGに変換し、ZIPでまとめて落とせます。解像度と画質を選べるので、資料の一部を画像として使いたいときに向いています。pdf.jsでブラウザ内だけで処理していて、ファイルは外に出ません。
- TypeScript
- React
- Vite
- Cloudflare Workers
png-jpg
公開中PNG⇄JPG相互変換
PNGとJPGを相互に変換します。入れた画像と逆の形式へ自動で変換するので、混ぜてドロップしてもそれぞれ逆になります。JPGにするときの背景色と画質も選べます。変換はブラウザ内で完結し、ファイルは送りません。
- TypeScript
- Vite
- React
- Cloudflare Workers
qr-code
公開中QRコード生成
URLやテキストを入れると、その場でQRコードを作るミニアプリです。作成ボタンは置かず、入力のたびに作り直しています。誤り訂正レベルはL/M/Q/Hから選べ、選んだレベルの使いどころもその場に出しています。PNGとSVGで保存でき、生成はブラウザ内で完結するので入力内容はどこにも送信されません。
- TypeScript
- React
- Vite
- Cloudflare Workers
ogp-preview
公開中OGP・メタタグプレビュー
Google・X・Facebook・LINEでの見え方を公開前に確認できます。URLしか受け付けない一般的なチェッカーと違い、HTMLを貼れば見られるので、ローカルやBasic認証付きのステージングでも使えます。公開後のURL確認にも対応しています。
- TypeScript
- React
- Vite
- Cloudflare Pages
favicon-generator
公開中favicon生成
ロゴ画像1枚から、いまのWebサイトに必要な3ファイルだけを作ります。20個以上を書き出す従来のジェネレーターと違い、headに貼るのも3行だけ。なぜ3つで足りるかの根拠も画面に添えています。変換はブラウザ内で完結します。
- TypeScript
- React
- Vite
- Cloudflare Workers
unit-price
公開中単価くらべ
買い物のとき、内容量の違う商品どうしを比べるためのツールです。価格と内容量を入れると100gあたり・1個あたりの単価が出て、安いほうを判定します。g・kg・ml・L・個は自動換算するので、500gと1kgもそのまま比べられます。計算ボタンはなく、入力するとすぐに結果が出ます。
- TypeScript
- React
- Vite
- Cloudflare Workers
learn
公開中AI駆動開発 学習ツール
AIが書いたコードを読んで判断できるようになるための学習ツールです。TypeScriptからClaude API連携まで99トピックを、解説・コード実行・確認クイズの3ステップで進められます。ログインすると進捗が端末をまたいで同期されます。
- TypeScript
- React
- Next.js
- Tailwind CSS
- Vercel
- Clerk
learn-shopify
Shopify学習ツール
Shopifyを一通り扱えるようになるための学習ツールです。ストア運営の基礎からテーマ開発・API・ヘッドレスまで191トピックを、解説・確認の2ステップで進められます。Liquidのコード例には実際に表示される内容を併記しているので、読むだけで結果まで分かります。ログインすると進捗が端末をまたいで同期されます。
- TypeScript
- React
- Next.js
- Vercel
- Tailwind CSS
- Clerk
コーディング・CMS実装、
アプリ開発のご相談
単発の依頼から継続的な協業まで引き受けています。気軽にご相談ください。