私がCXOを務めるスマートバンク社は、2022年7月に総額20億円の資金調達を実施しました。発表当日にはTwitterで「スマートバンク」「資金調達」がトレンド入り、主要オンラインメディア・日本経済新聞・米TechCrunchに掲載されました。今後資金調達のPRをするスタートアップの参考になればと思い「なにをどうやって作ったのか」をまとめてみます。

このプロジェクトは広報が終始リードしてくれました。

「目的」= 何のためにやるのか

「目標」= 何を実現したいのか

「情報」= 何を伝えるのか

を最初に整理してくれたことで、デザイナーとして「切り口」や「表現」を考えることにフォーカスすることができました。

広報による、プロジェクト推進のプロセスもnoteで公開されているのでぜひチェックしてください。

本プロジェクトの目的は明確に「採用」でした。また目標値としてはメディアへの掲載数や、求人への応募数を設定していました。

それを実現するためにクリエイティブを通して「話題にしたくなる」「どんな会社かわかる」「もっと知りたくなる」コミュニケーションを意識していました。

これは持論ですが、同じ情報を伝えるにしても「切り口」が鮮やかだと人の興味を惹きやすくなりますし、切り口に即した「表現」をすることで、より伝わりやすくなります。

もしプロジェクトのキックオフで「情報」が与えられたら、効果的な「切り口」と「表現」を提示することがデザイナーの役割だと考えています。

まず最初につくったのは、PR Timesに掲載するプレスリリースのキービジュアルです。OGPとしてTwitterにシェアされた時に表示されるものでもあります。

弊社では「B/43」というVisaプリペイドカードとアプリで支出を管理するプロダクトをつくっており、本件が公開される1ヶ月ほど前にカード中央が透明なデザインが特徴の新カードをローンチしたところでした。「どんな会社かわかる」ためにも、このカードをビジュアル表現の中心として活用することにしました。

まずiPadでラフにアイデアをスケッチしていきました。小一時間で10枚ほどスケッチした中から、2つの案をピックアップしました。どちらも「巨大なカードを持っている社長」が中央にあり、その四方に投資家がいるという構図です。

ラフの段階ではどちらも甲乙つけられず、両方撮ってみて決めることにしました。

当日の撮影は、前回ラウンドからの株主でもあるGlobal Brainさんのオフィスで行いました。なんとベンチャー支援のためオフィス内に撮影スタジオを作られたそうで、今回が利用の第一号案件でした。GBさんの支援はいいぞ。

最初にテストがてら代表の写真を撮っていきました。

既視感のあるポーズでもパチリ。

1組目の投資家は前回ラウンドからめちゃくちゃにお世話になっている、ANRIの佐俣アンリさん。

A案はクールな感じで…

B案は楽しい感じ。サービス精神がすごい。

2組目はSB社の社外取締役でもあるグローバル・ブレインの百合本さん。まずは絵コンテ通りの構図でぱちり。

持ち方のリクエストにも応えてくださる御大。

3組目は今回から投資してくださったグロービス・キャピタル・パートナーズの高宮さん、深川さん。

ふたりともノリノリ。

はい、すしざんまい。

4組目はZ Venture Capitalの堀さん、湯田さん。個人的にも初対面なので緊張…

するヒマもなく素晴らしいポーズを決めるお二方。

芸達者すぎる。

最後に時間があまったので創業者3人でも撮影。人類は大きいカードを持つとテンションが上がることがわかりました。これで撮影は終了、カメラマンさんからの現像を待ちます。

もし柔軟に対応いただけるカメラマンさんであれば、「一旦すべてのデータを撮って出しでもらう」→ 「優先してレタッチしてほしい写真を指定する」→ 「レタッチを待っている間にラフ作成」→ 「レタッチ完了後に差し替え」という進め方をするとスムーズなのでおすすめです。

上がってきた写真を並べて画像を作っていきます。途中経過を随時Slackで共有しながら進めるスタイルです。

株主の皆さんのモデル力が高かったことが決め手となり、結果的にB案に決定しました。巨大カードを持った撮影という無茶振りにも関わらず、全面協力いただきありがとうございました。

テキストの追加

「スマートバンクという、特徴的なカードを提供する会社が、20億円調達した」ニュースであることが画像だけでも伝わるように、テキスト情報を追加することにしました。

限られた面積でうまく伝える方法に悩みましたが、B/43アプリの入金通知をモチーフにした表現を思いつきクリアすることができました。

背景の追加

背景についても何パターンか作ったのですが、サービスサイトやUIでも使っているベージュをベースに、ぼかしたカードイラストを散りばめるパターンを採用しました。にぎやかさが「チーム感」という切り口にマッチし、カードやアプリUIとも違和感なく溶け込むことを目指しました。

このような調整の結果、最終的に「話題にしたくなる」「どんな会社かわかる」バナーになったのではないかと思いますがいかがでしょうか？

冒頭にも書いたように、発表当日には下記のような成果を得ることができたので、個人的にはそこそこの手応えがありました。

次にプレスリリースの受け皿となり、「もっと知りたくなる」ことで採用の応募へとつなげる特設サイトを作っていきました。

今回は開発工数とSEOの観点から、コーポレートサイト(smartbank.co.jp)の下層ページとして追加することにしました。

元々、このコーポレートサイトはNotionで作っています。そのため、更新がだれでも容易にできる一方で表現に制約があります。また、ドメインの設定や、アクセシビリティ対策などのためにSuperというNotionをウェブサイト化するサービスを使っています。

ページ公開後にLightHouseのスコアを確認したところ、パフォーマンス以外は満点でした。(パフォーマンスも画像の数やサイズの問題な気がしています。)

このサービスには、簡易的なcss/jsの編集機能があるので、今回のページデザインはこれで実現可能な範囲で作成していきました。

まずどのような発信をしたいのか、広報にざっくりとしたイメージをまとめてもらいました。

以下は実際にもらった初稿のスクリーンショットですが、初稿の時点でまとまった情報をいただけたことでかなり時間短縮になりました。

伝達したい「情報」がクリアになったので、それをどのような「切り口」で伝えるべきかを考えました。

今回は「このページを通してスマートバンク社のことをより知ってほしい」という目的と、「お金の流れを、もっと透明に」というプロダクトのキャッチコピーをかけて、 ”Make it Transparent” という切り口を思いつきました。

今回の資金調達に合わせて撮影した、社員やオフィスの写真も非常に透明感のある仕上がりになっていたこともあり、この方向で作ってみることにしました。

Notionっぽさを減らす

せっかくの特設サイトなので、なるべく「Notionっぽさ」を感じないようにしたいと考えました。そこで背景色を黒にする、ヘッダーをなくす、各要素を角丸にする、テキストを中央寄せにするなどの装飾を施しました。

透明感の表現

“Make it Transparent” の切り口に合わせて、ページ全体で透明感を感じられるように、すりガラスのようなボケ感のある背景画像を配置しました。

イベントへの誘導

このページの成果地点としては「カジュアル面談」への応募と、「自社イベント」への応募としています。結果として1つのイベントに200名以上もの応募を集めることができました。

おまけコンテンツ

スクロールしていくと背景色が透明になっていき、徐々にタイル状の写真が見えていくギミックを仕込みました。

最後までスクロールすると「スマートバンクがもっと透明になる写真集」というリンクが現れて…

クリックするとメンバーやオフィスの写真を見ることができ、スマートバンクの社内の様子がわかる(=もっと透明になる)というコンテンツになっています。これはNotionらしさを隠すのではなく、逆にギャラリービューをそのまま活用して作ってみました。

そうして出来上がったのがこちらのページです。もしまだ見ていなければぜひ見ていってください。

今回は私たちの資金調達のクリエイティブ作成事例をご紹介しました。

発信すべき「情報」の「切り口」と「表現」を整えることで、より「話題になる」「どんな会社かわかる」「もっと知りたくなる」アウトプットを目指しました。

長くなってしまったので、今日はここまでにしますが、スタートアップにおける「資金調達」は最もデザインの力を活かせる場面のひとつであるように思います。投資家へのピッチ用資料作成などについてもまた要望があれば書いてみたいと思いますので、もし読みたい方がいればTwitterでコメントいただけると嬉しいです。ではまた。