4分で読めます

ルーレットの色を8区画それぞれ個別に決めるときの、順番と注意点

この記事は 時点の管理画面(/campaigns/[id]/appearance)を確認して書いています。 アプリの更新により画面が変わっている場合があります。

テーマを選ぶと、ルーレットの配色がまとめて決まります。ただし、その後に各部分の色を個別に変更することもできます。

設定できる箇所が多いため、最初からすべてを調整しようとすると迷いやすくなります。まずは、特に重要なところから順番に決めていきましょう。

変えられる箇所

まず、ルーレット全体の要素は次のとおりです。

  • 背景
  • フォームボタン
  • ポインター
  • ルーレットの枠線
  • 中央
  • 中央円の枠線
  • 閉じるアイコン
  • 文字色

さらに、ルーレットの8区画それぞれに、区画の色と文字色を設定できます。

このように、細かく設定できる箇所がたくさんあります。

先に決めるのは3つ

最初からすべての色を調整すると、どこから決めればよいか分からなくなります。

まずは、見た目への影響が大きい次の3つを決めてください。

1. 背景。
ルーレット全体の印象を決める色です。ショップの雰囲気に合う色を選びます。

2. ポインター。
ルーレットがどこで止まったかを示す部品です。背景や区画と同系色にすると、見つけにくくなります。背景とも区画とも違う色にしてください。

3. 区画の文字色。
区画に書かれた文字が読めないと、何が当たったのか分かりません。区画の色に合わせて、読みやすい文字色を設定します。

この3つを決めれば、残りはテーマの初期値のままでも見た目を整えられます。

区画の色は交互に

8区画は、当たりとハズレが交互に並びます。

隣り合う区画の色が似ていると、区画の境目が分かりにくくなります。そのため、濃い色と薄い色を交互に配置するのが基本です。

同じ系統の色を使う場合も、明度を変えるだけで区画を見分けやすくできます。

区画ごとに文字色も設定できるので、濃い区画には白、薄い区画には濃い文字色を設定してください。すべての区画を白文字にすると、薄い色の区画では文字が読みにくくなります。

当たりを目立たせすぎない

大きな特典の区画は、派手な色にして目立たせたくなるかもしれません。

ただ、止まる前から「あそこが大当たり」と分かるほど目立たせると、そこに止まらなかったときの落差も大きくなります。

どの区画も同じくらいの存在感にしておくと、結果を受け入れてもらいやすくなります。

ルーレットの位置

色とは別に、ルーレットを画面のどこに表示するかも設定できます。

パネルを開くボタンと同じ側にルーレットを寄せると、重なってしまいます。ルーレットの位置を決める前に、パネルを開くボタンがどこにあるかを確認してください。

テーマを変えると上書きされます

ここは注意が必要です。テーマを切り替えると、設定した色がそのテーマの配色に置き換わります。

季節ごとにテーマを変える運用では、テーマを切り替えるたびに色を調整し直すことになります。細かく色を作り込む場合は、テーマを固定しておく必要があります。

一方、季節に合わせてテーマを切り替える場合は、色の微調整を最小限にしておくと手間を減らせます。

実際のショップで確認する

設定画面のプレビューでは、ルーレット単体の表示を確認できます。実際のショップの背景に重なった状態とは異なります。

背景色が薄いテーマを使っている場合、ルーレットの背景とショップの背景が近い色になり、輪郭が分かりにくくなることがあります。

設定を保存したら、実際のショップでも開いて確認してください。
スマホでの見え方も一度確認しておくと安心です。

まとめ

まずは、背景・ポインター・区画の文字色の3つを決めれば、ルーレットの見た目はひととおり整います。

区画は濃い色と薄い色を交互に配置し、文字色も区画ごとに読みやすい色を設定してください。

また、テーマを変更すると色の設定が上書きされます。細かく色を作り込む場合は、テーマを固定して運用することが前提になります。