DocuSûr
31のPDFツール。文書は1バイトもサーバーに送信されません。
- 年
- 2026
- 制作期間
- 10週間
- 技術スタック
- React · TypeScript · Tailwind · PDF.js · Vercel
- プロダクトデザイン
- デザイン
- 開発
- SEO
- アクセシビリティ

- の文書ツール
- 31
- サーバーへの送信量
- 0バイト
- Lighthouseアクセシビリティ
- 100/100
- Lighthouseパフォーマンス
- 95/100
解決すべき課題。
背景
DocuSûrは、結合、分割、圧縮、変換、署名、OCRなど、31種類の文書処理ツールを無料・登録不要で提供するサービスです。リヨンを拠点とするKayzen Webが運営しています。
制約
一般向けの代替サービスは、文書を海外のサーバーに送信し、数時間保存し、広告で運営費をまかなっています。契約書、給与明細、身分証明書にとって、これは致命的です。業務で使うユーザーの半数はそれを知っていながら、代わりの手段を持っていません。
解決策
すべての処理はブラウザ内で実行されます。ファイルが送信されることは決してありません。開発者ツールのネットワークタブを見れば3秒で証明でき、それがサイトの最大のセールスポイントです。この制約が、技術アーキテクチャ全体を決定しました。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
ダッシュボードではなくディレクトリ
31のツールはメニューに収めるには多すぎます。トップページは、即時検索付きのカテゴリ別グリッドです。各ツールには専用のページと固有のURLがあります。Googleからたどり着くのは、そうしたページだからです。
最初の画面で機密性を証明
「ファイルがブラウザの外に出ることはありません」という一文を、ファイル選択ボタンより前に、技術的な説明へのリンクとともに表示しています。機密性の約束は、それが試される行為の前に示されます。
代替手段を備えたドラッグ&ドロップ
ドロップエリア、従来型の選択ボタン、貼り付けへの対応。ドラッグ&ドロップだけでは、キーボード利用者とタッチ操作の一部が排除されてしまいます。
プロジェクトのカラーパレット
インク
#111827
テキスト
トラストブルー
#2563EB
主要アクション
セーフグリーン
#059669
ローカル処理の完了表示
ペーパーグレー
#F9FAFB
ドロップエリアの背景
タイポグラフィ体系
見出し用書体
Inter 700
本文用書体
Inter 400
遊びは一切ありません。ツールは文書のために存在を消すべきだからです。
その裏側にある技術。
- React
- TypeScript
- Tailwind
- PDF.js
- Vercel
クライアント側のPDF.jsとWebAssembly
PDFの読み込み、描画、書き出しはブラウザ内で行います。重い処理(圧縮、OCR)はワーカー内のWebAssemblyで実行します。200ページの文書でも、インターフェースが固まることはありません。
保存なし、アカウントなし
データベースがないので、漏洩の可能性も、届け出るべき保存期間も、列挙すべき委託先もありません。ここではGDPRへの対応を、ポリシーではなくアーキテクチャで実現しています。
ツールごとのオンデマンド読み込み
31のツールがひとつのバンドルを共有しているわけではありません。「2つのPDFを結合」を開いても、それだけで数メガバイトあるOCRエンジンはダウンロードされません。
検索で見つけてもらうための仕組み。
ツールごとに1ページ、1ページにひとつの検索意図
「PDF 結合」「PDF 圧縮」「PDF 署名」は、それぞれ別のクエリで、検索ボリュームが大きく、すぐに使いたいという意図を持っています。ツールを一覧にした単一のページでは、そのどれも獲得できなかったでしょう。
差別化のポイントをタイトルに
titleタグには、最上級の形容詞ではなく「ファイル送信なし」という言葉を入れています。どのページも似通った市場では、この一言がクリックを左右します。
手順を伴うツールにはHowTo
複数のステップからなるツールにはHowToのマークアップを付けています。検索エンジンやAIアシスタントが取り上げるのは、こうした抜粋です。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
Lighthouseで100/100、さらに手作業で検証
自動スコアがカバーするのは基準の一部だけです。各ツールをキーボードとスクリーンリーダーで一通り操作して確認しました。処理の進捗の読み上げ、ファイルエラーの明確な説明、ダウンロード後のフォーカスの復帰です。
納品したもの。
- トップ — 31のツールのグリッドと検索
- /<ツール> — ツールごとの専用ページ
- プライバシー — ローカル処理の技術的な説明
- 会社概要、お問い合わせ、法的表示
プロジェクトの流れ。
実現可能性の検証
OCRを含め、すべての処理がブラウザ内で完結することを確認。
基盤
PDFの描画、ワーカー、ツールごとの読み込み。
ツールの展開
31のツールそれぞれに、ページとテスト一式を用意。
アクセシビリティ
各ツールをキーボードとスクリーンリーダーで検証。


