顧問契約・税務サービスのご相談

実装メモ(このセクションは公開時に削除)

• 【設計の前提・最重要】電話番号・公式LINE・メールアドレスを常時表示せず確認ゲート方式にしている根本理由は、営業リスト業者や自動収集ツールによる電話番号・メールアドレスの収集を防ぎ、それに起因する営業電話・営業メールを減らすため(電話・LINEブロック近くにも同様の注記を配置済み)。完全な秘匿が目的ではなく、一般的なHTMLクロールや自動名簿収集で取得しにくくすることが目的。フッターからの電話番号・メールアドレス表示を廃止したのも同じ理由。JSON-LDにtelephone・emailを含めないのも同じ理由(構造化データも収集対象になり得るため)。
• この版では確認・可読性のため、電話番号は fetch() のダミー処理(1秒遅延)後にJSで挿入している。本番では WordPress の REST API か Ajax エンドポイント経由で、nonce 付きリクエストにより電話番号・LINE URLを取得する実装に置き換える。
• 電話番号・LINEのURLは、初期HTMLのソース・JSファイルのいずれにも生の値を書かない。確認ボタン押下後のリクエストで初めてレスポンスに含める。
• <noscript> 内には電話番号を出力せず、「JavaScriptを有効にするか、フォームをご利用ください」という誘導文のみを置く。
• キャッシュプラグイン使用時は、確認ゲート部分(またはページ全体)をキャッシュ除外設定にする、もしくはAjax部分のみ非キャッシュにする。
• フォームの「送信内容を確認する」→確認画面→「この内容で送信する」の二段階送信は今回のたたき台で追加した挙動。仕様として採用するか確認のうえ、正式版に反映する。
• 郵便番号検索は zipcloud の挙動を模したダミー実装(444-0864 のみ動作)。本番では実際のAPIエンドポイントに差し替える。API障害時は手動入力にフォールバックできるよう、ご住所欄は常に編集可能にしてある。
• このたたき台のQRコードは、挙動確認用に api.qrserver.com という無料の外部QR生成APIを使い、ダミーURL(https://line.me/R/ti/p/@ando-tax-demo)から画像を動的に生成している。本番では、LINE公式アカウントのマイページから発行できる正式なQR画像をそのまま使用すること(外部の汎用QR生成サービスに実際の友だち追加URLを渡す必要はない)。オフライン環境等で画像取得に失敗した場合は、縞模様のプレースホルダーに自動的に切り替わるようにしてある。
• JSON-LD(構造化データ)はこのページの主題ではないため未実装。本番では別途 <script type="application/ld+json"> で事業者名・住所を出力し、telephoneは含めない。
• 電話とLINEの開示は別々のゲートに分離した。電話番号を開示しても公式LINEの情報は表示されない(逆も同様)。
• LINEの開示には「営業目的でない確認」に加えて「個人情報の取り扱いへの同意」も必須にした。友だち追加後は継続的なやり取り(実質的な個人情報の授受)が発生するため、フォーム同様の同意を求める設計。電話番号の開示には引き続き営業目的の確認のみで足りるとした(電話は番号を知るだけで、個人情報の送信自体はまだ発生しないため)。
• 郵便番号は数字7桁の入力に対して自動でハイフンを挿入する(3桁-4桁)。電話番号はハイフンの有無どちらの入力も受け付け、保存時にサーバー側で数字のみに正規化する想定(本番のバリデーション・正規化処理は別途実装が必要)。
• 電話・LINEのブロックは、フォームに比べて視覚的な優先度を下げてある(装飾を抑えた枠・控えめなボタン)。実際のトーン&マナーは事務所サイトの既存デザインに合わせて調整する。