こんにちは、最近Switchを買って密かにワクワクしているデザイナーの中谷です。

前回は時間をかけた企画編をお送りしましたが、ついにデザイン編に入ります。

第１回：企画編
第２回：デザイン編
第３回：プログラミング編

MVの制作

まずはMV(メインビジュアル)からIllustratorで制作します。
MVはサイトの顔なので、この部分のアイデア出しがデザインでとても重要になります。

（いきなり全体デザインを作ると作り直しがしにくくなるのもありますね）

メインカラーを黄色に決定

前回はメインカラーをオレンジ・黄色・赤の３種類としましたが、
代表の竹部と相談して黄色が洗練されていて現代的という判断になったので黄色ベースでいくことになりました。
それを基にバージョン違いの８つデザインを起こしました。

それぞれのデザインコンセプト

• 狼を継承したロック風なデザイン
• 遊び心のあるクリエイターっぽいデザイン
• オシャレアウトドアなデザイン

これだけ沢山アイデアを出している理由は、デザインは３つ出して１つ残るくらいの感覚で考えているからです。
今回はオリジナリティの高さを求められており、制作時間も多めにとってあるのでとにかくいいアイデアに到達するまで頑張る必要がありました。
（折れない心が大事・・・！）

これらのデザインもわりといい感じですが、念の為別のイメージも見たいということで、黒ベースのデザインも作ることに。

黒ベースのデザインも制作

メインカラーを黒にするとクールな印象が強いデザインができました。
こちらはミュージシャンや音楽機器メーカーっぽいですね。

昼間の会社としてはちょっと暗い印象があるのでボツになりました。
（せっかく作っても思い切って捨てることが大事です）

やはり最初のアイデアの、黄色い斜め線が入ったMVが一番洗練されているということで、その方向で進めることになりました。

MVに合わせたトップページの制作

選ばれたMVに合わせてトップページのデザインを制作しました。

• 黄色い斜め線をダイナミックに使用
• タイトルは大きくして、最初の文字は黒い四角を配置してエディター風に
• カレー好きな会社なのでリクルートバナーにスパイス写真をレイアウト

代表の竹部に相談してブラッシュアップしていった結果こちらのデザインになりました。
（こちらもバージョン違いを制作したりしてます）

デザインの第一線のプロに相談することに

一旦いいデザインになった気がしますが、どこか納得いかない部分を感じるデザイン・・・
そこで代表の竹部の知り合いの株式会社TONMANAの長濱さんという方にアドバイスをお願いしました。

頂いたアドバイスがこちら。

• CV強化の為にCONTACTボタン設置
• Footerに問い合わせボタンを設置
• MVの印象が弱い
• MV直下の文章に大きめのタイトルがほしい
• 各ボタンが小さい
• 黄色背景をグラデーションにする
• NEWSは横並びの方がいい
• リクルートのデザインのバランスが悪い

自分で作っていると見えない部分がどうしても出てしまうので、
ぱっと見た印象を教えていただけるのはとても助かります。
（灯台下暗し・・・？）

MVを見直してデザインの方向性がガラッと変わることに

ここで印象的なMVにするために再度アイデアを練り直しました。
（プロのアドバイスというのは、その言葉以上にインスピレーションを与えてくれます！）

前回のデザインから印象がガラッとかわりました。
今回はそれぞれ狼をメインに使って見せ方を変えています。

それぞれのデザインコンセプト

• IT会社らしい都会的なデザイン
• ヒーローっぽいデザイン
• クールなロック風デザイン

（ここで狼モチーフのロックバンドMAN WITH A MISSIONのサイトも意識し出しました）

だいぶ盛り上がってきたところで、デザインを２つに絞りトップページをデザインしてみることにしました。
どちらがいいのかは簡単には決められなく、ページ全体のデザインを確認しないといけないレベルになったからですね。

２種類のトップページの制作

デザインコンセプトをこのように考え２種類のデザインを制作しました。

• アウトドアもしちゃうような今風の会社
• 狼が宇宙を目指す映画風のサイト

どちらもコンセプトがかなりしっかりして洗練されたデザインとなっています。

（うーんどちらも捨てがたい・・・！）

※一部当て込み画像は掲載できる写真に差し替えています。

そしてついにデザインが決定！

代表の竹部とじっくり考えた結果、右の映画風デザインに決まりました。

最大の決め手は、

『左のデザインはとてもキレイだが他の会社がやっても違和感はない無難なデザインかもしれない』

『右のデザインは他社には真似しずらく、マブスだからこそできるオリジナルのデザイン』

ということでした。

（ここまでくるのが長かった・・・！）

デザインお披露目

トップページのデザインが決定したところで、社内お披露目会を行いました。

ここではデザインの披露やコンセプトの説明、狙いなどを一通り説明して、それに対するみんなの意見を聞きさらなる改善へと繋げるいい機会になりました。

デザインコンセプトの説明

これはオオカミが宇宙を目指す物語。
月面にいる狼からページ下に進むにつれて星雲を抜けて地上へとつながっていきます。
地球と月は表と裏のようにどちらも私達に必要な存在であり、フロントエンドとバックエンドの両方を支えるマブスの姿とも重なってきます。
テクノロジーと人類の夢を乗せてオオカミ（マブスクルー）達が未来へと進むダイナミックな姿を表現しています。

（全部書くと長くなるのでこのくらいにしておきます）

さらに、各所をクリックしたらアニメーションが走る遊び心もあり、見飽きないサイトになることを目指しました。

バーコードの秘密

ちなみにMVの左下のバーコードのネタバレをすると、これはMAVERICKSを２進数化して「010011010100000101010110010001010101001001001001010000110100101101010011」となったものを白と黒で配置し直したものになります。

（気づいたかな？）

下層ページの制作

デザインが決定するとあとは下層ページを作っていきます。
ここからは本格的にXDに移行してガンガン制作していきました。

XDはリピートグリッドの扱いやすさが良いですね。
（今はFigma推しですが・・・）

動画制作

このサイトで必要な動画はこの３つになります。

• オープニング動画
• トップページ下部のリクルート動画
• リクルートページFV（ファーストビュー）

動画はPremiere Proで制作しました。
素材サイトから使えそうな動画をかき集め、ひたすら編集していきます。

映画がテーマということで、OP動画はマーベルのOP動画風のイメージに仕上げました。
（これも何度か作り直しています）

狼アニメーション素材制作

アニメーションの作り方を参考にして、サイト内で使う狼のgifアニメーションを制作します。

８枚の狼のイラストをIllustratorで制作し、gifアニメ制作サイトで結合した結果がこちらになります。

（初めてのアニメーション制作でしたが、なかなかいい走りっぷりです！）

写真撮影

各メンバーの写真をカメラマンの-oni-さんに撮影して頂きました。

僕が事前に撮影場所を選定しておいたところを順番に回る形でしたが、
イメージしていた以上のクオリティで撮影して頂きプロの撮影技術の凄さを実感しました。

（写真の臨場感がすごい・・・！）

未採用写真をご紹介

一旦ここで、沢山撮って頂いて残念ながら採用にならなかった写真をいくつかご紹介します！

高架下と自転車がヤンキーマンガっぽい・・・？

なんとなくジブリな気分

いいねー！アウトロー感がいいよー！

次の撮影場所へ向かうクルー達・・・
（使い所が思い浮かびませんでした）

数々のデザインが終わり、次のステージへ

このように、デザインや動画、写真撮影までボリューム満点でしたがなんとか終えることができました。

最後に各ページの原稿校正をはらくみさんにお願いして、ようやくデザインが完成となりました。

この記事を書いていて、デザインは自分ひとりでつくるのではなく、様々な方の協力があってこそ本当に良いものができるのだと改めて実感しています。

さて、次はようやくプログラミング編へと進みます・・・！

（アニメーションに悪戦苦闘・・・！？）