免責事項オーバーレイでプライバシーを守りつつ年齢認証をする話

こんにちは、にょろりんこの備忘録的技術ブログです。

今日は、Sae-Pornsのトップページに表示している免責事項オーバーレイについて紹介します。

いわゆる「未成年の利用を防ぐための年齢確認＋利用規約への同意画面」ですが、実はこの小さなオーバーレイにもSae-Pornsの設計思想が詰まっています。

通常、こういった確認画面では「一度同意すれば二度と出ないように」localStorageやCookieが使われます。ですがSae-Pornsでは「あなたの情報を一切保存しない」というポリシーを守るために、あえてそれらの仕組みは使っていません。

毎回オーバーレイが出てくるのはそのためです。少しだけご不便をおかけしますが、その分、私たちはあなたのデータを一切記録していません。

このオーバーレイは、HTML／CSS／JavaScriptのシンプルな構成でできていて、Bot対策やセッション保存といった複雑な仕掛けも（今のところ）入れていません。

この記事では、その実装の全容をコード付きで紹介していきます。まず、HTML側はこちら。

■HTML部分

<div id="disclaimer-overlay">
<div id="disclaimer-content">
<p>
Sae-Pornsはアダルト動画の検索エンジンです。未成年の方はご利用いただけません。「はい」をクリックで
<a href="https://sae-porns.org/terms" target="_blank" rel="noopener noreferrer" style="color:#E50914; text-decoration: underline;">
利用規約
</a> に同意したことになります。
</p>
<img id="disclaimer-image" src="https://sae-porns.org/stop.png" alt="停止アイコン">
<div>
<button id="agree-button" class="disclaimer-button">はい</button>
<button id="disagree-button" class="disclaimer-button">いいえ</button>
</div>
</div>
</div>

HTML側は非常にシンプルで、モーダル的に免責文言とボタンを配置した以上のことは何もしていない構成です。あえてフォームやdialogといった構造的な要素は使わず、最低限のマークアップだけで目的を果たしています。

これは、初期表示の軽量さと、必要最低限のUI設計を優先した結果でもあります。多くのウェブサービスで見られる「モーダル風オーバーレイ」の王道パターンに従っており、保守性・再利用性の面でもバランスの取れた実装です。

■CSSパートは以下

#disclaimer-overlay：画面全体にかぶせる半透明レイヤー

#disclaimer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}

position: fixed：ページスクロールに関係なく画面に固定表示
width: 100%, height: 100%：画面全体を覆う
background-color: rgba(255, 255, 255, 0.95)：背景を白っぽく薄く覆うことで、下のページが透ける（ユーザーに「今は一時停止中」という印象を与える）
display: flex, justify-content: center, align-items: center：中央にコンテンツを寄せる王道のセンタリング方法
z-index: 2000：あらゆる要素よりも手前に出す（モーダルは最前面）

#disclaimer-content：中央に表示される白いボックス（実際の中身）

#disclaimer-content {
background-color: #ffffff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
color: #222222;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 600px;
text-align: center;
}

background-color: #ffffff：白背景で読みやすく
box-shadow：浮いているように見せるシャドウ効果
padding & border-radius：やわらかい印象の枠にするための余白と角丸
width: 80% + max-width: 600px：スマホ〜PCまで対応できるレスポンシブ設計
text-align: center：中央揃えで視線を自然に集める

#disclaimer-image：警告アイコンの見た目

#disclaimer-image {
width: 200px;
display: block;
margin: 10px auto;
}

display: block + margin: auto：中央寄せ
width: 200px：スマホでも視認性が落ちないサイズ
注意喚起として、インパクトのある画像を適度な余白で配置

#agree-buttonと#disagree-button

#agree-button {
background-color: #0078d4;
color: #fff;
}
#agree-button:hover {
background-color: #005fa3;
}
#disagree-button {
background-color: #cccccc;
color: #333333;
}
#disagree-button:hover {
background-color: #aaaaaa;
color: #000000;
}

agree-button は肯定的な青色で「OK感」
disagree-button はグレー系で中立 or 警戒感
:hover 効果で「反応するUI」であることを伝える

このボタンの色設計は、ユーザーに自然な意思決定を促すための心理設計にもなっています（目立つ色が押されやすくなる）。このCSSは、「ユーザーに迷わせず、静かに主張する」ことを目指した構成です。強制ではなく促し、重くなく、でも誤操作しにくい、シンプルだけど品がある、そんなUIを最小限のコードで実現しています。

■JS部分

$(document).ready（（) => {
updateContentPadding();
$(window).on('resize', updateContentPadding);

// 免責事項オーバーレイ制御
$('#agree-button').on('click', () => $('#disclaimer-overlay').fadeOut());
$('#disagree-button').on('click', () => {
window.location.href = 'https://www.google.com/search?tbm=isch&q=妖精';
});
});

※「（」が2個連続でくると引用になってしまうので、全角にしてあります。コピペする際は半角に戻してご利用ください。

このコードは、jQueryを使って「免責事項オーバーレイを表示・非表示にするだけ」の極めてシンプルな実装になっています。

$(document).ready（（) => {

ページの読み込み完了後に処理を開始。いわゆる「DOMツリーが構築されたら発火する」お決まりのjQueryの初期化パターン。SPA構成では特に重要で、コンテンツが読み込まれてからイベントを設定する必要がある。

$('#agree-button').on('click', () => $('#disclaimer-overlay').fadeOut());

「はい」ボタンが押されたら、オーバーレイを fadeOut()（アニメーション付き非表示）にするだけ。localStorage や Cookie は一切使っていないので、ページをリロードすればまた出てくる。このシンプルさこそが、「何も保存しない」設計思想の体現。

$('#disagree-button').on('click', () => {
window.location.href = 'https://www.google.com/search?tbm=isch&q=妖精';
});

「いいえ」が押された場合は、Google画像検索「妖精」に飛ばすというユニークなリダイレクト。通常は別のサイト（例：Yahoo!、Googleトップページなど）に飛ばすのが一般的ですが、サービスの柔らかさや遊び心が出ているポイント。

## 余談：コンテンツ余白の調整について

JavaScriptの初期化処理には、もう一つ `updateContentPadding()` という関数も入っています。これは免責事項オーバーレイとは直接関係ありませんが、レスポンシブ対応のために必要なUI調整処理です。

具体的には、画面幅が800px以下（スマホ表示）のときに、検索バーの高さ分だけ `.content-wrapper` に上部余白を追加し、表示崩れを防いでいます。

function updateContentPadding() {
const pad = ($(window).width() <= 800)
? ($('#search-bar').outerHeight() || 0)
: 60;
$('.content-wrapper').css('padding-top', pad + 'px');
}

今後は、検索エンジンのBot（Googlebotやbingbotなど）を自動判定して、オーバーレイ自体を表示しないようにする簡易的な仕組みも導入する予定です。

現時点では、JavaScriptが動かないBotはそもそもオーバーレイを表示しませんが、明示的に除外しておくことで、将来的なインデックス精度や解析ログの純度も高めやすくなります。

また、デザイン面でも今後はスマホでの表示バランスや色合いの調整など、細かなブラッシュアップは入れていくつもりですが、基本の方針は変わりません。というわけで、今回はSae-Pornsの「免責事項オーバーレイ」について紹介しました。

ぱっと見はよくある確認画面ですが