「CROSS×OVER」ザ・メイキング Part2

Part1はこちらからどうぞ。

さて、私は今回を含めまして、EtlanZ様の特設サイトをこれまでに4つ制作したわけですが、
毎回悩みのタネとなっているのが、キャラクターの配置です。

正直な話、特設サイトはキャラクターの存在だけで半分以上が成り立ってると思います。
キャラクターが無ければ非常につまらないサイトになると思うのです。
だからこそ、どのキャラをどこへ配置するのかは非常に気を遣います。

まず、とっかかりやすいキャラから配置していくのですが、
今回すぐに決まったのは、メニューへご案内するカーくんですw

gototop_off.png

 

 

 

 

 

 

 

 

うむ、ピッタリだw

SDキャラをたくさん描いてくださった野愛におしさんのイラストはどれも可愛らしいです。
実は、私が制作した全ての特設サイトに、野愛さんのイラストが使われています。

で、そんな野愛さんのイラストの中で個人的に一番ツボだったのが、

blackbom.png

 

 

 

 

 


 

 

 

黒ボン「あ・・・」

見た瞬間に思わず 「ンフッ」 って声が出ましたw
この数秒後の運命が手に取るうように分かりますねw

なので、最初はこの黒ボンを前面に押し出すべく、
「3.収録曲リスト」は、ボンバーマンのステージを意識して作ってみたんです。

list.jpg

 

 

 

 

 

 

 

 

 

 

最初はブロックとかもオリジナルそっくりにしようかと思ったのですが
時間の都合もあったので、ざっくりと省略してこんな感じになりました。

あとは、「頒布情報」にいる魔王様とウシワカの組み合わせも好評でした。
ウシワカは途中から渡されたイラストだったのですが、
縛られている魔王様に斬りかかるという構図がピッタリ合うかなと思いましてw

ushiwaka.jpg

 

 

 

 

 

 

 

 

 

 

 

そして、今回より初めて取り入れてみたのが、
ツイッターの共有ボタンと、フェイスブックの「いいね!」ボタンです。

twitterbtn.png

 

 

 

 

 

 

 

 

※上は画像ですので、実際には押せません。

むしろ、「なぜ今まで取り入れなかったのか」と思うくらいでした。
どのくらいの人にこのサイトがシェアされたかを示す一つの指標として、
いかにこのボタンが重要なのかってのが今回解りました。

何より、数値化されているので見ただけですぐに判断ができますよね。
M3の前日には500ツイートを達成したのですが、
サイト公開5日目でこの結果は、非常に満足いくものになったと思います。

さて、駆け足ではありましたが、「CROSS×OVER」ザ・メイキングは以上です。

まぁまだまだ苦労話を書き出せばたくさん出てくるのですが、このくらいにしておきます。
あとは、サイトを見てくれた方がどのように解釈するかですね。
気に入っていただけたら、是非とも本編のCDもご購入頂ければと思います。

最後までご覧頂きましてありがとうございました。

「CROSS×OVER」ザ・メイキング Part1

こんばんは。gendです。

先日のM3にて初公開となりました、EtlanZ様の新作「CROSS×OVER」の特設サイトを、
不肖ながら私が制作を担当いたしました。
キャライラストは私ではありませんが、それ以外の部分は全て自分が担当しています。

クロスオーバー CROSS×OVER

今回のCDのコンセプトは、
「昔のゲーム音楽も素晴らしいけど、今のゲーム音楽だってスゲぇんだぜ!」
っていうのを、古参も若者にも知ってほしいという願いがこめられています。

そのコンセプトを聞き、どんなサイトデザインにするかを考えたのですが、
やはり昔ながらのドットテイストと、今風の美麗なテイストを織り交ぜた感じにしようと決めました。

top

 

上は特設サイトのトップなのですが、

まず左半分がファミコンを表現してるってのは分かると思います。
右側は…、一応PS3のつもりです。ちょっとキビシイですねw

また、中央のテレビが右半分と左半分で違ってます。
左半分は昔懐かしのブラウン管テレビ(と、ブルースクリーン)。
右半分は現代の液晶テレビです。

さらによく見ると、キャラの後ろにグルっと輪を描いている矢印ですが、
最初はドットのようなカクカクした感じから、
だんだんと滑らかな曲線になっていくのがお分かりになるかと思います。

トップだけでもこれだけのネタを仕込んでみました。

次は、メニュー画面です。

 

 menu

1、3、5番をドット風に、2、4、6番を美麗風に分けてみました。

文字やボタンの枠や、マウスオーバーした時もそれぞれを踏襲させています。

 

 menuon

そして、それぞれのボタンのリンク先にある各コンテンツも、

ドット風、美麗風にイメージを分けています。

 

 menubar

ちなみに、1、3、5番の背景はFF6をイメージしています。

丁度CDにも収録されているので、ちょうどいいかなと思いまして。

あとは小ネタ的ですが、コンテンツの枠の色は、
左半分は「赤・青・黄・緑」のスーファミカラーで、
右半分は「紫・青・水色・黒」のPS2カラーをイメージしています。

 

border

 

 

ザ・メイキングPar1はここまで。Part2へ続きます。

メガロックカーニバル特設サイト制作ウラ話-その2

(続き)

※バナークリックで特設サイトへ
メガロック カーニバル

デザイン制作で最も大変だったのは、やはり参戦メンバーの項目でしたね。

ここは色々と細かな注文があり、現在のデザインに落ち着くだけでも苦労しました。
特に、メンバーの紹介文に関してはフォントの大きさや長さなど、調整が大変でした。

それと、野愛さんが描いてくださった、たくさんのSDキャラのイラストの配置。
全てのキャラを、どこかで最低1箇所は使うと決めていたので、
キャラをどこへどのように配置させるかも、結構悩みました。

ロックマンだけでも数種類のキャライラストがあるというのに、
サブキャラやボスキャラはそれ以上の数があったので、余計大変でした(笑)

トップ画像の津島先生のイラストは、
一般公開からしばらくは、もっとサイズが大きかったのですが、
多方面から「重すぎる」というクレームが相次いただため、縮小した経緯があります(笑)

だって、あまりにもカッコいいイラストだったから、ついつい大きく見せたかったんです。
その縮小前の大きさで、デザインを作ってしまったので、
「熱血大音楽祭」よりも横幅が大きくなってしまっております。

あと、お気づきの方もいると思いますが、
背景の星空は、ページスクロールで立体的に動いてるように見えると思います。

IEやChromeだとわかりづらいのですが、FireFoxだと滑らかにスクロールするので、
個人的にはFireFoxで閲覧されることをオススメします。

特設サイトには、参加メンバーのサイトとツイッターのリンクが貼られています。
ここを拠点に、制作者の方の作品をチェックされるのもよろしいかと思います。
それは、主催をされたえくす氏も、一番望んでいることだと思いますので。

ということで、長々と書いてしまいましたが、
ここまでご覧くださいましてありがとうございました!

メガロックカーニバル特設サイト制作ウラ話-その1

こんばんは。gendです。

ウラ話ってほどでもないんですが、
特設サイト完成に至るまでの経緯を書き綴って見ようかなと思います。

※バナークリックで特設サイトへ
メガロック カーニバル

メガロックカーニバルの参加メンバーは、
MRFF開催の1ヶ月ほど前くらいに知らされていたのですが、
そのあまりの豪華なメンバーに、「マジかよ!?」と我が眼を疑いました。

「こりゃ中途半端なデザインにしては、参加された方に失礼かもしれない…。
だから、『熱血大音楽祭』を超えるくらいのサイトにしなければ!」
※「熱血大音楽祭」の特設サイトも私が制作しました。

…ということで、デザインの構想をぼんやりと考え始めたのが6月初旬の頃。

えくすさんから制作の資料となるものを多数預かったのが6月中旬。
ブックレットデザインを元に、サイトデザインを制作していきました。

平日は会社から帰宅後の2~3時間を使い、
土日の休日は、ほぼ部屋に軟禁状態のまま、机にへばりついてました。

デザイン制作から完成までの制作日数は、およそ2週間ほどでした。
10日間ほどがデザイン制作で、残りはデザイン修正と組み込みを半々くらいの割合。

MRFF開催の2日前に一般公開で、
さらにその前日は関係者の方へのチェックが必要だったので、
実質的な納期は6月26日でした。

しかし、24日の時点で、まだデザインも全て完成してなかったので、
ページの組み込みも並行して行わないと間に合わない計算になり、
会社に持ち込んでコッソリと制作をしたくらいです(笑)

さらに、関係者の方へお見せする前日は徹夜でした。
早朝5時に完成し、そこから2時間ほど仮眠をして会社へ行きましたよ(笑)

それから、細かな修正がポツポツとは入ったものの、
一般公開には踏み切れると判断され、無事26日に公開。

えくすさんのツイッターで、告知の瞬間を見届けたのですが、
リツイートの数が次々に増えていくんですよね。あれはスゴかった。

と同時に、やっと大きな仕事が終わったんだな、と感じた瞬間でもありました。

続きます