はじめまして！DeNAでアートディレクター / デザイナーとして、Web・グラフィックなどをデザインしています Tanaka Hayato です。 この記事に興味を持っていただき、ありがとうございます。 今回、Cocoda! さんからお声がけいただき、私がWebデザインを担当した「Tadaima! Design Scramble 2019」のサイトについて、プロジェクトのはじまりから制作の過程など、どういった流れで出来上がったのか、デザイナー目線でご紹介いたします。 [Tadaima! Design Scramble 2019] https://designscramble.jp/
01：Design Scramble とは 02：プロジェクトのはじまり 03：デザイン 04：コーディング 05：公開・その後
「Design Scramble（デザインスクランブル）」とは、DeNAが主催している渋谷を舞台にしたクリエイター・デザイナーのためのデザインフェスティバルです。 2018年に初開催し、 デザイン・ファッション・IT・メディアアート・飲食…と、業界の垣根を超え繋がった様々な企業（約30社）が企画した催し物を楽しみながら、1日を通してデザインに触れ合うことができるイベントとなります。
[Design Scramble 2018] https://2018.designscramble.jp/
2019年10月に2回目の開催となる予定だったのですが、台風の影響で開催中止となってしまいました... しかし、2020年3月に「Tadaima! Design Scramble 2019」と題して、再び開催が企画されプロジェクトが始動します。 私は、2018、2019のプロジェクトには不参加だったのですが、再始動プロジェクトのWebサイトリニューアルで声をかけていただき、デザイナーとして参加することになりました。 プロデューサーである後藤 あゆみさんからの依頼は、前回のWebサイトからパワーアップし、見る人に興味を持ってもらい、参加したくなるようなイケてるサイトを作ってくれ！という内容でした。 その課題がクリアされていれば、基本的に好きに作っていいという感じで、2019年11月末に案件がスタートしました。
[Design Scramble 2019] https://2019.designscramble.jp/
デザインの話をする前に、社内外問わず「このサイトの制作過程教えてください！」と質問していただけるのですが、正直言うとロジカルなことってほとんどなく、ほぼ感覚で作っています... すみません、概ねフィーリングです。（笑） 元々あったグラフィックとムービーが素敵で、全体のコンセプトや世界観、トンマナはしっかりと決まっていたので、それをWebに落とし込んだっていうのが1番主な回答になります。 ただ、Webサイトとしてデザインするにあたって、大きく3つ念頭において作りました。 1. グラフィックを生かした派手なデザイン 2. 演出を取り入れ世界観をより視覚的に 3. 自分自身が楽しんでデザインする では上記の内容を、それぞれもう少し掘り下げて書こうと思います。 -----
1. グラフィックを生かした派手なデザイン
1番最初にやったことが、もらったグラフィックとムービーのデータを観察しました。 そこからWebサイトとしてどうデザインするかイメージを膨らませます。 惑星のようなボールがフワフワしていたり、ボールが弾けたり、柔らかいのとエッジの効いたシェイプが混在していたり…と、この時にメインエリアのレイアウトや、演出のアニメーションなどを頭の中でざっくりイメージします。 （私はWebサイトデザインでは基本的に手書きでラフなどは書きません。レイアウトに迷った時などは紙に書きます）
次に、ディレクターのOZPAさんが作成したワイヤーフレームを確認します。 全体の構成をチェックし、レイアウトのメリハリ（遊ぶところと読ませるところ）を区別します。 （この時、構成を変えた方がいいなと思う箇所があれば、ディレクターに相談またはデザインに反映し提案します） ある程度、頭の中でイメージできたら実際に手を動かしデザインに移ります。
↑こちらが実際の初稿ラフデザインです。（Webサイトは基本的にPhotoshopでデザインします） ラフと言っても、この地点でほぼイメージしていた形になったので、チーム内からもその調子で進めてください！といったリアクションでした。 ディティールのツメがまだ甘いので、バランスや細かいところの調整をしつつフッターまでデザインを進めていきます。
↑こちらが2回目に出した実際のデザインです。 いかがでしょうか？ グラフィックを踏襲して、メインエリアにインパクトを持たせ随所にボールのあしらいで遊び、読ますところはやり過ぎないレイアウトになっているかと思います。 大きな修正もなく、TOPページはこのデザインでOKとなりました。（公開まで少しブラッシュアップしています） ちなみにデザイン着手からここまでで、大体3〜4営業日ぐらいです。 TOPが決まったら下層ページ、SPページのデザインをどんどん進めていきます。
-----
2. 演出を取り入れ世界観をより視覚的に
演出についてはデザインと言うよりも、次項の「コーディング」でメインになってくるのですが、このサイトは演出ありき（特にTOPページ）でデザインを考えています。 上記ムービーのアニメーションがWebサイトでも表現できれば、ユーザーが世界観をよりリアルにイメージできたり、ワクワクした印象から参加へのモチベーション向上に繋げられるんじゃないかと感じたので、演出が重要な役割になってくるだろうと思いました。 ただむやみに動かせばいいというわけではなく、世界観に合った効果的な演出が大前提となってきます。（詳細は04：コーディングにて）
-----
3. 自分自身が楽しんでデザインする
これはこの案件だからというわけではなく、どんな仕事でも楽しむ気持ちで取り組みたいと思っている、というマインドの話です。 基本的に全てのことが面倒臭いし、できればずっとダラダラしてたいですが（笑）どうせやるなら楽しい方がいいかなと。 これまでの経験で感じたことですが、楽しんでデザインしたものは良いデザインになるし、周りの反応もいいです。 逆に嫌々作ったデザインはダサいし、見ればすぐわかります。（あくまで個人的見解です） 「楽しんで作る！」と意識して取り組むのではなく、ものを作ってたら自然と楽しんでたという感覚ですかね。 どんなクリエイターの方でも、これは共感していただけるんじゃないでしょうか？ チーム全体が楽しんで取り組めれば、最高ですよね。
DeNAでは基本的に、デザインはデザイナー、フロントエンド（バックエンド）はエンジニア、と分業でサイト制作に取り組みます。（人によっては1人でデザインからコーディングまでされる方もいます） 私はというと、コーディングが全くできません。（ソースを見てなんとなく雰囲気わかる程度です） エンジニアの方にいつも大変だろうな〜というような要望を伝えコーディングしていただいているので、本当に頭が上がりません。 なのでリスペクトも込めて、デザインデータは極力綺麗に整理し、コーディングしやすいよう心がけています。 これは制作会社時代に先輩から教わったことで、今も続けています。
また、ボタンのホバー表示をレイヤーで分けて格納し、レスポンシブでのウィンドウサイズに合わせたデータをそれぞれ用意します。 例えば、このサイトの場合PCで1番大きい表示は横幅2000px（データ上は2倍のRetinaサイズ）で作り、標準を1440px（コンテンツ幅1280〜1000px）、最小1000pxで作っています。 SPは750pxで作り、タブレット表示は必要に応じて作ります。 これをすることで、認識の相違も少なくイメージ通りに仕上げていただけます。
いよいよ演出部分です。 先ほど述べたように、このサイトでは演出が重要になってくると考えています。 エンジニアチームにデータを渡す前に、頭の中にあるイメージをできるだけ言語化し、参考となる動画やサイトを集めます。 今回はムービーがすでにあったのでこちらを主な参考とし、細かい部分では他のサンプルを見せながらテキストや口頭で説明します。
-----
少し話が逸れますが、この案件が始まった時、演出が得意なエンジニアさんを抑えないといけない！と思い、すぐに声をかけたのが、私と同じ日に中途入社した小松 貴之さんでした。 彼は、Web界隈の人間なら誰でも知ってる某Web系制作会社出身で、実績も見たことあるWebサイトばかりを手掛けられた実力のあるエンジニアです。 そして、ベースとなるフロントエンドを津々見 徹さん、山川 紫さん、ベトナムチームが担当し、演出部分を小松さんにお願いすることになりました。
演出について、小松さんにはデザインを見せながら一通り私の要望を伝えました。 例えばローディングの動きから、読み込み後にボールが弾けて斜め上からグラフィックが降ってくるところ、メインエリアでクリックするとボールが出現するなど、各セクションの細かいところまでディレクションしています。 ディレクションと言っても、そもそもできるかどうかまず相談し、エンジニア目線で効果的か、違う演出がいいかなどディスカッションして決めています。 これらのやりとりを踏まえ、実際に手を動かしていただきました。 途中経過で見せていただいた時から、すでに要望以上のものが上がってきて、かつ小松さんからもアニメーションの提案をしていただいて、流石だなと思いめちゃくちゃテンション上がったのを覚えています。 自分が作ったデザインを期待以上に仕上げていただいたり、ポジションは違えどそれぞれの熱を感じれると、どんどん良いものが出来そうな気がしますよね！ まさにそんなプロジェクトだったと思います。
そして、2020年2月6日にサイトが公開されました。 https://designscramble.jp/ ありがたいことに公開後の反応は上々で、SNSなどでも多くの反響をいただくことができました。 しかし、同時期に世界では新型コロナウィルスが流行し始めます。 プロデューサーのお二人は苦渋の決断だったと思いますが、またしてもイベントが中止となってしまいました... 準備を進めてきた関係者の方々はもちろん、私自身とても残念な気持ちでいっぱいでした。
開催は中止となってしまいましたが、Webサイトは社内外問わず好評いただけたので、思い切ってWebアワードに投稿してみました。 結果としては佳作的な賞だったのですが、次はさらに上の賞が獲れるよう頑張りたいと思います！ ----- ・Awwwards Honerble Mention ・CSS Design Awards SPECIAL KUDOS ・CSS WINNER SOTD
いかがでしたでしょうか？ デザイナー目線なので、エンジニアリングの技術的な内容は皆無ですが（すみません！）、現在デザイナーの方や、これからデザイナーを目指す方など、少しでも参考になれば幸いです。 そして、2年続けて開催できなかったDesign Scrambleですが、再び皆さまに楽しんでもらえるようなイベントを企画中です！ 必ず戻ってきますので、楽しみに待っていてください！
- Credit - Producer: Ayumi Goto, Sonoka Sagara [Web team] Web Director: OZPA (Kenichi Hasegawa) Art Director / Designer: Hayato Tanaka Frontend Engineer: Toru Tsutsumi, Takayuki Komatsu, Yukari Yamakawa, Vietnam team Special Thanks: Akihiro Tokoro [Partner] Assistant Director: Riku Nishimura Visual Designer: Miori Takeda Movie Designer: Yohsuke Chiai