技術で高めていくデザイン力。チームで学びスキルを高め合うビーワークスの社内ゼミ活動

• 
  デザイナー川野
• 
  デザイナー小野
• 
  デザイナー針尾
• 
  エンジニア今岡

ウェブサイトの幅広い表現を自主的に学ぶ活動を発足

モーション・インタラクション班を立ち上げた理由を教えてください。

川野

川野私たちの部署では、撮影やコピーライティングなどを学ぶ分科会がいくつかあって、モーション・インタラクション班もそのひとつ。ウェブで求められる表現がますます幅広くなってきている中、サイト内の動きや動画の制作に積極的に取り組む必要があると感じていたんですね。業務中に個人で技術を学ぶだけでは限界があるので、自ら研究をして、お客様への提案の幅も広げたいという思いで、2018年に発足しました。

メンバー構成や、班の活動の頻度は？

川野

川野デザイナーやエンジニア、営業など、今は10名で活動しています。それに加えて、班の活動に興味があって、チャットグループに参加して情報をチェックしている人も多いですね。活動ペースは隔週で、毎回1時間程度。

具体的にどういうことを学んだり、作ったりするんですか？

針尾

針尾私は、アプリケーションソフトの講座で新しい技術を習得して、成果を発表したりしています。それまで知っていた機能があったとしても、講座で学ぶと「これってこういう機能だったんだ」とか「これに使うと便利」という気付きもあるので、そういう細かいことも共有しています。

川野

川野デザイナーは、ウェブ講座や、サイトからツールを習得することが多いですね。エンジニアは、サイトへの実装スキルを習得することもあれば、デザイナーがリクエストしたツールを開発してくれることもあって。

今岡

今岡デザイナー向けに、After Effectsの作業効率を高めるスクリプトを作ったりもしますね。

川野

川野この班の良さは、エンジニアとデザイナーが両方集まっているところなんです。ウェブサイトで複雑に動く表現を作るときに、デザイナーのタスクとエンジニアのタスクの切り分けが難しくて、判断できないことがあるんですね。

今岡

今岡そうですね。インタラクションの領域では、デザイナーがデザインを作り、エンジニアがコーディングという完全な切り分けができなくて。お互いが連携しないといいものは作れないので、この班の活動で集まって議論したり、習得したツールを知ることは学びになります。

小野

小野最近の活動では、研究テーマを先に決めてから、その成果を発表したんです。僕の場合は3DCGソフトの「Blender」をテーマにしたんですけど、新しいツールの習得って心理的にハードルが高いので、先に「やります」と宣言したのが良かったです（笑）。今後、案件にもスムーズに活用できるという感覚を得られました。

変身シーンにこだわった「なめこ栽培キット10周年動画」

ビーワークスのスマートフォンアプリ「なめこ栽培キット」の10周年動画もこの班で作ったそうですね。

小野

小野「なめこ栽培キット」10周年を記念して、「なめこのうた」に合わせた動画の制作をしました。私たちとしては、案件の中でこれまで部分的な動きを作ることはあったんですけど、1曲分の長さの動画を作ることは初めてでしたね。

川野

川野当時、針尾はAfter Effectsを使えたんですけど、私をはじめソフトを使えるメンバーがまだ少なかったので、ほとんど初心者のメンバーで手分けして、文化祭のような感じで頑張って作りました。

特にこだわったのはどういうポイントだったんですか？

川野

川野特に力を入れたのは、なめこが10周年の王冠とメダルをつける変身シーンですね。女児向けアニメが大好きなメンバーがいたので、適任だと思ってやってもらいました（笑）。落ちサビの楽器の音に変身のタイミングを合わせたり、パーティクルエフェクトも多用したりしています。

「ビーワークス20周年記念サイト」に込めた思い

ビーワークスの20周年記念サイトもこの班で作られていて、こちらにもたくさんの工夫が盛り込まれていますが、これはどういうコンセプトで作り始めたんですか？

川野

川野20年という歴史による変化と、感謝の気持ちを伝えたいという大きな意図がありました。

今岡

今岡実は、20周年サイトの制作をこの班に依頼した担当者からは、サイトでここまで動きを持たせたいという要望は特になかったんです。でも、単に歴史をつらつら説明しても、よほど興味がなければ読んでくれないだろうと思ったので、サイトをスクロールするだけで視覚的に変化が伝わるものにしたかったんです。

そのためには、これだけの動きを持たせることが必要だったわけですね。

川野

川野そうですね。それにお客様からは、ビーワークスの一部の側面しか見えていないことも多いんです。出版社さんにはシステム開発ができる会社だと知られていないケースがあったり、私たちの部署のお客様にとっては、雑誌のデザインや書籍の販促物を提供するという印象は薄かったりして。そういう普段、見えない面を横断的に見せたかったので、これまでの仕事を直感的に理解してもらえる作りにこだわりました。

このサイト制作でもっとも苦労したのはどういうところでしたか？

今岡

今岡技術的な点でいうと、PCやスマホ・タブレットなど、どんなサイズで見てもコンテンツ全体を楽しめるものにするのに苦労したというのと、パフォーマンスにもこだわりました。こういうふうに動くサイトは重くなりがちなんですけど、画像として書き出す部分とプログラムで動かす部分の組み合わせを変えたりして、スムーズに動くよう、試行錯誤しましたね。

動的な表現を活かしたクライアントワーク事例

クライアントワークの事例はありますか？

川野

川野最近ですと、動画のご依頼だけでなくウェブ制作での事例も増えていて、東京エレクトロン様の60周年記念のイントラサイトのメインコンテンツを3Dで構築しました。また、NEC ネッツエスアイ様の、DXソリューションを楽しみながら学べるウェブコンテンツをcanvasで作ったりもしましたね。

小野

小野ただ「ユーザーにわかりやすく情報を説明する」だけでなく、動的な表現を取り入れることでよりユニークで魅力が伝わるような提案をできるように心掛けています。

今岡

今岡班のメンバーの興味がそれぞれ違うことで、できることも広がってきている感じがしますね。Blenderでモデリングをやる人もいれば、After Effectsを使う人もいて、開発面でもSVGアニメーションやThree.jsなどそれぞれの分野を学習しています。

川野

川野メインのコンテンツをゴリゴリと動かすような提案だけでなく、時には「静的なページに動的な要素をちょっと足す」というエッセンスも取り入れています。たとえば、NECネッツエスアイ様のSymphonictという事業ブランドのキャラクター「シンフォさん」はNECネッツエスアイ様と私たちで企画・デザインしたキャラクターですが、サイト下部のシンフォさんにカーソルを合わせると、手で示しているほうに体が傾くんです。そういう細かいところに、遊び心を忍ばせています（笑）。遊び心を足せるのは、こうした動きの表現ならではですね。

デザイン力は技術力。みんなで高め合える班であり続けたい

マーケティングデザイン事業部全体の部会でも、研究の成果を伝える場があるそうですね。

針尾

針尾60〜70人の事業部全員が参加する週次の部会があり、業務的な報告の後に個人や班が自由に発表をできる場があるので、モーション・インタラクション班の活動や、部内に伝えたい情報の共有をしていますね。

川野

川野ここ3年程はオンラインで開催されていて、発表に対するコメントでチャット欄がいつも盛り上がっています。進め方に関するアドバイスやいろいろなコメントをもらうので、刺激的です。

今岡

今岡「そこ大変だよね、わかる」とか（笑）。新しいチャレンジが多いからこそ、学びの共有が、部署全体のボトムアップにもつながっていると思います。

今後、モーション・インタラクション班としてチャレンジしたいことや、目標はありますか？

今岡

今岡あらゆる表現に対しての勉強を進めたいですね。革新的な演出をしたいといった要望があっても、新しい技術を培っていないと実現できないので、開発側としても、未来に向けてスキルを先取りして習得することを続けたいです。

川野

川野直近では、3DやAfter Effectsをもっと活用したサイトを作りたいんですけど、ゆくゆくは、ARデバイスや店舗のスクリーンなどPCやスマホ以外で楽しむコンテンツの制作にもチャレンジしたいので、そういう場でも技術を活かせる状態にしておきたいです。

小野

小野この班は、モーション・インタラクション班という名前ではあるんですけど、先端の技術を取り込んでいく班という性質があるんですね。知らないことや、やったことないことは実際の案件でも提案しにくいので、この班の活動を通して自分のスキルを広げることで、案件で提案できる範囲も広げていきたいです。

針尾

針尾私は今この班では、動画特化型デザイナーのようになっているんですが（笑）。今後も、3Dを含めた新しい技術でもっとリッチな表現を提案していきたいですし、お客様からの要望にも「大丈夫です」と胸を張って言えるように、技術を磨いていきたいです。

川野

川野最近の私の標語は、「デザイン力は、技術力」なんです。技術がないと実現できないということは、その領域に関するデザイン力がないっていうことになってしまうんですよ。こちらの技術力の都合で実現ができないという可能性は、つぶしておきたいですよね。

小野

小野僕の標語は、「新しいデザインは新しい技術から生まれる」ですね。似てますけど（笑）。

川野

川野まさにそうですよね。それに、自分だけで全部を解決しようとは思ってなくて。ひとりですべての技術を身につけようとすると、人生が3周ぐらい必要だと思うので（笑）。それぞれに特化した人がいて、そのエッセンスを周りが知っていることで、みんながお客様に提案できるという状態を作りたいです。

針尾

針尾お客様に対する「できます」という判断もしやすくなって、サービスのクオリティもどんどん上げていけますよね。

川野

川野これからも、グループだからこそみんなで高め合える、そういう班でいたいですね。

最後に

今回の記事ではモーション・インタラクション班の活動を通して、積極的に学習を進めるビーワークスの風土やその学習を活かしたクライアントワークについてご紹介しました。

「モーションや3Dを使ったサイト構築や動画制作に興味がある」「新しい取り組みにチャレンジしてみたい」などのご要望にもお応えできますので、ぜひお気軽にお問い合わせください。

また、モーション・インタラクションに限らず、興味をもったことをチームで学べる社内風土です。その他の活動や実績が気になった方は、採用も積極的に実施しておりますのでご応募お待ちしております。