menu

クライアントインタビュー 01

第一三共ヘルスケア

高度な技術力で新規性を実現「プレコール ブランドサイト」

僕らの関係性はジブリに例えると、僕が鈴木さんでピクルスが宮崎さん。お題=ハードルの超え方が斬新で、毎回依頼する楽しみがある。

僕らの関係性はジブリに例えると、僕が鈴木さんでピクルスが宮崎さん。お題=ハードルの超え方が斬新で、毎回依頼する楽しみがある。

CMのインパクトをスマートフォンでも表現したいという依頼に応えるため、「ズバッと効いて、ズーッと効く!」という商品コンセプトを見事に体現したイントロ、そしてスマートフォンでは画期的な「左右フリック」を採用した「プレコール」Webサイト。今回はピクルスとの付き合いはもう7~8年になるという、株式会社大広のプロデューサー伊東氏を中心に完成に至るまでの経緯、ピクルスとの関係性を伺った。

伊藤 真一

プロデュース、ディレクション、コピーライティング 担当
株式会社 大広 アクティベーションデザインユニット ディレクター

伊藤 真一

企業Webサイトのクリエイティブディレクションを手がけ、カンヌ国際広告祭、JIAAインタラクティブアドアワード、The New York Festival など多数受賞している。

高橋 晋一朗

ディレクション、デザイン、制作進行担当
株式会社ピクルス

高橋 晋一朗

山下 美緒

テクニカルディレクション、フロントエンドエンジニアリング担当
株式会社ピクルス

山下 美緒

CMと同じインパクトを、スマートフォンでも出したい。ピクルスが提案した「左右フリック」が見事に表現してくれた。

伊東真一氏(以下、伊東氏):「プレコール」という商品サイトにたどり着く人には2パターンあると思うんです。まずは実際に風邪をひいている、症状が出て苦しいからなんとかしたい。その解決策として商品を求めて検索で入ってきた人。もうひとつは向井理さんのCMを見て興味本位で入ってきた人。
前者には基本の商品情報・効果効能をきちんと説明し、購入を促すページを。
そして後者は向井理さんをきっかけに商品名を覚えてもらって、何かあればこれを買おうと思わせる仕掛けが必要になる。
とくに後者の見込み顧客一歩手前の人たちに、きっかけとなったCMと同じインパクトをスマホでも出したい、商品につなげるトゲみたいな引っかかりを残したい。まずはそのための企画、アイデアをピクルスにお願いしました。

CMと同じインパクトを、スマートフォンでも出したい。ピクルスが提案した「左右フリック」が見事に表現してくれた。

高橋晋一朗(以下、高橋):スマホと言えば縦フリックか押すだけという動きが主流ですが、今回は「左右フリック」を採用したインターフェイスを提案しました。“くるくる回すだけ”で簡単なのに、今までになかった操作感が「なんかこれ面白いな」と思わせるのではないかと。もちろん、その動きとブランドメッセージがリンクしなければ面白くても意味がないので、商品ベネフィットである「持続性」を表現したメインビジュアルと連動させることを意識しました。

指で左右に回すだけで、ダーツの的のように各コンテンツが表示される。新鮮な動きがユーザーに触る楽しみを与える。

指で左右に回すだけで、ダーツの的のように各コンテンツが表示される。
新鮮な動きがユーザーに触る楽しみを与える。

高橋:合わせて、CMでも大々的に謳っているキャッチコピー「ズバッと効いて、ズーッと効く!」をUI(ユーザインタフェース)とは別のところに形として残す必要があったので、その解決手段としてオープニングのイントロアニメーションも追加しました。

「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。

「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。

伊東氏:期待以上のアイデアが出てきてうれしかったですね。僕は常日頃「どうやったらビジネスに貢献できるか」を信条に仕事をしていますが、このアイデアだけでブランドサイトにできる貢献の9割は達成できたと思ったくらい(笑)
プレゼンの際、フリックの動きを「紙だけじゃわからないよね、どうしようか」ってなったんですが、ピクルスが実際にデモを作って持ってきてくれて。クライアントにも企画書の前にまず触ってくださいと試してもらい、「これは面白い、ぜひやりたい。」と即決でした。

左右フリックとイントロアニメーションのデモ版。簡易ながらもどんな動きをするか感覚的にわかるレベルまで仕上げてプレゼンに挑んだ。左右フリックとイントロアニメーションのデモ版。簡易ながらもどんな動きをするか感覚的にわかるレベルまで仕上げてプレゼンに挑んだ。

左右フリックとイントロアニメーションのデモ版。簡易ながらもどんな動きをするか感覚的にわかるレベルまで仕上げてプレゼンに挑んだ。

伊東氏:左右フリックを使ったインターフェイス、そしてイントロアニメーションで十分ブランドのメッセージ性は出せたので、中身の構成は極力シンプルにわかりやすい内容で行きましょうと決まり、それからは非常にスムーズに制作が進みましたね。

斬新だからこそ、高度な技術力が求められる「左右フリック」。操作性にとことんこだわり、社内で精査を繰り返した。

斬新だからこそ、
高度な技術力が求められる「左右フリック」。
操作性にとことんこだわり、社内で精査を繰り返した。

山下美緒(以下、山下):左右フリックの実装が結構大変でした。くるくるまわるフリックはとても斬新なアイデアですが、その分ユーザーも慣れていない。だから使いやすさを徹底しないとそもそも見てもらえないことになりかねない。フリックしたときの反応の良さに加え、スマホのサイトには上下のスクロールもあるので、フリックとスクロールをちゃんと判定して、ユーザーのやりたい動きをスムーズにさせる、という調整にいちばん時間がかかりました。

高橋:社内でメンバー同士確認して、シビアに触りづらいポイントなど意見を出し合いながら、とことん使いやすさにこだわって精査していきました。

山下:イントロのアニメーションに関しては、まず高橋がFLASHでデモを作り、私がそれを見ながらJavaScriptを書く、という手法を取りました。

高橋:JavaScriptでイチからアニメーションを作ろうとすると、非常に工程がかかるんですね。それを回避して制作スケジュールを短縮するための分担です。

伊東氏:裏にこんな苦労があったとも知らず(笑)スケジュールが遅れることもなく、僕のところに上がってきたものは非常に完成度の高いものでした。「おおー! 素晴らしいのができたね!」と。クライアント確認もほぼ一発OKでした。

高橋:デザインに関してもほとんど修正が入ることはなくて、フリックとイントロの動きができたら、完成まではあっという間でした。クライアントからのお戻しが的確で早かったのも非常にありがたかったですね。

伊東氏:ふわっとしたイメージでブランドサイトを作っているのではなく、「プレコール」という商品を売るためにどういうロジックが大事なのか、という共通意識をお互いがちゃんと持っていたことに尽きますね。だからこそピクルスはそこを外さないモノづくりをするし、クライアントはそれに基づいてチェックをするから戻しも少なく明確だった。とてもいい信頼関係が築けていたと思います。

プレゼン時にいきなり構成案も出してくれるのはピクルスだけ。クライアントと交渉しやすい、ていねいな見積も魅力のひとつ。

プレゼン時にいきなり構成案も出してくれるのはピクルスだけ。クライアントと交渉しやすい、ていねいな見積も魅力のひとつ。

伊東氏:プレゼンの企画書って、普通だとコンセプトがあって、概要があって、企画の説明があって、あと御見積ってパターンが多いんですが、ここでいきなり構成も出してくれるのはピクルスだけですね。最終的な締切と予算が決まっている中で、上手にスケジュールを組んでみんなの合意を得るためには、構成が先にある方が進めやすい。

高橋:もちろん、案件やクライアントによっては、構成の前に企画案もっと出した方がいい場合もあるので臨機応変に対応しますが、進めやすくなると判断した場合は構成も出しますね。

伊東氏:あとはていねいな見積。項目や工数をしっかり出してくれるので、クライアントにも交渉しやすい。論理的に話ができるので、金銭的な面でも傷を残さず済むのがありがたいですね。

制作内容を細かく項目分けして整理し、明確かつ、一目でパッとわかりやすい見積に。トラブルの防止やクライアントの不安を取り除くことにもつながる。

制作内容を細かく項目分けして整理し、明確かつ、一目でパッとわかりやすい見積に。
トラブルの防止やクライアントの不安を取り除くことにもつながる。

僕らの関係性はジブリに例えると、僕が鈴木さんでピクルスが宮崎さん。こちらが設定したハードルを、どう越えてくるか楽しみでしょうがない。

僕らの関係性はジブリに例えると、僕が鈴木さんでピクルスが宮崎さん。こちらが設定したハードルを、どう越えてくるか楽しみでしょうがない。

伊東氏:ピクルスとのお付き合いはもう7~8年になるんですが、毎回こちらのオーダーに対して、どう返してくれるかが楽しみでしょうがない制作会社なんです。
僕らの関係性はジブリに例えると、僕が鈴木さんで、ピクルスが宮崎さん、に近いと勝手に思っていて(笑)。多分鈴木さんは宮崎さんの作家性に対して「あれやってこれやって」と明確に指示するわけではない。あるハードルを設定してあげて、宮崎さんがそれをどう超えるかに期待していると思うんです。
制作会社によっては、言った通りのことをそのままやってしまうとこも多いんですが、ピクルスはそうじゃなくて、ヨコから回り込んだり、ロープを使って飛び越えたり、そんなジャンプの仕方があったのか! とうれしい驚きをくれるんです。
ただ案件をこなすだけじゃない応え方をしてくれるのが、ピクルスに仕事を依頼し続ける理由だと思っています。

高橋:また目薬のブランドサイトを制作するときは「日本の目薬は中国の方にとても良く売れるから、中国語のサイトを作りませんか」って最初提案しましたね(笑)

伊東氏:「そうくるか!」って思いましたね(笑)。クライアントにも大受けだったんです。残念ながら今回実装にはなりませんでしたが。ただ、面白いジャンプをしても肝心のお題=ハードルを越えなきゃ意味がないんで、その方向性を間違えないように導くのは、逆に僕の役割だと思っています。

伊東氏:今も僕とピクルスとの間で進行中の案件がいくつかありまして、それもどう打ち返してくれるか楽しみにしているところです。
あと言いたいことは…夏になるとピクルスの人はみんな“裸の大将”みたいな恰好してるんですよ。暑いのはわかるけど、あれはどうかと思います(笑)

「IT業界人のたしなみとして、ろくろは回しておかないと!」という伊東氏の発言に賛同し、仲良くろくろを回す3人。

「IT業界人のたしなみとして、ろくろは回しておかないと!」という伊東氏の発言に賛同し、仲良くろくろを回す3人。

(取材・文:横井佐代子)広告会社での化粧品プロモーションにはじまり、「@cosme」「GyaO」などの編集を経て現在フリーランスのライターとして活動中。Webを中心に幅広く執筆している。