
会社のみんなが使えるスライドのテンプレをFigmaとGoogleスライドで用意してcommunityでも公開しました
こんにちは!今日は最近「自社っぽさのあるスライドのテンプレを会社のみんなが使える形で作った」のと「そのスライドのテンプレを流用して汎用性の高いFigmaのスライドテンプレをcommunityに公開した」ので、その一連の流れを書いていこうと思います。
事の発端
Da Vinci Studioでは部署を問わずちょこちょこ社内LTやお互いの仕事について共有する機会があります。
特に最近では「担当したことのないプロダクトや他のチームの仕事をもっと知る機会を用意しよう!」ということで、月に一回の全体会でそれぞれのお仕事内容を披露することになりました。各々仕事も忙しい中でありがたいことですね。
そこで必要になるのがプレゼン用スライドです。
軽い内容とはいえ、それっぽいテンプレを持ってきて情報を整理して文字を入れる……まあまあの労力がかかります。
そのためお仕事内容共有のプレゼンでは、『発表する内容をテンプレート化して埋めるだけで発表できるようにしよう(発表コストを下げよう)』と決まりました。
これに乗じて行ったのが
「Da Vinci Studioらしさのあるプレゼンのスライドを作っちゃおう!」
でした!
みんなが使えるようにするには?
実は以前からデザイン部内では「Da Vinci Studioぽいスライドのテンプレを用意して、メンバーが外部で発表するときとかも簡単にいい感じになるようにしたい!」という野望がなんとなくありました。
そのときに既に協議していたのが「実際エンジニアなど非デザイナーのメンバーが使うことを考慮したらテンプレはGoogleスライドだよね」です。Figmaで作って使い方を覚えてもらうのはちょっとコストが大きすぎるので…
ということで最終目標は「みんなが使えるスライドのテンプレをGoogleスライドで作ること」になりました。
それに至るまでの経緯を見ていきましょう。
まず、Figmaでつくる
Googleスライドって言ったのにいきなりFigmaかい!という感じですが、まずFigmaで「Da Vinci Studioっぽいスライドのデザイン」を作りました。
というか正確には数ヶ月前から作ってあってデザイン部内では活用していました。
なぜFigmaで作るかというとFigmaの方がデザインツールとして圧倒的に優れており(それはそう…)、初期の細かな調整がしやすいためです。
具体的には「マージンや文字サイズなどを数値ベースで美しく配置する」とか「スライドのあしらいを作る」といったことをGoogleスライドでやろうとするとかなり辛いです。なので、先にFigmaで作っておいてGoogleスライドではそれをトレース再現したり素材を活用したりする場にする…という方法をとりました。

この段階でどんなスライド・要素がメンバーに必要そうか?ということを把握して網羅しておくと良さそうです。
私の場合は想定利用シーンを「社外での技術発表」と「社内でのちょっとした発表」程度で考えていたので
スライドの表紙
セクションタイトル
目次
自己紹介(SNSのIDやプロフィール等)
本文
あたりをそれぞれいくつか用意し、実際に使ってもらって必要なレイアウトパターンを検討しました。もし想定シーンが違う場合はもっと色々必要かもしれません。
とはいえ更新していけばいいので、ある程度測れれば良さそうな気がします。
Google スライドでつくる
さて、Figmaでデザインが作れたら今度こそGoogleスライドに挑戦です。
作ったデザインを画像で書き出して、Googleスライドにてトレースしていきます。
この時、よりテンプレートを強固に作りたい場合はテーマ機能を使うと便利です。
テーマ機能とはFigma的に言うと「スライドのコンポーネントを作成できる機能で、以下の画像のようにレイアウトごとで設定ができます。
デフォルトではGoogleスライド標準の「テーマ(明)」が適用されており、これを編集していくのが楽そうです。
操作の詳細はググってみてください👍私も試行錯誤しました……。

ということで「みんなが使えるDa Vinci StudioっぽいGoogleスライドのテンプレ」、完成です!!
さらに今回は社内の発表のために必要な項目名も入れておいて、資料作りの時は穴埋めで終わるようにしました。ハッピーエンド。
Figma communityにも公開しちゃおう
さて、今回作った「Da Vinci Studioっぽいスライド」ですが、せっかくFigmaで作ったデータ、ちょっともったいないな……今回便利だったからできたら他のみんなも使ってほしいな…の欲が出てきました。
なのでcommunityにて公開しました。
エンジニアもデザイナーも様々な場面に対応しやすいように、という方向性で作ったのでレイアウトなどかなりシンプルな形です。
また、テーマカラーを1つに決めて作っているのでコーポレートカラーなどをそれに変更して使えばなんとなく自社っぽいスライドにできるかも?
使い勝手のいいスライド素材としてぜひぜひご活用ください!!
🌵 🌵 🌵
ということで業務のちょっとした改善のお話でした。
こういう身近に働く人の業務内容をちょっと良くするの楽しいので引き続き色々やっていきたいです。
さて、この記事も含まれている「カケルデザインマガジン」は、私たち Da Vinci Studio のデザイン部がどんなメンバーで構成されているのかを知ってもらおう。と考えて運営しているマガジンです。日々の発見や考え、気づきなどを肩肘張らず発信しています。ぜひチェックしてみてください!
そして私たち Da Vinci Studio ではこんな気付きをメンバーで持ち寄って、ワイワイ話しながらチームの知見を増やしています。デザイナー、エンジニアともに積極採用中なので、どうぞよろしくお願いします!