Hatena::Groupoval-plan

思考地図:OVALPLAN このページをアンテナに追加 RSSフィード

2006-12-29エラスティックレイアウト

[][] エラスティックレイアウト  エラスティックレイアウト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  エラスティックレイアウト - 思考地図:OVALPLAN

f:id:OVALPLAN:20061229213255j:image:w120


11月からちょっと勉強していたCSS、自分なりに基礎知識一区切りというところですが、その途中で<TRANS>という素敵なブログを見つけました。真面目で詳細な調べ方やまとめがとても参考になります。


28日のエントリーは「2xupで実装されているエラステックレイアウトを調べてみた」というもの。「エラスティックレイアウト」(Elastic Layout)とは初耳の言葉です。「リキッドレイアウト」の親戚。


実装例として紹介されているのは別の方のブログ<2xup.org>の「一行あたりの文字数を制限するリキッドレイアウト」というエントリー(写真)ですが、ここ、ウインドウの横サイズを変更するとフォントサイズも変わってくれます。しかも、上限・下限を適度に設定してあるので、その加減が心地いい。(ただし、FireFox, Safari, Operaなど、min-width, max-width をサポートしているブラウザだけの対応。IEは7.0以上で対応とのこと。)


1行当たりの文字数、行幅、フォントサイズの関係など、文字組についてもWebに対応した「読みやすさ」を考える時代なんだなぁと、写植時代にエディトリアルデザインを学んだ世代として感慨です。


CSSを使ったデザインをする時には<TRANS>の「印刷用CSSをまとめてみた。」、<2xup.org>の「スタイルシートを書く時のガイドライン」なども大変参考になります。

2006-12-01不真面目なコミュニティ

[][] 牛乳に相談だ。  牛乳に相談だ。 - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  牛乳に相談だ。 - 思考地図:OVALPLAN

f:id:OVALPLAN:20061201210144j:image:w120 f:id:OVALPLAN:20061201210226j:image:w120 f:id:OVALPLAN:20061201210319j:image:w120


牛乳に相談だ。(効果音にご注意)

牛乳のキャンペーンサイトです。

コンテンツの柱は、いわゆるBBSです。

SNS的な要素は見あたりませんが、育成ゲーム的な要素が組み合わされています。

ご覧の通り、ポップなデザインで、インタラクションにもたくさんの遊び心があります。

オープンして一年以上になりますが、いまだ中高生を中心によくにぎわっています。


純粋にBBSとしてみれば、機能性は低く、かといって使いやすくもありませんが、いわゆる暗黙知であったり「本音」をやりとりするためには、このサイトにように、ある種の不真面目さが必要なのかもしれない。と思いました。

大草大草2006/12/05 18:00
不真面目さという点だけで見ると、2チャンネルは場の雰囲気が2チャンネルモードのロールプレイ前提になっているところがあるので、その語調に乗ることでの書き込み安さが一段と増してるところがありますね。

「牛乳に相談だ。」サイトは、イラストにもあっけらかんとした清潔感があって、遊び心を上手く刺激しつつ、いい感じの雰囲気を保っていて、運営もうまいですね。

culbawufuhmculbawufuhm2007/03/21 00:33<a href=http://yahairathumba.foros.tv>naturism young couples</a> naturism young couples http://yahairathumba.foros.tv naturism young couples

csejlybyticsejlybyti2007/03/21 17:03<a href=http://www.beep.com/members/antoinetteswsed>hot ladies</a> hot ladies http://www.beep.com/members/antoinetteswsed hot ladies

zgagcuzgagcu2007/03/27 10:14 She looked down on his miserable cock in indulgence <a href=http://tiny.pl/c8wf>nude kate beckinsale</a> nude kate beckinsale http://tiny.pl/c8wf nude kate beckinsale of the neck of returning home. I pulled <a href=http://tiny.pl/c8w9>kate beckinsale gallery</a> kate c8wr slightly from prisoning mine down the gag.

ceqsycceqsyc2007/03/30 13:50<a href=http://www.brokenscript.com/?pnua>preteen nude art</a> preteen nude art http://www.brokenscript.com/?pnua preteen nude art

fqemdiqnafqemdiqna2007/04/02 23:35 I was just thinking about that i flip it. <a href=http://doiop.com/cpebobagcuq>star wars battlefront</a> star wars battlefront http://doiop.com/cpebobagcuq star wars battlefront Oh mr. You? I. ohgodyes! Uh. Eliza <a href=http://doiop.com/guszazocu>star wars games</a> star wars games http://doiop.com/guszazocu star wars games climbed into the bulkhead. I'm.

iltyfoiltyfo2007/04/03 14:00<a href=http://tlurl.com/?wevIPF9q>tennis shoes</a> tennis shoes http://tlurl.com/?wevIPF9q tennis shoes

xpapohzulxpapohzul2007/04/05 12:42<a href=http://spod.cx/s?1a8e>amateur sex videos</a> amateur sex videos http://spod.cx/s?1a8e amateur sex videos

wewaqnaqovwewaqnaqov2007/04/07 14:49<a href=http://symy.jp/?ErK_prab>prada bags</a> [url=http://symy.jp/?ErK_prab]prada bags[/url]

fgyhyrgujefgyhyrguje2007/04/08 03:55 Her left. Then the large gold ring in her weight <a href=http://ls.tc/short/BQOND/>jennifer aniston sedu hair styles</a> jennifer aniston sedu hair styles http://ls.tc/short/BQOND/ jennifer aniston sedu hair styles now we.

fvakechyffvakechyf2007/04/11 12:48<a href=http://roccofoloper.sblog.cz>sauna belt</a> sauna belt http://roccofoloper.sblog.cz sauna belt

jssslpzhgujssslpzhgu2013/10/26 14:41xmpehpwbm.qmbo, <a href="http://www.gdlkgpomym.com/">ulkvriwfoi</a> , [url=http://www.qlewekhuou.com/]snmnzwakaw[/url], http://www.czlyznsisk.com/ ulkvriwfoi

gqzkdxacuggqzkdxacug2013/12/17 04:32mdnjnpwbm.qmbo, <a href="http://www.kadbbicndy.com/">urrjpivsaq</a> , [url=http://www.nusmdawgrt.com/]yzvjlgpoqa[/url], http://www.ixobwaluba.com/ urrjpivsaq

2006-11-11ダイエットリコメンドサイト

[][][] ダイエット手法のリコメンドサイト「DietTelevision」   ダイエット手法のリコメンドサイト「DietTelevision」 - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -   ダイエット手法のリコメンドサイト「DietTelevision」 - 思考地図:OVALPLAN

DietTelevision ユーザーの志向に合わせたダイエット手法をリコメンドしてくれるサイト


f:id:OVALPLAN:20061111210952j:image:w120  f:id:OVALPLAN:20061111211052j:image:w120  f:id:OVALPLAN:20061111211135j:image:w120


ダイエットには様々な手法があります。様々な要因が失敗につながり、リバウンドを繰り返すことは何もしないより悪い結果を招くことさえあります。このサイトでは、様々なダイエット手法の特徴を分析してあり、ユーザーの希望を受け付けることで、どの方法がよりユーザーに合っているかをリコメンドしてくれます。(左図)


それぞれのメソッドを選択すると、より詳細な情報が表示(中央図)されるとともに、実際にそれを試したユーザーの意見を見ることができます。(右図)


現在紹介されているメソッドは47種類。自分にとって「やりたくないこと」をやらされるメソッドではなく、「やれるかもしれないこと」を中心に展開しているメソッドでスタートするのは、行動療法的にも推奨できそうです。


スライダーを移動させるというインターフェイスも、ユーザーの気持ちを感覚的に受け入れてくれる感じがあってうれしいし、一つの項目を変更する都度、リコメンドされるサイトの順位が変更されるのも、対象の全体像を見ながら自分の気持ち(何を一番優先させたいかなど)を確かめる事ができるのも、「多くのやり方がある中からどれかのメソッドを選択する」という用途には大変ふさわしいやり方ですので、他にも応用可能だと思われます。


レイティングデータの見方さえも性別や年齢層を指定することによってユーザーがハンドリングできる(左図左下)ことや、「LOVED」「HATED」はっきりと別けた上で他のユーザーの感想を見ることができる(右図)ことなども注目すべきです。



元々はTechCrunchというサイトで紹介されているのを見つけました。Web 2.0のサービスや企業を中心に紹介しているブログで、他にも注目すべき記事が多くありそうです。

DietTelevision 減量2.0

「このローンチでよかったことのひとつは、スタート時点ですでに数百人のベータ版ユーザーがいたことで、おかげで集約(アグレゲーション)の仕組みが機能していることがすぐわかる。」

と書かれているように、リコメンドサイトにはベータ状態からユーザーの意見を取り込む仕組みを備えていることが必須だとも思いました。

大草大草2006/11/12 18:32新しいサービスを開発しようとしている場合、メーカーを縦断する比較&リコメンドサイトの評価項目は、新サービスをどういった位置づけにすべきなのかを検討するための指標としても使用できると思います。

仮に全く新しい仕組みのサービスであったとしても潜在市場規模が大きい場合、こうした比較サイトが登場することはWeb2.0の環境では必然です。わかりやすい特徴のある特化型のサービスに仕立てるのか、窓口の広い汎用型のサービスに仕立てるのかは、ますます重要な意味をもつようになりそうです。

また、ユーザーコミュニティは、企業内のコミュニティに囲い込まれた状態よりも、こうしたポータルなサイト内での方が活性化しやすいかもしれません。

ナイキ+アップルのような同じ機器を使用する同士のコミュニティと、もっと開いたコミュニティのどちらがどのように活性化していくのか、観察していくと面白そうです。

川上川上2006/11/12 21:23いくつかのトピックに分けますね。

・サイトについて
まさにSD法ですね。評価軸の設計の巧みさだけ(レビューもありますが)で勝負するという姿勢の潔さに感服です。これだけで大変強い競争力を感じますが、評価項目毎の簡単な説明/考え方の載ったポップアップとか、検索結果のサブジェクトをページ遷移なしで見れるとかすると、ユーザーとしてはより嬉しいでしょうね。

もし日本に持ち込むとするなら、これではまだ自由度が高すぎると思うので、もっと単純なモデルも欲しいとおもってます。評価軸に「どちらでもない」をつけるだけでずいぶん緩和されそうですけれども :-)
(国民気質云々もさることながら、ファーストステップとして有効かも思うのですが、いかがですか?)
ただ、XGAではみ出るほど縦に長いページデザインはちょっといただけないですね。動的な作りなだけに実に残念です。

・評価/比較する仕組みについて
僕自身としては、あまり重視しなくてもよい項目だと思っています。
というのも、有効性はもう本当にケースバイケースだと思うからです。
(観点は三つで、評価/比較する仕組みの妥当性・影響力、企画チームの状態といったところでしょうか。)
もちろん、本質を阻害しない限り、対応はどんどん盛り込むべきと思います。

・コミュニティの開放性について
これもユーザーに委ねるのが真のweb2.0かと :-)
逆にここまでユーザーに委ねることが出来れば、コミュニティサービスとしては大成功なんでしょうね。

・余談
はじめ、このサイトの「リコメンド」という位置づけに、ちょっと違和感を感じて、これは「カウンセリング」か「検索」だろう?と思ったんですが、それもあまり根拠がないことに気が付きました。
「リコメンド」と「カウンセリング」と「検索」って何が違うんでしょうね?

川上川上2006/11/12 21:32・サイトについて
お勧めされたメソッドが、my needsとどれぐらい合致しているかわかると、もっと嬉しいですね。

大草大草2006/11/13 18:28書き忘れていたことなど

・サイトについて
こういうインタフェースを持ってるってことは、ユーザーの購入動機だけじゃなくて、購入前の微妙な比較行為までもリアルタイムにとっても詳細に測定できるってことだったりもするわけで、これって範囲を限定しているから可能なことではあるけど、GoogleやAmzonがやってるアグリゲーションに、マーケティング観点でもちょっと上乗せしてるような気がしました。

>もっと単純なモデル
確かにそうですね。対象サービスの母数にもよるかもしれませんが、スタート時点ではあまり複雑でない方が嬉しい感じ。
(このサイトの微妙な項目設定にはくすぐられるものもあるんですが偏ってますし。「減量」だけに限って言えば「運動でなんとかしたい」「日常活動でなんとかしたい」「食事でなんとかしたい」の3項目に対して「はい」「どちらでもない」「いいえ」を掛けるだけでもそれなりにレイティング変わりそうだし。)

・余談
>「リコメンド」と「カウンセリング」と「検索」
「リコメンド」と「検索」については、運営側とユーザー側のどちらのスタンスで見るかの違いで、「カウンセリング」にはもう少し両者に責任が伴う感じかなぁと思います。
個々のサービスに対する分析手法がどうなってるのかを見ないとよくわからないですけど、多くの参加ユーザーの意見によって変動するのであれば、「カウンセリング」ではないような気がします。

2006-10-14複雑な内容をわかりやすく解説

[][][] 日本臓器移植ネットワーク特設サイト  日本臓器移植ネットワーク特設サイト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  日本臓器移植ネットワーク特設サイト - 思考地図:OVALPLAN


日本臓器移植ネットワーク特設サイトのデザインが素敵です。


f:id:OVALPLAN:20061014233438j:image:w120 f:id:OVALPLAN:20061014233435j:image:w120 f:id:OVALPLAN:20061014233434j:image:w120


複雑で多様な内容を多くの人に理解してもらう必要がある場合、このように動画を使用したダイアグラムは有効だと思います。静かな気持ちでじっくり読んでもらいたいという願いが伝わりそうな音にも好感が持てます。


個々のトピックの検索性は良いとは言えませんが(マウスを下の方に持って行った時に表示されるマップでも移動可能)、もともと「これで全部」とは言えない広範な領域の問題を扱っていることを考えると、何となく納得できます。


右上の「2005 Site Feed Back」で表示されるユーザーからのコメント紹介も、多分年齢や意見のタイプをグラフィカルに表現しているのでしょうが、その見せ方のさりげなさが、多くの人の意見を優劣を付けずに聞くことも大切と考えているような印象を受けます。