クリスマスカード(?)

f:id:Ohjiro:20151214022526p:plain

「にっぽんの年末年始」

 

こちらは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月に入社し現在はグラフィック制作を担当しております。
学生時代は美術領域にて木版画を勉強していた、ある意味畑違いの人間です。
好きな漫画家は諸星大二郎です。
 

ー今日の話

普段、主にゲーム内のバナーを製作しています。
ガチャバナー、キャンペーンバナーなど、バナーにも様々な種類がありますが
今回はその中のひとつ「クエストバナー」を通して、
どんな事を意識すれば伝えたい事が伝わり、かつ魅力もあるバナーになるのか
ということをお話したいと思います。
様々な方法があるかと思いますが、わたしがこの半年で獲得したひとつの方法としてお聞きください。

 

ークエストバナーって?

今回は弊社サービスのひとつ「崖っぷちバスターズ」を例に、ご説明できればと思います。
崖っぷちバスターズでは、新しいクエストが追加されますとこのように
 

f:id:Ohjiro:20151210131914p:plain

 
クエスト選択画面上部に、そのクエストへと繋がるバナーが表示されます。
他お知らせ画面や、公式ツイッターにも表示される汎用的な素材となっており、
新たなクエスト登場をユーザーさんに知らせるための重要な役割を担っています。
 
※今回作成するバナーはダミーの仕様を元に作成しています。
実際のゲーム内に登場する事はございません、ご了承ください。 

 

ー「情報優先度」と「光の意識」

さて、大切にすべきポイントですが、おおまかに2点あります。
 
・情報優先度を意識する
・光の意識で空間を演出する
 
「光の意識ってなんぞや?」「情報優先度ってどうやって意識するの?」など
バナー作成時のフローに沿って、説明していきます。

 

ー仕様チェック

まず、プランナーの方に仕様をお聞きします。ここで1点目のポイントですが、
「このバナーでユーザーに伝えたい事」と「その優先順位」を明確にし、共有する事が大切です。
 例えば以下のような仕様があるとします。

f:id:Ohjiro:20151210132929p:plain

クエスト名とボスキャラ(バナー内で使用するキャラ)は
ひとつずつ決まっているのですが、「訴求したい点」の中に複数情報があります。
ここに、優先度をつけてもらう必要があります。
そうすることにより、伝えたい情報が整理でき、的確な構図や色設計がとれるようになります。
プランナーさんと口頭でお話ししながら、以下のように整理していきます。

f:id:Ohjiro:20151210132932p:plain

このように優先順位をつければ、バナーが完成した時
よりプランナーさんの意図するイメージに近づけているかどうか、ということがわかります。
本来意図すべき内容とずれていると、修正に時間もかかってしまいますし
なるべく避けたいところですので、きっちりと擦り合わせしておきます。 

 

ーラフ配置

伝えたい情報を明確にし、かつ優先度をつけ、
プランナーさんと共有確認できたら、ラフを作成していきます。
 
ラフはおおまかに要素と色を配置したもので、プランナーさんや
先輩のデザイナーさんに見ていただき、先程の情報の優先順位が正しく現れているか、
目指すべき方向性とずれていないか、を確認していただきます。
絵としての完成形イメージを固めるための重要な作業でもあります。
 

f:id:Ohjiro:20151207202743p:plain

 タイトルロゴ、キャラクター、キャラクター名やエフェクトを配置していきます。

 

ー本製作

ラフの時点で訴求すべき点がキチンと整理されていると、
それを元に素直にディティールを詰めていくことができるので、無駄がありません。
そうしていよいよ本製作に入りますが、ここで2点目のポイントです。
 

f:id:Ohjiro:20151207202743p:plain ラフ

 

f:id:Ohjiro:20151207202749p:plain 本製作

 
 光の意識をより強く取り入れ、
「情報のさらなる整理」と「絵としての完成度を付与」します。
 
このバナーの場合、ラフの時点で既に奥まった部分は暗い印象になっています。
ですが、さらにロゴの左上を発光させコントラストを強めたり、
エフェクトをまとわせ、その光でキャラクターの弓/矢を明るく強調したりすることで
いちばん注目させたい箇所、その次に見せたい箇所…など
視線の誘導が自然に行われ、強調したい情報・抑えたい情報の整理ができます。
 
また、バナーにひとつの絵として完成度を付与することで、
よりユーザーの目を引く、魅力的な画像にすることができます。
この場合絵としての完成度とは、空間の説得力のようなものと、わたしはとらえています。
キャラクターにエフェクトからの照り返しがあり、その光の色に染まっていたりすることで、
同じ空間に在るという説得力が増してきます。
 
 

ーまとめ

f:id:Ohjiro:20151207202749p:plain

 
・最初に伝えるべき情報を整理し、優先度をきっちりつけておく
・光を意識することで空間を演出し、絵としての説得力・魅力を増させる
 同時に、最初に整理した情報の優先度を、より際立たせる事が出来る
 
駆け足でしたが、以上となります。
クエストバナーだけに限らず、これらの観点は
グラフィックを製作する上で非常に重要で、役に立つものだと思っています。
 
ぺーぺーの新人が先輩方にご指導いただき身につけた一つの例として、
同じようグラフィック製作に従事する方の参考になれば幸いです。
お目通し頂きありがとうございました。 

 

ー明日は

danchoさんです!