というわけでざざっと。使いやすい順に紹介してみますよ。

■ SketcHub

クリーンなインターフェースで使いやすいです。ま、これが一番かな。

■ Twiddla.com

こちらもまずまず。

■ Dabbleboard

適当に書くときれいな曲線にしてくれるのはいいけどFLASHだし、共有用のURLも長いのでうむ、という感じ。

■ Scriblink

上の3つが落ちていたら使うかな、という感じ。

たまにこういうツール必要ですよね。ご参考までに。

ちょっと試してみたら便利だったのでご紹介。

Videodropperを使えばYouTube映像をそのまま自分のDropboxに突っ込めるようです。

まずはサイトにアクセスしてDropboxで認証します（まぁ、ここは信用するしかないですな・・・）。

↑ やり方は2種類。ブックマークレットを使うか、直接URLを入れます（が、自分の環境ではURL入力がうまくいかなかった）。

↑ 進捗状況も表示されます。

↑ なお、保存先はDropbox直下のようです。フォルダは選べないっぽいですね。

リモートで指示を出してくれるので自分の帯域を使わないのはいいかもですね。ブックマークレットにあるように「あとで視る」を良い感じに実現してくれています。

よくYouTubeをダウンロードするDropboxユーザーの方はいかがでしょうかね。

» Videodropper

↑ こちらの右上からスタート。

↑ スクショをアップロードします。背景もアップできますね。

↑ アップすると位置合わせができます。敷き詰めることも可能。

↑ こうやってコメントを書いていきます。日本語もOK。

なお、アクセスするたびにURLが割り振られるのでそれを共有すればチームで編集・閲覧ができますな。パスワード保護などはできないのがあれですが、ちょっとしたフィードバックにはいいのではないでしょうかね。以下からどうぞ。

» Mocku.ps – Mock­up presentation and sharing made simple.

↑ こちらでツイッター認証してメアドを登録するだけ。

↑ 定期的にこういうメールがとんできます。打ち消し線とか下線とかでわかりやすいですね。

ツイッターは全部見きれないので、こういう情報があるとたまにその人に会ったときに会話しやすかったり、連絡してみようかな、と思いますよね。お手軽に使えるツールなのでいかがでしょ。

» Grabio – A Twitter Bio Update Notifier

» 百式年賀状 powered by impress.js （スペースか矢印キーでどうぞ）

なお、本家本元のデモはこちら。こちらの方がいろいろな機能を使っています。

» impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

ブラウザを選びますが（Chrome or Safari）、かなり良い感じです。似たようなものにPreziがありましたが、こちらはオーサリングがとんでもなく難しいので手が出せなかった人も多いはず。

一方、impress.jpは基本的にHTML+CSSなので比較的楽です。ただし、それなりに作業があるので以下、ざっと紹介してみます（HTML+CSSの知識があるのを前提に書きますよ・・・）。

■ まずはダウンロード

Githubからダウンロードします。左上の「ZIP」からでいいんじゃないかな。ざっと中身を確認していじれるところはいじっちゃいましょう（titleとか）。

» bartaz/impress.js – GitHub

■ プレゼンのアウトラインを作成

まずはアウトラインを作成します。先にやっておくと楽です。作りながら「この文字は大きく見せたい」とか想像しておきましょう。

■ stepクラスを作る

impress.jsでは「step」がついたdivが「スライド」になるので、アウトラインの数だけそのdivを作ります。以下のテンプレにあてこむといいでしょう。

なお、あとで使うので「test」クラスもつけておくと楽かと。

<div id="" class="step test" data-x="0" data-y="0" data-scale="">
    <q>こちらにアウトラインの文章を</q>
</div>

これをアウトラインの行数分作って、index.htmlに埋め込みます。

■ testクラスを作る

testクラスのCSSを作ります。これでスライドのレイアウトがしやすくなります。

.test {
  height: 700px;
  background-color: red;
}

■ 位置と大きさを決める

上記でつくったdivにはサイズと大きさを決めることができます。位置はdata-xとdata-yがそれです。一枚目はそれぞれ0にするといいでしょう。なお、data-xとdata-yは左上ではなくて、スライドの中心の座標を示すので注意です。

data-scaleは大きさで、基準となるdata-scale=1のスライドは「900px × 700px」となります。メッセージを強調したいところはdata-scale=6とかにしつつ、全体のレイアウトを作っていきます。

またdate-rotateを使うと度数で回転させることができます。こちらもうまく使いましょう。

そんなこんなで動きを想像しながらレイアウトしていくとこんな感じになります。

↑ 最初にこういうマップを作っておくと便利です。

なお、確認する際には「/#/overview」をリロードしながらするとよろしいかと。#overviewのdivのdata-x/yは全体座標の中心にあわせておくと見やすいです。

■ 平面ができたら立体に

平面図ができたらいろいろ操作してみましょう。data-rotate-x, data-rotate-y, data-rotate-zあたりで平面軸に対して回転させたりすることができます。

またdata-zを使えばその平面から浮き上がらせること（＆沈めること）も可能です。うまく使えばジェットコースターちっくなエフェクトが簡単にできちゃいますよ。

■ ちょっとしたアニメーションをつける

アニメーションをさせるには2段階でスタイルをつける必要があります。まずはアニメーションさせたい文字に以下のような指定をします。

デモではb要素につけていたりしますね。

b {
    display: inline-block;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

これでアニメーションの準備ができました。あとはそのスライドがアクティブになったときにアニメーションさせます。impress.jsではスライドがアクティブになるとstepのdivに「.active」をつけるようなので次のような書き方になります。

.active .rotating {
    -webkit-transform: rotate(-10deg);
    -moz-transform:    rotate(-10deg);
    -ms-transform:     rotate(-10deg);
    -o-transform:      rotate(-10deg);
    transform:         rotate(-10deg);

    -webkit-transition-delay: 1.75s;
    -moz-transition-delay:    1.75s;
    -ms-transition-delay:     1.75s;
    -o-transition-delay:      1.75s;
    transition-delay:         1.75s;
}

アニメーション部分のマークアップは次のようになります。

<div id="" class="step" data-x="0" data-y="0" data-scale="0" data-rotate="0">
    <q><b class="rotating">ちょいと回転</b></q>
</div>

これでアクティブになったときにちょっと文字が回転するアニメーションが出来上がります。CSS3的なアニメーションはすべて可能っぽいのでサンプルコードを参考にご自身で組み立ててみてください。

■ 動作確認、testタグの無効化

ここまで出来たら動作確認をして、testタグの中身をコメントアウトすれば出来上がりです。

他にも背景のグラデーションを変えたり、Webフォントや画像使ったり、文字単位で立体効果をつくったりすればかなり凝ったモノができそうです。

っと、以上ですかね。わりとはしょって書いちゃいましたが。というか、誰かジェネレー（ｒｙ

HTML/CSSプレゼンツールは他にもありますが、ひさびさに「使える」ツールではないでしょうかね。ご興味がある方は以下からどうぞ。

» impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

↑ シンプルなインターフェースですな。

↑ 録音するとURLがもらえるので共有したり、ダウンロードできたりします。

いちいちボイスレコーダーアプリをたちあげる必要がなくていいかもですね。

» Record mp3: record live audio and get an mp3

Unroll.Meを使えば、メールを自動でスキャンしてくれてメルマガを検出、ワンクリックで登録解除できるようです。

↑ GmailやYahoo!Mailなどに対応しています。

↑ 一応紹介映像。1分弱です。

個人的には俺俺フィルターではじいちゃっていますが・・・なかなかなくならないですよね。勝手に登録されたり、名刺交換しただけで送ってくるメルマガとか（ｒｙ

まだベータ版なので誰でも使えるわけでもなさそうですが、ご興味がある方はどうぞ。

» Unroll.Me – The easy way to remove email subscriptions

結論から言うと「すんごい不安定ｗ」なのですが、興味深いサービスですよ。早く安定してほしい。

ちなみにご自身で試すときは自己責任で。なお、個人的にはこの記事書いた直後に全部削除しましたがｗ。

さて、このSocial Folders、ソーシャルメディアのDropBox的なサービスですかね・・・。

専用ツールをインストールすると「Social Folders」というローカルフォルダが出来てFlickrやらInstagramやらと同期するらしいですよ。Facebookとかそういうのは別としてInstagramと同期できるのはうれしいぞ！

↑ 専用ツールをインストールするとこんな感じにツールバーにメニューが。Dropboxみたいですな。

↑ Instagramと接続するとこんなフォルダが出来ます（でも不安定で同期できんかった）。

↑ 対応しているメディア一覧。メジャーどころは抑えていますね。

いまはまだ試さない方がいいと思いますがこなれてきたらFlickrへのアップも簡単になるだろうし、Instagramももっと扱いやすくなりそうです。というか、Dropboxが（ｒｙ

というわけで詳細は以下からどうぞ。

» Social Folders

メールやツイッターによる顧客からの声を一元管理できるようです。最小限の機能しかないようですが、逆に潔い感じですね。

Apoio Demo from 1+1 media on Vimeo.

↑ ちょうど60秒の映像です。

複数人のチームで管理することを前提にしている点も素晴らしいかな、と思いました。

» Apoio: most simple helpdesk software in the world

↑ こういう感じに書いていくと・・・。

↑ 100語ごとに（設定で変更可能）かわいい猫の写真が現れます。

発想を変えれば「美人エディター」なんてのもできそう。ちなみに意外にハイテクで、Local Storageをサポートしているブラウザなら自動保存してくれるようですｗ。

というわけでご利用は以下からどうぞ！

» Written? Kitten!