4分で読めます
ルーレットの色を8区画それぞれ個別に決めるときの、順番と注意点
この記事は 時点の管理画面(/campaigns/[id]/appearance)を確認して書いています。
アプリの更新により画面が変わっている場合があります。
テーマを選ぶと、ルーレットの配色がまとめて決まります。ただし、その後に各部分の色を個別に変更することもできます。
設定できる箇所が多いため、最初からすべてを調整しようとすると迷いやすくなります。まずは、特に重要なところから順番に決めていきましょう。
変えられる箇所
まず、ルーレット全体の要素は次のとおりです。
- 背景
- フォームボタン
- ポインター
- ルーレットの枠線
- 中央
- 中央円の枠線
- 閉じるアイコン
- 文字色
さらに、ルーレットの8区画それぞれに、区画の色と文字色を設定できます。
このように、細かく設定できる箇所がたくさんあります。
先に決めるのは3つ
最初からすべての色を調整すると、どこから決めればよいか分からなくなります。
まずは、見た目への影響が大きい次の3つを決めてください。
1. 背景。
ルーレット全体の印象を決める色です。ショップの雰囲気に合う色を選びます。
2. ポインター。
ルーレットがどこで止まったかを示す部品です。背景や区画と同系色にすると、見つけにくくなります。背景とも区画とも違う色にしてください。
3. 区画の文字色。
区画に書かれた文字が読めないと、何が当たったのか分かりません。区画の色に合わせて、読みやすい文字色を設定します。
この3つを決めれば、残りはテーマの初期値のままでも見た目を整えられます。
区画の色は交互に
8区画は、当たりとハズレが交互に並びます。
隣り合う区画の色が似ていると、区画の境目が分かりにくくなります。そのため、濃い色と薄い色を交互に配置するのが基本です。
同じ系統の色を使う場合も、明度を変えるだけで区画を見分けやすくできます。
区画ごとに文字色も設定できるので、濃い区画には白、薄い区画には濃い文字色を設定してください。すべての区画を白文字にすると、薄い色の区画では文字が読みにくくなります。
当たりを目立たせすぎない
大きな特典の区画は、派手な色にして目立たせたくなるかもしれません。
ただ、止まる前から「あそこが大当たり」と分かるほど目立たせると、そこに止まらなかったときの落差も大きくなります。
どの区画も同じくらいの存在感にしておくと、結果を受け入れてもらいやすくなります。
ルーレットの位置
色とは別に、ルーレットを画面のどこに表示するかも設定できます。
パネルを開くボタンと同じ側にルーレットを寄せると、重なってしまいます。ルーレットの位置を決める前に、パネルを開くボタンがどこにあるかを確認してください。
テーマを変えると上書きされます
ここは注意が必要です。テーマを切り替えると、設定した色がそのテーマの配色に置き換わります。
季節ごとにテーマを変える運用では、テーマを切り替えるたびに色を調整し直すことになります。細かく色を作り込む場合は、テーマを固定しておく必要があります。
一方、季節に合わせてテーマを切り替える場合は、色の微調整を最小限にしておくと手間を減らせます。
実際のショップで確認する
設定画面のプレビューでは、ルーレット単体の表示を確認できます。実際のショップの背景に重なった状態とは異なります。
背景色が薄いテーマを使っている場合、ルーレットの背景とショップの背景が近い色になり、輪郭が分かりにくくなることがあります。
設定を保存したら、実際のショップでも開いて確認してください。
スマホでの見え方も一度確認しておくと安心です。
まとめ
まずは、背景・ポインター・区画の文字色の3つを決めれば、ルーレットの見た目はひととおり整います。
区画は濃い色と薄い色を交互に配置し、文字色も区画ごとに読みやすい色を設定してください。
また、テーマを変更すると色の設定が上書きされます。細かく色を作り込む場合は、テーマを固定して運用することが前提になります。