へたれwebディレクターの覚え書き

技術系の本なら電子書籍のほうがこんなにステキ（『アジャイルサムライ』はフルカラー！）

これまでは、文字を読むのにPCやタブレットの画面では読みづらいと思っていました。実際、これまで使っていた初代iPadではそうでした。すぐに目が疲れてました。

目に負担がかかる原因は、文字が表示されている面自体が光っているからなのだろう、きっとこれからも読書するなら紙のほうが優れたままなのだろう、と勝手に思っていました。

ところが先日、第3世代iPadを購入してからその考えがすっかり変わってしまいました。紙で読むより文字が読みやすいのです。目も疲れないのです。これは驚きました。

液晶モニターで文字を読むのがツラかったのは光とかが原因ではなく、画質の問題だったんだとすぐにわかりました。

電子書籍最大の欠点が解消されてしまうと、もういろんなところが紙より優れていることに気づきます。

たとえば最近評判の『アジャイルサムライ』。
こちらは書籍（紙）。

そしてこちらは電子書籍（iPad）。

フルカラーなんですね。読みやすい。

他にも、

検索ができる
電子書籍のほうが安い

アジャイルサムライなら書籍だと2,730円、電子書籍なら2,060円

技術書ならiPadのほうが軽い

など、良いことづくめです。

みなさんもどうですか、第3世代iPadで読書。
なんかただのPRブログみたいになっちゃいましたが…。

TechCrunchの記事を読んで、自分の努力が足りないことに改めて気づかされた

悔しくて情けなくてたまらなかったので勢いで書きます。

今の会社に入社する前に、個人で、お金管理（≒家計簿）サイトを作っていた。アルファ版の公開は2006年の4月だ。

特徴は

自分に近しい生活属性の人とお金の使い方を比較して、助言してくれる

この人みたいになりたい！を設定すると、お金の使い方の助言に影響する

入金/出費を適当に入力してれば、自分の過去のデータと、自分に近しい生活属性の人のデータから使い道を推測して、自動でデータを修正する

まじめに入力すればするほど、自動データ修正の精度があがる

一部の人には公開していたんだけど、増え続けるデータ量を処理し続ける方法がサンデープログラマーの僕にはちっともわからなかったのと、そもそも集計がうまくいかなかったのと、セキュリティ対策が難しかったのと、そして今の会社に転職した忙しさから、放置してしまった。

要するに挫折だ。

こないだ、ドメインも手放した。だからもうサイトは公開していない。（当時のエントリーに足あとだけが残っていた）

つい最近、TechCrunchにこんな記事が載っていた。
[jp]iOS向けソーシャルマネー管理アプリのZaimはギークガール謹製

すごい。僕が挫折した理由なんて言い訳でしかないことがわかる。

これを読んで以来、やり続ければよかったんじゃないかとか、技術がなくても自分が企画としてイケてたら社内に一緒に作ってくれる仲間ができていたハズだろとか、いろんなことを考えつつモヤモヤしている。

改めて思うのは、自分がそれが『本当に』いいと思ったら、人生をかけるレベルでいろんな決断をしつつやり遂げなければ、なにも考えてないのと結局は同じだということ。
リスクなしで得られるものって少ないし。

自分ではこれ以上努力できないって思っていても、すごい人からしたら全然そうでもないこと、も。

この引用は何度もしているけど。cnetに掲載されていた江島さんによる『グーグルが無敵ではないことはエンジニアだけが知っている』って記事をいつでも思い出せるようにしておこう。

悪いけど、それがどんなに先鋭的な専門分野であれ、口には出さずとも同等以上にわかってる奴はつねに100人はいる。それを論文にまとめたりブログに書いたりできるやつが10人ぐらいいて、本気でそれの実現に自分の人生を賭けるやつは1人しかいないっていうだけのことさ。

緊急災害募金ブログパーツを設置しました

今の自分に協力できることは、電気の使用を控えることと募金しか思いつきません。

このブログにも、『Yahoo!ボランティア』の緊急災害募金ブログパーツを貼らせていただきました。

少しでも支援の輪が広がればと思います。

ソーシャルボタンや関連記事を自動表示してくれる『zenback』

ちょっと前から記事下で関連記事を紹介するようリンクを設置しているのですが、設置前よりサイト離脱率が改善されているようです。

この関連記事リストを作るのに『関連エントリーリストジェネレータ』というのを利用させていただいていました。
しかしこれ、リンク設置作業にある程度の手動での作業が必要で、けっこうめんどくさかったのです。
ここ数回の記事ではすっかり貼り忘れていたりします。

wordpressには自動で関連記事リストを生成してくれるアドオンもあるようですが、このブログは『Serene Bach』というマイナーなシステムで動いていまして、そんな気の利いたアドオンもなく。

このブログでも使える、完全自動で関連記事リストを生成してくれるサービスがないかなと思って探していたところ、シックスアパートが提供している『zenback』というサービスを知りました。

zenbackはブログパーツです。ブログの記事の下や横に、「TwitterやFacebookなどのソーシャルボタン」「その記事に関係する自分のブログ記事」「その記事に関連するキーワード」「その記事に関係する他のzenbackユーザーのブログ記事」「その記事についての最新のTwitterのつぶやき」「その記事についてのはてなブックマーク」を表示します。

設置方法は簡単で、

会員登録
自分のブログのURLを登録
タグが発行されるのでそれをテンプレに貼る

だけです。楽ちん。

というわけで早速、設置したのですがどうでしょうか。巡回率などの数字がどうなるかなど、しばらく様子を見てみようかと思います。

（そろそろwordpressに移行したい…けど引っ越しが面倒なんですよね…）

twitter疲れ、Facebook疲れの人にお勧めしたい『threadsy』

“タイムライン疲れ”してますか？

タイムライン形式のいわゆる「ミニブログ」「リアルタイムウェブ」と呼ばれるサービスが増えています。Twitter、Facebook、アメーバなう、Mixiボイスなどがそれにあたります。

使い始めた最初のうちはフォローの数が増えてくるとうれしいですし、タイムライン（以下『TL』と表記）を追うのが楽しいですが、追うべき情報は日々増える一方。いつしか、TLを追うことが義務っぽくなってきます。Twitter疲れというやつです。 
（ここではTwitterに限らないので『タイムライン疲れ』と呼ぶことにします）

そんなタイムライン疲れな方にぜひ一度使っていただきたい『Threadsy』というサービスをご紹介します。

threadsyとは

Threadsyとは複数サービスのTLをひとまとめに表示する『フィードアグリゲータ』と呼ばれるサービスで、以下のような特徴を持っています。

Twitter、Facebook、Gmailなど、複数サービスの情報を一つのTLにまとめることができる
マルチポスト（複数サービスに動じ投稿）可能
「自分宛の情報のみのTL」「全情報がマージされたTL」の2ペイン方式（これがかなり便利）
「自分宛の情報のみのTL」は既読・未読処理対応
強力な検索機能
いいね！もリツイートも、Threadsy上で行える
もちろんプレビューも豊富。Flickr、Youtube、Twitpicなどなど複数サービスに対応。
Meebo、Facebook、AIMチャットのクライアントにもなる
日本語でレスするとたまに文字化けする（汗）

なぜThreadsyがいいのか？ほかのフィードアグリゲータの問題点

フィードアグリゲータサービスはほかにいくつか存在します。いくつか使って見ましたが、以下のような理由で使い続けるにいたりませんでした。

情報過多問題が解決していない

タイムライン疲れの理由の一つ「単純に情報が多すぎる」は、ただ情報を一つにまとめたところで解決しません。見やすくはなっても情報の量は変わっていないからです。

情報過多問題を対策するために、Twitterだけ、Facebookだけといったように表示するサービスを絞り込む機能を提供している場合もありますが、それはただ振り出しに戻っただけです。せっかく複数サービスの情報をまとめたのに、問題を解決する方法が「サービスごとに再びわける」というのではあまりに脳がありません。

価値の異なる情報を同列に扱っている

TLに表示される情報は、自分にとってすべて同じ価値ではありません。自分のつぶやきにつけられたレスやじっくり書かれた友だちの日記が、「朝だ、起きた」というつぶやきと同じ価値なはずがありません。

それでも情報が少ないうちは目で追いながら価値を選別できましたが、情報が多くなってくるとそれもかないません。

そこでThreadsy

Threadsyでは、「自分に宛てられた情報」と「すべての情報」をペイン分けして表示します。
右ペインには、すべての情報が単純に時系列で並べられます。
左ペイン（下の画面で枠囲い部分）には、Facebookでの発言に対してのコメント、自分のTwitterでのつぶやきへのリツイート、自分宛のメール、自分のFrickrの写真につけられたコメントなど、「自分に対しての誰かからのアクション（と思われるもの）」だけが抽出されます。

私は、自分宛の情報は常にチェックして、そうではない情報は寝る前になんとなく流し読む（ぜんぶ読まなくてもいい）という使い方をしています。

自分の読むべき情報が絞られるのでタイムライン疲れになりませんし、右ペインがあるおかげで「なんとなく情報が流れる」Twitter本来の楽しさを失うこともありません。

まとめ

Webから受け取る情報はこれからもどんどん増えていくでしょう。
情報をどのように整理するのか、がサービスの差別化要因になっていくと思います。
「ファインダビリティ」「情報アーキテクチャ」といった分野は重要になっていくでしょう。

Threadsyがその完成系なわけではありませんが、現時点では優れた例の一つといえます。ぜひお試しください。

「URLなどが途中で折り返しされず表示枠をはみ出てしまう」問題を解決するCSSが紹介されていたので試してみた

海外のサイトで『Wrapping Long URLs and Text Content with CSS』という、長いURLやテキストの途中でも、枠をはみ出すことなく折り返すCSSを紹介する記事を見つけたので、実際のサービスで使えるの？という視点で試してみました。

「URLなどが途中で折り返しされず表示枠をはみ出てしまう」問題とは？

ちょっと前に『Firefox3.1（3.5）では半角文字の途中でも改行できる』でも書きましたが、ブラウザによっては、記号を含まない半角文字列やURLを途中で折り返すことなく、表示枠をはみ出して表示してしまうことがあります。

対策として、文中に強制的に改行を入れたり、タグを挿入したりしているサービスもあります。しかしこれは、コードが冗長になってしまいエレガントではないという問題が発生しますし、なにより構造化言語であるhtmlの趣旨に反してしまっています。

また、を単純に一定文字数ごとに挿入することで句読点が行頭に来てしまい、可読性を損なってしまう場合もあるようです。（どうせやるなら、せめて禁則処理ぐらいすればいいのに、と思ったりもします）

個人的には「ちゃんと折り返されないのは、ブラウザがそう解釈してるんだから仕方ないじゃん」と思います。
しかし企業が提供するサービスではそうも言ってはいられず、「ユーザーの名前やIDはすべて表示しなければならない」などの厳格なレギュレーションが規定されていることがあり、対応しないといけないもののようです。

表示確認

ということで、前述のCSSが、この問題の救いの神になるのかどうか試してみました。
より実際の使い方に近い動作にするため、

preタグ以外のタグでも動作するか（今回はddタグで試しています）
文中に空白スペースが含まれている場合はどうか
日本語の場合はどうか
リンクが挿入されている場合はどうか

を各種ブラウザで確認してみました。

ブラウザで動作を確認したい場合やコードを確認したい場合はこちらをどうぞ。

safari4（mac）

Firefox3.6（mac）

Google Chrome5（mac）

IE8（win）

IE7（win）

IE6（win）

Opera10.5（mac）

Opera9.27（mac）

まとめ

結論ですが、このCSS、使ってもいいけど、別に無理に使う必要はないんじゃないの？となります。ここまで長々と書いておいてなんですが…。

表示結果を見て、最初は「すばらしい！」と思ったのですが、今回のこの表示結果って前回のword-wrapを利用したときと同じなんですよね。
ならば、word-wrapを使った方がCSSが簡潔になるので、そちらのほうが良いと思います。
（word-wrapとwhite-spaceってどう使い分けるんだろう…？折り返しルールの制御ならやはり“wrap”ってついてるほうなんでしょうか）

word-wrapプロパティに限ってはIE6も先行対応してたりします。Firefox3.0は未対応ですが、これは特に問題にならないでしょう。

ちなみに下記のようなささやかな問題もありますので、念のために書いておきますね。

半角スペースなどの特殊記号が含まれるとどうしてもそこで折り返されてしまう

“word-wrap: break-word;”を指定しなければいいのかな？と思ったが、なにも変化はなかった
しかし実際のサービスで、これが問題になることはほとんどないと思われる

IE以外のブラウザで過去のバージョンだとうまく折り返されない場合がある

しかしIE以外のブラウザを使っている人のほとんどはブラウザを最新バージョンにしているであろうし、シェアも低いので考慮しなくて良いと思われる

なにかの参考になれば幸いです。

Adobe CS5はCS4と比較して実質値上げしている気がする

単なる愚痴です。

Adobe CS5が発表されましたが、これだけ世はデフレで円高も進んだのに、実質値上げされていることに驚き、そしてがっかりしました。

私はいまだにSTUDIO-8ユーザーなのですが、これをWEB PREMIUMにアップグレードするときの価格を、CS4発表当時のそれと比較してみましょう。
（数字の端数はテキトーにカットしています）

表1・STUDIO-8からWeb PREMIUMへのアップグレード価格

発表日	アップグレード価格（US）	同（JP）	製品発表当時の円ドル為替レート	アドビジャパン内為替レート？
CS4 （2008/09/23）	$799	123,900円	$1 = 約106.1円	$1 = 約155.0円
CS5 （2010/04/12）	$799	134,400円	$1 = 約93.3円	$1 = 約167.7円

（正確な価格表は Adobeのサイトでご確認ください）

しかもCS4発売当時は、キャンペーン価格として発売から半年は92,400円でアップグレードできました。それと比較してしまうと。。。

「日本人は金払いがいいぜ！」って感じなんでしょうか。

サイトのUI検討にAIDA・AIDMAモデルが使えそうな気がしたので試してみる

マーケティングのフレームワークに「AIDAモデル」「AIDMAモデル」というのがあります。
おおざっぱに言うと、商品に気づいてから購入にいたるまでのプロセスを、

Attention（注目）
Interest（関心）
Desire（欲求）
Memory（記憶）, Motive（動機）
Action（行動）

に分けた消費行動の法則で、AIDAやAISASなども使われることもあります。（詳しくはWikipediaなどをご確認ください）

このAIDA・AIDAMAモデルがUI検討にも使えるのではないか？と思い立ち、そのやり方を考えてみます。

例として、以下のような状況に置かれたときの改善案をAIDAモデルで検討する、というのをやってみます。

あなたはファッション関連のケータイ用ブログを運営しています。そのブログは、訪問者数は多いのですが、離脱率が高いという問題を抱えています。

アクセスログを解析したところ、検索サイト経由でブログのエントリーを読んでくれた人の多くは、ほかのエントリーを見ることなく離脱していることがわかりました。
離脱率を下げるためには、ほかのエントリーに遷移するリンクをクリックしてもらうことが必要そうです。

では、訪問者に、ほかのエントリーを読むためのリンクをクリックしてもらうために、どのような工夫をすればいいでしょうか？

エントリーを読んだ人が他の記事を読むための条件をAIDAモデルで考える

クリックして欲しいリンクがある。このような状況のとき、
「リンクをもっと目立たせればいいのでは」
といった短絡的な判断になりがちです。

これをAIDAモデルを使うとどのようになるのか、こういうふうに検討していくというのはどうだろうか、というのをステップごとに記してみます。

ステップ1・AIDAに、訪問者が満たされるべき欲求を当てはめる

まずは、あるエントリーを見た訪問者が、ほかのエントリーへのリンクをクリックするために満たされなければならない欲求を、AIDAに当てはめてみました。

Attention：このブログにほかのエントリーが存在することに気づいてもらう
Interest：ほかのエントリーも、訪問者が興味のあるファッション関連のものだと思ってもらう
Desire：これまで条件にプラス、このブログのほかのエントリーが、ユーザーが期待してるレベルに達していると思ってもらう
Action：このブログのほかのエントリーへたどるためのボタン（リンク）をクリックできる状態にある

ステップ2・欲求を満たすための条件を洗い出す

欲求を当てはめることにより、欲求を満たすための条件が見えてきました。

たとえば、InterestとDesireを満たすためには、訪問者に「ほかのエントリーも読む価値がありそうだ」と思ってもらわなければならない、ということがわかります（図の条件①）。

さらに、「面白そうだ」と思ってもらっているときに、そのリンクを提供してあげる必要もありそうです（条件②）。

特に条件①は重要です。ほかのエントリーも面白そうだと思ってもらうには、「いま読んだエントリーは自分が読みたいジャンルと一致」していてかつ「いま読んだエントリーが面白いと思った」という条件が満たされていなければなりません。

しかしすべての訪問者が、この条件を満たしているとは限りません。ここで、「条件を満たしていない訪問者のことも考える必要がある」ことに気づけました。

では条件を満たしていない訪問者とはどのような状態にあり、それに対してどのような施策を打たなければならないでしょうか。

ステップ3・訪問者の状態ごとに条件を再度洗い出す

訪問者の状態のパターンを洗い出してみます。
ここでは簡略的に、「ファッションに興味があるかどうか」「いま読んだエントリーに満足したかどうか」で分けてみました。

実際のサービス検討では、「どこからこのページにたどり着いたか」「目的があって探しているのかどうか」などなどなど、もっと細分化するべきかと思います。

状態ごとに改めて欲求を満たす方法を検討することことで、さらに新たな条件が見えてきました。

一つは「状態２・ファッションに興味はあるがエントリーに不満足」の訪問者に対してDesire欲求を満たすためには、なんらかの工夫が必要であること（条件③）。

この時点で、訪問者の状態によって表示するリンク（機能）は違っていてもいいのでは、と思えてきました。単純なほかのエントリーへのリンクは、いま読んだエントリーに満足した訪問者にしかクリックする気になってくれないことがわかったからです。

訪問者の状態に適したリンクを出し分けるのが効果的であるとするなら訪問者ごとに有効なリンクを表示させるために、
「エントリーを読んだことによる訪問者満足度をなんらかの方法で把握する必要がある」
という条件を加える必要もありそうに思います。(条件④）。

（条件５は今回はパス）

ステップ4・それぞれの条件を検討

ここまでで、ほかのエントリーへのリンクをクリックしてもらうために必要な条件がいくつ洗い出せました。

ではその条件を満たすための案を検討
サンプル代わりにベタな検討案を書いておきます。

条件１の対応

「前の記事」のようなリンクではなく、エントリータイトルを表示させることにより、リンク先の記事も同じジャンルである（もしくは違うジャンルであること）をクリックする前にわからせる
記事カテゴリごとになるべく同じカテゴリーの記事を紹介する
いま読んだ記事と似ている記事を表示する

条件２の対応

適切な位置にリンクを表示させる

条件３の対応

単純な送りリンクに加え、目立つ場所に人気の記事一覧を掲載する。

その際、ブックマーク登録数を表示することで、公平な評価であるというイメージも伝える。

条件４の対応

エントリー本文を（一定以上の長さなら）分割して表示する。
1ページ目には、ほかのエントリーを読んでもらうことをあきらめてて、別のリンク（機能）を提供する

たとえば、このエントリーにたどり着いたのが検索からなら、改めて検索結果をこのブログ内に表示させ、そこに広告を表示して稼ぐ、など

2ページ目以降が表示されたなら、「いまこの訪問者はこのエントリーを面白いと思って読んでいる状態（面白いと思わなければ1ページ目で離脱しようとするはず）」と仮定し、それ用のリンクを表示させる

AIDAモデルによってたどり着いた検討結果

「訪問者の離脱率を下げる」という目的のために、「エントリーを複数ページに分割して表示する」という、一見なんの関連もなさそうな、もしかしたら逆効果と思われるようなUI案にたどり着きました。

今回は個人で試しにやってみただけなので、たどり着いた結果が正しいかどうかはわかりません。
しかしあとで大手ブログのケータイ版などを見たところ、しっかりと一つのエントリーでも分割されたページごとにリンクの出し分けがされているものがありました。
あながち荒唐無稽な策ではないようです。

まとめ：認知的ウォークスルーにも似てますね

ここまで書いていて、このやり方って「認知的ウォークスルー」に似ているな、と思いました。

違いは、認知的ウォークスルーがアクション需要に対しての供給視点で、AIDA・AIDAMAモデルはアクションへの需要視点である、と言えるかもしれません。

私自身がまだ認知的ウォークスルーもAIDA・AIDAMAモデル方式も完全に理解実践できてるわけではありませんので、今後、双方を比較しながら何度かやってみて、それぞれに合った場面を見つけたいと思っています。

ヤフーで除夜の鐘が鳴らせる

ヤフートップページの鐘が、クリックで鳴らせます。

108回鳴らすと何が起きるんでしょうか。。。

ユーザーは自分の行動をメリットだけで判断していない

せっかくサービスを作ったら閲覧だけでなく、あたりまえですが投稿などもしてもらいたいものです。

サービス上でユーザーにアクションをしてもらうために、「このアクションをしてください、するとこんな素敵な出来事が！」とメリットを伝えるのはよくあるやり方だと思います。

たとえばCGM系サービスを運営していて、「ユーザーにコメント投稿してほしいな」と思ったなら、
「あなたがコメントを投稿すると、そのコメントがほかの人に読まれ、そこからコミュニケーションが広がっていきます」
などでしょうか。

しかしユーザーは、自分がアクションするかどうを、メリットだけをみて決めているわけではないと思います。

コメントをしようと思ったときにメリットとは逆の、
「このコメントをすると、誰かに迷惑かけないだろうか？」
「自分に対してよくないことが起きないだろうか？」
ということも考えているのではないでしょうか。

アクションしてもらうために必要な「許しのデザイン」

アクションしてもらうためには、これらの不安を払拭する必要があります。そのための機能やデザインのことを僕は「許しのデザイン」と呼んでいます。

「許しのデザイン」の例として、たいして意味のないコメントを投稿しても大丈夫だよね、と思わせる工夫されているサービスを挙げてみます。

Twitterの場合

Twitterでは、投稿された発言（つぶやき）がたとえfollowの発言であっても見落として平気、という世界観がうまく構築されています。その世界観が、「邪魔なら無視されるだけだから、だからガンガン発言して大丈夫」と思うために役立っています。

Facebookの場合

たくさん発言しても迷惑にならないよう表示方法が工夫されています。
連続して発言すると、発言のうちのいくつかが、クリックしないと表示されないようになります。

また、最近追加された「ニュースフィード」では重要そうな発言を上位にピックアップして表示するようになっているようです。（まだまだ不完全ですが）

ソーシャル系サービスほど許しのデザインは重要

少し前まで、サービスは自分ひとりで使うものでした。ですからアクションに対する不安は自分に対してだけであり、最悪「まぁなにかあっても自分が困るだけだし」で解決、ということもありました。

しかしいま主流のソーシャル系サービスは人との繋がりが前提です。「他人に迷惑かけちゃうのでは」という心配が新たに発生します。

一人のアクションが多人数に影響するソーシャル系サービス全盛の時代。許しのデザインの重要性は増してきている気がします。