[webコンテンツ]興奮した。Twitterの新しい表現 Motion Typography
この記事は約6分ぐらいで読めます
![適当に短文で色々実験。長いと分割されちゃうので。](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ウェブフォントデザインアワード
ここまじすげぇ…自分のIDでやってみて皆! http://t.co/2rRoBaIB
— 酒井優 (@glatyou) October 18, 2011
すごいインパクトで、興奮そのままに(うっかり説明も付けず)ツイートしたらすごいふぁぼ&RTされましたw見つけたのはこのサイトのコンテンツ。
Web Designing ウェブフォントデザインアワード2011
Web Designingさんの開催するウェブフォントデザインアワード2011は、ソフトバンク・テクノロジー株式会社が提供する日本語webフォントサービス、フォントプラスを利用したコンテンツのコンテストです。
webフォントはぶっちゃけまだ日本語で考えると使いやすいものでは無いですけど、このサイトを見てるとまあ、予算さえあれば色々できちゃうのかなー、とか思ってしまいますね。なんにせよこれからの動きは楽しみですw
Motion Typography
見慣れたTwitterタイムラインに形態素解析、日本語Webフォント、モーションを適用し、モーションタイポグラフィーとして表現しています。
形態素解析は雰囲気くらいしか理解して無いんですけどw 要は文章から機械的に単語を拾う仕組みだと思ってます。多分そんな感じw
サイトのデモンストレーションは幾つかあったのですが、このMotion Typographyの動きを見てがっつりハマっていしまいましたw
Motion Typographyの遊び方
Google Chrome / Safari推奨です。
使い方は簡単。ツイートを見たい人のツイッターIDを入れるだけです。自分じゃなくても大丈夫。すると直近30ツイートくらいを新しい方から順にwebフォントによるタイポグラフィーとモーションで表示してくれます!スクリーンショットを以下に。
![play-contents-motiontypography-01 Twitter ID入れるだけ(人のでも可)](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Twitter ID入れるだけ(人のでも可)
とりあえずテスト
![play-contents-motiontypography-02 ツイートを遡って再生していきます](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ツイートを遡って再生していきます
![play-contents-motiontypography-03 テキストなのでちゃんと選択も出来ます](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
テキストなのでちゃんと選択も出来ます
![play-contents-motiontypography-04 適当に短文で色々実験。長いと分割されちゃうので。](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
適当に短文で色々実験。長いと分割されちゃうので。
![play-contents-motiontypography-05 スペース入れると分割されたりするけど](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
スペース入れると分割されたりするけど
![play-contents-motiontypography-06 入れないと入れないで造語は切れ目を判断できない](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
入れないと入れないで造語は切れ目を判断できない
![play-contents-motiontypography-07 ずっとカタカナで切れ目ないと分割できない](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ずっとカタカナで切れ目ないと分割できない
![play-contents-motiontypography-08 何回かやって良い感じに切れたりする](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
何回かやって良い感じに切れたりする
![play-contents-motiontypography-09 偶然の内容とフォントの合致が楽しい](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
偶然の内容とフォントの合致が楽しい
![play-contents-motiontypography-10 ミスマッチもそれはそれで面白いw](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ミスマッチもそれはそれで面白いw
![play-contents-motiontypography-11 役物が付くと頻繁に変なとこで切れる](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
役物が付くと頻繁に変なとこで切れる
![play-contents-motiontypography-12 川柳と相性がいい](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
川柳と相性がいい
![play-contents-motiontypography-13 切れ目を意図的に作るならスペースがいいね](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
切れ目を意図的に作るならスペースがいいね
![play-contents-motiontypography-14 まさに外道!!](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
まさに外道!!
あー面白かったw
まあそんな感じでガッツリ楽しみましたw自分で試すのめんどくさい人はwebcre8のアカウントを眺めてみてください。実験のために入れたツイートをそのままにしてあるので(そのうち消します)。覗いてみてくださいねw