僕らの関係性はジブリに例えると、僕が鈴木さんでピクルスが宮崎さん。お題=ハードルの超え方が斬新で、毎回依頼する楽しみがある。CMのインパクトをスマートフォンでも表現したいという依頼に応えるため、「ズバッと効いて、ズーッと効く!」という商品コンセプトを見事に体現したイントロ、そしてスマートフォンでは画期的な「左右フリック」を採用した「プレコール」WEBサイト。今回はピクルスとの付き合いはもう7~8年になるという、株式会社大広のプロデューサー伊東氏を中心に完成に至るまでの経緯、ピクルスとの関係性を伺った。ブランドサイト詳しい情報はこちらCMと同じインパクトを、スマートフォンでも出したい。ピクルスが提案した「左右フリック」が見事に表現してくれた。伊東真一氏(以下、伊東氏):「プレコール」という商品サイトにたどり着く人には2パターンあると思うんです。実際に風邪をひいている、症状が出て苦しいからなんとかしたい。その解決策として商品を求めて検索で入ってきた人。ひとつは向井理さんのCMを見て興味本位で入ってきた人。説明し、購入を促すページを。後者は向井理さんをきっかけに商品名を覚えてもらって、何かあればこれを買おうと思わせる仕掛けが必要になる。後者の見込み顧客一歩手前の人たちに、きっかけとなったCMと同じインパクトをスマホでも出したい、商品につなげるトゲみたいな引っかかりを残したい。そのための企画、アイデアをピクルスにお願いしました。高橋晋一朗(以下、高橋):スマホと言えば縦フリックか押すだけという動きが主流ですが、今回は「左右フリック」を採用したインターフェイスを提案しました。“くるくる回すだけ”で簡単なのに、今までになかった操作感が「なんかこれ面白いな」と思わせるのではないかと。その動きとブランドメッセージがリンクしなければ面白くても意味がないので、商品ベネフィットである「持続性」を表現したメインビジュアルと連動させることを意識しました。指で左右に回すだけで、ダーツの的のように各コンテンツが表示される。新鮮な動きがユーザーに触る楽しみを与える。高橋:合わせて、CMでも大々的に謳っているキャッチコピー「ズバッと効いて、ズーッと効く!」をUI(ユーザインタフェース)とは別のところに形として残す必要があったので、その解決手段としてオープニングのイントロアニメーションも追加しました。「ズバッとズーッとする?」のボタンをタップすると、勢いよくダーツが回りだしコンテンツが現れる。ほんの数秒の演出だが、与えるインパクトは効果大。伊東氏:期待以上のアイデアが出てきてうれしかったですね。僕は常日頃「どうやったらビジネスに貢献できるか」を信条に仕事をしていますが、このアイデアだけでブランドサイトにできる貢献の9割は達成できたと思ったくらい(笑)プレゼンの際、フリックの動きを「紙だけじゃわからないよね、どうしようか」ってなったんですが、ピクルスが実際にデモを作って持ってきてくれて。クライアントにも企画書の前にまず触ってくださいと試してもらい、「これは面白い、ぜひやりたい。左・中央:左右フリックとイントロアニメーションのデモ版。簡易ながらもどんな動きをするか感覚的にわかるレベルまで仕上げてプレゼンに挑んだ。右:左右フリック以外にも、別パターンの動きを用意してクライアントが判断しやすいよう提案している。伊東氏:左右フリックを使ったインターフェイス、そしてイントロアニメーションで十分ブランドのメッセージ性は出せたので、中身の構成は極力シンプルにわかりやすい内容で行きましょうと決まり、それからは非常にスムーズに制作が進みましたね。高度な技術力が求められる「左右フリック」。操作性にとことんこだわり、社内で精査を繰り返した。山下美緒(以下、山下):左右フリックの実装が結構大変でした。まわるフリックはとても斬新なアイデアですが、その分ユーザーも慣れていない。使いやすさを徹底しないとそもそも見てもらえないことになりかねない。フリックしたときの反応の良さに加え、スマホのサイトには上下のスクロールもあるので、フリックとスクロールをちゃんと判定して、ユーザーのやりたい動きをスムーズにさせる、という調整にいちばん時間がかかりました。高橋:社内でメンバー同士確認して、シビアに触りづらいポイントなど意見を出し合いながら、とことん使いやすさにこだわって精査していきました。山下:イントロのアニメーションに関しては、まず高橋がFLASHでデモを作り、私がそれを見ながらJavaScriptを書く、という手法を取りました。高橋:JavaScriptでイチからアニメーションを作ろうとすると、非常に工程がかかるんですね。それを回避して制作スケジュールを短縮するための分担です。伊東氏:裏にこんな苦労があったとも知らず(笑)スケジュールが遅れることもなく、僕のところに上がってきたものは非常に完成度の高いものでした。素晴らしいのができたね!」と。クライアント確認もほぼ一発OKでした。高橋:デザインに関してもほとんど修正が入ることはなくて、フリックとイントロの動きができたら、完成まではあっという間でした。クライアントからのお戻しが的確で早かったのも非常にありがたかったですね。伊東氏:ふわっとしたイメージでブランドサイトを作っているのではなく、「プレコール」という商品を売るためにどういうロジックが大事なのか、という共通意識をお互いがちゃんと持っていたことに尽きますね。ピクルスはそこを外さないモノづくりをするし、クライアントはそれに基づいてチェックをするから戻しも少なく明確だった。いい信頼関係が築けていたと思います。プレゼン時にいきなり構成案も出してくれるのはピクルスだけ。クライアントと交渉しやすい、ていねいな見積も魅力のひとつ。伊東氏:プレゼンの企画書って、普通だとコンセプトがあって、概要があって、企画の説明があって、あと御見積ってパターンが多いんですが、ここでいきなり構成も出してくれるのはピクルスだけですね。最終的な締切と予算が決まっている中で、上手にスケジュールを組んでみんなの合意を得るためには、構成が先にある方が進めやすい。高橋:もちろん、案件やクライアントによっては、構成の前に企画案もっと出した方がいい場合もあるので臨機応変に対応しますが、進めやすくなると判断した場合は構成も出しますね。伊東氏:あとはていねいな見積。項目や工数をしっかり出してくれるので、クライアントにも交渉しやすい。論理的に話ができるので、金銭的な面でも傷を残さず済むのがありがたいですね。制作内容を細かく項目分けして整理し、明確かつ、一目でパッとわかりやすい見積に。トラブルの防止やクライアントの不安を取り除くことにもつながる。うれしい驚きをくれるんです。伊東氏:ピクルスとのお付き合いはもう7~8年になるんですが、毎回こちらのオーダーに対して、どう返してくれるかが楽しみでしょうがない制作会社なんです。僕らの関係性はジブリに例えると、僕が鈴木さんで、ピクルスが宮崎さん、に近いと勝手に思っていて(笑)。鈴木さんは宮崎さんの作家性に対して「あれやってこれやって」と明確に指示するわけではない。あるハードルを設定してあげて、宮崎さんがそれをどう超えるかに期待していると思うんです。うれしい驚きをくれるんです。案件をこなすだけじゃない応え方をしてくれるのが、ピクルスに仕事を依頼し続ける理由だと思っています。高橋:また目薬のブランドサイトを制作するときは「日本の目薬は中国の方にとても良く売れるから、中国語のサイトを作りませんか」って最初提案しましたね(笑)伊東氏:「そうくるか!」って思いましたね(笑)。クライアントにも大受けだったんです。残念ながら今回実装にはなりませんでしたが。面白いジャンプをしても肝心のお題=ハードルを越えなきゃ意味がないんで、その方向性を間違えないように導くのは、逆に僕の役割だと思っています。伊東氏:今も僕とピクルスとの間で進行中の案件がいくつかありまして、それもどう打ち返してくれるか楽しみにしているところです。あと言いたいことは...夏になるとピクルスの人はみんな“裸の大将”みたいな恰好してるんですよ。暑いのはわかるけど、あれはどうかと思います(笑)IT業界人ポーズの3人(取材・文:横井佐代子)広告会社での化粧品プロモーションにはじまり、「@cosme」「GyaO」などの編集を経て現在フリーランスのライターとして活動中。WEBを中心に幅広く執筆している。WEBマーケティング、WEBプロモーション・コンテンツ制作などサービスに関する「ご不明点、ご質問、お見積り」すべてお気軽にご相談ください。お電話でのお問い合わせはこちら03-6421-7210(平日/09:30〜17:30)株式会社ピクルス「マーケティング支援担当」までメールでのお問い合わせはこちらお問い合わせフォーム2営業日以内に折り返しご連絡させていただきます。お急ぎの方はお電話でお問い合わせください。Instagramブログ【労働時間短縮?残業なし?】デジタ...『講談社とピクルスによる「コンテン...モノを売るだけではなく、目に見えな...年末年始休業期間のお知らせ:201...採用情報ピクルスでは、随時採用をしております。WEBマーケティング・Web制作の仕事にご興味のある方のご応募お待ちしております。Inc.ページの先頭へ。