ゲームを作っていく上でグラフィックやUIのデザインは避けて通れない部分ですが、カッコいいデザインを考えるのはなかなか大変ですよね。
今回の記事では、ゲームをカッコ良くするための「配色」について書いていきたいと思います。
「配色」とは？
詳しい話に入る前に、「まずそもそも「配色」って何？」という所から始めていきましょう。
Wikipediaの項目によると、
配色（はいしょく）とは、色の組み合わせること、または組み合わせた色合い。
とあります。要するに、色の組み合わせのことです。
配色はグラフィックデザインにおける最も重要な要素の一つです。見た目のカッコよさという点でも重要ですが、それ以外にも視認性の向上や視線誘導などの機能的な面においても配色は重要になってきます。
「でも、センスないから良い配色なんてわからないし...」
と思う方もいるかも知れません。しかし、ある法則さえ知っていれば、良い配色を作るのはさほど難しくありません。
ここからはその法則について、ゲームのUIを例に挙げながら説明していきましょう。
まとまりのある配色
カジュアルゲームを参考にしつつ、操作のしやすさを考えて作ったUIがこちら...！
...ダサい。
色がごちゃごちゃしていて、正直カッコいいUIとは言えませんよね。
では、このUIの配色をとある法則に沿って作り直してみます。
それがこちらです。
何ということでしょう。
色が散らかって見づらいUIはどこへやら、見やすくまとまったUIに。
このように、画面の配色一つで与える印象は大きく変化します。先ほどのUIと大きさや形は変えずに色を変えただけですが、それだけでもこんなに違った印象を受けるわけです。
配色の重要性を理解していただけたでしょうか。
3つのテーマカラー
では、どうやってこの配色を作っていくかを考えていきましょう。
統一された雰囲気を出すためには、色数は最小限に抑えるのが基本です。余計な色を足していくと、画面がゴチャゴチャして見づらくなってしまいます。先ほどのUIで言うと、一つ目の例がまさにそうなってしまっている状態ですね。
・ベースカラー
最も広い面積を占める色。背景などの色がこれに当たります。
画面の最も多くの面積を占める色なので、目が疲れてしまいやすい原色に近い鮮やかな色は避け、白や黒に近い色を選ぶと良いでしょう。
基本的にはメインカラーと同じ色相を選ぶとまとまった配色になってくれます。
・メインカラー
デザインの中心となる色。先ほどの例だと、ボタンの色がこれに当たります。
メインとなる色ですから、ゲームの世界観にあったものを選ぶといいでしょう。
・アクセントカラー
全体のアクセントとなるような、小さくて目立つ色。ステージの評価を示す星の色がこれに当たるでしょうか。
アクセントになるように、メインカラーとは大きく異なる色を選択しましょう。似たような色では埋もれてしまいます。
これら3つは基本的に
メインカラー → ベースカラー → アクセントカラー
の順で決めていくことになると思います。
少なく感じるかも知れませんが、色の数は3つもあれば十分です。慣れないうちは出来るだけ色を乗せすぎないことに注意しましょう。
色の比率
テーマカラーを決めたら最後は、どの色をどれだけ配分するかを決めていきます。
色のバランスをとるのは難しく感じるかも知れませんが、これにはある程度決まった法則があります。
それが「70:25:5の法則」です。
画面全体を100とした時に、ベースカラーを70、メインカラーを25、アクセントカラーを5、といった比率にすると、バランスの取れた美しい配色になってくれます。
改めて先ほどのUIを見てみると、ちょうど3つの色が70:25:5くらいの配分になっているかと思います。
この法則を意識してみると配色のバランスがグッと良くなります。ぜひ皆さんも試してみてください。
まとめ
・色数は出来るだけ少なく
・ベースカラー、メインカラー、アクセントカラーを考える
・色の比率は75:20:5の法則を意識する
色はセンスを要するものと思われがちですが、テーマカラーや比率を意識するだけで簡単に美しい配色を作ることができます。
「テーマカラーが決まらない！」という場合には、身の回りのデザインを参考にしてみると良いでしょう。ゲームだけでなく、WebのUIなども非常に参考になります。
皆さんも良い配色を作って、ゲームをよりカッコ良くしていきましょう。
コメント
コメントを投稿