サインインUIの改善と利用規約ドラフト作成

サインインページを開いたとき、Googleログインボタンがぽつんと置いてあるだけで、ユーザーが「ここで何ができるのか」を掴めない画面になっていた。ボタンの下に何も情報がないページを眺めて、これではログインする動機が生まれないと感じた。UI要素の追加と、リンク先となる利用規約の整備を一日かけて進めた。

サインインページのUI改善

変更前の課題

• Googleアカウントログインボタンだけが表示されている
• サービスの内容が伝わらず、初見ユーザーが離脱しやすい
• 利用規約・プライバシーポリシーへの導線がない

追加した要素

サインインページに以下の3つを追加した。

1. ギャラリーへのリンク: ログインしなくても閲覧できるコンテンツへの導線。「まず中身を見てから判断したい」ユーザーの動線を作った
2. 利用規約・プライバシーポリシーのインラインリンク: Googleログインボタンの下に「ログインすることで利用規約とプライバシーポリシーに同意したものとみなします」の一文とリンクを配置
3. Googleアカウントログインの説明補足: 何のアカウントでログインするのかを明示

リンクはページ遷移ではなく、NuxtLinkでSPA内遷移する形にした。利用規約とプライバシーポリシーはそれぞれ独立したVueページとして用意する方針。

サインインページの同意文言は、ボタンの直下にグレーの小さめフォントで配置した。目立ちすぎず、しかしスクロールせずに視界に入る位置。他サービスのサインイン画面を5つほどスクリーンショットで並べて比較し、この配置に落ち着いた。

他サービスの利用規約調査

利用規約を書くにあたり、類似のWebサービスがどういう構成で規約を作っているかを数サービス分読み比べた。

共通して含まれていた条項

• アカウント管理責任（ユーザー側の責任）
• 禁止事項（不正アクセス、リバースエンジニアリング等）
• 知的財産権の帰属
• 免責事項・責任制限
• サービスの変更・終了に関する条項
• 準拠法・管轄裁判所

気づいた点

無料サービスでも「将来的な料金変更」に関する条項を入れているサービスが複数あった。後から規約を変えるより、最初から含めておく方がトラブルを避けられる。この方針を採用することにした。

また、規約の文体にもサービスごとの差が出ていた。堅い法律文体で書いているところと、平易な日本語で書いているところがある。個人開発のサービスで弁護士が書いたような文体にしても読まれないので、「ですます調で、条文番号は付けるが文体は柔らかく」という方針にした。

利用規約ドラフトの作成

方針

• 現時点では無料サービスだが、将来の有料化に備えた条項を予め含める
• 過度に法律的な文体を避け、ユーザーが読んで理解できる日本語にする
• 条項数は必要十分に留め、冗長な規定は省く

構成の変遷

最初のドラフトは13条構成で書き始めた。レビューを重ねる中で、料金・支払いに関する条項を独立させた方が将来の改定時に影響範囲を限定できると判断し、14条構成に変更した。

主な条項:

料金条項は「現在は無料。変更する場合は事前に通知する」という形で、将来の変更余地を残しつつ現状を明記した。

2つのファイルを更新

規約の内容は2箇所に反映した。

1. コンセプト版マークダウン: 規約の全文をMarkdownで管理。内容の検討・レビューはこちらで行う
2. 本番の terms.vue: 実際にユーザーが閲覧するVueページ。マークダウンの内容をVueテンプレートに変換して配置

マークダウンで構成を固めてからVueに反映する流れにしたことで、文章の推敲とコンポーネント実装を分離できた。

Vueテンプレートへの変換時には、条文ごとに <section> で区切り、見出しに id を振ってアンカーリンクで直接ジャンプできるようにした。規約が長くなったときに特定の条文だけ参照できる構造にしておきたかった。

プライバシーポリシー

利用規約と同時に、プライバシーポリシーのページも用意した。取得する個人情報の種類、利用目的、第三者提供の有無など、個人情報保護法に沿った基本項目を網羅した。

Googleアカウント連携で取得する情報（メールアドレス、表示名、プロフィール画像）を明示し、それ以外の情報は取得しないことを記載した。

Cookie の利用についても記載した。現時点ではセッション管理用のCookieのみ使用しており、広告トラッキング用のCookieは使っていない。将来的にアナリティクスを入れる場合は、この項目を更新する必要がある。

振り返り

利用規約を他サービスと読み比べていると、無料のうちから有料化の条項を入れているサービスが多いことに気づいた。「今は無料です」と書きつつ「料金が変わる場合は30日前に通知します」と添えておく。この一文があるかないかで、将来の選択肢が変わる。

サインインページのUI改善は、ボタンの周囲にテキストとリンクを3行足しただけだが、「何のサービスか」「ログインすると何に同意するか」が画面上で伝わるようになった。要素が少ないページほど、一行の追加が持つ情報量の密度が高い。

規約をマークダウンで先に書き、Vueページに変換するワークフローは、文章の推敲とコンポーネント実装を別々に進められた。規約の改定が入るたびにマークダウン側を更新し、git diffで差分を確認してからVueに反映できるので、「どこを変えたか」が常に追える。

13条から14条への構成変更も、マークダウン上で条文を切り貼りして確認してからVueに反映した。Vueテンプレート上で直接いじっていたら、閉じタグの対応を見失って余計な時間がかかっていたと思う。