本文へスキップ
Álvaro Maldonado Peña

このサイトの作り方

高速で、アクセシブル、トラッカーなし、スパム対策付きのメッセージボックス。

メッセージを送るとどうなるか

点をドラッグするか、メッセージを送ってみてください。

  1. あなたのブラウザ 完成済みのページを受け取ります。JavaScriptはほとんどありません。 静的HTML · JSのアイランド · 自前配信のフォント
  2. あなたの近くのCloudflare サイトを配信し、ロボットでないことを確認して、メッセージを保存します。 Workers · D1 · Turnstile
  3. 私専用のアシスタント 1分ごとにメッセージを集め、スパムを振り分けます。読むのは私です。 60秒ごとのアウトバウンドポーリング · 開放ポートなし
  4. 私のスマートフォン 通知が届きます。私が返信すると、その内容があなたとの会話に表示されます。 プッシュ通知 · API経由で返信

今回のアクセスの詳細

いま、あなたのブラウザで計測しました。

お使いのブラウザでは計測できません。

制作の経緯

制作の経緯を読む
  1. コードより先に取り決めを

    サイト、メッセージボックス、アシスタントは、互いのやり取りについて書面のルールを共有しています。ルールは着手前に決め、その後は追加するだけ。規模が大きくなっても何も壊れません。

  2. 3つのデザイン案から1つを選択

    「ドアに貼るメモ」「会話」「編集スタジオ」の3案を比較し、メモ案を採用しました。メッセージを送ることが、フォームの入力ではなく、メモを残すように感じられるべきだと考えたからです。

  3. 2つの部分を同時に

    サイトと安全なメッセージボックスは、それぞれ自分専用のプロジェクトのコピーで、共通のルールに従って並行して作りました。私は指揮と判断を担当しました。

  4. 独立したセキュリティレビュー

    作り方を知らない立場での独立したセキュリティレビューでは、重大な問題はありませんでしたが、中程度の問題がいくつか見つかりました。たとえば、ある種類のインターネットアドレス(IPv6 端末に割り当てられる、新しい形式のインターネットアドレス。1つの家庭で非常に多くのアドレスを持てるため、制限はブロック単位で数えます。)を使うと送信回数の制限をすり抜けられる、というものです。これは修正済みです。

  5. 3人の体験監査

    デザインの専門家、技術に詳しくない人、アクセシビリティとパフォーマンスの監査担当の3者です。技術に詳しくない人は、私が何を提供しているのかを10秒で理解できませんでした。そこで、ホームの最初の一文でそれを伝えるようにしました。専門家からは、送信が届いたかわからないうちに「折りたたみ中…」と表示される点を指摘されました。現在は「送信中…」と表示し、届いたときだけメモが折りたたまれます。

  6. インラインのコードは一切なし

    このサイトは厳格なコンテンツセキュリティポリシー Webサイトが実行してよいものをブラウザに伝えるルール。誰かがコードを紛れ込ませようとしても、ブラウザは実行しません。に従っており、ブラウザはサイト自身のファイルから読み込んだコードしか実行しません。すべてのページで自動テストがこれを確認しています。

設計上の判断

  • 完成済みのページ、JavaScriptは必要な所だけ

    各ページは完成した状態で届くため、回線が遅くてもすぐに表示されます。

    技術的な詳細
    • Astro 完成済みのページを配信し、必要な所にだけJavaScriptを加えるWebサイト生成ツール。と厳格なTypeScript 型のあるJavaScript。多くのエラーを、利用者に届く前にコンピューターが知らせてくれます。で生成。CSSはブランドのデザイントークンを使った自前のもので、スタイル用フレームワークは使っていません。
    • JavaScriptがあるのは、それが必要なアイランド 静的なページの中にある、小さなインタラクティブな部分。それ以外の部分はJavaScriptを読み込みません。だけです。メッセージボックス、「いま」、会話、テーマ切り替え、用語の解説の5つです。
    • フォント(NunitoとFrauncesのオープンライセンス版)は自分のドメインから配信し、事前に読み込んでいます。
  • アカウント不要で、スパムを防ぐメッセージボックス

    誰でも登録なしでメッセージを送れます。ロボットは締め出しつつ、人には手間をかけさせません。

    技術的な詳細
    • APIはCloudflare Workers 世界中のCloudflareのサーバーで動く小さなプログラム。とデータベースD1 メッセージボックスのメッセージを保存している、Cloudflareのデータベース。で構築し、サイトと同じドメインで動いています。
    • 多層防御:見えないTurnstile Cloudflareのロボット判定。パズルも追跡用Cookieもありません。、おとりの入力欄、最低入力時間、IPごとの送信制限(IPはハッシュ 元に戻せない「指紋」のようなもの。元が何だったかはわからないまま、同じものの繰り返しを見分けられます。としてのみ保存)、文字数とリンク数のチェック、スパムスコア。
    • 送信者は返信を読むための会話のキーを受け取ります。メールもパスワードも不要です。
  • 製品と同じ水準でテストしたアクセシビリティ

    キーボードでも、スクリーンリーダーでも、文字を拡大しても使えます。ライトテーマでもダークテーマでも同じです。

    技術的な詳細
    • 目標はWCAG AA Webアクセシビリティの国際的なガイドライン。AAレベルは、ヨーロッパで法律が求める水準です。。コントラストの確認、見えるフォーカス表示、44pxのタップ領域、「視差効果を減らす」設定への対応。
    • 主要な操作の流れをモバイルとデスクトップでPlaywright 本物のブラウザを操作して、人と同じようにWebサイトをテストするツール。によりテストし、全ページでアクセシビリティを自動チェックしています。
    • 公開の条件は、モバイルのLighthouse Webサイトの速度、アクセシビリティ、ベストプラクティス、SEOを0〜100で採点するGoogleのツール。でパフォーマンス、アクセシビリティ、ベストプラクティス、SEO Googleなどの検索エンジンで、Webサイトが適切に表示されるようにするための取り組み。のすべてが95以上であることです。
  • 設計段階からのプライバシー保護

    独自のCookie、アクセス解析、トラッカーは一切ありません。会話はいつでも削除でき、削除しなくても12か月後に消去されます。

    技術的な詳細
    • インラインコードを使わない厳格なコンテンツセキュリティポリシー。ロボット判定を除き、サイトが第三者にリクエストを送ることはありません。
    • GDPR EU(欧州連合)の一般データ保護規則。に準拠。プライバシーのページで、何を、何のために、どのくらいの期間保存するかを説明しています。
  • 私のやり方で作りました

    いつものやり方で作りました。明確なルールのもとで複数の部分を同時に進め、独立したレビューを重ね、私が指揮と判断を担います。並行作業はAIエージェントが行います。

    技術的な詳細
    • サイト用とAPI用にClaude Code 並行作業に使った、プロジェクトのコードを直接扱うAnthropicのツール。のセッションを1つずつ並行して動かし、それぞれ専用のworktree 同じプロジェクトの別の作業用コピー。それぞれの部分が他を邪魔せずに進められます。で作業させました。
    • サイトとAPIで共有する型の契約を、着手前に定義しました。
    • UX/UIとアクセシビリティの独立した監査担当、そして技術に詳しくない人が、重大・中程度の問題がなくなるまで全画面をレビューしました。

このようなものを作りたいですか?