初めてゲームのWebサイトを作った時に新鮮に感じたこと
この投稿は Happy Elementsカカリアスタジオ Advent Calendar 2019 の21日目の記事になります。
はじめに
初めまして、Happy Elements カカリアスタジオのグラフィックデザイナーです。
本記事では、前職でゲームとあまり関係のないBtoB、法人向けのWebサイト（医療関係者向けの製品サイト等）に関わっていた自分が、
カカリアスタジオに入社して初めてゲーム系のWebサイトを制作するにあたりに新鮮に感じた、感動した事をいくつかお話出来ればと思います。
新鮮に感じたこと①： Photoshopをめちゃ使う
デザイナーなら当たり前では…！？とツッコまれるかもしれないのですが、
前職では自分はひたすら下層ページの量産＆下層コーディングを担当することが多かったので、
Photoshopを使用する際は主に画像の書き出しとトリミングのみ…といった使用具合でした。
（ちなみに最初の2年間はFireworksという現在は開発終了しているAdobeソフトをメインで使用していました…時代を感じる…）
法人向けのサイトに携わっていた時は、殆どの場合HTML/CSSで構成出来るようなシンプルでフラットなデザインが多く、
image＝写真画像、コーポレートロゴくらいといった少なさだったのですが、
ゲーム系のサイトでは、作品の世界観や雰囲気に合わせてデザインの作り込み、グラフィカルに伝えていく必要があったり、
それぞれ別々のイラストを集合させてもあまり違和感が出ないように全体の色調やバランスを調整する等、
Photoshopでの作業が必須になってきます。
告知画像や広告の類も作成することが多く、ビジュアル訴求力がより求められるようになりました。鍛えられます…！
BtoBサイトだと大体ベタ塗りの四角＋文字の レイヤー効果も何も無いフラットな矩形を配置する事が多かったので、
一番最初に事前登録系のサイトのデザインを作成した時はボタンひとつ作るにしても、グラフィックの作り込みってどうすれば良いんだ！？と未知との遭遇の気持ちで作っておりました。
ゲームやキャラクター、作品の魅力をどのように伝えるか、興味を持っていただけるかをなかなか上手く表現出来ずに悩むことも多いですが、 BtoBでの実務的な情報をいかに組み立てて見込み客UPに繋げるかといった作り方とはまた異なる、 物語や奥行きを感じさせるゲームサイトのデザインはとても新鮮で興味深さを感じます。
新鮮に感じたこと②：デザインフォントをめちゃ使う
これもゲーム・エンタメ業界に居る方からしたら当たり前なのでは…！？と思われそうなのですが、
堅めのサイトを作る際には大体以下のようなフォントを使用する事が多く、
サイト内の見出しや本文
- Noto Sans JP
- メイリオ
- ヒラギノ角ゴ
- MS Pゴシック
バナーやメインビジュアル画像
などなど、ゴシック体、明朝体、丸ゴシックを使用することが殆どでした。
なので、ゲームでよく使用されているデザインフォント達を初めて使用した時は新鮮かつ種類の多さにテンションがあがりました！
入社してすぐはフォント名自体もよくわかっていなかったので、「ロックンロールが〜」とか「ここはスキップで〜」といった先輩デザイナーさんのやり取りを聞いて「？？？」と混乱していました。
当初はどれがどれなのかわからなかったフォント達も次第に覚えていき、他のゲームをプレイしている時もどのフォントを使用しているのか気になったり、
アニメのクレジット、テレビのテロップを見た時には反射的に何のフォントかすぐわかるようになりました。人間って不思議です。
新鮮に感じたこと③：アニメーションをめちゃ使う
カッチリした企業向けサイトだとわかりやすさ重視、整ったオーソドックスなレイアウトで制作する事が多かったのですが、
ゲーム・エンタメ系のサイトはコンテンツを印象付けたり興味を持っていただくために、よく動いたり派手な演出で遊び心満載なサイトが多い印象です。
自分はそこまで実装が得意ではないのであまり凝った演出は出来ていないのですが、
CSS animationはデザイナーでも比較的取っつきやすく便利なのでちょっとしたアニメーションに使用することが多いです。
最初はCSS3に慣れておらず、「transform」と「translate」と「transition」の見分け方に混乱していました…。
transform: translate(5px);
transition: all .3s;
・ transform ：CSSのプロパティ。 要素に2D変形、または、3D変形を適用する際に使用。このプロパティに色々指定すると要素を縮尺させたり回転させたりすることが出来る。
・ translate ： 要素の表示位置を移動させる。transformプロパティの値になるので「transform:translate() 」といったように合わせて記載する。
・ transition：こちらもCSSのプロパティ。翻訳すると遷移という意味で、要素が変化するまでの時間を設定する時に使用する。
最後に
ここまで読んでいただき、ありがとうございました！
知っている方からしたら初歩的な内容ばかりで恐縮なのですが、何かしらのお役に立てれば幸いです！
明日以降も引き続きカカリアスタジオのAdvent Calendar 2019をお楽しみいただければと思います。
Informationコーナー
▶ あんさんぶるスターズ！！ 事前登録キャンペーン実施中！！
あんさんぶるスターズ！！Basicではこれまでの『あんスタ！』がより使いやすくアップデート！Musicはリズムゲームアプリとしてコンテンツをお楽しみいただけます！