KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

はじめに

この記事は KLab Creative Advent Calendar 2018 の 17日目の記事になります。

初めまして、こんにちは。クリエイティブ部でイラストの制作をしている、しろと申します。

今回の記事ではお仕事で描いているイラストとは別に、普段趣味で描いているイラストの方のお絵描きのメイキングをしたいと思います。よろしくお願いします。

概要

時間が無いけど一枚絵が描きたいときに、なるべく早く絵を仕上げる時用の描き方を紹介致します。技術的な部分よりも、早く仕上げるための考え方の部分がメインのメイキングになります。

使用ソフト

  • CLIP STUDIO
  • Adobe Photoshop CC
(メインの作業はクリスタ、フォトショは加工で使用します。)

絵を描く前に

何も決めずに描き始めると早く絵を仕上げることが出来ないのでまず何を描くか考えます。

何を描きたくないかも考えます。

描きたいもの

  • 女の子
  • お花

描きたくないもの

  • 複雑な背景

見せ所
描きたいもの、描きたくないものを決めたら絵の見せどころを決めます。
描くべきところを決めておく事で描いてる最中にあれこれ悩む事を防ぎます。

  • 女の子
  • 特に目
  • 次に肌

使いたい色
使用する色を決めます。
沢山の色を使うと完成までに時間がかかるので、メインで使う色を1色、サブで使う色を1色の計2色を決めます。

メイン
サブ

ここまで考えたらラフの作業に入ります。

ラフを描く

ここまで考えたことを元にラフを描いていきます。描きたいもの、見せ所は一番わかりやすく目立つところに配置してなるべく背景を描かなくていいように…

使用したブラシ:にじみ縁水彩、シャーペン

色を置く

キャラクター部分は黒、背景に赤を置いて色の対比でキャラを浮き立たせることにします。

使用したブラシ:鉛筆

陰影を決める

最初に決めた見せ所を見せるための陰影を設定していきます。

見せどころが肌なので、肌に光を当てて浮き上がらせたい、また目も見せどころなので、顔全体に影を落として目を光らせることで視線を集めよう…!

使用したブラシ:鉛筆とエアブラシ

ひたすら描き進める

ここまで出来たら後は完成を目指してひたすら描き進めます。

描き進めるときは暗い所から光の当たっている所を掘り起こしていく感覚で、基本的に明るい部分を描き起こしていきます。

早く仕上げるために一番最初にメインのキャラ部分を集中的に描きます。この際、アウトラインを最初に決めてしまうとより早く仕上げることができます。

使用したブラシ:エアブラシ、シャーペン、にじみ縁水彩

エアブラシとシャーペンでざっくり描いて…

アウトラインを決めたら中身の見せどころを最初に描き起こして…

なんかいい感じに質感を描いて…

レイヤーを全部結合して微調整をしたら大体完成!!

最後の調整

このままだと物足りないのでフォトショに移動して効果をかけたり、コントラストを調整したりしていきます。

今回は逆光のフィルタをかけた後に、色収差の効果をかけました。
もともと使用している色数が少ないので、色収差をかけることで色の幅を出します。

完成したのがこちらです。ラフから完成までかかった時間は8時間程でした。

まとめ

絵を描く前の段階で考えることを済ませておくと、描いている最中に迷わずに描き進められて、結果仕上がるのが早くなるよ、という内容でした。
振り返ってみると当たり前の事なのですが、絵の描き方のうちの一つとして見て頂けると嬉しいです。

最後までお付き合いいただきありがとうございました。

お疲れ様です。2Dイラストチームのtana-Kです。

この記事はKLab Creative Advent Calendar 2018 の 16日目の記事になります。

はじめに

KLabのクリエイティブでアドベントカレンダーを作るから執筆して欲しいと言われたのですが、2Dイラストのテクニックってネットでも書籍でもあらゆるものが出尽くしてしまっているので正直何を書いたらいいのか悩みました。
新社会人イラストレーター向けに、たくさんFBを食らった時でもメンタルを保つ方法や、自分がクリスタで使ってる機能の紹介など考えましたがいまいち訴求力に欠ける…。
そこで考えたのが「IPイラストレーターってどんなお仕事?」というテーマです。
KLabの特色といえば他社IPに強いところ。
そのメイン部分を担うIPイラストはどのようにして作られているのか、なかなか知る機会はないかなと思い書いてみることにしました。

だがしかし、私がメインで関わっている某IPの2Dイラストをアドベントカレンダーで使うのはNGということでしたので、技術書典4で私が描かせていただいた同人誌の表紙を使い擬似的にIPイラストレーターの仕事内容を紹介したいと思います。


こいつです。

IPイラストレーターのお仕事とは

基本的な工程は非IPのイラスト業務とほぼ同じですが、各工程で版元チェックが入ります。

絵柄の分析・練習

配属されてすぐに商材として使うものを描くわけではなく、ある程度の練習期間を設けており、KLabではこの工程をキャッチアップと呼んでいます。

キャッチアップの期間は先人たちの築き上げた「絵柄似せマニュアル」を参照しつつ本番と同じ環境で練習していきます。

絵柄似せマニュアルは、原作キャラのボディバランスや顔の比率などを可能な限り数値化することで、主観に頼らず短期間で原作の絵柄を再現できるような資料になっています。

IPイラストレーターって楽しい?

絵を通して表現したいテーマがある、もしくは自分の名前を売りたいという創作意欲の高いタイプの絵描きにとっては正直つらい仕事だと思います。
私は絵を描くという作業そのものと、案件の絵柄に可能な限り近づけつつ魅力を引き出すための技術を勉強したり実験したりするのが好きなので、今の仕事は楽しいし天職であると思っています。

また、様々なジャンルのIPイラストを経験していくことで、突出したオリジナリティは無いがどんなものでもある程度以上のレベルで描ける器用さを得られます。
器用貧乏なんて言葉がありますがなんでも描ける絵描きは流行に左右されないので食いっぱぐれが少ないです。

長々となりましたが、IPイラストレーターという職業に興味が湧いた、または色々な絵柄にチャレンジすることで技術を磨きたいという方は是非ともKLabの門を叩いてみてください。

はじめに

この記事は KLab Creative Advent Calendar 2018 の 15日目の記事になります。

 皆様、どうもはじめまして!
 KLab Sound Teamのemanonです。
 まずは軽い自己紹介から…

6年程前に某音楽制作会社からKLab株式会社に転職してまいりまして、現在、主にBGM制作業務を手がけておりますが、SEの制作、WwiseとUnityを併用してのカットシーンへのボイス実装や、弊社で運用中タイトルでの音声周りのデバッグやボイス処理などの作業もサポートしています。

概要

制作面でのTips等は実用的な内容のものが既にweb上(SNS,動画サイト)を探せば幾らでも存在している現状…一体何を書いたら良いのか?

などとモヤモヤしていたら、サウンド部屋の遠くの方(といっても広くはないが)から
「サウンドチームの公式twitterのフォロワー数なかなか増えないなぁ」
という声が聞こえて参りました。

 そもそも…
 今、KLabにサウンドチームがあること自体、
 絶望的なまでに知られてなくねぇか?
 世界人口約73億人に対し、フォロワー数約500…
 これ何%?もう少し何とか出来る余地あるんでない?

↑ 脳内仮想上長

はい。…ということで、脳内仮想上長からの示唆に富むお言葉を真摯に受けとめ、
この機会にKLab Sound Teamについて知って貰うことが、お互い一番幸せなんじゃなかろうか?という考えに至り、また我々が「世界と自分をワクワクさせる」ためにどういった活動を行っているのか?という点について書くことにしました。

ちなみに上記の青太字で記載したものが、弊社のビジョン※1)となっております。

KLab Sound Teamとは?

KLab Sound Teamを一言で説明すれば、
「様々な案件を横断し、サウンド面でサポートするグループ」
様々な音楽人生のバックグランドを持った経験豊か、且つ各々が唯一無二の音楽的特殊能力を持つ極めて個性的なメンバーで構成された弊社クリエイティブ部を代表する異能集団。ゲーム周りの音に関係する業務に留まらず、CMや四半期ごとに催される全社会での音響面でのサポートなども行っております。


ヤーガン族のイラスト窓際族のイラスト中二病のイラスト(女性)人工知能と喧嘩をする人のイラスト驚いて目が飛び出る人のイラスト(女性)
個性豊かなKLab Sound Teamメンバーの例

折角の機会なのでKLab Sound Teamの始まりのお話も少々^^
チームの始まりは今から約6年前に遡る2012年の後半になります。

弊社で初めてサウンドスタッフとして採用されたのがT.M(下の写真中の帽子を被った人)で、年が明けた2013年1月に私が加わり…そこから夏が終わった頃にY.I(写真中の左から二人目の眼鏡をかけた人)が加わりました。そこから年に1~2人程度増員していき、2018年12月現在では10名を超える大所帯となりました。

↓ 2017年に撮影したKLab Sound Team集合写真。

制作業務に関係する話

弊社で開発しているタイトルに関連した制作業務の話でいえば、主な作業は以下のものが挙げられます。

  1. BGM/SEの制作(音の生録音を含む)
  2. ゲーム内でのカットシーンでのMA作業
  3. UnityとWwise/CRI-ADXなどを連携させての音の実装作業
  4. BGMを外注する際のディレクション
  5. リズムゲームの譜面作成
  6. ボイスの整音作業
  7. ボイス収録時のディレクション
  8. ゲームに関係するサウンド面での全面的なディレクション

上記に記載した業務を詳細に語るよりも、実際に制作した成果物を見て頂く・聴いて頂くほうが手っ取り早いだろう…と。成果物の幾つかは公式にwebサイト上で試聴出来ますので、そちらを紹介します!^^
♪BLEACH Brave Souls全世界3000万DL記念、アプリ内BGM無料視聴
ゲーム中の全ての楽曲ではありませんが、代表的な楽曲が試聴可能です!
https://www.bleach-bravesouls.com/index.php?dc_action=contents%2Fbgm_listen

BLEACH Brave Souls(ブレソル)のカッコイイカットシーンは、ブレソル公式Twitterで紹介しているのでこちらを御覧ください。
https://twitter.com/Bleach_BS/

ヘッドホンで音楽を聞く人のイラスト(男性)


制作業務以外の業務。対外的な活動。

制作業務以外にもアレヤコレヤと、以下のような対外活動を積極的に行っております。

SNSの活用

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam

サウンドチームの名前が外部に出る際の発表がメインですが… メンバー個人による役立つTipsなどの紹介や日常系脱線話などなど、 チームの雰囲気が感じられるものになっています。

フォローされていない方…
是非ともこの機会に、お気軽にフォロー頂ければ幸いです!^^

ライブ活動

東京ゲームショウ2018にてビジネスデイのみではありましたが、KLab Sound Teamとしてライブ活動を行いました。こちらの模様、公式映像がyoutubeに上がっておりますので、この機会に御視聴をお願いしますm(_ _)m

♪KLabGames放送局+Plus / KLabGamesStation(9/20)【TGS2018】(※2


【インタビュー】KLabGamesのサウンドを一手に担う"KLab Sound Team"…
メンバーが明かしたTGS2018ライブの開催経緯と今後の展望
https://gamebiz.jp/?p=223203

TGSでのライブ後の記念写真

また、以下は来年のお話になりますが、ライブのサポートも致します!^^

樋口楓さん(@HiguchiKaede)出演の1stライブ(※3
「Kaede Higuchi 1st Live “KANA-DERO”」
にて、KLab Sound Teamがバンドでライブをサポート致します!

CEDEC, GTMFへの登壇

CEDEC, GTMFなどの開発者向け技術交流会へもKLab Sound Teamが登壇しております。

【CEDEC 2018】ユーザーに、より質の高いサウンド体験を!
ソーシャルゲームでラウドネスコントロールを実現するためのワークフロー構築と考察】

https://gamebiz.jp/?p=219024

【Game Tools & Middleware Forumで、
当社社員がWwiseを用いたモバイルオンラインゲーム開発について登壇をしました!!】
http://pr.blog.klab.jp/archives/51634342.html

シンプルなプレゼンのスライドのイラスト

新製品発表会にゲストとして登壇

以下の動画はNuendo8の新製品発表会の模様です。

KLab Sound TeamからはC.Sと私の両名が登壇いたしました。
動画の1:16:16あたりからが登壇場面となります。

発表会のイラスト「タイトル文字」

webインタビューに登場

スタインバーグ・ジャパン(※4)のサイト内「SoundRoster」に、KLab Sound Teamと私がインタビューを受けました。

【KLab サウンドチーム インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_soundteam.html

【Sound Roster -Behind the Scene- #6 KLab】

【阿部公弘 (KLab) インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_abe.html

インタビューのイラスト(男性から男の子)

専門学校等での講義

【これからのゲームサウンドを牽引するソフトウェア「Wwise」。その技術をプロから学びました!】
https://www.hal.ac.jp/tokyo/mind/special/1058

【サウンドクリエイターとして活躍する卒業生から学ぶ!人気ゲームアプリ制作の最前線】
https://www.hal.ac.jp/tokyo/mind/special/14893

【先日、専門学校東京ネットウエイブ様にて、KLab Sound Team4名がサウンド特別講義を行いました!】

つらつらと記載したものを見ると…
「対外活動の方が多いんじゃないか?」

対外活動をするにもわけがありまして…

  1. 「ただ物を作っているだけは他所と一緒じゃないか?」という思い。
  2. 内外で弊社サウンドチームのプレゼンス向上のためのプラスαの活動。
  3. 各メンバーの持つスキルならば、制作だけに留まらない活動が出来るハズ…。
  4. 才能あるサウンドクリエイターに来ていただいて、一緒に盛り上げて貰いたい。
  5. KLab Sound Teamを盛り上げることで、延いてはKLabのクリエイティブ全体を盛り上げていきたい。
  6. より「世界と自分をワクワクさせる」ため。

新興の我々がゲームサウンド業界において新たに居場所を作るという意味においても、対外活動は制作業務と同等の重要性があると考えております。

街頭ビジョンのイラスト

これは街頭ビジョン…

KLab Sound Teamのこれから(夢を語ろう!

以下、記載したものは…
全くもって私自身の個人的な願望でございます!
このアドベント・カレンダー企画にサウンドから手を挙げたのは私だけでしたので、
最後の最後だけ私の思いのたけを語らせていただこうと^^

1. ゲームサントラの配信※5

現状、web上での無料公開になっているものがありますが、それとは違うやり方で楽曲を提供してより多くの人に高音質で楽曲を聴いて貰いたい。それをサウンド主導による制作費用回収策としてやれたら、一層面白いことになるんじゃないか?と。

2. 埋蔵曲の再利用※6

既にサービスを終了してしまったゲーム楽曲の再利用を考えてみる。
現在、もう聴くことは出来ませんが、結構良い曲あるんですよ!それらを思い切ってBGM素材として何らかの形で配布するなどして、もう一度世の中に出してあげることで、音楽的な面での価値を再評価して貰いたい。それ以上に我々の楽曲をより多くの人に聴いていただきたいという思いが強い。

3. 制作者名を出す

作曲者だけに限定した話ではなく、効果音の制作者、MA作業を担当した方の名前も可能な限り出せたら最高だと考えています。まず第一に、誰が何を作ったかが明記されているのは、クリエイター本人のモチベーション維持と向上面から見て極めて重要!第二に、一部のゲーム音楽の熱狂的なファンは作家を追いますから、そういったファンを獲得したいならば名前を出すのは必須事項になると考えています。

また「これ誰が手がけた仕事だろう?」とか「KLabはこんな凄いクリエイター抱えているのか?」いう疑問から、「このクリエイターと仕事したい」に発展するケース(※7)もあるハズ。もし、そうなってくれたら会社にとっても大きなプラスになるものだろうし、クリエイター冥利に尽きるものがあると思います。

4. より一層の対外的な活動

まだ活動の幅はホボ国内なので、夢は大きく海外へ!GDCへの登壇!(などなど

明晰夢のイラスト

まとめ

ここまで、KLab Sound Teamのあれやこれやを記載してまいりましたが、こうして見てみると一般的にイメージされているゲームのサウンドチームとは一線を画すような印象を持ったりしませんでしたか?そんな我々が大きく成長していくには、やはり今よりも叱咤激励が必要であると考えております。

現状、Twitterのフォロワー数は多くはありません。しかし、この状況でフォローしていただくことで「初期から応援していたぜ!」と声高に自慢できる可能性が、まだまだ十分に残されているとも言えるのではないでしょうか?

最後になりますが、弊社配信タイトルのユーザーの皆様、そしてゲーム音楽好きな皆様も御一緒に、KLab Sound Teamを盛り上げることに参加して頂ければ幸いでございます。

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam



皆様、これからもKLab Sound Teamを何卒宜しくお願い致します。m(_ _)m
集合している人たちのイラスト(子供)

文中の注釈(※)のまとめ

※1:弊社のビジョン
弊社にはKLabビジョン(https://www.klab.com/jp/company/vision/)というものがあります。弊社のロゴマークの由来も記載があるので必見必読!
個人的に感じている点として、社内の空気といいますか…割と自由度高くやれる空気が醸成されているのは、このビジョンのおかげだと感じることが実際多いのです^^

※2:KLabGames放送局+Plus
弊社で毎週水曜20時から放送を行っているゲーム情報配信番組。KLabGames新作ゲームのお知らせや、絶賛配信中のゲームに関する情報や、攻略などの情報をお届けしています。MCには内村史子さん

チャンネルKLabGames
https://www.youtube.com/channel/UC5jKrMQl1H7F3TVXZHnb_eQ

※3:樋口楓さん
ただいま人気沸騰中!にじさんじ所属のバーチャルアイドルです^^

年明け2日にNHK総合で放送される【アニメ「NHKバーチャルのど自慢」】への出場も決定いたしました!

樋口楓さんの公式YouTubeチャンネル
https://www.youtube.com/channel/UCsg-YqdqQ-KFF0LNk23BY4A

※4:スタインバーグ・ジャパン
本社はドイツ。音楽制作をやっている者でスタインバーグの名を知らぬ者はいないだろう?
音楽制作向けのCubase、それにポストプロダクションの機能を強化させたNuendo、波形編集ソフトのWaveLabがSteinbergを代表するソフトウェア。NuendoはWwise(ゲーム開発用インタラクティブオーディオソリューション)との連携が強化され、現在急速にゲームサウンド業界での普及が進んでいる。

※5:ゲームサントラの配信
CDとして在庫を抱えることと販路の問題。CDの海賊版問題やCDからの違法アップロード問題。海外リスナーにも広く聴いて貰いたいことなども考慮すると、現状ではサブスクリプションでの配信が一番現実的な気がしています。

以下、海賊版の事例。
・ゲームミュージックサントラの海賊版が中古市場に出回っているらしい
https://togetter.com/li/1205968

※6:埋蔵曲の再利用
印税収入になるような収益モデル(劇伴のサントラのような)だったら埋蔵されることもないのだろうか?と思う瞬間が正直あります。

※7:「このクリエイターと仕事したい」に発展するケース
私は結構これで人生繋がっているところありますが、一般的にはどうなのでしょうか?

はじめに

お疲れ様です、LEEDHです。
この記事は KLab Creative Advent Calendar 2018 の14日目の記事になります。

今日はPhotoshopブラシにカスタム機能について紹介したいと思います

Photoshopのブラシを確認する方法は「ブラシ断面」で確認方法と「ブラシストローク」で確認方法があります。

ブラシ断面:ブラシを構成する基本形のこと

断面02.jpg

ブラシをドラッグ(drag)せずに垂直に点を取ってみると、そのブラシの断面を見ることができる。簡単に言うと筆をカッターで切った断面のことです。

ブラシストローク:基本的な形の線をひく動き

 

同じ形の断面を持つ筆だとしてもストロークの性質の設定によっては、上図のように全然違う形に変わります。

ここに色の混じり方や、より詳細な設定の調整を加えていくことになります。

カスタムによって表面的な変化を与える最も大きな構成要素は、まさにこの断面の形状変化とストローク時の性質の設定に依存されています。

Photoshopから基本として提供されているブラシの本質的な性質をいじる前に、基本ブラシだけでは限界があることを認識し、十分な時間をかけて、じっくり複数の基本ブラシの性質を把握しておく必要があります。

この中で自分の使用意図に最も近い性質のブラシを見つけてそれをベースにてカスタムをしていくとより自分に合うブラシを作ることができます。

早速Photoshopのブラシカスタムをやってみよう

まずはショットカットキー「F5」でブラシ関連メニューを開いて各メニューの役割について調べてみましょう。

ブラシ設定.jpg

1.ブラシ先端のシェイプ

3

A 直径:ストローク時 直径の幅(ブラシの大きさ)を設定

B 角度、真円率:選択された筆テクスチャのシェイプを変形させる

3

C 硬さ:ストローク時、輪郭に鮮明度を決める。数値を下げるとエアブラシのように輪郭を滑らかにする

3

D 間隔(かんかく):ストローク間隔を数値で設定する。

この間隔が狭くなるほど滑らかなストロークが可能になるが、演算が重いブラシの場合一時的にマシン(パソコン)が遅くなる可能性もあります。

2.シェイプ

コントロール 属性

設定メニューの中にはコントロール属性設定項目がついている場合があります。

3


  • オフ:なんの影響も受けない(マウス入力状態)
ブラシ設定09.jpg

  • フェード:まるでエアブラシを噴射したようにストローク後すぐに消えていく。
    この属性を選択すると隣に数値入力欄が出てきて、噴射の持続程度を決めることができます。
  • 筆圧:圧力感知タイプ。圧力によって太さと濃さが変わります。
  • ペンの傾き:この属性を選択すると傾き感知が可能な入力装置ではペンパブレットを傾けることでストロークに影響します。
  • スタイラスホイール:タブレットとサムホイール使用時設定すると色相情報の位置を追跡することができます。

以上の「シェイプ」カスタムはブラシの形によるストローク形態の細かい調節と連携されています。

基本ブラシを持って来て属性と数値をいじってみながら比べてみると理解しやすいと思います。

3.散布(さんぷ)


  • 散布:ストロークが通った線を中心にどのぐらいブラシを拡散させて分布させるのかを決めるオプション

3


  • 両軸(りょうじく):チェックするとストローク中心を基準に両方面に拡散されながら広がる。
  • 数のジッター:「数」は面積当たりに適用されるブラシの数を決めてくれる。「数のジッター」は数値の不規則性を数値で適用するようにしてくれるオプション。

4.テクスチャー

この項目はブラシのストロークに特定のテクスチャを反映させます。

簡単に考えればキャンバスの紙質感と似たような効果を作ることができるが、表現に限度はある。活用度は非常に制限的。

「B」エリア描画(びょうが)モード以外は非活性化されているが、描点ごとにテクスチャを適用にチェックすると全ての項目が活性化されます。

5.デュアルブラシ

ブラシカスタムにおいては大きい影響を与える部分。

さまざまなブラシの基本になるいろんな筆のテクスチャがインデックスとして登場し、現在のブラシの形(シェイプ)に基づいて、ブラシのテクスチャを追加して重ねて表現してくれます。

描画モードでは、選択したブラシ断面が描画モードの属性を持って追加され。直径、間隔、散布、数はそれぞれの機能をする。難しく説明したが、簡単に言えば2つの断面を合体させて新たなブラシを作ることができます。

6.その他

この項目の機能はシンプル
透明度と流量(りゅうりょう)のジッター(不規則性)を調節。
ブラシを選択したときPhotoshop上部に表示されるプロパティで調整できる。

7.そのほかには

「以下のチェック項目について」

ノイズ:ブラシストロークの外郭を荒くする属性

ウェットエッジ:水彩画タッチのようにストロークの外郭を濃くしてくれる

重ね描き効果:エアブラシの特性を一定部分反映させてくれる

滑らかさ:ストロークの外郭を滑らかにしてくれる属性

テクスチャの保護:名前そのまま、テクスチャを保護する機能

デフォルトブラシより特定質感のブラシで試してみた方がその違いが分かりやすいのでいろいろ試してみましょう。

PhotoShopカスタムブラシ作成

ブラシ断面(パターン)を描いてブラシ登録

自分が描いた絵やパターンをブラシとして登録することもできます。

木や人間のシルエット、雲などよく使うシルエットをブラシに作って使っている人も多いです。


  • 色が白に近いほど透明になっていく。
  • グレイは半透明になる。

完成!

おわりに

ブラシの属性や特徴を理解しておくとより効率よくイメージを作成することができるため、いろいろ試して、失敗して、成功して、自分なりのブラシテクニックを身に着けておきましょう!

最後までご覧いただきありがとうございました!

はじめに

この記事はKLab Creative Advent Calendar 2018 の 13日目の記事になります。

お疲れ様です、クリエイティブ部の2DイラストレーターのCheonです

今日は明度について話したいと思います。

幅広い人に役立つ情報を発信したかったので、基礎的な知識が殆どですので、クリエイティブの方はお浚いの意味で、その以外の方が普通に楽しく読んでいただければと思います。

明度の確認をしやすくするため、モノクロの参考図が多いですので、ご了承くださいませ。それでは早速、はじめたいと思います!

明度

明度とは色の三要素のひとつで色の明るさの度合の事です。

暗い(黒に近い)と明度が低い、明るい(白に近い)と明度高いと言います。

人は平均的に40段階くらいの明度が識別できるらしいです。

明度の段階が多すぎると上図のように明度の段階が区別できなくなります。これができると人間でない可能性が高いので、自分もしくは周りにそんな方がいれば何処かに報告してください!

色はそれぞれ違う明度を持っています。

色をグレーにしてみると明度の差がはっきり見えます。赤の場合、明度が高く見えますが、そんなに高くありません!

明度は明るさ以外に重量も感じさせることが出来、明るいほど軽く、暗いほど重く感じます。

上図を見てください。

ACは軽く、BDは重く感じます。

BCは同じ明度ですが、Dに比べCが明るく比較的に軽く感じられます。

後、BCは同じ明度なのにCが少し明るく見える現象が起こります。その理由は明度対比が発生するからです。その内容については後ほど説明します。

コントラスト(対比)

人は物事を見て、反応することができるのは、明度のコントラストがあるからです。

今文字が読めるのも明度のコントラストのおかげ!

明度対比

明度は周りにある他の明度に影響を受け、本来の明るさよりも明るく、暗く見えたりします。

右図の小さい正方形のほうが左図より明るく見えますよね?実は同じ明度です!

明るい色と暗い色が接するところでは、明るい部分はより明るく、暗い部分はより暗く見える傾向があります。


画像出典:wikipedia「チェッカーシャドー錯視」

チェッカーシャドー錯視です。

AマスBマスは同じ明度ですが、あきらかに違って見えます。それは「側方抑制」と呼ばれるものが関係しています。

あなたの脳がAマスは明るいエリアに囲まれていて、Bマスは暗いエリアに囲まれているという信号を受け取ります。それゆえに脳がAマスは暗く、Bマスは明るく推測をしてしまうのです。それで、AマスBマスより暗く見えてしまいます。何度も何度も繰り返してみても、騙されてしまうのです。

縁辺対比

色と色が接する境界部分に起きる対比効果です。

境界部分(赤四角)を見るともっと濃く、鮮やかに見えるのがわかります。

ハーマングリッドです。

白線部分で黒に接している縁(四角い黒と黒の間の白線)の所で縁辺対比が起こりより明るく見えています。一方、白線の交わった真ん中(薄い影が見える所)は、直接黒とは接していないので、縁辺対比はあまり起こらないのです。そのため、白線の十字部分をより暗くみえ、実際にはない薄グレーの丸が見えます。

理由をわかっていても騙されてしまいます。

明度の基本的な役割

雰囲気とトーン

特定の効果を得ようと、意図的に明度スキームを限定したり、コントロールできます。


コントラストが低いと「淡い、静かい、柔らかい、薄い、軽く」感じ、コントラストが高いと「くっきり・力強い・硬い.・重い、刺激的」に感じられます。


画像出典:Google Arts & Culture『In the Woods at Giverny , 1887 by Claude Monet』

ご覧のとおりに明度のコントラストを最小化し、明度が限られた範疇にある場合は薄くて静かな印象を受けます。


画像出典:Wikipedia『Judith Slaying Holofernes (Artemisia Gentileschi, Naples)』1620 by Caravaggio

明度の範囲をいっぱいに使い、明度を極端に変化させ主題をつよく目立たせています。ドラマチックな画面の演出に望ましいです。

ボリューム(立体)

明度のグラデーションを利用する重要な理由の中に一つはボリューム感です。

人間がモノを立体的に感じるのは明暗(明度のグラデーション)があるからです。

左図の平面の六角形と右図の正六面を比較してみてください。明度が平面の空間のものに立体を付与することがわかります。

次の図を見てください。


画像出典:WebGalleryOfArt 『Madonna and Child』,1520-25 by Michelangelo Buonarroti

子供のどころは明暗で立体的に見えますが、女性は線だけで表現され平面的に見えます。

円柱を使い立体に存在する明度の差を確認しましょう!

明部:光が当たる部分です。明部には最も明度が高いハイライトが存在します。

暗い明部は暗部にある反射光よりは明度が低くならないです。

明暗境界線’:フォームが明部から暗部に切り替わる領域に事です。この領域を正しく決めるのが立体を出す中で一番重要な作業だといっても過言ではありません。

暗部:明暗境界線を超えた直ぐの領域です。暗い暗部にはが存在してます。

陰:光が当たった物体の中で暗く見えなくなったところです。

影:物体によって遮られた光が、その物体のシルエットの形を現したものです。

一般的に陰の部分より明度が低いですが、置かれている場所の明度によって変わる場合もあります。

このルールを沿って明暗を表現するだけで、平面のものを正確に立体に見せることが可能になるのです!

視線誘導

明度のコントラストで特定の領域に視線を誘導することができます。

視線を引き付けるのは最もコントラストが高い領域ですので、右上の白い丸に視線が行きます。

次の図を見てください!


画像出典:Wikimedia『File:Whistler - At the Piano.jpg』At The Piano,1859 by James Abbott McNeill Whistler

ご覧の通り何より右の白いドレスの少女に視線が行きます。このようにコントラストを操作することで、明確の注意を特定の領域に集中させることができ、集点となるメインの領域に迷わず視線を誘導できます。

空気遠近

コントラストの強弱により遠近感が生まれ、空間的に距離感の表現ができます。

コントラストが高いと前に出ているように見え、近く感じます。コントラストが低いと後ろにあるように見えますので、四角は背景とのコントラストを少なくしたほうが、後ろに引いてるように見えます。


画像出典:Wikipedia『雲海の上の旅人』Wanderer above the Sea of Fog,1818 by Caspar David Friedrich 

上図を見ると明度 のコントラストの差で、前後関係がしっかり表現されてます!

まとめ

明度をうまく使うとモノを立体に見せたり遠近を感じさせたりすることができます。それだけではなく観覧者の視線を意図通り誘導させたり、ある感情を感じさせたり事もできますので、作品を作る上で、つかせないものであります。

ただし、この内容を知っているだけでは自分のものになれないのです。たとえ、カーブを投げ方を教えてもらったとしてもすぐには良いカーブが投げられないのと一緒で、重ねて練習するのが大事です!

以上、お読みいただきありがとうございました!

KLab Creative Advent Calendar 2018 の 14日目は、LEEDHさんです。よろしくお願いします。

はじめに

この記事はKLab Creative Advent Calendar 2018 の12日目の2つ目の記事になります。

こんにちは、クリエイティブ部サウンドグループのさだきちです。

普段は担当タイトルでのサウンドディレクションに始まり、
効果音や楽曲等の制作からゲーム内へのサウンド実装まで、
幅広く業務を行っています。

今回はTokyo Demo Fest 2018にてDemo Compo部門で1位をいただいた
@gam0022さんとの共作「WORMHOLE」を制作するにあたり、
サウンド側で取り組んだ内容や制作技法について少しご紹介させていただきたいと思います。

Tokyo Demo Festとは?

Tokyo Demo Festとは日本で唯一のデモパーティで
コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーを行うイベントです。

グラフィック編については以下リンクに掲載されております。

▼Tokyo Demo Fest2018のDemo Compo優勝作品の解説(グラフィック編)
https://gam0022.net/blog/2018/12/12/tdf2018/

▼発表したデモ

コンセプト

今回は、@gam0022さんが「ワームホールによる空間移動」というコンセプトを掲げ、
不思議な球体がワームホールを介して異なる2つの空間を行き来するといった内容でしたので、非現実、デジタルな世界観というテーマを元に制作を進めていきました。

また、@gam0022さんの制作途中のグラフィックが、
青色、黒色を基調としたデジタルで光り輝き、
ポジティブに寄りすぎない幻想的なイメージを感じる奥行きのあるグラフィックだったので、曲調としてはトランス、エレクトロ調の奥行きがありデジタルさが感じられるものに加え、シンセ、ピアノ、ストリングスなどでクールな部分を出したサウンドにまとめる方針で制作を行いました。

展開について(4拍子から3拍子へ)

テンポについては、Unityを使用する上で、BPM120(1小節2秒、1拍0.5秒)で合わせると管理しやすいことから、BPM120の4つ打ちでの制作を採用しました。
(キックドラムが鳴ると同時に、映像が光るなどの映像との同期が容易になる為)

ただ、4つ打ちのループが続いてしまい
展開として単調になってしまうのではないかという懸念があったのと、
聴いていてハッとなるような捻りが欲しかったので、
途中の展開に3拍子を入れてみました。

BPM自体は120と変化はありませんが、
1小節キック4回(キック1回が0.5秒)で2秒かけていた所を、
1小節キック3回で1.5秒で楽曲が展開をしていくため、
拍子を変えることによって楽曲にスピード感をつけることができます。

▼00:51~3拍子のリズムになります。

また、最後02:04~の最後の4小節で4拍子に戻ることで、
最初のリズムパターンに戻り、
楽曲の部分を感じさせられるようにしました。

逆再生による非現実音

今回、デモの非現実的な表現にスポットをあてたかったため、
楽曲の全編にわたり、ピアノ、シンセ、ストリングスなどをサンプリングし逆再生したものを使用しました。

ピアノやシンセなどの音を逆再生させることで、
迫りくるような非現実的なイメージをつけることができます。

ピアノの波形

逆再生したピアノの波形

逆再生した音は、元の波形がアタック(音の頭部分)が強くはっきりと聞こえているもので、かつ余韻も強く感じられる音であればあるほど、
逆再生をしたときに音が迫ってくるような効果を得ることができます。

ストリングスのスタッカートやギターのストロークなど、弾くニュアンスが入っているものは特に効果的です。

また、逆再生した音と元の音を、ブレンドして、
左右に交互にパンを振って使用すると、
より非現実的で幻想的な音を作ることができます。

ピアノの原音と逆再生したものを高速に混ぜたサウンド(動画00:24~)

ストリングスのスタッカートの原音と逆再生したものを混ぜたサウンド(動画00:36~)

逆再生したシンセ(動画01:14~)

ホワイトノイズで無機質さ、奥行きを表現

前半のグラフィックは、
無機質、かつデジタルさ、また奥行のある屋内を想像させるようなグラフィックでしたので、コーン…と無機質に冷たく響き渡るようなソナー音のような音を取り入れてみました。

このような音はシンセで作ることで簡単に表現ができます。

ホワイトノイズで作ったシンセの音(動画00:20~)

作り方はいたってシンプルで、すべての周波数をほぼ均一に持っているとされるホワイトノイズの一部分の周波数帯域を持ち上げる(ピーキング)ことで、
ノイズから音階を生成することができます。

作り方:
1.ホワイトノイズが出せるシンセを用意
  →今回はNative InstrumentsのMassiveというシンセを使用

2.画像の①がノイズを出力できる箇所(オシレータ)となるため、
 Amp(音量)、Color(成分)を右に捻っていく
  →この時点でサーッというノイズが鳴ります

3.②のFILTERでBandpassフィルターを選びResonance(どれだけカットオフ周波数の肩の部分を強く持ち上げるか)の値をほぼ最大値まで捻り、
Bandwidth(周波数の帯域幅)とCutoff(フィルターの周波数帯域の支点)を聞きながら調節
  →コーンという音が鳴り始めるので、自分の理想とする音まで調節

4.③の「4Env」をクリックして音のADSR(音のアタック、余韻など)を決めて調整
 ④のAttackで音の頭の部分を調整(音が硬すぎるときは左に捻って頭を削る)
 ⑤のReleaseで音の余韻を調整すると完成です。

このようなノイズで音階を作ったものは、
オーディオとしてピッチを直接変えることで楽器としても使用しました。

ピッチを変えた音(動画00:51~)

Vari Audioを使用したボイスの加工

広大な空間にボイスを響き渡らせることで奥行きを表現したかったのと、
声が入ることでデジタルなサウンドへのアクセントになると思い、
残響感をつけた女性ボイスのサンプルを加工して使用しました。

加工に使ったツールはDAW(作曲ソフト)のNuendo / Cubaseに搭載されている
Vari Audioというオーディオのピッチ編集機能を使用しました。

ボイスを複製して、
一方のオーディオのピッチを変えることでハモリを作ることもできます。

ボイスをVari Audioでピッチ編集して、ハモリを加えたサウンド(動画00:35~)

ボイス加工したものは楽器のようにアンサンブルの一つとしても使用しています(動画00:51~)

おわりに

以上、「WORMHOLE」のサウンド側で取り組んだ内容と制作技法の紹介でした。

今回、共作させていただいた@gam0022さんのグラフィックが本当に素敵でしたので、
まだまだ紹介仕切れない程、サウンドにもこだわりの部分を詰め込んでおりますが、
もしまた機会がありましたらご紹介させていただきたいと思います。

ちなみに、今回、Tokyo Demo Fest 2018の参加でデモシーンを初めて知りましたが、
使用される音楽はクラブミュージックが大半で、DJ、VJもいらっしゃいますし、
私自身、非常に好みなサウンドが溢れているパーティで、、

もう、色々と最高でした!!

来年も是非、参加したいと考えております!