私がCXOを務めるスマートバンク社は、2022年7月に総額20億円の資金調達を実施しました。発表当日にはTwitterで「スマートバンク」「資金調達」がトレンド入り、主要オンラインメディア・日本経済新聞・米TechCrunchに掲載されました。今後資金調達のPRをするスタートアップの参考になればと思い「なにをどうやって作ったのか」をまとめてみます。
- 🔰 前提
- 🤝 チームの体制
- 🎯 目的・目標達成のためのコミュニケーション
- 🎁 デザイナーの役割
- 💎 つくったもの
- 🖼 1. キービジュアル
- 💳 モチーフの決定
- 🖊 アイデアスケッチ
- 📸 写真撮影
- 🗝 写真素材の加工
- 🎨 表現の調整
- 🎪 2. 特設サイト
- 🅽 URLと作成方法を決める
- 📣 掲載したい情報をもらう
- 🗽 切り口を決める
- 🎨 表現を整える
- ✍️ コンテンツの追加
- 📖 まとめ
🔰 前提
🤝 チームの体制
このプロジェクトは広報が終始リードしてくれました。
「目的」= 何のためにやるのか
「目標」= 何を実現したいのか
「情報」= 何を伝えるのか
を最初に整理してくれたことで、デザイナーとして「切り口」や「表現」を考えることにフォーカスすることができました。
広報による、プロジェクト推進のプロセスもnoteで公開されているのでぜひチェックしてください。
🎯 目的・目標達成のためのコミュニケーション
本プロジェクトの目的は明確に「採用」でした。また目標値としてはメディアへの掲載数や、求人への応募数を設定していました。
それを実現するためにクリエイティブを通して「話題にしたくなる」「どんな会社かわかる」「もっと知りたくなる」コミュニケーションを意識していました。
🎁 デザイナーの役割
これは持論ですが、同じ情報を伝えるにしても「切り口」が鮮やかだと人の興味を惹きやすくなりますし、切り口に即した「表現」をすることで、より伝わりやすくなります。
もしプロジェクトのキックオフで「情報」が与えられたら、効果的な「切り口」と「表現」を提示することがデザイナーの役割だと考えています。
💎 つくったもの
🖼 1. キービジュアル
まず最初につくったのは、PR Timesに掲載するプレスリリースのキービジュアルです。OGPとしてTwitterにシェアされた時に表示されるものでもあります。
💳 モチーフの決定
弊社では「B/43」というVisaプリペイドカードとアプリで支出を管理するプロダクトをつくっており、本件が公開される1ヶ月ほど前にカード中央が透明なデザインが特徴の新カードをローンチしたところでした。「どんな会社かわかる」ためにも、このカードをビジュアル表現の中心として活用することにしました。
🖊 アイデアスケッチ
まずiPadでラフにアイデアをスケッチしていきました。小一時間で10枚ほどスケッチした中から、2つの案をピックアップしました。どちらも「巨大なカードを持っている社長」が中央にあり、その四方に投資家がいるという構図です。
最初に考えたのは「見通す」という切り口です。
投資家がカードの透明部分から覗いている構図には「VC=未来を見通す職業」であることから、その見通した先にスマートバンク(B/43)がおり、だから投資していただけたのだというメッセージを込めました。
また、SNSのサムネイルでは「顔が半分隠れており真顔」→記事を開くと「顔がオープンになり笑顔」という「話題にしたくなる」ギミックを考えました。
2つ目に考えたのは「チーム感」という切り口です。
投資家も中サイズのカードを持ち各々にポーズを取る構図です。大きなカードはそれだけで絵力を強めるでしょうし、アーティスト写真のようなクールなキービジュアルが多い昨今、和気あいあいとした楽しげな雰囲気の写真は逆に話題になるのではと考えました。
このアイデアは上手く行けば躍動感と一体感のあるよいクリエイティブになる可能性がある一方で、被写体のポージング力に依存する、ある意味博打なプランでした。
ラフの段階ではどちらも甲乙つけられず、両方撮ってみて決めることにしました。
📸 写真撮影
当日の撮影は、前回ラウンドからの株主でもあるGlobal Brainさんのオフィスで行いました。なんとベンチャー支援のためオフィス内に撮影スタジオを作られたそうで、今回が利用の第一号案件でした。GBさんの支援はいいぞ。
最初にテストがてら代表の写真を撮っていきました。
既視感のあるポーズでもパチリ。
1組目の投資家は前回ラウンドからめちゃくちゃにお世話になっている、ANRIの佐俣アンリさん。
A案はクールな感じで…
B案は楽しい感じ。サービス精神がすごい。
2組目はSB社の社外取締役でもあるグローバル・ブレインの百合本さん。まずは絵コンテ通りの構図でぱちり。
持ち方のリクエストにも応えてくださる御大。
3組目は今回から投資してくださったグロービス・キャピタル・パートナーズの高宮さん、深川さん。
ふたりともノリノリ。
はい、すしざんまい。
4組目はZ Venture Capitalの堀さん、湯田さん。個人的にも初対面なので緊張…
するヒマもなく素晴らしいポーズを決めるお二方。
芸達者すぎる。
最後に時間があまったので創業者3人でも撮影。人類は大きいカードを持つとテンションが上がることがわかりました。これで撮影は終了、カメラマンさんからの現像を待ちます。
もし柔軟に対応いただけるカメラマンさんであれば、「一旦すべてのデータを撮って出しでもらう」→ 「優先してレタッチしてほしい写真を指定する」→ 「レタッチを待っている間にラフ作成」→ 「レタッチ完了後に差し替え」という進め方をするとスムーズなのでおすすめです。
🗝 写真素材の加工
上がってきた写真を並べて画像を作っていきます。途中経過を随時Slackで共有しながら進めるスタイルです。
広報やデザイナーからすぐにフィードバックがもらえるのでいい感じ。
株主の皆さんのモデル力が高かったことが決め手となり、結果的にB案に決定しました。巨大カードを持った撮影という無茶振りにも関わらず、全面協力いただきありがとうございました。
🎨 表現の調整
テキストの追加
「スマートバンクという、特徴的なカードを提供する会社が、20億円調達した」ニュースであることが画像だけでも伝わるように、テキスト情報を追加することにしました。
限られた面積でうまく伝える方法に悩みましたが、B/43アプリの入金通知をモチーフにした表現を思いつきクリアすることができました。
背景の追加
背景についても何パターンか作ったのですが、サービスサイトやUIでも使っているベージュをベースに、ぼかしたカードイラストを散りばめるパターンを採用しました。にぎやかさが「チーム感」という切り口にマッチし、カードやアプリUIとも違和感なく溶け込むことを目指しました。
このような調整の結果、最終的に「話題にしたくなる」「どんな会社かわかる」バナーになったのではないかと思いますがいかがでしょうか？
冒頭にも書いたように、発表当日には下記のような成果を得ることができたので、個人的にはそこそこの手応えがありました。
PRTIMESの旬速1位に👏
Twitterでトレンド入り📈
🎪 2. 特設サイト
次にプレスリリースの受け皿となり、「もっと知りたくなる」ことで採用の応募へとつなげる特設サイトを作っていきました。
🅽 URLと作成方法を決める
今回は開発工数とSEOの観点から、コーポレートサイト(smartbank.co.jp)の下層ページとして追加することにしました。
元々、このコーポレートサイトはNotionで作っています。そのため、更新がだれでも容易にできる一方で表現に制約があります。また、ドメインの設定や、アクセシビリティ対策などのためにSuperというNotionをウェブサイト化するサービスを使っています。
ページ公開後にLightHouseのスコアを確認したところ、パフォーマンス以外は満点でした。(パフォーマンスも画像の数やサイズの問題な気がしています。)
このサービスには、簡易的なcss/jsの編集機能があるので、今回のページデザインはこれで実現可能な範囲で作成していきました。
📣 掲載したい情報をもらう
まずどのような発信をしたいのか、広報にざっくりとしたイメージをまとめてもらいました。
以下は実際にもらった初稿のスクリーンショットですが、初稿の時点でまとまった情報をいただけたことでかなり時間短縮になりました。
🗽 切り口を決める
伝達したい「情報」がクリアになったので、それをどのような「切り口」で伝えるべきかを考えました。
今回は「このページを通してスマートバンク社のことをより知ってほしい」という目的と、「お金の流れを、もっと透明に」というプロダクトのキャッチコピーをかけて、 ”Make it Transparent” という切り口を思いつきました。
今回の資金調達に合わせて撮影した、社員やオフィスの写真も非常に透明感のある仕上がりになっていたこともあり、この方向で作ってみることにしました。
🎨 表現を整える
Notionっぽさを減らす
せっかくの特設サイトなので、なるべく「Notionっぽさ」を感じないようにしたいと考えました。そこで背景色を黒にする、ヘッダーをなくす、各要素を角丸にする、テキストを中央寄せにするなどの装飾を施しました。
透明感の表現
“Make it Transparent” の切り口に合わせて、ページ全体で透明感を感じられるように、すりガラスのようなボケ感のある背景画像を配置しました。
✍️ コンテンツの追加
イベントへの誘導
このページの成果地点としては「カジュアル面談」への応募と、「自社イベント」への応募としています。結果として1つのイベントに200名以上もの応募を集めることができました。
おまけコンテンツ
スクロールしていくと背景色が透明になっていき、徐々にタイル状の写真が見えていくギミックを仕込みました。
最後までスクロールすると「スマートバンクがもっと透明になる写真集」というリンクが現れて…
クリックするとメンバーやオフィスの写真を見ることができ、スマートバンクの社内の様子がわかる(=もっと透明になる)というコンテンツになっています。これはNotionらしさを隠すのではなく、逆にギャラリービューをそのまま活用して作ってみました。
そうして出来上がったのがこちらのページです。もしまだ見ていなければぜひ見ていってください。
📖 まとめ
今回は私たちの資金調達のクリエイティブ作成事例をご紹介しました。
発信すべき「情報」の「切り口」と「表現」を整えることで、より「話題になる」「どんな会社かわかる」「もっと知りたくなる」アウトプットを目指しました。
長くなってしまったので、今日はここまでにしますが、スタートアップにおける「資金調達」は最もデザインの力を活かせる場面のひとつであるように思います。投資家へのピッチ用資料作成などについてもまた要望があれば書いてみたいと思いますので、もし読みたい方がいればTwitterでコメントいただけると嬉しいです。ではまた。
