Kinetic Typography
Kinetic Typography（キネティック・タイポグラフィ）。
ご存じですか？
僕はつい最近、この言葉を知りました。
直訳すると、
kinetic（運動の／動く）・typography（活字／文字表現）
つまり、「動く文字表現」。
なんとなく「ああ、あれか」と思い当たる方もいらっしゃるでしょう。
そう、それです。
百聞は一見にしかず。
まずはいくつかのサンプルをご覧いただきましょう。
■Kinetic Typographyのサンプル映像
日本語では↓こんなのがあります。
どうです？ こういう表現。かっこいいですよね～
で、このキネティック・タイポグラフィ。
きわめてパワポ的だと思いませんか？
文字を動かして見せる。そう、いつもやってますよね、パワーポイントで。
そういう観点で、このキネティック・タイポグラフィの映像は、
とっても参考になります。
てゆーか、マネしたい^^;
******
企画の世界での文字表現といえば、「高橋メソッド」が真っ先に思い浮かびますが、
あれも一種のキネティック・タイポグラフィですね。
（さほど動的な要素はありませんが、一応“切り替わる”という動きがあるとして）
「でかい文字」ってのが、“文字表現”と言えます。
個人的には、ボブ・ディランの『Subterranean Homesick Blues』のPVで、
歌詞の書かれたフリップを一枚一枚投げ捨てていく、
とゆーめっちゃかっこいいシーンが
記憶に残っています。
これも単なるタイポグラフィではなくキネテック・タイポグラフィ。
最近では↓この映像も印象に残りました。
******
「これはキネティック・タイポグラフィか否か？」という話はともかく、
文字表現でのプレゼンテーション、
てのはなかなかインパクトがあり、印象的なプレゼンになるように思います。
キネティック・タイポグラフィを導入した
プレゼンテーション。
そんなものをちょっと追求してみようかな、と思う今日この頃です。
では最後に、もっともっとキネティック・タイポグラフィを！
ご存じですか？
僕はつい最近、この言葉を知りました。
直訳すると、
kinetic（運動の／動く）・typography（活字／文字表現）
つまり、「動く文字表現」。
なんとなく「ああ、あれか」と思い当たる方もいらっしゃるでしょう。
そう、それです。
百聞は一見にしかず。
まずはいくつかのサンプルをご覧いただきましょう。
■Kinetic Typographyのサンプル映像
日本語では↓こんなのがあります。
どうです？ こういう表現。かっこいいですよね～
で、このキネティック・タイポグラフィ。
きわめてパワポ的だと思いませんか？
文字を動かして見せる。そう、いつもやってますよね、パワーポイントで。
そういう観点で、このキネティック・タイポグラフィの映像は、
とっても参考になります。
てゆーか、マネしたい^^;
******
企画の世界での文字表現といえば、「高橋メソッド」が真っ先に思い浮かびますが、
あれも一種のキネティック・タイポグラフィですね。
（さほど動的な要素はありませんが、一応“切り替わる”という動きがあるとして）
「でかい文字」ってのが、“文字表現”と言えます。
個人的には、ボブ・ディランの『Subterranean Homesick Blues』のPVで、
歌詞の書かれたフリップを一枚一枚投げ捨てていく、
とゆーめっちゃかっこいいシーンが
記憶に残っています。
これも単なるタイポグラフィではなくキネテック・タイポグラフィ。
最近では↓この映像も印象に残りました。
******
「これはキネティック・タイポグラフィか否か？」という話はともかく、
文字表現でのプレゼンテーション、
てのはなかなかインパクトがあり、印象的なプレゼンになるように思います。
キネティック・タイポグラフィを導入した
プレゼンテーション。
そんなものをちょっと追求してみようかな、と思う今日この頃です。
では最後に、もっともっとキネティック・タイポグラフィを！
サンプル05（091004）
パワーポイントで
「黄金比の描き方」
をつくってみました。
（追記）
「黄金比」と言えば、この本がオススメ！
Balance in Design 美しくみせるデザインの原則/Kimberly Elam
￥1,890
Amazon.co.jp
人体や生物、家具、建造物などを取り上げ、その「美しいバランス」を検証する、という内容。
事例ごとに比率図形の描かれたトレーシングペーパーが図版に重ねられており、
視覚的にも美しくわかりやすくつくられています。
読んで学ぶ、というよりも、美しいバランスが「見て身につく」という一冊です。
『マイノリティ・リポート』のあの音が……
今日、映画『マイノリティ・リポート』を観ていたのですが、
映画で使われている虹彩認証の効果音が、
iPod Touch（iPhoneもかな？）の
「同期音」と同じであることを発見！
さすがAppleですねぇ。
最近は私、すっかりWinユーザーになっていますが、もともとは長らくのMacユーザー。
昔は「イースターエッグ」なんてものがありまして（いまもあるのかな？）、
その洒落っ気にAppleらしさを感じたものでした。
でも、いまだにこーゆー洒落っ気（茶目っ気？）は失われていなかったんですね。
その裏にあるものに、僕たちは惹かれていくのです。。。
（追記）
YouTubeで↑そのシーンの映像を発見しました！
これこれ↓
映画で使われている虹彩認証の効果音が、
iPod Touch（iPhoneもかな？）の
「同期音」と同じであることを発見！
さすがAppleですねぇ。
最近は私、すっかりWinユーザーになっていますが、もともとは長らくのMacユーザー。
昔は「イースターエッグ」なんてものがありまして（いまもあるのかな？）、
その洒落っ気にAppleらしさを感じたものでした。
でも、いまだにこーゆー洒落っ気（茶目っ気？）は失われていなかったんですね。
その裏にあるものに、僕たちは惹かれていくのです。。。
（追記）
YouTubeで↑そのシーンの映像を発見しました！
これこれ↓
サンプル04（091002）
プレゼンテイメントウェブサイト内の「プレゼンテイメント式PowerPoint講座」用に作成。
パスツールを登場させたのは、息子（小４）が読んでいた「パリと四人の魔術師 (マジック・ツリーハウス 21) 」に出てきた
『幸運は準備のできている人に味方する』
という名言が気に入ったため。
なにごとも、しっかり取り組んでいれば、チャンスはやってくるのです。
パワーポイントで遊ぶ。
パワーポイントって、ビジネスツールにしておくのはもったいない！
……なんてほど、意外とクリエイティブツールだったりします。
なんしかお遊びでこーゆーのもちゃちゃっとつくれます。
完全な映像ではない、平面グラフィックが動く感じ。
パワーポイントアニメーションは、なんだかちょっと気になる存在です。
……なんてほど、意外とクリエイティブツールだったりします。
なんしかお遊びでこーゆーのもちゃちゃっとつくれます。
完全な映像ではない、平面グラフィックが動く感じ。
パワーポイントアニメーションは、なんだかちょっと気になる存在です。
アニメーション設定の「繰り返し」に“端数”が適用できる件。
いま知った。
寝ぼけて設定してて気づいた。
なななんと、
繰り返し設定に「端数」が使えます。。。
こんな↓感じになります。
ところで、この「繰り返しに端数」って設定、
……なにかに使えるのかな？？？、、、、
寝ぼけて設定してて気づいた。
なななんと、
繰り返し設定に「端数」が使えます。。。
こんな↓感じになります。
ところで、この「繰り返しに端数」って設定、
……なにかに使えるのかな？？？、、、、
クリップアートのライブラリが破損したときの対処法。
【症状】
パワーポイントでクリップアートが読み込めなくなった！
「○○が破損しています」的アラートが出た！
「Microsoft クリップオーガナイザ」を起動するとＰＣがフリーズした！
などなどのクリップアートの不具合。
【対処法】
１）下記フォルダにある「mstore10.mgc」ファイルを削除する。
C:\Users\(ユーザーネーム)\AppData\Roaming\Microsoft\Clip Organizer
２）「Microsoft クリップオーガナイザ」を再起動すると、新たに「mstore10.mgc」がつくられる。
これで使用ＯＫ。
パワーポイントでクリップアートが読み込めなくなった！
「○○が破損しています」的アラートが出た！
「Microsoft クリップオーガナイザ」を起動するとＰＣがフリーズした！
などなどのクリップアートの不具合。
【対処法】
１）下記フォルダにある「mstore10.mgc」ファイルを削除する。
C:\Users\(ユーザーネーム)\AppData\Roaming\Microsoft\Clip Organizer
２）「Microsoft クリップオーガナイザ」を再起動すると、新たに「mstore10.mgc」がつくられる。
これで使用ＯＫ。
頭蓋の図解。
さあさあ「図解」の続きです。
前回はイイところで終了してしまいました。
ちょっと復習。
【下記の会社案内文を図式化せよ！】
↓マーケティングの要
より効果的なプロモーション（←売上拡大、企業価値向上、人材採用、ファン創出……）
↑ワンストップで提供（→広告・販促活動、キャンペーン実施、イベントの企画運営、採用支援 、各種販促ツール制作）
↑目的（→『認知向上』『集客』『販売促進』）にアプローチ（←豊富なノウハウ、的確な提案力）するプロモーション支援事業
＝株式会社シー・レップ
上の文章は、僕が勤めている会社の紹介を短くまとめたものです。この文章は、
１）「フレーズ化」し、「関係付け」る
２）「まとめ」つつ、「流れ（方向）」を決める
といった図解の方法に基づいてつくったもの。
そしていよいよ、これを図式化していきます。
では早速。
■図解のサンプル①
図解のサンプル①。これはほぼ「まとめの文章」をそのまま図式化したような感じですね。
流れの方向は「下から上」。
この方向になったのは、「自社」と「お客様」の位置関係に大きく影響されています。
（「お客様＝お客様のメリット」が上に、「自社＝自社のサービス」が下になります）
しかし！ そう、「下から上」って流れは、パッと見た感じでは把握しにくいですよね。
なぜなら自然な視線の流れは、「上から下」「左から右」と相場が決まっているからです。
そう言われてみると、文章の時点ですでに「？？？」な感じでしたね。
その理由は、流れが「上から下」もしくは「左から右」になっていなかったから。
ということで、自然な視線の流れに準ずるべく、別の図解をつくってみました。
■図解のサンプル②
図解のサンプル②。つくり替えのポイントは下記のとおりです。
●流れの方向を「左から右」（※正しくは左下から右上）に変えてみた。
●クリップアートを用いて、「より向上する」感じを出してみた。
●さらにフレーズを端折ってみた。
まず、流れの方向ですが、“向上感・上昇感”を出すために、「左下から右上」にしてみました。これは前述した「お客様／自社」の関係性（お客様が上で自社が下）を乱さないためにも有効かと思います。
そして、クリップアートの使用。この「階段を駆け上がる人」のイラストを選んだのは、やはり“より効果的→向上感・上昇感”の意味を強化したかったからです。
このように、「もっとも訴求したいイメージ」をクリップアートで形成するのは、なかなかに効果的ではないかと思います。
さてさて。図解の方法に戻りましょう。
その３）は、
３）「客観視」する（初めて見て理解できるか？）
できた図解を、できるだけ先入観を外して眺めてみること。
初めてこの図を見た人が、速やかにその意味を解することができるか否か。
会社や学校なら、隣の席の人に
「ねぇねぇ、この図の意味ってわかる？」
なんて尋いちゃってもいいかもしれません。
とにかく「パッと見てわかるようにする！」ことを目指しましょう。
-------------
以上、ざーーーーーっくりとした図解の説明でした。
最後に。
図解がうまくなるには、
『情報デザイン』
を勉強すると良さそうです。
読んで字の如く、「情報」を「デザイン」すること。
伝えるための視覚的な工夫。
それは情報を伝わりやすくするだけでなく、その情報に対する興味の喚起、そして、情報の記憶化にも効果を発揮します。
↓このサイトに、いろんな情報デザインのサンプルがあります。
http://blogof.francescomugnai.com/2009/04/50-great-examples-of-infographics/
ではでは。
前回はイイところで終了してしまいました。
ちょっと復習。
【下記の会社案内文を図式化せよ！】
↓マーケティングの要
より効果的なプロモーション（←売上拡大、企業価値向上、人材採用、ファン創出……）
↑ワンストップで提供（→広告・販促活動、キャンペーン実施、イベントの企画運営、採用支援 、各種販促ツール制作）
↑目的（→『認知向上』『集客』『販売促進』）にアプローチ（←豊富なノウハウ、的確な提案力）するプロモーション支援事業
＝株式会社シー・レップ
上の文章は、僕が勤めている会社の紹介を短くまとめたものです。この文章は、
１）「フレーズ化」し、「関係付け」る
２）「まとめ」つつ、「流れ（方向）」を決める
といった図解の方法に基づいてつくったもの。
そしていよいよ、これを図式化していきます。
では早速。
■図解のサンプル①
図解のサンプル①。これはほぼ「まとめの文章」をそのまま図式化したような感じですね。
流れの方向は「下から上」。
この方向になったのは、「自社」と「お客様」の位置関係に大きく影響されています。
（「お客様＝お客様のメリット」が上に、「自社＝自社のサービス」が下になります）
しかし！ そう、「下から上」って流れは、パッと見た感じでは把握しにくいですよね。
なぜなら自然な視線の流れは、「上から下」「左から右」と相場が決まっているからです。
そう言われてみると、文章の時点ですでに「？？？」な感じでしたね。
その理由は、流れが「上から下」もしくは「左から右」になっていなかったから。
ということで、自然な視線の流れに準ずるべく、別の図解をつくってみました。
■図解のサンプル②
図解のサンプル②。つくり替えのポイントは下記のとおりです。
●流れの方向を「左から右」（※正しくは左下から右上）に変えてみた。
●クリップアートを用いて、「より向上する」感じを出してみた。
●さらにフレーズを端折ってみた。
まず、流れの方向ですが、“向上感・上昇感”を出すために、「左下から右上」にしてみました。これは前述した「お客様／自社」の関係性（お客様が上で自社が下）を乱さないためにも有効かと思います。
そして、クリップアートの使用。この「階段を駆け上がる人」のイラストを選んだのは、やはり“より効果的→向上感・上昇感”の意味を強化したかったからです。
このように、「もっとも訴求したいイメージ」をクリップアートで形成するのは、なかなかに効果的ではないかと思います。
さてさて。図解の方法に戻りましょう。
その３）は、
３）「客観視」する（初めて見て理解できるか？）
できた図解を、できるだけ先入観を外して眺めてみること。
初めてこの図を見た人が、速やかにその意味を解することができるか否か。
会社や学校なら、隣の席の人に
「ねぇねぇ、この図の意味ってわかる？」
なんて尋いちゃってもいいかもしれません。
とにかく「パッと見てわかるようにする！」ことを目指しましょう。
-------------
以上、ざーーーーーっくりとした図解の説明でした。
最後に。
図解がうまくなるには、
『情報デザイン』
を勉強すると良さそうです。
読んで字の如く、「情報」を「デザイン」すること。
伝えるための視覚的な工夫。
それは情報を伝わりやすくするだけでなく、その情報に対する興味の喚起、そして、情報の記憶化にも効果を発揮します。
↓このサイトに、いろんな情報デザインのサンプルがあります。
http://blogof.francescomugnai.com/2009/04/50-great-examples-of-infographics/
ではでは。
パワポで錯視！
以前、テレビの「ザ・ベストハウス」で紹介されていた錯視映像を、パワポでつくってみました。
ちなみに、ベストハウスで観た映像は↓こちら。
目の錯覚で白黒写真がカラーに見えるオプティカル･イリュージョン
うーむ、やはり本家のほうがうまくカラーに見えてますねぇ。
パワポなら、「ゆっくり画像が変化していく」なんてタイプの錯視もつくれますので、またそのうちにチャレンジしてみたいと思います。
ちなみに、ベストハウスで観た映像は↓こちら。
目の錯覚で白黒写真がカラーに見えるオプティカル･イリュージョン
うーむ、やはり本家のほうがうまくカラーに見えてますねぇ。
パワポなら、「ゆっくり画像が変化していく」なんてタイプの錯視もつくれますので、またそのうちにチャレンジしてみたいと思います。
映画「Catch me if you can」のオープニングアニメ
映画「Catch me if you can」のオープニングアニメです。
たまたまYouTubeで見つけてお気に入り登録していましたが、いま調べてみると、このオープニングアニメは大絶賛されているんですね。納得。
さてさて、このアニメ。文字の出方やラインの伸び方がとってもかっこいいですね。そしてパワポでもつくれそう！
実は早速、マネしてますw
まあ、似て非なるものになっていますが^^;
そのうちに公開できるかなー。