制作実績

実務案件は案件名を伏せて、業種とサイト種別だけにしています。載せているのは直近の一部です。自主開発は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実装、
アプリ開発のご相談

単発の依頼から継続的な協業まで引き受けています。気軽にご相談ください。

お問い合わせ