私流スライド作成5原則

このエントリは GMO Pepabo Managers Advent Calendar 2019 15日目のエントリーです。

昨日はminne CSのマネージャー ハヤティーによる「マイケルから学ぶ “THIS IS IT ”なチームマネジメント」でした。

さて、ここでは自分がスライド作成をする際に意識している5原則を書いてみようと思います。

自分事になるのですが私がGMOペパボでマネージャーという役職を2016年5月、2018年10月からは部長職を担って以来、増えてきた業務の一つにパワーポイントやgoogle docsでスライドを作成する機会があります。これもむやみに増えているというよりは例えば、

  • サービスを代表する立場としてセミナーなどで登壇する
  • 事業部内で共有を行うために一同に介した場で登壇する
  • 経営会議や提携先企業様との場での説明用資料として準備する

などが挙げられます。 私自身がエンジニアとして入社し業務に携わっている際もエンジニアの集まりでのLT的な場であったりでプレゼンテーションを作成することもありましたが、よりその機会やケースが広がってきました。

機会が増えるに連れ、自分なりにスライドを作成する際に意識している点などが少しずつまとまってきましたので、せっかくなのでご紹介してみようと思います。

ここでご紹介するのは作成している際の心がけというかポリシーで綺麗な資料を作るためのポリシーとは違うのでその点はご了承ください。

先に列挙してしまうと以下の様な点を意識してプレゼンテーション資料を作成しています。

1. 自己紹介スライドには発表する場とリンクするトピックを入れる 2. 登壇時間(分) = スライド(枚数) 3. 定期開催での発表はパターン化 & 引用スタート 4. 数字があったら同じ数字の規模感を頭に入れておく 5. "伝える" スライドに3要素以上入れない
私流スライド作成5原則

以下、それぞれを少しだけ詳しくご紹介していきます。

自己紹介スライドには発表する場とリンクするトピックを入れる

社内の共有会の様な性質の場所における資料では自己紹介のスライド等はないとは思いますが、社外であったりあるいはセミナーであったりするときは自己紹介のスライドを入れることが多いかと思います。 そうしたときに発表をしている場所と自分の経歴でリンクするところがあれば入れる様にしています。

例えば自分の場合、

  • ロケーション的にリンクする
    • 福岡で発表する機会があったときは高校や大学時代を過ごしたこと
    • 関西で発表する機会があったら関西にはいくらか親戚がいるということ などなど...
  • 聴衆にリンクする
    • 対象が管理職の方が多そうであればどのくらいからマネジメントに携わっているかを入れる
    • エンジニアの方が多そうであればマネジメント携わる以前はエンジニアであった紹介を入れる などなど...

だったりと「あ、この発表する人、自分とこういった共通点があるんだ」ということを知って頂くためにトピックとして加える様にしています。

この手のスライド、使い回せる要素が多いため大抵コピペで済ませてしまうことが多いところですが、改めて一度見直してみるとよいかもしれません。

登壇時間(分) = スライド(枚数)

ここは人によって発表のスタイルが違うので一概に言えないかも知れませんが自分の場合割り当てていただいている登壇時間(分)に対して同じ数の枚数のスライドを用意する様にしています。 タイトル等も含み一瞬しか利用しないスライドもあるかとは思いますがそういう類のものも含めて自分の場合、平均すると大体1枚1分が目安になっています。

15分が発表時間であれば、タイトルからまとめのスライドまで入れて15枚に収めます。 経験則なのですがこの枚数に収められない場合、大抵全編駆け足になって伝えようとしたことが伝わりきらない感覚を定性的にもっています。

ちなみに自分の場合、いきなりPowerPoint等を開いてスライドを作り始めることはせず、作成をする必要がある一週前の週末に散歩をして発表する際に伝えることの整理と流れをイメージします。そこで思いついたことを帰宅してメモ帳に箇条書きで書いて、そこからスライドに起こし始めます。

定期開催での発表はパターン化 & 引用スタート

パターン化

定期開催の場合、例えばGMOペパボEC事業部では隔月で行っている共有会「ECどうでしょう」という場を設けているのですが、そこで発表する際の流れはパターン化しています。例えば、以下の様な形です。

  • タイトル
  • 開催の意義・目的
  • P/L, KPIの状況
  • 注力施策の状況
  • まとめ

といった具合の大きなが流れです。毎回の構成を同じにしているので聞き手となる方も「おおよそ今日はこのぐらいの時間を使ってこういう流れで話がされる」という構えができるかなと思っているところと、あと更に、もう少し細かいところを書くと、上の例の中だと開催の意義・目的だったり、P/Lの説明をする前に前段として「売上、利益とは?」といったスライドも入れていて、毎回必ず同じ説明をしています。

これは、職種や経歴も全く違う人が一同に集う場であるため前提となる知識もバラバラになるため最低限前提としたい知識を同期させるためです。

引用スタート

人というのは忘れる生き物なので、自分も聞き手側だったらおそらく「あれ、前回って @hideack は何を話したっけ?」というのが人間の性ですし自然なことだと思うので振り返り用として前回使ったスライドを一枚いれたり、まとめのスライドを入れてから新しい話に繋げる様にしています。

そうすることで定期開催しているそれぞれの発表の場に連続性が出て、継続して行っている意義も見出すことができる様になります。 もちろん発表の内容によっては引用スタートでない形もすることもありますが、なんらか前回発表した内容は資料のどこかで必ず引用します。

少し脱線しますが私が行っている月の評価面談だったり1on1だったりの場では、「前回はこういうこと話しましたね」といった思い出しのところから始めています。 これも、行っている評価面談だったり1on1が離散的でなく連続的だと考えているためです。

数字があったら同じ数字の規模感を頭に入れておく

これはどちらかというと発表tipsみたいな形なのですが具体的にイメージできない数字(普段扱わない様な規模感の数字)だったりしたときは、発表を聞いている方がイメージするのに支援できる様な情報を "口頭" で説明します。 ニュース番組で「東京ドーム何杯分」といった表現をされるときの使い方に近いでしょうか。

例えば、

  • 例: 金額の規模感
    • スライド上で「oo億円」と記載
      • 「みなさんが知っている○○○という会社の売上と同じくらいです
      • 「○○○の建築費がこのくらいです」

これをあえてスライドで書かないのは注目するポイントをぶらさない様にするためで、スライドにこういった情報を入れたときに視点がそこばかりにいってしまい肝心の受け取って欲しい数字が抜けてしまうためです。

口頭で補足することで視覚で入ってくる「数字」を聴覚で上の様な情報を添えることで理解の援助をすることと、硬い話になりがちな数字の話に少し柔らかくすることができます。

"伝える" スライドに3要素以上入れない

個人的に「信号機理論」と言っているのですが、まとめのスライドや行っている発表の中で伝えたいことを入れるスライドにおいては最大でも要素は3つと決めています。 これ以上の数になると口頭で話すことも多くなり聞き手の取捨選択の数が増えてしまうと思っています。

スライドを見たときに目から入る情報として認識できるのが個人的には最大で3要素だと思っていて、そこからさらに耳を介して入ってくる情報を併せたときに理解しやすい限度としてもこの数かなと思っています。


まとめ

つらつらと書き連ねましたが、私がプレゼンテーション用の資料を作成する際に意識している5原則をご紹介しました。 もちろん、これがベストという訳でもありません。 自分自身もまだまだ「伝達力」や「説明力」が足りないと思うことが多々ありますし、今後も頂く機会を糧としてよりブラッシュアップしていくと思いますが、もし何らかの場で誰かに伝えるためのプレゼンテーション資料を作成する際のヒントにしていただけると幸いです。

あと、最後に一番大事なのは読みやすく理解しやすいスライドを作ることと同じくらいかそれ以上に自分が考えていることを伝えられるかというところなのかもしれません。

明日16日目はminneマネージャーのkeokenによる「社員名簿サービスの紹介と開発未経験マネージャー(40)の奮闘記」です。

2019年11月に読んだ本を振り返る

今月は3冊。

ゼロ秒思考[行動編]―――即断即決、即実行のトレーニング、即断即決の6つの理由として上げられていた各項目なるほど感あった。またそれを行うためのオプションとフレームワークの話、参考になった。


booklog.jp

booklog.jp

booklog.jp

GAS(Google Apps Script)でカラーミーショップAPIを利用する

カラーミーショップ では、カラーミーショップAPIというAPIを用意していてネットショップを運営するための管理画面から行えるオペレーションであったり、ショップ自体が供える情報を取得する仕組みがある。この仕組みを活用してカラーミーショップでは今年の5月からカラーミーショップアプリストアというネットショップを運営するにあたっての機能をアドオンしたり効率化することができるプラットフォームの提供を開始している。

自分自身がこのプラットフォームに参加してもらうためのEC支援系の企業の方々だったり、エンジニアの方とお話することがまま増えていく中で、もっとAPI活用できないかなと考えたとき、例えばサービスで提供しているCSVダウンロードの機能だったりをgoogle docs (Google Apps Script) とカラーミーショップAPIで置き換えられないかなと思って試してみた。あと、自分自身がもう少しこの周りをもっと利用しないと気づけないところもあるのではないかと思ってみたところもモチベーションだったりする。

ちなみに開発者体験を向上させたいという視点からエンジニアサイドでもハッカソンインベントもチャレンジしている。

tech.pepabo.com

少し話がずれてしまった。

以下、一例として「ネットショップに登録している商品の "ID, 商品名, 価格" をgoogle docsスプレッドシートに書き出す」というオペレーションを試してみた。こういったところからネットショップだったりの運営を自動化してみるところにチャレンジしてみるのも一案だと思う。


googel docsでスプレッドシートを新規作成する

新しくスプレッドシートの新規作成をして、そこから "ツール > スクリプトエディタ" を選択。

スクリプトIDを控える

スクリプトエディタを開いた際の "ファイル > プロジェクトのプロパティー" を開くと以下の様なダイアログが表示される。

f:id:hideack:20191104151818p:plain
スクリプトIDが表示されるダイアログ

ダイアログ中に表示される スクリプトID を後に利用するので控える。

カラーミーショップAPIでアプリケーション登録をする

カラーミーショップAPIのアプリケーション登録から今回のGASでカラーミーショップAPIを利用するアプリケーションを登録する。 登録は https://api.shop-pro.jp/oauth/applications/new から行える。

ディベロッパー登録していない場合は https://api.shop-pro.jp/developers/sign_up から行える。

f:id:hideack:20191104142443p:plain
カラーミーショップAPIの新規アプリケーション登録画面

登録の際に必要となるリダイレクトURIには、一つ前の手順で控えたスクリプトIDを含めた以下のものを設定する。

https://script.google.com/macros/d/スクリプトID/usercallback で設定する

アプリケーション登録を完了した際に表示されるクライアントID, クライアントシークレットを控える

画面上に表示されるクライアントID及び、クライアントシークレットを控える。

f:id:hideack:20191104142646p:plain
アプリケーション登録完了時の画面

OAuth認証をするためのライブラリを追加する

Google Apps ScriptでOAuth認証を行うためのライブラリを登録する。スクリプトエディタのメニューにある "リソース > ライブラリ..." を選択して表示されるウインドウ中の Add a library のフォームに以下の識別子を入力する。

1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF

f:id:hideack:20191104142854p:plain
OAuth認証用のライブラリを追加する

そうすると "OAuth2" のライブラリが見つかるので最新のバージョンを指定して保存する。

f:id:hideack:20191104143300p:plain
OAuth2のライブラリが見つかるので最新のものを選択

ソースコードを記述する

試しにカラーミーショップAPIから認証を取った利用店舗の商品情報を取得してみる。以下、サンプルソースコード。

// api.shop-pro.jp で表示された内容を設定
var CLIENT_ID = '*****';
var CLIENT_SECRET = '*****';
 
function getOAuthService() {
  return OAuth2.createService('colormeshop')
      .setAuthorizationBaseUrl('https://api.shop-pro.jp/oauth/authorize')
      .setTokenUrl('https://api.shop-pro.jp/oauth/token')
      .setClientId(CLIENT_ID)
      .setClientSecret(CLIENT_SECRET)
      .setCallbackFunction('authCallback')
      .setPropertyStore(PropertiesService.getUserProperties())
      .setScope('read_products read_sales');
}

// この関数を "実行 > 関数を実行 > " から選択
function doAuthentication() {
  var service = getOAuthService();
  var authorizationUrl = service.getAuthorizationUrl();
  Logger.log(authorizationUrl);
  return;
}
 
//認証コールバック
function authCallback(request) {
  var service = getOAuthService();
  
  if (service.handleCallback(request)) {
    return HtmlService.createHtmlOutput('認証に成功しました。タブを閉じてください。');
  } else {
    return HtmlService.createHtmlOutput('認証に失敗しました。');
  };
}

// 商品情報取得してスプレッドシートに書き込み
function getProducts() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var service = getOAuthService();
  var accessToken = service.getAccessToken();
  
  var requestBaseUrl = 'https://api.shop-pro.jp/v1/products.json';
  var headers = { "Authorization" : "Bearer " + accessToken };

  var options ={
    "method"  : "get",
    "headers" : headers
  };

  var offset = 0;
  
  do {
    var fetchCount = 0;
    var requestUrl = requestBaseUrl + "?offset=" + offset;
    
    var response = UrlFetchApp.fetch(requestUrl,options).getContentText();
    var products = JSON.parse(response).products;
    
    for(var i=0; i<products.length; i++) {
      fetchCount++;
      sheet.appendRow([products[i].id, products[i].name, products[i].sales_price]);
    }
    
    offset += 10;
    Utilities.sleep(500);
  }while(fetchCount > 0)
}

上記のソースコードを入力し終えた後、スクリプトエディタの "実行 > 関数を実行" で以下の順番を踏んで関数を実行する。

doAuthentication

実行が正常に終わった後、"表示 > ログ" で表示されるURLをブラウザに貼り付けて開く。そうするとカラーミーショップAPIでのOAuth認証が走り「認証に成功しました。タブを閉じてください。」という表示が行われたら認証成功。

getProducts

実行するとカラーミーショップAPIから取得された認証ショップの商品情報がシート (ここでは "シート1" という名前固定) に書き出されていく

f:id:hideack:20191104144951p:plain
シートに書き出された様子(ここでは商品ID, 商品名, 価格が書き出されている)

新宿散歩 - 徒然日記

ふと電車に乗って降りた先を散歩するシリーズ。本日は新宿。新宿のビル街、週末は人が少なくて歩きやすいし景色は面白いしとてもおすすめである。

f:id:hideack:20191104153306p:plain
新宿の空は青かった

そのままブックファースト新宿店で本を2冊購入。Kindleで大抵の本は間に合うのだけれども、やっぱり物理的な本に囲まれている本屋さんの中を歩くことで出会える本というのも一定数あるもんだなと思いながら帰宅。

徒然日記

ロッキード事件「葬られた真実」読了。段々歴史になりつつある事件だけれども、たくさんの本が出されていてそれぞれの本の意見も違ったりするところが興味深い。

晩ごはんに炊き込みご飯とお味噌汁、そして再度成長させた豆苗を使った炒めものを作って一日終了。

髪を切った - 徒然日記

髪を切りにいく。髪を染めている間に

  • 職場(=美容室)へSlack導入検討中の話
  • AIを使ったカウンセリングの話
  • iPhone11の話
  • 切った髪を使った健康診断サービスの話

を聞いた。「Slack使うとどういうところが便利なのですか?」と質問され、自分は当たり前すぎるくらいに利用しているので少し考えた後、話題によってチャンネル分けられること、インテグレーションが使えること、botのことなど思いつく範囲で伝えてみたけどどうだろう。

切った髪を使った健康診断サービス、知らなかったのだけど確かに髪を切る行為は定期的に行うし、痛みも伴わないし、蓄積的なデータでの診断が行われるし面白いビジネスモデルだなと思った。

icoi 美容室からひろがる、icoi(憩い)の暮らし

今度試してみよう。