クリスマスカード(?)
「にっぽんの年末年始」
こちらはXmas Card Design Advent Calendar 2015 - Adventarの14日目です。
Ohjiroです。
クリスマスっぽいキラキラな絵はかけなかったので、
毎年この時期になると「あいかわらずイベントがごた混ぜだなあ」と
愉快な気分になる自分の心境をもとにイラストをかきました。
年始の要素もはいっちゃってますが、少し早いメリークリスマス、よいお年を。
明日はnayo74さんです!
情報優先度×光の意識で作るクエストバナー
こちらは 【その1】ドリコム Advent Calendar 2015 - Adventar の11日目です。
10日目はtommy_changさんによる動くプロトタイプをさくっと作りたい - tommy_chanchanでした。(たくさんお世話になっているデザイナーの先輩です!)
【その2】ドリコム Advent Calendar 2015 - Adventar もありますので、是非ご覧下さい。
ー自己紹介
はじめまして、2015年度新卒デザイナーのOhjiroと申します。
4月に入社し現在はグラフィック制作を担当しております。
学生時代は美術領域にて木版画を勉強していた、ある意味畑違いの人間です。
好きな漫画家は諸星大二郎です。
ー今日の話
普段、主にゲーム内のバナーを製作しています。
ガチャバナー、キャンペーンバナーなど、バナーにも様々な種類がありますが
今回はその中のひとつ「クエストバナー」を通して、
どんな事を意識すれば伝えたい事が伝わり、かつ魅力もあるバナーになるのか
ということをお話したいと思います。
様々な方法があるかと思いますが、わたしがこの半年で獲得したひとつの方法としてお聞きください。
ークエストバナーって?
今回は弊社サービスのひとつ「崖っぷちバスターズ」を例に、ご説明できればと思います。
(詳しくはこちら!→崖っぷちバスターズ【ぶっ放し協力バトル】|株式会社ドリコム)
崖っぷちバスターズでは、新しいクエストが追加されますとこのように
クエスト選択画面上部に、そのクエストへと繋がるバナーが表示されます。
他お知らせ画面や、公式ツイッターにも表示される汎用的な素材となっており、
新たなクエスト登場をユーザーさんに知らせるための重要な役割を担っています。
※今回作成するバナーはダミーの仕様を元に作成しています。
実際のゲーム内に登場する事はございません、ご了承ください。
ー「情報優先度」と「光の意識」
さて、大切にすべきポイントですが、おおまかに2点あります。
・情報優先度を意識する
・光の意識で空間を演出する
「光の意識ってなんぞや?」「情報優先度ってどうやって意識するの?」など
バナー作成時のフローに沿って、説明していきます。
ー仕様チェック
まず、プランナーの方に仕様をお聞きします。ここで1点目のポイントですが、
「このバナーでユーザーに伝えたい事」と「その優先順位」を明確にし、共有する事が大切です。
例えば以下のような仕様があるとします。
クエスト名とボスキャラ(バナー内で使用するキャラ)は
ひとつずつ決まっているのですが、「訴求したい点」の中に複数情報があります。
ここに、優先度をつけてもらう必要があります。
そうすることにより、伝えたい情報が整理でき、的確な構図や色設計がとれるようになります。
プランナーさんと口頭でお話ししながら、以下のように整理していきます。
このように優先順位をつければ、バナーが完成した時
よりプランナーさんの意図するイメージに近づけているかどうか、ということがわかります。
本来意図すべき内容とずれていると、修正に時間もかかってしまいますし
なるべく避けたいところですので、きっちりと擦り合わせしておきます。
ーラフ配置
伝えたい情報を明確にし、かつ優先度をつけ、
プランナーさんと共有確認できたら、ラフを作成していきます。
ラフはおおまかに要素と色を配置したもので、プランナーさんや
先輩のデザイナーさんに見ていただき、先程の情報の優先順位が正しく現れているか、
目指すべき方向性とずれていないか、を確認していただきます。
絵としての完成形イメージを固めるための重要な作業でもあります。
タイトルロゴ、キャラクター、キャラクター名やエフェクトを配置していきます。
ー本製作
ラフの時点で訴求すべき点がキチンと整理されていると、
それを元に素直にディティールを詰めていくことができるので、無駄がありません。
そうしていよいよ本製作に入りますが、ここで2点目のポイントです。
ラフ
本製作
光の意識をより強く取り入れ、
「情報のさらなる整理」と「絵としての完成度を付与」します。
このバナーの場合、ラフの時点で既に奥まった部分は暗い印象になっています。
ですが、さらにロゴの左上を発光させコントラストを強めたり、
エフェクトをまとわせ、その光でキャラクターの弓/矢を明るく強調したりすることで
いちばん注目させたい箇所、その次に見せたい箇所…など
視線の誘導が自然に行われ、強調したい情報・抑えたい情報の整理ができます。
また、バナーにひとつの絵として完成度を付与することで、
よりユーザーの目を引く、魅力的な画像にすることができます。
この場合絵としての完成度とは、空間の説得力のようなものと、わたしはとらえています。
キャラクターにエフェクトからの照り返しがあり、その光の色に染まっていたりすることで、
同じ空間に在るという説得力が増してきます。
ーまとめ
・最初に伝えるべき情報を整理し、優先度をきっちりつけておく
・光を意識することで空間を演出し、絵としての説得力・魅力を増させる
同時に、最初に整理した情報の優先度を、より際立たせる事が出来る
駆け足でしたが、以上となります。
クエストバナーだけに限らず、これらの観点は
グラフィックを製作する上で非常に重要で、役に立つものだと思っています。
ぺーぺーの新人が先輩方にご指導いただき身につけた一つの例として、
同じようグラフィック製作に従事する方の参考になれば幸いです。
お目通し頂きありがとうございました。
ー明日は
danchoさんです!