printpass — 印刷入稿データの自動チェックツールを作ってデプロイした

printpass とは

印刷入稿データ（PDF / JPEG / PNG / AI）をドラッグ&ドロップするだけで、解像度・カラーモード・サイズ・塗り足し・TAC値を自動チェックするWebツールです。

👉 printpass.jp

やったことの流れ

1. チェック機能の開発（Python + FastAPI）

まず核となるプリフライトチェックエンジンをPythonで実装しました。

• 解像度（DPI）チェック

• カラーモード判定（CMYK / RGB）

• 仕上がりサイズ・塗り足しの検証

• TAC値（インク総量）チェック

• .ai（Illustrator）ファイル対応

これをFastAPIでAPI化して、ファイルをPOSTするとチェック結果がJSONで返ってくる構成にしました。

2. データチェックページの構築（Next.js）

Next.js 14 + TypeScript + Tailwind CSSでチェック用のWebUIを構築。

• ドラッグ&ドロップでファイルアップロード

• チェック結果をリアルタイム表示（OK / NG が一目でわかる）

• 仕上がりプレビュー — 実際の印刷イメージをブラウザ上で確認

• サイズ調整・位置移動ツール

• プレビュー画像のPNGダウンロード機能

3. ランディングページの作成

チェック機能ができたので、LPを作成。

• Hero — スクリーンショット付きのビジュアル訴求

• 対応フォーマット表示（PDF / JPEG / PNG / AI / PSD）

• Web版・ダウンロード版の2つのターゲット向けカード

• よくある課題 → printpassの解決策の構成

• 3ステップの使い方ガイド

• 料金プラン（Free / Pro）

• お問い合わせ・フィードバックフォーム（Googleフォーム埋め込み、モーダル表示）

4. デプロイ

• フロントエンド: Vercel にデプロイ

• APIサーバー: Railway にデプロイ

• ドメイン: printpass.jp で公開

Next.jsのrewrite設定で /api/* をRailwayに中継する構成です。環境変数 NEXT_PUBLIC_API_URL でローカル/本番を切り替え。

技術スタック

• フロントエンド: Next.js 14 / TypeScript / Tailwind CSS

• バックエンド: Python / FastAPI / PyMuPDF / Pillow

• ホスティング: Vercel + Railway

• ドメイン: printpass.jp

リンク

👉 printpass.jp — 印刷入稿データ 自動チェック

👉 データチェックページ

ファイルをドロップするだけで使えるので、印刷データを扱う方はぜひ触ってみてください！

以上のことを、Claude Codeに書いてもらいました！

スクショは差し込み方がよくわからなかったので自分で差し込みました。ここだけ野良仕事しました。

データのチェック機能自体はまだまだ足りていないし、エラーもあります。

印刷所にデータ渡す前の事前チェックを気軽に行えるサイトにしていこーと思います〜