料理の未来を見つめ続けるクックパッド。いかなる状況にも歩みを止めない事業会社のSTUDIO活用法

すごく直感的で、驚くほどちゃんと使えたSTUDIO

倉光さんは、クックパッドのデザイン戦略部の部長を務めておられます。
どのような経緯で、デザインに特化した組織が編成されたのでしょうか？

デザイン戦略部は去年、2019年の6月に発足しました。それまではデザイナーは、基本的にそれぞれの事業部に所属してプロダクトデザイン業務に当たっていたんです。

しかしその体制だと、どうしても季節もののキャンペーンであったり、会社としてのプレスリリースのデザイン等、どの事業に属するか曖昧な業務を、各メンバーが片手間で間に合わせる状態が続いてしまっていました。

そこに対して、きちんとコーポレートデザインとして責任を持つチーム、全社を横断して全体のデザインを見ていくチームが必要だいうところから、現在はデザイン戦略本部長である宇野が部を作る決断をし、そこに私が部長として就任しました。
現在デザイン戦略部は設立して1年少し経ち、規模は設立時の5人から12人まで拡大しています。

デザイン戦略部の部長　倉光さん

いくつかのサイトのデザインにSTUDIOを使っていただいていますが、導入のきっかけは何でしたか？

私は元々個人的に、他社さんやいろいろなイベントのサイトがSTUDIOで作られているのを見てチェックしていました。
実務で取り入れたのは、クックパッドの学生インターンシップのLPがきっかけのひとつです。
「このような期間限定ページにはSTUDIOが使えるのでは」と考え、まずはどの程度何ができるのかを知るため、個人のポートフォリオサイトを自分でSTUDIOでリニューアルしてみました。

倉光さんのポートフォリオサイト：transitkix.com

実際に使ってみると、すごく直感的に触れて、驚くほどちゃんと使えたので、「これはきっと他のデザイナーにとっても役に立つはずだ」と判断し、社内導入に踏み切りました。

初めはキャンペーン系のサイトを作る機会が多いデザイナー向けに社内で１時間程度の講習会を開催し、だんだん独学で覚えて使い出す人も増えてきて、現在では社内全体で8名くらい、STUDIOでWebページのデザインができるメンバーがいます。

普段からSTUDIOを教えあったり、知見をシェアする環境があるのでしょうか？

みんな基本は独学で習得しているんですけど、社内のSlackにSTUDIO専用のチャンネルがあって、例えば「リッチテキストボックス、ボックスの中に入れられないんだけど、これどうしたらいいですか？」みたいなSOSに対して、「それってボックスのサイズがリッチテキストボックスより小さくて入れられないんじゃないの」「あ、それでした！！！」みたいな会話があったり。「それはハマりどころだね」「私もアドバイスしようとしたけど一足遅かった〜」なんてコミュニケーションを、社内メンバーでとっています。

社内にSTUDIOのローカルコミュニティまであるんですね！楽しそう…！

メンバーも多様で、先ほどお話ししたデザイン戦略部以外の部署でも何人か使っていますし、最近面白いのは、コードが書けるメンバーも徐々にSTUDIOを使い始めていたりして。
自分でWebサイトをコーディングできる人が、時間の節約のためにSTUDIOを使うという流れも出てきています。

LP制作時にまず候補に上がるツールへ。STUDIOで作られたサイトの事例を紹介

社内のいろいろなポジションで使われ始めているのですね。ぜひいくつか、STUDIOで作ったサイトをご紹介ください！

かなりいろいろなところで使っているんですが、私自身の関わったものをメインに紹介しますね！

【Case1】 私たちは料理で繋がろう

https://athome.cookpad.com/

新型コロナの感染が拡大しはじめた当初、私達の提供しているサービス群でそれぞれユーザーさんへの取り組みをやっていたんですけども、各事業部がやっている取り組みがまとまった、会社としての姿勢を伝える場所がなかったんです。

それをユーザーさんや社会に伝える方法はないかというところで、広報メンバーと立ち上げたのがこのサイトです。
刻々と変わる状況の中、今出さないと多分もう意味がないものだと考え、約1週間で社内の様々な事業部から素材をかき集めて作ってリリースまで駆け抜けました。

少人数・短期間で仕上げられたのですね！

人を巻き込めばそのぶん時間がかかってしまう可能性があったので、最速で出すために、広報のスタッフと私の2人でほぼ作りきりました！
基本は私が構築して、広報メンバーにもテキスト編集のやり方なんかを簡単に伝えて、コンテンツを編集してもらい、日々変化する最新情報を届ける運営をしていました。

まさにデザイン戦略部さんの「会社を横断してデザインする」というあり方を、サイトに落とし込んだ形ですね。

そうですね。取り組みが各事業部の中で閉じてしまうのはもったいないという話から始まり、デザイン戦略部のメンバーがクックパッドのロゴを繋がりをイメージさせるモチーフにアレンジして。「今世間ではソーシャルディスタンスを取りましょうと言われているけれども、私たちは料理で繋がりましょう」というメッセージを、会社としてタイムリーに発信できたかなと思います。

【Case2】 Internship 募集サイト

https://internship.cookpad.jp/

このサイトはインターンシップのサイトで、一番初めに私がデザインを組んだものです。（現在はすでに、他のデザイナーの作成した次回のインターンシップの内容になっています）
元々はトップにオフィスの写真が入っていたりして、直接オフィスに集まってもらって学生さん向けにインターンシップを開催しようとしていたんですが、これが感染症の拡大に伴い一度中止になり、オンライン開催という方法をとって復活させようという形で、このサイトの中身も必要なところを書き換えて再公開しました。

エンジニアリソースがなかったので情報が決まったものからどんどん入力していき、採用担当のメンバーに簡単な画像修正とテキスト変更のやり方を教えて、募集期間なんかを直接変更してもらいながら、状況に臨機応変に対応していました。

不安定な情勢だったからこそ、誰でも修正・変更が加えられる利点が活きていますね。

そうですね。この時は、計画していた施策が全てなくなったかと思えば新しいものが発生して…ということが何度も起きていたため、なかなか人のアサインもうまく検討できず、デザイナー1人で実装まで完結できるSTUDIOがあることで、フットワークの軽さに直結してありがたかったです。

【Case3】 CCB-Kawa｜クリエイティブクッキングバトルオンライン

https://ccb-kawa.cookpad.jp/

クックパッドでは、クリエイティブクッキングバトルというイベントをコーポレートブランディングのメンバーの企画で毎年行っています。今年は感染症の影響で、このイベントもオンライン動画コンテストという形で開催しました。テーマは「食材の皮を使ってチームでお料理バトル」。
この専用サイトはSTUDIOアンバサダーで制作を請け負っておられるgazの吉岡さんに依頼し、ご協力いただいて準備しました。

全体の仕様・要件はお伝えして、あとはgazさんに自由に作っていただき、何度かフィードバックのやり取りをしながら出来上がっていったという形です。

gazさんとの共同作業だったのですね！STUDIOアンバサダーの方々の活躍は私たちとしてもとても嬉しいです。

サイトを作るにはSTUDIOを使っておけば多方面に運用しやすいというのはわかっていたものの、慌ただしい時期で、内製するにはデザイナーのリソースが足りないという状況で、STUDIOでの制作代行という選択肢が簡単に見つかり、スムーズに依頼ができたのはよかったです。

ただ制作を請け負ってくれるだけでなく、アニメーションってこうやってやればいいんだとか、こういうときの設計はこうすればうまくいくんだというSTUDIOの活かし方のアドバイスもいろいろいただけて、すごく学びも多かったです。

とても綺麗なサイトに仕上がっていますね！こだわりはどんな部分でしょうか？

このイベントは「クリエイティブクッキングバトル」「kawa」というタイトルから内容をイメージするのが難しいというのがあったので、初めてみた人にちゃんと興味を持ってもらえるデザインになるよう、特にファーストビューにこだわって何度もgazさんと相談しました。

今回、参加者同士で集まって料理するのはNGで、オンラインで友達と連携しながら料理を作ってもらうというルールを設けたので、参加者一人ひとりの写真をグリッドで区切って並べたグラフィックをトップに持ってきて、なるべく具体的に参加の様子をイメージしていただけるように工夫しましたね。

【Case4】 採用広報ページ

https://meet.cookpad.jobs/

このページはSTUDIOで作っているんですが、クックパッドの採用サイト（非STUDIOサイト）のメニューからリンクさせて、下層ページのように置いています。人事の採用担当が、デザイナーやエンジニアに向けた採用目的の広報を発信できる場所として制作しました。

サイト内で1ページだけSTUDIO製というのは、やはり更新のしやすさを重視してといったところでしょうか？

そうですね。アップデートがあったときに必要な情報を表示できるボックスのフォーマットを用意しておいて、更新自体はデザイナーでなく採用担当が直接しています。
この更新だけでも、エンジニアに都度頼んでいると、サイトに反映できるまで数日かかっていましたが、STUDIOを取り入れることで情報を持っている人がその場で更新作業を完結できるようになりました。

都度更新していくサイトということで、CMSやRSSを利用しているのでしょうか？

いえ、このページではそれぞれのカードに外部コンテンツのリンクをひとつひとつ設定して運用しています。というのも、このページの場合は、載せる情報の内容がエンジニアのはてなブログ記事だったり、デザイナーのnoteだったり、媒体が様々なんですよね。

手作業ながらこれはこれで機能しているんですが、今仕込もうとしている別のサイトではRSSを使おうとしているので、また近々STUDIOさんに質問するかもしれません！（笑）

状況に合わせてうまく運用していただいているんですね！質問、いつでもお待ちしています！！

【Case5】 クックパッドマート採用サイト

https://cookpad-mart-careers.studio.design/

クックパッドマートは現在採用を強化していて、会社の採用サイトとは別で専用の採用サイトを設けています。
ただやはり事業自体のデザインや開発が優先になるので、採用サイト専門にデザイナーをアサインするのは難しいけれどもしっかり作りたいというところで、弊社デザイナーディレクションで、STUDIOアンバサダーのハルカナさんに依頼して入ってもらい作成したサイトです。

会社の採用サイトとしっかり差別化されていて、印象的なデザインですね。

華やかなデザインもさることながら、これはもうデータを見せていただいて、すごく勉強になったサイトでした。
情報設計をしっかりした上で、STUDIOでできる表現でこんなに綺麗に作れるんだ…！と。 さすがでした。

デザイナーも、デザイナー以外も。誰もがコンテンツを生み出せる世界へ

ご紹介ありがとうございます。どのサイトもとても素敵でした！
導入してみて、プロジェクトを進めるフローに変化はありましたか？

STUDIOを使う前は、エンジニアさんをアサインできるかどうかの社内の事情も鑑みて、「本当にこの施策はWebサイトという形で提供するのか」というところから検討していて、結局リソースや優先順位の問題で、動かしたいけれど動かせない施策も多かったんです。
そういったWebサイトがディレクターとデザイナーで、場合によってはデザイナーだけでリリースできるようになったのがすごく大きかったです。

また、採用担当や広報などの非デザイナーメンバーも、少しレクチャーすればすぐに文言の修正だったり画像の差し替えくらいはできるので、ページの更新作業をデザイナーを挟まず任せられるようになって、いろんなことが効率よく進んでいます。

会社を横断して使っていただく中で、機能不足な面はありませんか？

そうですね…、私達の使い方だと、一つのプロジェクトに複数の関係者が関わって編集することが多いので、バージョン管理ができるようになると安心かなと思っていて。
複数人でいじっているプロジェクトって、開くときちょっとドキドキするんですよね。「壊れてないかな」っていう…。
今は、本サイトのデザインをバックアップとして別プロジェクトにコピーしておくことで万が一に備えているんですが、ここをカバーする機能があると嬉しいです。

ちょっとドキドキ、わかります…！バージョン管理やリビジョン機能に関しては、たくさんご要望をいただくので、前向きに開発を検討します！

今後チームとして、STUDIOとの関わり方はどんなふうになっていくでしょうか？

今後、もっと社内のデザイナー以外のメンバーにも、STUDIOをユーザーさんに情報を届けられるツールとして啓蒙していって、彼らが自分たち自身でコンテンツを生み出せるようになるのが理想かなと思っております。

また、クックパッドは比較的全社員がエンジニアリングに親しみがある組織なんですが、
社外でいくと、エンジニアやデザイナーがいないような組織にとってもすごく可能性があるツールだなと思うので、そういったところでも使われるようになっていくと、もっともっと世の中良いデザインが増えてくるんじゃないかなっていうふうに思ってます。

情報発信が民主化していくと素敵ですね！
多くの場面でSTUDIOを取り入れていただけるよう、私たちも引き続き取り組んでいきたいと思います。
本日は、貴重なお話を本当にありがとうございました！