プレゼンワークショップに行ってきたのでまとめ
ヤスヒサさんに「プレゼンのワークショップやるので来ませんか」とお誘いいただいたので、行ってきました!
講師的な人が一人で喋るセミナー形式のイベントにはよく参加しているんですが、みんなで考えて意見を交換するワークショップは新鮮で、集中力を保ったまま参加する事ができました。
会場
会場はミツエーリンクスさんが貸してくれました! 太っ腹!
なにげにミツエーに行くのはこれで3回目なんですが、マジックミラーの向こう側が毎回気になってしまいます。 向こう側には何があるのだろうか。
内容
今回は技術的な事とは少し離れていて、プレゼンに関する物です。 なぜプレゼンの勉強なのかと言うと、最近、面白くないプレゼンが多いのだそう。
どういった物が面白くないプレゼンなのかと言うと、例えばスライドを読み上げるだけのプレゼン。 まあこれは資料だけ配布すればいいじゃんと思ってしまいますね。
それから、ハンズアウト(配布資料)を使う事でスライドを手抜きしているプレゼンも面白くないとの事。
最終的な目的
いろいろなイベントでおもしろいプレゼンを見たい!
hamashunによる補足
「おもしろいプレゼン」の定義は人それぞれだと思うのですが、ヤスヒサさんは「スライドを読むだけじゃなく、伝わるプレゼン」をおもしろいと定義しているような気がしました。
技術系プレゼンはコードの量が多い?
ここで、海外のスライドを例に、「一見コードが多そうなテーマなのにコードが少ないスライド」の紹介がありました。
- FOWD November 2007
- 全82ページ中、コードは0ページ
- Modular CSS
- 全77ページ中、コードは10ページ
- Rails Widgets by Paolo Dona at RailsToItaly
- 全146ページ中、コードは29ページ
この3つは、コードが登場しそうなテーマであるにも関わらず、しかしコードはあまり登場しません。
日本ではガリガリの技術ネタが好まれる事が多いが、アメリカでは技術(テクニック)以外のネタが取り上げられる事がよくある、との事。
じゃあ技術ネタは少なめの方が良いの?
答えはNO.
まあ、そりゃあそうですね。 伝えたい事にあわせた構成が良いのだと思います。
エクササイズ1
ここから、実際に参加者が考えて手を動かすコーナーです。
付箋紙に疑問を書いて、壁に貼る
まずはプレゼンに関する悩み、疑問、不安などを付箋紙に書き込んで、それを壁に適当に貼り付けていきます。
次にその付箋紙を、プランニング、スライド作成、スピーチ、その他、の4つにカテゴリ分けします。
これで何が起きるかと言うと、みんながどんな事を悩んでいるのかが見える化できるのです。 今回はスピーチのカテゴリが最も付箋紙の枚数が多く、「やっぱりみんな喋るのが苦手なんだなあ」という印象でした。
エクササイズ1はここまでなのですが、エクササイズ2ではこの付箋紙の内容を、グループワークで解決していく事になります。
ちょっと一息
ここでちょっと一息入れて、海外のおもしろいプレゼン動画を見せてもらいました。
ガイ・カワサキ
YouTube - ガイ・カワサキ講演日本語テロップ付き Guy Kawasaki
なんか有名な人らしいですね。 僕も前にどこかのブログでこの人に関する記事を読みました。
彼のプレゼンはかなり毒舌で、「○○なヤツはバカだ!」みたいな言い方が頻繁に出てくるんだそうです。
プレゼンの内容に「スライドは10枚でいい」「時間は20分でいい」などといった話が出てきますが、これはどこまで本気なのか、この動画だけだと計りきれませんでした。
もちろん、実際はプレゼンの内容によるでしょうし。
Bowみたいなヘンな物を紹介するプレゼン
Seth Godin at Gel 2006
この人はスライドがとても特徴的で、テキストは殆ど登場せず、写真を大きく映し出して、あとはトークで攻めるタイプ。
いわゆる高橋メソッドにも言えると思うんですけど、喋りの練習が必要になると思います。
英語がわからなくても、なんとなく言ってる事がわかるプレゼン
YouTube - Myths About the Developing World (1of3) (Hans Rosling @ TED)
(2:40くらいから)
英語が全くと言っていい程わからない僕でも、中盤からのプレゼンはなんとなく、雰囲気はわかりました。 年代に合わせてグラフが動いていく辺りです。
こちらも、喋りが上手い必要がありそうです。
エクササイズ2
ここからはグループワークで、先ほど貼り出した付箋紙に書いてある問題の解決法を考えました。 付箋紙をスケッチブックに貼って、解決法を書き込んでいき、それぞれ発表するというスタイルでした。 その内容の一部が以下です。
プランニング
- 来場者の属性がわからない
- ターゲットをあらかじめ宣言しておく
- タイトルに属性に関するキーワードを盛り込む
- 来る方に自分のサイト URL を記入してもらう
- メインポイントを何処に置くと集中してもらいやすいか
- ストーリーをどう構築するかで変化
- 大切なことは2度言う
- サンドイッチ方式 (最初と最後にポイントを言う)
- リハーサルはどうやるの?
- 作りながらリハーサル
- 人に聞いてもらう
- 録画・録音をする
- 時間は必ず計る
スライド作成
- コードが多いスライドになってしまう
- アウトラインやキーワードだけにする
- コードはハンズアウトや DL させる
- 参考資料を充実させることでコードを省く
- スライドや紙が多すぎ
- 少ない物がベストというわけではない
- 多くても高橋メソッドは効果的
- 絵が込み入りすぎる
- 外国人にも分かるかという視点でレビュー
- 情報ではなくメッセージを伝える
- 補足情報は詰め込まない
- スライドが単調
- 質問を挟む
- でかい文字
- 音・動画を盛り込む
- デモをしてスライドから離れる
- 配色や背景はないようによって変更すべきか?
- 白か黒(普通でいいんじゃない?)
- 見やすいかどうかが基準
- 使うパレットを絞る
- タイトルがおもしろくない
- タイトル=内容 であれば OK
- シリーズ化にしてみる
- 自分にキャラを作って、それをタイトルに取り込む
スピーチ
- 基本的に自信がない
- 経験を積む
- 下調べをきちんとする
- 仕事の実績を積む
- 反応をもらう
- プレゼンを断る(そもそも論)
- 笑いがとれない
- すべっても気にしない
- 身近なことを言う
- 笑いをとろうとしない
- 笑いをとることに頼らない
- キャラを作る
- 聞いている人の反応が分からない
- 実は分かるはず
- 余裕をもって観察すれば見えてくる
- 客観的になれるまで余裕をもつ
- 練習と経験が重要
- オーディエンスに問いかけてみる
- 挙手
- アイスブレーク
- 拍手を使ったアンケートを行ってみる
- センテンスに区切りを入れて、みんなを見渡す
- 会場のほうへ入って行く
- 思いつきで喋ってしまう
- フォーカスした話題であれば脱線は良い
- 話し手の抑揚がない
- リハーサル
- 自分の言葉にすること
- オーディオ、又はビデオに撮ってチェックする
- つかみのトークに悩む
- クイズをしてみる
- 自己紹介など脱線トークを入れてみる
- オーディエンスに話しかけてみる
- 配布資料って必要?
- 配布資料ばかりに目がいかないような工夫が必要
- 目次程度に止める
- スピーカーは資料を読まない
- 読んでしまうほど情報を詰めない
- 終わった後に資料を配布する
- 「まぁ」や「えー」と言ってしまう
- 録画・録音をしてチェック
- リハーサル中に言ってしまった瞬間に指摘してもらう
- 楽しくない
- もんたメソッドを採用
- キャッチボール的要素を組み込む
- 質疑応答をどう取り入れるか
- 最後以外にやる
- つかみにする
- 先に質問を集めておく
その他
- (Web系の)歴史ついて触れると思ったより興味をもってもらえない
- 内輪的な歴史話は避ける
- トリビアとして知っておきたいネタにしてみる
- モチベーションを維持する方法
- ゴールを設定する
- 新たな出会いを期待
- 営業チャンスとして捉える
- プレゼンの仕方に変化や、新たな課題を入れてチャレンジしてみる
- おもしろいと思ってもらいたい
- 内輪ネタは言わない
- 話し方や進め方にリズムを作る
- 明るく、テンションは高めで
- 退屈と思われないようにしたい
- ネタを随所に入れる
- メリハリを付ける
- 資料に頼らず自分を売り込みたい
- 表情 (スマイル)
- 声を大きく
- キャラ設定
- キャッチフレーズ
- 動物をタイトルに入れる (ちょっと変わったタイトルに)
- 感情を伝える
- フォローが出来ていない
- フォローも含めてすべてが見えてくるようにする
- メールでの対応は避けておいたほうが良い
- 有料/無料関係なくすべて公開は微妙
- 来た人だけのお土産
- 質疑応答
発表は、グループごとに前に出て行いました。 ここでの発表も一つのプレゼンだったと思います。
ネタに走る人や(いや、本人的にはマジメだったのかもしれませんが)、スケッチブックの書き方に個性が現れたのが印象的でした。
感想
ワークショップおもしろい! というのが素直な感想です。
セミナー形式のイベントでは、どんなに興味のあるテーマでも集中力が切れてしまう瞬間があるんですが、ワークショップではそれが殆どありませんでした。
「人間は立ち上がるだけでも気分転換になる」と言いますが、座りっぱなしではなく立ち上がって付箋紙を貼ったり、グループを作って作業した事が、いい感じに集中力の持続に繋がったのではないかなと思いました。
内容も、色んな人の「プレゼン感」を知る事ができて、とてもタメになりました。 実は、近い内に大勢の前で喋る機会がありそうなので、早速そこで生かしたいと思います。
livedoor プロフィールがリニューアルしました
hamashunのプロフィール
デザインが超よくなった!
テンプレートのデザインが一新されました。 と言うか、カラム構成から変わりました。 ほぼ作り直しです。
これは社内・社外ともに好評で、今回のリニューアルの目玉と言えるんじゃないかなと思います。
画像にPNGのアルファを多用しているので、見た目的になかなか新鮮な感じになりました。
余談ですが、このためにIE6にアルファを効かせる方法を色々と調べたので、今度まとめようと思います。
登録できる情報が増えた!
登録できる情報もかなり追加されました。 リニューアル前はかなりシンプルで、プロフィール単体として見ると若干、魅力に欠けていました。
でもこのリニューアルで、iddyみたいに色々なフィードを登録する事ができるようになりました。
そのほか色々
メール認証をするとメッセージやフレンド登録があった時に知らせてくれるので、まだ認証をしていない人はやっておくといいですよ!
また、ログインしておくとヘッダ右側のリンクからお気に入り/フレンド登録ができるので、よろしければhamashunのプロフィールから登録お願いします!
livedoor プロフィールの登録自体がまだな方は、トップページからどうぞ!
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。
2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。
ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。
少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。
なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。
概ね共通する事
標準準拠のCSSのみでは不可能
IEの独自拡張の、filterプロパティを使う必要があります。
CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlphaImageLoaderフィルタを使用しています。
IE PNG Fix 2.0などを除いてbackground-positionとbackground-repeatは使えない
多くのライブラリでは、背景画像の繰り返しと位置指定ができません。
この問題はかなり深刻な悩みの種でしたが、IE PNG Fix 2.0の登場でひとまず解決したと言えそうです。
A Better IE 5.5 and 6 PNG Fixのライブラリについて
Post Production ? A Better IE 5.5 and 6 PNG Fixという記事に掲載されているライブラリでも繰り返しと位置指定ができるとの事ですが、試したところうまく動かせませんでした。
サンプルが無く、全文が英語なので僕の使い方が間違っていたのだと思いますが、導入はIE PNG Fix 2.0の方が簡単だと思います。
謎の文字列が登場する
filterプロパティのAlphaImageLoaderフィルタを使っているので、見慣れない構文が登場します。
詳細はとみのホームページ内のAlphaImageLoaderに詳しく載っています。
CSSに直接filterプロパティを記述する方法
サンプルコード
div {
background: url(alpha.png);
}
* html div {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=http://example.com/img/ie.png);
}
* html div a {
position: relative;
}
コード解説
一つめの規則集合はIE6以外のブラウザに対するものです。
二つめの規則集合はIE6用のものです。 ここではスターハックを使って振り分けましたが、方法はなんでもよいです。
backgroundプロパティをnoneとしているのは、filterプロパティで表示される画像はbackgroundプロパティで表示された画像とは違う物だからです。
三つめの規則集合もIE6用のものです。 ここでのスターハックは必須ではありません。 また、この宣言自体も必須ではありません。
この宣言が必要になるのは、指定した要素の子要素にa要素やonclick属性、onmouse属性などが含まれる場合です。もちろんセレクタの a は当該要素に合わせたものになります。
メリット
- 記述自体はシンプル
- IE6とそれ以外のブラウザで、別々の画像を指定する事ができる(繰り返し表示できない件の対策として巨大な画像を使う場合など)
デメリット
- 画像の指定はHTMLを基準に考える必要があるので、絶対パスでの指定が現実的になる
- 独自拡張のプロパティを使用する
- 記述が多くなると面倒
雑感
実装の際には数行のコードを加えるだけなので、手軽に使えます。 反面、適用したい画像の枚数が増えると比例して規則集合が増えてしまいます。
また、パスの指定にクセがあったり背景画像のようには扱えないなど、backgroundプロパティの感覚で記述すると思い通りにならない事があります。
ヨモツネットの手法
この方法は、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネットで紹介されたものです。
behaviorプロパティ自体については、古い記事ですがTime Off for Good Behavior: Internet Explorer 5における DHTML Behaviorで概要を掴めます。
サンプルコード
div {
background: url(alpha.png);
}
* html div {
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}
* html div a {
position: relative;
}
コード解説
メリット・デメリットと合わせて元記事で詳しく解説されているので、そちらをご参照ください。
雑感
メリットは元記事で紹介されていますが、相対パスで記述できる事によりHTMLのディレクトリ構成に影響されないので、背景画像で使う際には特に便利だと思います。
ただ、IE6とそれ以外のブラウザで同じ画像を使う事になるので、繰り返し表示ができない為に大きめの画像を用意する場合には、Firefoxなどにもその画像が読み込まれてしまう事になります。
JavaScriptを使う方法
色々あるようなのですが、今回は試す範囲に含めませんでした。
IE PNG Fix v2.0を使う方法
IE PNG Fix v2.0は2008年9月現在で開発中のライブラリです。 Ver,UPに伴い記事と異なる部分が出る可能性があります。
サンプルコード
<style type="text/css">* html div.sample { behavior: url(iepngfix.htc); }</style>
<!--[if lte IE 6]><script type="text/javascript" src="iepngfix_tilebg.js"></script><![endif]-->
コード解説
style要素を使っているのは解説用コードだからで、CSSファイルに記述する事ができます。
また、条件付コメントを使ってIE6にのみJSファイルを読ませていますが、他の方法でも問題ありません。
独自拡張のbehaviorプロパティを使って、htcファイルを読み込んでいます。
iepngfix_tilebg.jsも合わせて読み込む事によって、background-positionプロパティやbackground-repeatプロパティと同様の効果を得られます。
注意点として、background-positionプロパティとbackground-repeatプロパティの効果を得たい場合には、iepngfix_tilebg.jsを読み込ませて、当該要素に任意のclass属性かid属性を付ける必要があります。 大事な事なので二度言いますが、この属性値には任意の値が付けられます。
もし位置指定や繰り返し表示を必要としないなら、iepngfix_tilebg.jsを読み込ませる必要はありません(Ver,1がそれにあたります)。
メリット
- 今回紹介した中で唯一、background-positonプロパティとbackground-repeatプロパティ相当の機能がある
- 繰り返し表示ができるので、画像を分ける必要がない
- ライブラリを読み込むだけの簡単さ
デメリット
- 独自拡張を使う必要がある
- 何らかのclass属性かid属性が必要
- 若干重い? 使用数が多いとそれだけ重くなってしまう
- 他のJSに影響が及ぶ可能性がある
雑感
個人的に現在最もアツイ方法。 これまで不可能とされていた背景画像の位置指定と繰り返し表示ができます。
しかも、何がしかのclass属性かid属性が必要とは言え、機能の為の値を強制され無い事がHTML的にとてもCoolです。
また、a要素などへの指定が必要ない点も便利です。
ライブラリ入手先
Ver,1.xはIE PNG Fix - TwinHelixから、Ver,2.x(のテストバージョン)はBeta Testing Area - TwinHelixからダウンロードできます。
Ver,2が正式版になったら、現在のVer,1と同じ場所に移動すると思われます。
ライセンスについて
iepngfix.htc内のライセンスについて書かれている部分は以下のようになっています。
This is licensed under the GNU LGPL, version 2.1 or later.
英語2のhamashunが超頑張って翻訳すると、多分、「このライブラリは GNU LGPL バージョン2.1(以降) の元に配布されています」みたいな感じ、だと思います。 たぶん!
(意味的に誤解を与えてしまう訳だったら、ツッコミいただけるとありがたいです)
LGPLについて参考になりそうなページ
おまけ:IE6にはGIF画像を使う方法
サンプルコード
div {
background: url(alpha.png);
}
* html div {
background: url(ie.gif);
}
コード解説
スターハックを使ってIE6にはGIF画像を読み込ませています。
雑感
IE6にはPNG画像を使わない、というMOSe的な発想です。 参考:MOSeのススメ - Go my way
IE6では若干見栄えが落ちますが、スクリプトによって重くなる心配がありません。