メインキャラクター
リベ男（読み：リベだん）
サイト全体の案内役です。レビュー一覧、カジノ一覧、比較の入口、初心者向けの見る順番を案内します。
- レビュー一覧への誘導
- カジノ一覧への誘導
- 初心者向けの見る順番案内
- 比較表前の確認導線
基本方針：
マスコットは大きく出しすぎず、ユーザーが条件確認や比較の流れを理解しやすくするための補助役として使います。
ヒーローでは存在感を出してもよいですが、本文中では小さめの補足ボックスとして自然に配置します。
キャラクター設定
リベ男・リベ女の役割
2体のマスコットは、同じ役割で重複させず、ページの目的に合わせて使い分けます。
サブキャラクター
リベ女（読み：リベじょ）
説明役・注意喚起役です。ボーナス条件、入出金、本人確認、禁止ベット、規約確認などを案内します。
- ボーナス条件の説明
- 入出金や本人確認の注意
- 暗号資産や決済方法の確認
- 公式規約の確認案内
画像ファイル
現在使用するマスコット画像一覧
画像はHTMLへ直接埋め込まず、同階層にアップロードしたPNGファイルを参照します。ファイル名は変更しません。
リベ男 通常立ち絵
基準画像。サイト紹介やキャラクター説明で使用します。
ribedan-transparent.png
リベ女 通常立ち絵
基準画像。説明役や補足案内の紹介で使用します。
ribejo-transparent.png
リベ男 指差しポーズ
レビュー一覧、カジノ一覧、比較表前の確認導線で使用します。
ribedan-point.png
リベ男 案内ポーズ
TOP、初心者ガイド、見る順番の案内で使用します。
ribedan-guide.png
リベ女 説明ポーズ
ボーナス条件、初心者チェック、補足説明で使用します。
ribejo-note.png
リベ女 注意喚起ポーズ
入出金、本人確認、規約注意、禁止ベット、暗号資産注意で使用します。
ribejo-warning.png
ページ別ルール
主要ページでの使い分け
ページごとにマスコットの役割を分けることで、サイト全体の見え方を統一します。
| ページ | 使用キャラ | 推奨画像 | 使い方 | 注意点 |
|---|---|---|---|---|
| index.html | リベ男 | ribedan-guide.png | サイト全体の入口として、見る順番や主要ページへの導線を案内。 | ヒーローで大きめに使用してOK。ただしCTAを煽りすぎない。 |
| review.html | リベ男 | ribedan-point.png | レビュー一覧、個別レビューへの確認導線を案内。 | 「おすすめ」よりも「条件を確認する」文脈にする。 |
| casino-list.html | リベ男 | ribedan-point.png | 掲載サイト一覧、比較表、レビューへの導線を案内。 | ロゴ画像を消さず、一覧の可読性を優先する。 |
| bonus.html | リベ女 | ribejo-note.png / ribejo-warning.png | 賭け条件、有効期限、最大出金、対象ゲーム、禁止ベットを説明。 | ボーナス額で煽らず、条件確認中心にする。 |
| bonus-guide.html | リベ女 | ribejo-note.png / ribejo-warning.png | ボーナスの見方、賭け条件、出金制限の説明に使用。 | 初心者にも分かる丁寧語で説明する。 |
| payments.html | リベ女 | ribejo-warning.png | 本人確認、入出金条件、暗号資産ネットワーク注意で使用。 | 出金保証のような表現は避ける。 |
| guide.html | リベ男 / リベ女 | ribedan-guide.png / ribejo-note.png | 見る順番はリベ男、確認メモはリベ女が担当。 | キャラを出しすぎず、本文の読みやすさを優先する。 |
| site-checklist.html | リベ男 / リベ女 | ribedan-point.png / ribejo-warning.png | 運営用の確認案内、画像確認、責任ある利用チェックに使用。 | 管理ページなので訴求より確認性を優先する。 |
| mascot-image-plan.html | リベ男 / リベ女 | 全マスコット画像 | 画像設計書として、役割と使い分けを一覧化。 | 画像カードがスマホで崩れないようにする。 |
表示ルール
マスコットの配置とサイズ感
マスコットは本文の邪魔にならない範囲で使用します。スマホでは特に画像サイズと余白に注意します。
ヒーローでの使い方
ページ冒頭では、キャラクターをやや大きめに配置しても問題ありません。 ただし、見出しや本文より目立ちすぎないサイズにします。
- PCでは280px前後を目安
- スマホでは220〜250px前後を目安
- 吹き出しは短くする
本文中での使い方
本文中では小型の補足ボックスとして使います。 説明文や注意点を補助する位置に置き、連続で多用しないようにします。
- 画像幅は70〜110px程度
- 文章は2〜3行程度
- カードや表の直後に自然に配置
スマホでの使い方
スマホではキャラクターが大きすぎると本文が読みにくくなります。 画像カードやメモボックスは1列表示にして余白を調整します。
- ヘッダーのstickyは解除
- カードは1列化
- 表は横スクロール対応
命名ルール
画像ファイル名のルール
GitHub Pagesで安定して表示できるよう、画像ファイル名は半角英数字とハイフンを基本にします。
現在の基本ルール
キャラクター名は、リベ男を ribedan、リベ女を ribejo として管理します。
ribedan-transparent.pngribejo-transparent.pngribedan-point.pngribedan-guide.pngribejo-note.pngribejo-warning.png
避ける命名
日本語ファイル名、スペース入り、用途が分かりにくい連番だけの名前は避けます。
リベ男.pngribe dan.pngnew-image.pngcharacter1.pngfinal-final.pngsample.png
altルール
画像altの書き方
画像altでは、キャラクター名と役割が分かるようにします。読み方は本文で必要な場合のみ補足します。
| 画像 | 推奨alt | 用途 | 注意点 |
|---|---|---|---|
| ribedan-transparent.png | リベ男の通常立ち絵 | キャラクター紹介、基準画像 | 「リベお」と書かない。読みはリベだん。 |
| ribejo-transparent.png | リベ女の通常立ち絵 | キャラクター紹介、説明役の紹介 | 読みはリベじょ。 |
| ribedan-point.png | 比較ポイントを案内するリベ男 | レビュー一覧、カジノ一覧、確認導線 | 煽りではなく確認案内として使う。 |
| ribedan-guide.png | 見る順番を案内するリベ男 | TOP、初心者ガイド | 初心者向けの案内に使う。 |
| ribejo-note.png | 条件確認を案内するリベ女 | ボーナス説明、初心者チェック | 説明や補足の文脈で使う。 |
| ribejo-warning.png | 注意点を案内するリベ女 | 入出金、本人確認、規約注意 | 不安を煽りすぎず、確認を促す。 |
NG使用例
マスコット使用時に避けること
キャラクターの親しみやすさは活かしつつ、ギャンブル感や煽りが強くなりすぎないようにします。
表現面のNG
マスコットに保証表現や煽り表現を言わせないようにします。
- 勝てる、必ず勝てる
- 稼げる、儲かる
- 取り返せる、損失回収
- 勝利保証、出金保証
- 今すぐ登録しないと損
- 急いで参加、登録必須
デザイン面のNG
マスコットを大きくしすぎたり、ページ全体を派手にしすぎたりしないようにします。
- 本文全体に炎演出を多用する
- 黒背景メインでギャンブル感を強くする
- 金ピカすぎる装飾にする
- キャラクターが本文を圧迫する
- CTAの近くで過度に煽る
- 画像ファイル名を勝手に変える
推奨使用例
自然に使いやすいマスコット文言
比較・条件確認・慎重な判断を促す文脈であれば、マスコットの案内文として使いやすくなります。
リベ男向け文言
- まずはレビュー一覧で特徴を確認しましょう。
- 気になるサイトは、詳細レビューで条件を確認しましょう。
- 比較表で全体像を見てから、個別ページで確認しましょう。
- 初心者の方は、見る順番から確認すると分かりやすいです。
リベ女向け文言
- ボーナスは金額だけでなく、賭け条件も確認しましょう。
- 出金前には本人確認が必要になる場合があります。
- 対象ゲームや禁止ベットは、事前に公式規約で確認しましょう。
- 不明点がある場合は、利用を急がないことが大切です。
共通文言
- 公式ルールを確認しましょう。
- 条件を理解してから判断しましょう。
- 比較するときは、複数の項目を見ることが大切です。
- 不安がある場合は、無理に進めないようにしましょう。
今後の追加案
将来的に追加しやすいポーズ案
現在の6枚で主要ページは対応できます。今後追加する場合も、役割が重複しないようにします。
比較表を見るポーズ
カジノ一覧やレビュー一覧の比較表前で使うポーズ。
- 想定名：
ribedan-compare.png - 用途：比較表、一覧ページ
- 役割：候補を整理する案内
初心者案内ポーズ
初心者ガイドのステップ説明に使うポーズ。
- 想定名：
ribedan-beginner.png - 用途：guide.html
- 役割：見る順番の案内
規約確認ポーズ
公式規約、禁止ベット、出金条件の確認を促すポーズ。
- 想定名：
ribejo-rule.png - 用途：bonus-guide、payments
- 役割：確認漏れ防止
決済確認ポーズ
入金方法、出金方法、暗号資産ネットワーク注意に使うポーズ。
- 想定名：
ribejo-payment.png - 用途：payments.html
- 役割：入出金確認
レビュー確認ポーズ
個別レビュー記事内で、確認ポイントへ誘導するポーズ。
- 想定名：
ribedan-review.png - 用途：個別レビュー記事
- 役割：レビュー導線
注意メモポーズ
FAQ前や注意ブロックで、確認事項を短く伝えるポーズ。
- 想定名：
ribejo-check.png - 用途：FAQ、注意ボックス
- 役割：補足説明
実装チェック
HTML反映時の確認項目
画像を追加・差し替えしたあとは、ファイル名、alt、スマホ表示、リンク切れを確認します。
- 画像ファイルがHTMLと同じ階層にある
- ファイル名の大文字・小文字が一致している
- PNG拡張子が正しく指定されている
- altにキャラクター名と役割が入っている
- スマホで画像が大きすぎない
- 本文や表に画像が重なっていない
- 吹き出しがスマホで読める幅になっている
- CTAが煽り表現になっていない
- ロゴ画像を誤って削除していない
- GitHub Pages上で実際に表示確認する
画像表示で特に注意すること
GitHub Pagesでは、画像ファイル名の大文字・小文字や拡張子の違いで表示されないことがあります。
HTML側の src と実際のファイル名が完全に一致しているか確認してください。
マスコット設計の最終方針
リベ男は案内役、リベ女は説明・注意喚起役として使い分けます。 画像はページの主役ではなく、比較・条件確認・慎重な判断を補助するための要素です。 既存の画像ファイル名は変更せず、スマホでは画像を大きくしすぎないようにします。