DESIGN : ヤクルトはっ酵豆乳 WEBサイトデザイン

OUWNがnoteを開始して３ヶ月が経ちましたが、ここにきてやっと（！）OUWNのもう一人の設立者であり、プログラマーの藤田が登場。

ヤクルト「はっ酵豆乳」の新ビジュアル・WEBサイト制作にあたり、デザインとプログラミング、双方の視点での制作のポイント、言ってなかったけど実は大変だった部分など…
プログラマー藤田 × アートディレクター出井 × デザイナーfumi、３人でのインタビューをお届けします。

OUWNのプログラマー ・ 藤田登場

ー 藤田さん！やっと登場ですね。

藤田 : よろしくお願いします。主にWEBを中心にプログラムでの実装を担当している藤田です。
noteは少しずつ読んでいるのですが、結構しっかりした記事なので１つ１つ作るの大変なんだろうなって思って見ていました。（笑）

ー （笑）いつも楽しくお話聞かせてもらっています。
藤田さんは、普段デザイナー陣と作業をする際はどういった流れでやっていくんですか？

藤田 : 基本は、先に難しいことを言ってしまうとデザイナーが硬くなってしまうので、デザインが上がってくるまではほとんどノータッチのことが多いです。デザインがある程度できたところで、仕様についてどうするか一緒に決めていきます。「こういう動きにしたい」という問いに対して、できるのかできないのか、似たような方法の別バージョンでの提案など、プログラマーとしての視点で考えながら決めていきますね。

出井 : 見た目ではこうしたいと思っても、ある箇所の動作によって別の箇所で不備が出る、ページが重くなる、など、私たちでは分からない部分があるので、いつも藤田さんに助けてもらいながら仕様を決めています。
クライアントさんのOKが出てから、やってみたら実はできなかった！という事態になるとトラブルになってしまうので、それにならないように…
自分でもある程度は判断できるよう、WEBの知識をもっと勉強していかなくちゃと思っています！

藤田 : 最近は世の中に出回ってるもののレベルが高いので、みんな「普通」のレベルが上がってるんですよね。「あそこのサイトで見たものをやりたい」ってなっても、実はとんでもなくお金がかかってることもある。デザインもそうだと思いますが、知らないと悪気なく「簡単にできる」と思ってしまうことってありますよね。それをプログラミングの面でしっかり判断するのが僕の役割です。

ヤクルト「はっ酵豆乳」のWEBサイトリニューアル

出井 : ヤクルト「はっ酵豆乳」のWEBサイト全体のリニューアル、ディレクションをOUWNでさせていただきました。ちょうど一年前の春くらいに連絡をもらって動き出して、夏に撮影でしたね。

ー 今回は、「ぜひ出井さんに！」というご指名だったとか。

出井 : 女性ターゲットの商品ということもあり、以前より親交のあったamanaのプロデューサー・宮本さんから自分に声をかけていただきました。メインターゲットが女性だったので、自分自身共感できるようなものを作れたらなと。

「はっ酵豆乳」はスーパーやコンビニではなく、ヤクルトレディさんが届けてくれる商品で、インターネットからの申し込みで買えるものです。
私も頂いて実際に飲んでみたのですが、ヨーグルト風味でおいしかったです！いわゆる豆乳の味があんまりしないから、豆乳が苦手な人でも飲みやすいと思います。

ー 提案はどんな感じで進みましたか？

出井 : ラフを作って４案提案しました。
タレントの宮澤エマさんの起用が決まっていたので、エマさんが白衣などを着て研究者のようなイメージで成分を紹介していく案や、「豆乳の妖精」みたいなイメージで着ぐるみを着てもらう、といった案など。そういう感じでいくつか提案した結果、選ばれたのが「おうちで過ごす」案でした。

◯ 完成したWEBサイト　https://www.yakult.co.jp/hakko_tonyu/

出井 : ちょうどコロナの時期で、おうち時間が増えたときだったので、家ではっ酵豆乳を飲んでごきげんに過ごそう、といったメッセージを込めての提案でした。その流れで、撮影も白ホリではなくハウススタジオに決まりました。清潔感があり、居心地が良さそうな空間にいるエマさん。エマさんのお家に招かれているようなシチュエーションです。

メインビジュアルは「素敵なおうち時間」というイメージがしっかりあったので、それに合うハウススタジオを求めてたくさん探しましたね。
WEBで探して、実際に撮影日に取れる場所をリストアップして、クライアントの方に見せてイメージと合うか選考し、候補に残ったスタジオへ実際に行って絞りました。結果、すごくイメージに合う場所が見つかって良かったです！

キャラクターをどうしても入れたかったワケ

出井 : 今回の一番のポイントは、キャラクターを入れたところですね。これは絶対に入れたかった。

ー それはどうしてですか？

出井 : クライアントさんとしては、エマさんが目立っていて、女性らしい柔らかいイメージをされていたと思うのですが、それだけだとちょっと目に留まりにくいと思ったんです。エマさんが出てくるだけで華やかにはなりますが、オリジナルのキャラクターを入れたり、しっかりとロゴを作ると、グラフィックの強さやちょっとした違和感が生まれて、OUWNだからこそできるデザインになるんです。

先方のイメージしているものの意図を組みつつ、さらにグラフィックとしての強さを出す！これは、石黒がよく言うことでわたしもデザインをするときに大切にしていることです。

ー 既に先方にイメージがあっても、「それ以上に良くなる」と思うことがあれば積極的に提案するんですね。

出井 : はい。最初から諦めることはせず、「こうした方が良いと思う」と感じることはデザインではもちろん、しっかりと言葉で伝えます。キャラクターがいればアイキャッチにもなるし、女性がターゲットなので「かわいい」っていうのはすごくポジティブなことだから。他の発酵商品や、豆乳飲料との差別化にもなりますしね。

最初はキャラも三次元でエマさんと同じ世界に存在させたかったんですけど、それはさすがに難しかったので、ナビゲーターとしてWEB上でひょこひょこ出てくるようにしたいと、藤田さんに伝えて作ってもらいました。

ー このキャラクターは、どうやってできたんですか？

出井 : この子は、メインビジュアルを作っているうちにするすると私の頭の中で生まれていました！名前は「フラボン」です。
フォルムとしては、大豆でベースを作っていて、そこに雫を混ぜたカタチになっています。顔のパーツをいくつか作って、どれがかわいくてキャッチーか検証しました。誕生日や特技も設定してるんです！（誕生日は10月12日、豆乳の日）
キャラクターができたあと、動きはfumiが作ってくれました。

fumi : 作っていて、とても楽しかったです！キャラクターの検証から、色々なポーズや表情をデザインしましたが、楽しくてすぐ作り終わっちゃいました。

プログラマーの地道な作業

藤田 : コーディングの前に、デザイナーからもらったIllustratorのデータを1つずつ素材にしていきます。グループ化されてたら解除して、欲しい形のパーツにしたものを書き出して作っていく。意外と大変です。
昔はPhotoshopのデータでもらうことが常識だったけど、OUWNでは初めからずっとイラレですね。WEBとしては若干特殊だったかも。今はXDなど、多様化が進んでますね。

ー パーツで動かすから、分かれさせなくちゃいけないものが多いですよね。文字と背景で別にする、とか。

藤田 : そうです。あと、影とかのエフェクトが付いてたりすると相談したりします。乗算効果とかは、そのまま（見たまま）では使えないブラウザがあったりするので、エフェクトじゃない作り方ができないか、とか。
Illustrator上でできても、WEBに持ってくるときは違う表現方法にしないといけないこともあるので、実は見えない部分で頑張ってるところが多いです。

ー 構築するのに、どれくらいかかるものですか？

藤田 : これは１週間くらいです。プラス、何か問題が発生した時のためにバッファー見てスケジュールを立てますね。

ー サイトの中で特にこだわったポイントは？

藤田 : キャラクターの細かい動きです。サイトをスクロールして、最後に「フラボン」がひょこっとなる部分は、先に手が出てきて、あとから体が出てきたり。小さな部分ですが、同時に出てくるか時差で出てくるかで、かわいさが違いますよね。

fumi : このひょこっとなるところ、かわいいんですよね〜！私的には、作ったキャラクターがかわいく動いてくれたので、すごく嬉しかったです。
 WEBのコーディングって、癖とか出るんですか？

藤田 : その人っぽさっていうのは、極めてる人には出ますね。中村勇吾さんとか。この人が作ったっていうのが、パッと見でわかる。その人っぽい動きがあるんです。

ー 他の人が真似できないってことですか？

藤田 : そうですね。真似してもちょっと違くて、「真似したんだな」ってわかる。文章の癖みたいなのと同じなんじゃないかな。動きに関しては人それぞれ書き方があるから、例えば曲線でも、最初からグンと上がって落ちるのか、同じ抑揚でうねるのか、みたいな違いです。
その曲線は無数にあるから、組み合わせ次第で出来上がるものが変わって唯一のものになる。流行もあるしね。最近で言うと、基本的にさりげないデザインが多い気がします。

ミスなのか、デザインなのか？変換の罠

fumi : これが私にとっては初めてのWEB案件だったので、「WEBデザインってどうやるの？」っていうところから、基礎を学びながらの作業でした。RGBとCMYKで素材が混ざらないようにとか、ピクセルのズレが起きないようにとか。実装してもらうやりとりの中で、藤田さんに指摘してもらって直したり…。

藤田 : デザイナーの人って色をこだわる人はこだわるから、CMYK → RGB変換で変わっちゃった黒だとしても、そこが「意図的に選んだ黒」なのか「間違った黒」なのかは分からなくて。一回考えちゃいますね。（笑）
何度かやり取りしていると、多分これは変換で起きたミスかなって分かったりする。でも一応聞いて確認してから、進めます。

(左) RGBモードのパッケージ写真のデータ、(右) CMYKモードの写真をRGBへ変換したデータ。色味が違うことが分かる。

実は一番大変だった 「GIF」

ー OUWNはプログラミングを藤田さん一人でやっているから、ここ大変だったんだけど気づいてもらえないってこと、あるんじゃないですか？

藤田 : それはありますね。（笑）
今回のもので言うと、GIFのアニメーションが４つ切り替わるところ。GIFアニメーションは映像なんだけど、MOVみたいに何秒で合わせるってことができなくて、いじれないんです。今回はどうしてもGIFの素材でやるしかなかったので、それに対応するしかなかった。

藤田 : これ、ほっとくと切り替わるでしょ？普通の映像ファイルだと、プログラム上で「映像が終わった」っていうことがデータで取れるんですが、GIFだと取れない。なので1秒以下のレベルで時間を計算して、コーディングのタイマーって部分でミリ秒で指定してる。指定した秒数で切り替わるようにプログラムしている感じです。代理店の方とメールで0.1秒単位でやりとりしてちょっとずつ調整していった部分で、そこが一番大変だったかな。

でもアニメーションをサイト全体でここまで動かすことは久しぶりで、そこは楽しかった。色々動かすことができるのはWEBならではだから、良さを活かすことができたと思います。
動きは、こだわろうと思えばどこまででもできちゃいますよね。

出井 : 今回の案件では、自分がベースを作りつつ、fumiにキャラクターを作ってもらって、WEBは藤田さんで、バランスよく進められた印象です。もちろん石黒さんにはチェックしてもらいながらで、OUWNのチームワークが出せたんじゃないかなと思います。

CL : YAKULT HONSHA CO., LTD.
CD : HIROYUKI SUGITA
PRD：MACHIKO MIYAMOTO（amana）
PH：HIDETOSHI FUKUOKA / @hidetoshi_fukuoka
PS：HARUKA NIIZEKI  / @niiiiniiiii
RT：TAKUYA TSUGANE
ST：MINORI HASEGAWA
HM：TOMOYO KATSUMI
AD+D：YUMI IDEI  / @ideiyumi

ヤクルトの「はっ酵豆乳」デザイン完成版はこちら ＞

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
聞き手 ・ 執筆 : 星成美