Webアプリ・オープンソース

DocuSûr

31のPDFツール。文書は1バイトもサーバーに送信されません。

年
2026
制作期間
10週間
技術スタック
React · TypeScript · Tailwind · PDF.js · Vercel
  • プロダクトデザイン
  • デザイン
  • 開発
  • SEO
  • アクセシビリティ
https://docusur.kayzen-lyon.com
DocuSûrのWebサイトのトップページ――Webアプリ・オープンソース、Kayzen Web制作
の文書ツール
31
サーバーへの送信量
0バイト
Lighthouseアクセシビリティ
100/100
Lighthouseパフォーマンス
95/100
出発点

解決すべき課題。

背景

DocuSûrは、結合、分割、圧縮、変換、署名、OCRなど、31種類の文書処理ツールを無料・登録不要で提供するサービスです。リヨンを拠点とするKayzen Webが運営しています。

制約

一般向けの代替サービスは、文書を海外のサーバーに送信し、数時間保存し、広告で運営費をまかなっています。契約書、給与明細、身分証明書にとって、これは致命的です。業務で使うユーザーの半数はそれを知っていながら、代わりの手段を持っていません。

解決策

すべての処理はブラウザ内で実行されます。ファイルが送信されることは決してありません。開発者ツールのネットワークタブを見れば3秒で証明でき、それがサイトの最大のセールスポイントです。この制約が、技術アーキテクチャ全体を決定しました。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
95
パフォーマンス:100点中95点
100
アクセシビリティ:100点中100点
92
ベストプラクティス:100点中92点
100
SEO:100点中100点
デザイン・アートディレクション

すべての判断に、理由がある。

  1. ダッシュボードではなくディレクトリ

    31のツールはメニューに収めるには多すぎます。トップページは、即時検索付きのカテゴリ別グリッドです。各ツールには専用のページと固有のURLがあります。Googleからたどり着くのは、そうしたページだからです。

  2. 最初の画面で機密性を証明

    「ファイルがブラウザの外に出ることはありません」という一文を、ファイル選択ボタンより前に、技術的な説明へのリンクとともに表示しています。機密性の約束は、それが試される行為の前に示されます。

  3. 代替手段を備えたドラッグ&ドロップ

    ドロップエリア、従来型の選択ボタン、貼り付けへの対応。ドラッグ&ドロップだけでは、キーボード利用者とタッチ操作の一部が排除されてしまいます。

プロジェクトのカラーパレット

  • インク

    #111827

    テキスト

  • トラストブルー

    #2563EB

    主要アクション

  • セーフグリーン

    #059669

    ローカル処理の完了表示

  • ペーパーグレー

    #F9FAFB

    ドロップエリアの背景

タイポグラフィ体系

見出し用書体

Inter 700

本文用書体

Inter 400

遊びは一切ありません。ツールは文書のために存在を消すべきだからです。

エンジニアリング

その裏側にある技術。

  • React
  • TypeScript
  • Tailwind
  • PDF.js
  • Vercel
  1. クライアント側のPDF.jsとWebAssembly

    PDFの読み込み、描画、書き出しはブラウザ内で行います。重い処理(圧縮、OCR)はワーカー内のWebAssemblyで実行します。200ページの文書でも、インターフェースが固まることはありません。

  2. 保存なし、アカウントなし

    データベースがないので、漏洩の可能性も、届け出るべき保存期間も、列挙すべき委託先もありません。ここではGDPRへの対応を、ポリシーではなくアーキテクチャで実現しています。

  3. ツールごとのオンデマンド読み込み

    31のツールがひとつのバンドルを共有しているわけではありません。「2つのPDFを結合」を開いても、それだけで数メガバイトあるOCRエンジンはダウンロードされません。

SEO対策

検索で見つけてもらうための仕組み。

  1. ツールごとに1ページ、1ページにひとつの検索意図

    「PDF 結合」「PDF 圧縮」「PDF 署名」は、それぞれ別のクエリで、検索ボリュームが大きく、すぐに使いたいという意図を持っています。ツールを一覧にした単一のページでは、そのどれも獲得できなかったでしょう。

  2. 差別化のポイントをタイトルに

    titleタグには、最上級の形容詞ではなく「ファイル送信なし」という言葉を入れています。どのページも似通った市場では、この一言がクリックを左右します。

  3. 手順を伴うツールにはHowTo

    複数のステップからなるツールにはHowToのマークアップを付けています。検索エンジンやAIアシスタントが取り上げるのは、こうした抜粋です。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. Lighthouseで100/100、さらに手作業で検証

    自動スコアがカバーするのは基準の一部だけです。各ツールをキーボードとスクリーンリーダーで一通り操作して確認しました。処理の進捗の読み上げ、ファイルエラーの明確な説明、ダウンロード後のフォーカスの復帰です。

サイト構成

納品したもの。

  • トップ — 31のツールのグリッドと検索
  • /<ツール> — ツールごとの専用ページ
  • プライバシー — ローカル処理の技術的な説明
  • 会社概要、お問い合わせ、法的表示
進め方

プロジェクトの流れ。

  1. 実現可能性の検証

    OCRを含め、すべての処理がブラウザ内で完結することを確認。

  2. 基盤

    PDFの描画、ワーカー、ツールごとの読み込み。

  3. ツールの展開

    31のツールそれぞれに、ページとテスト一式を用意。

  4. アクセシビリティ

    各ツールをキーボードとスクリーンリーダーで検証。

Q&A

よくいただくご質問。

文書をドロップする前に、ブラウザのネットワークタブを開いてください。文書の内容を含む送信リクエストはひとつもありません。3秒で確認できることであり、だからこそ私たちは、コンプライアンスのロゴではなくこの事実を前面に出しています。

処理用のサーバーがないため、運用コストがほとんどかからないからです。このサービスは私たちの技術力を示す公開デモの役割を果たしており、それは広告よりも誠実な使い方だと考えています。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有