Archive

Archive for the ‘デザイン’ Category

Webサービスのヒアリングとリリース後のプロセスで大事なこと

4月 5th, 2012

昨日、Onlabでデザイン系のセミナーがあったようで。
Pirikaのkojimaさんがブログにまとめていて、すごく参考になったので転載させていただきます。

デザイン戦略

1.人から始める時にこの3つを考える事
①自分の周りにいる人達が意識していることを観察できているか
②ユーザーがこのプロセスがあったとして、そのプロセスを終えている理由とモチベーションは何なのか
③ユーザーがこの課題にあたっている時にどういうステップを踏んでいるか
2.話すのをやめ、作り出すこと
①プロトタイプを通して何を学びたいか
②一番早く学びたい事を学べるように何をすればいいか
③明日早く自分のチームとプロトタイプをつくるために今何ができるか
3.たくさんのプロトタイプを作ってそのほとんどを捨てる覚悟を持つ
4.できる限りの時間をスタートアップをやっていない人達と話す事に使う
①スタートアップ界隈以外の誰と会話しているか
②自分の持っているイメージ(家庭とは○○である、とか)が正確かどうかの検証をしているか
③文化にとけ込んでいるか
5.あなたの物語を人間味のあるものにすること

http://kojimafujio.tumblr.com/post/20464162723/elle-luna

ローンチ後の戦略

【ゴール設定】
ローンチする時に問いかける質問「なぜ僕はローンチするのか」
ローンチする時に、ローンチする目標を明確にしないといけない
「○○の数の人が○○をアップロードするプラットフォームを作る」というような目標
設定したゴールは大きな世界を変えるぞみたいなゴールではなく、小さくシンプルなゴールを作る
【KPIの設定】
自分の目標を達成できているかどうかのKPI設定
3〜5のKPIに集中すること、30個もあってはいけない
【ローンチ後のプロモーション】
TechCrunchに載る事を重視しない
大事なのは自分のサービスのターゲットユーザーが読んでるニュースサイトに載る事
【フィードバック】
サインアップするとパーソナルなメールが届く、スペルミスとかわざと入れる
onesheetの場合はonesheetにサインアップしてでもonesheetを作らなかった人に、アカウント作ったのに、onesheetをつくらなかったのはなんで?というメールを送った
こうすることで、凄く返信率が高く1/3の人が返信してくれた
ユーザーからフィードバックを取る時はシンプルにユーザーに問いかける
【QA資金調達について】
資金調達はできるだけあと
物を作って、そのアイデアが検済みの状態で資金を調達する
事業を展開している中でボトルネックが明らかになった時にVCから調達すべき

http://kojimafujio.tumblr.com/post/20463996322/brenden-mulligan

また、今ライフネットの岩瀬さんの著書、『ネットで生保を売ろう!』を読んでいて、事業計画を立てるための調査分析プロセスが面白かったです。

・「ネットで生保が売れるか?」という問題を「どういう属性の人なら買ってくれるか?」という問いに置き換えて、ペルソナを設定した
・海外の人脈をフル活用して、米国や英国のネット生保販売の事例を調査した
・個人ブログで協力を呼びかけ100名弱を対象としたネットアンケートを実施し、面白い回答をした人たちに個別で電話でフォローのインタビューを行った
・さらに何名か会議室に集まってもらい、かなり掘り下げたフォーカスグループインタビュー
・洞察が得られるためにホワイトボードに書き出して議論、整理した

特にB2Cのサービスにおいて、「ユーザーを大事に」と言うけれども、具体的なアクションがあまり出回っていない気がしますが、こういう当たり前の事を淡々とこなすだけなんだなー、と感じました。

ちなみに、最近身内で耳にするあすかアセットの谷屋さんの話がはじめ出てきていて、新鮮でした。

8maki IT, proposal, デザイン

グラフだけじゃない、Data Visualizationフレームワーク集

1月 19th, 2010

(8 free Data Visualization frameworks not only for charts [en])

相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。

» 20 Fresh JavaScript Data Visualization Libraries

上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts(グラフ)のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず!

そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。

SIMILE Widgets Exhibit

dv-js-library-simile

MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。

SIMILE Widgetsでは、他にもTimelineや、TimeplotRunway(Coverflow)などのVisualもAPIとして個別に提供しています。

» SIMILE Widgets Exhibit – US President Search DEMO

ProtoVis

dv-js-library-protovis

ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというとProcessing.jsに近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。

» ProtoVis DEMO

Prefuse Flare (Flash)

dv-js-library-prefuse

Prefuse FlareもData Visualizationのフレームワークとして有名です。Prefuseは、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。

また、Flashならでわの気持ちのいいインタラクションも高評価です。

» Flare DEMO

Style Chart

dv-js-library-style-charts

こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、レーダーチャート(スパイダーチャート)も用意している点がいいです。

» Style Chart Editor(DEMO)
» Style Chart Gallery

CanViz

dv-js-library-canviz

有名なVisualizationフレームワークであるGraphvizのJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。

» CanViz DEMO

Axiis (Flex)

dv-js-library-axiis

こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。

» Axiis – Browser Statistics DEMO

Infovis

dv-js-library-infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph(ノード間のパスに重みが付いている)/Directed Graph(パスに方向がある)、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。

» Infovis DEMO

RGraph

番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。

» RGraph DEMO

8maki IT, proposal, survey, テクノロジー, デザイン , , ,

モノと関連データの関係性-Semantic Webによるスキーマ定義-

12月 13th, 2009

前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。

» アイディアの発想法とData Visualizationは同じ構造なのではないか?

そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。

関連データとはプロパティである

「データから自動でVisualizationを行う」という取り組みの中で、どのようにデータを扱えばよいかという問いにぶちあたり、最近RDFおよびRDF Schema、Dublin Coreあたりを調べています。

RDF とは、主語・述語(プロパティ)・目的語(値)という3要素を用いてデータの関係性を表現するWeb上の枠組みのことです。例えば、「New Yorkの略語はNYである。」という例文は下記のようなXMLで表現されます。

<rdf:RDF
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:dcterms="http://purl.org/dc/terms/alternative">
  <rdf:Description rdf:about="urn:states:New%20York">
    <dcterms:alternative>NY</dcterms:alternative>
  </rdf:Description>
</rdf:RDF>

この例で、主語・述語・目的語はこのような意味になります。↓
主語: New York というモノが存在し、
目的語: NY という関連データがあり、
述語: 略語 という主語と関連データの関連性を意味している。

これだけだとちょっと分かりにくいかもしれませんが、表は、基本的に主語・述語・目的語の構造に落とすことができます。下記は宇多田ヒカルのWikipedia Infoboxの例です。「宇多田ヒカルの出生名は宇多田光である」ということを表しています。

utada

この構造は、前回の記事で示した、モノ⇔関連データ⇔Visualizationの構造に合致しています。

ここの述語、要はプロパティの部分とVisualizationをうまくひもづけるルールを定義できたら、「扱うデータからVisualizationを発想する」ことができるのではないでしょうか。さらに言えば、ルールさえしっかりしていれば、データとプロパティさえ定義すると自動でユーザーが求めるVisualizationを生成することができるようになります。

規格化されたプロパティの定義

ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。

そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。Dublin Coreには、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。

さらにこれを細分化したDCMI Metadata Termsというものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。 先程の「略語」という述語(プロパティ)は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。

考察

このようにWeb上でデータを構造化する動きは、Semantic Webという流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。

ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。

参考

こちらに、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。

8maki IT, proposal, survey, テクノロジー, デザイン , , ,

Data VisualizeなWeb系アプリケーションまとめ

5月 14th, 2009

昨今、新しいインターフェースを採用したアプリケーションが多く出てきている印象があります。先日Blogでも紹介したGAPMINDERですが、こういった統計データをグラフ化して公開するサービスは、最近になって注目を集めている気がします。

データが溢れてしまって、次はそれを「いかにわかりやすくまとめて表示するか」に焦点が向うのは自然かもしれませんね。そこで今回は、どういったアプローチがあって、具体的にどんなアプリケーションとして実装されているのか、調べてみました。

【目次】

2D(2次元)

大きく分けて2Dと3Dの方向性があって、2Dはいかに2次元ブラウザ上でうまくデータを表示するか、というアプローチになるでしょう。2Dはさらに、コンテンツプロバイダー側のデータをグラフ化して提供するアプリケーションと、ユーザーのデータをWeb上でわかりやすく表現するアプリケーションの二つに分類できます。

■2D(プロバイダーがデータを提供)

○莫大なDBからデータを提供するアプリケーション

Wolfram Alpha(画像↓1枚目)と最近開発が発表されたGoogle Squared(to Techcrunch)は(画像↓2枚目)有名ですよね。前者は10TBもの統計データを、検索キーワード(SQLのようなクエリ?)に応じて図を示してくれるアプリケーションで、5月にリリース予定です。あの数学アプリケーションMathematicaの作者Wolframのプロダクトとしても有名です。
wolframalpha

一方、Google Squaredの方ですが、下記の画像を見るとわかるように、Web上の検索結果をグリッド上に表示して、それぞれの結果を比較できる、というインターフェースになっています。莫大なWebデータを保有するGoogleならではのサービスですね。Google Analyticsがアクセス解析の会社を一掃したのように、巷のバーティカルサーチエンジンを恐怖に陥れるのでしょうか。

googlesquared

また、先日紹介したGAPMINDERも統計データの表示なので、こちらのアプローチに入ります。

検索エンジン系
扱うデータが膨大なため、検索エンジンの様相を呈していくのではないでしょうか?となると、データの表示は主に今までなされてきたようなグラフ化に落ち着きそうです。それよりも、検索クエリの構文とか、検索方法といったユーザーインターフェースに改善の余地が出てきそうです。

○関係性の視覚化

mixigraph_mac

また、検索エンジン系のアプリケーションでは対象としていない、データ同士の関係性を示そうとする試みもあります。一番わかりやすいのはmixigraphではないでしょうか?ノードとノードがあってその間をつなぐ線があるという図は、実生活ではよく目にしますが、なかなかWeb上では目にしません。

ただ、関係性の抽出という意味では、一つ有名な領域があります。

レコメンドエンジン系
レコメンドエンジンです。主なレコメンドエンジンは、商品同士の関連を計算して、類似商品を表示します。サイジニアのデクワス(画像↓)というレコメンドエンジンでは、ユーザーの指向から類似コミュニティを見つけて、そのコミュニティを利用して関連商品を出しているようです

deqwas

結局mixigraphも、共通の知人や関連性の高い友人を見つるのに使うのが主な目的だと思うので、ある種レコメンドエンジンと言えますね。多くのレコメンドエンジンもmixigraphのような、ビジュアル的アプローチができる気がします。

■2D(ユーザーが自分のデータを表示)

○Web上の描画支援

googlevisualization

Google Visualization APIは、ユーザーのデータをWeb上に表示する際に便利なAPIです。仕組みは簡単で、データを投げるとグラフの画像が返ってきます。また、Google Analyticsなかのひと、といったアクセス解析ソフトも、ユーザーのデータをわかりやすく表示するアプリケーションと言えばこちらの分類ですね。

API系
今後も自分のデータを簡単に、かつ分かりやすく示したいというニーズは増えてきそうですし、こういった描画支援系のサービスはAPIやASP/Saasといった方向で出てくるのではないでしょうか。

○脳内の視覚化
mindmapguidlines

Mindmapに代表されるような、脳を整理するアプリケーション群です。これはこれで別エントリでまとめたいほど多くのアプリケーションがありますが、基本はツリー構造のアプリケーションですよね。個人的にはFrieve Editor(画像↓)というのがオススメです。普通のMindmapではツリー構造しか表現できませんが、こちらは多対多の関係を表現できます。

frieveeditor

認知系
Webに限らず、多くの形が考えられそうな領域です。スライドをインタラクティブに作れるツールとか、ワークフローに特化したアプリケーションとか、それこそ無限に考えられます。けれども、人間の脳をいかに効率的に表現するか、という領域に収まる気がするので、認知系とまとめてみました。

3D(3次元)

上記のグラフ化と一線を画すのが、3Dの方向です。2Dの、「人間が紙の上にまとめる」という考え方が、3Dでは「人間がその中で行動する」という考え方になり、よりインタラクティブなアプリケーションが出ています。

ifree3d

iFree3D(to Techcrunch)(画像↑)は立方体空間の中で、Webブラウジングするアプリケーションで、サイトや画像といったアイテムを、より直観的にいじれるように3Dを活用しています。ま

た、FoxTab(画像↓)というFirefox Addonも、今開いているサイトを、3Dで表示してくれます。

foxtab

ブラウザ系
これらのアプリケーションに共通しているのが、ブラウザあるいはブラウザ支援ツールということです。より実世界に近い形でWebを動き回れたらいいんじゃないか、というのは自然なアプローチはな気がします。AR(拡張現実)も注目を集めていますし、IE vs Firefox vs その他Webブラウザ、という構図が大きく変わりそうな気配がします。

————– まとめ —————

datavisualize

こうみると、本当に分野横断的に色々なアプローチ、アプリケーションがありますね。とはいえ、今回まとめたものだけでも、一通りのトレンドを網羅しているように思えます。つまり、新しいイノベーティブなアプリケーションには、イノベーティブなインターフェースも必須になりつつある、ということなのではないでしょうか。

【参考】
こちらのブログ↓では、扱うデータによってでData Vizualizationの視覚化アプローチを7個にまとめています。

» Data Visualization: Modern Approaches | Graphics | Smashing Magazine

  • Mindmaps
  • Displaying News
  • Displaying Data
  • Displaying connections
  • Displaying Web-sites
  • Articles &  Resources
  • Tools and Services

8maki IT, Web, proposal, survey, テクノロジー, デザイン , , , , ,

「情報の可視化」における新しいアプローチ、2次元グラフを動画のように再生

5月 4th, 2009

最近、Data Visualization(情報の視覚化)というテーマで調べ物をすることが増えました。
ようは「データをいかに人がわかりやすく、接しやすいインターフェースで表示するか?」という意味で私は捉えていますが、非常に曖昧な言葉だと思います。Infographicsも「情報の視覚化」という意味で同義な気がします。

Data Visualizationのアプローチで、最もポピュラーなのがデータのグラフ化。Googleが検索結果にグラフを表示(via Techcrunch)するようになったのも記憶に新しいですが、データ描画検索エンジンとも言える、Wolfram Alpha(via Techcrunch)も注目を集めています。

そんな中、2次元グラフの推移を動画のように再生できるようにして、時間推移をわかりやすく表現するサイトがありました。 

» GAPMINDER

デフォルトで、横軸に「一人当たりGDP」、縦軸に「寿命」がプロットされていますが、さらに横軸の下を見ると、時間軸があるのが分かります。以下で5つほど、推移をお見せします。中くらいの大きさの赤い丸が日本なので、注目して見るとおもしろいです。

↓ほとんどの国が同じような位置に。

gamminder-1800

↓欧米(オレンジ・黄色の丸)の国々が右上のほうにシフトしています。
gamminder-1876

↓日本を始めとするアジア諸国が追随しています。
gamminder-1935

↓終戦付近で、日本の寿命がものすごい勢いで落ちています。
gamminder-1945

↓高度経済成長で、日本は世界一の長寿国に。左下のアフリカ諸国の格差が目立ちます。gamminder-2007

。実際に再生して連続で見てみるととてもわかりやすいので是ご覧ください→GAPMINDER

Data Visualization: Modern Approachesにもある通り、様々なグラフ化のアプローチが試されていますが、2次元グラフに時間軸を取り入れて時間推移もわかる3次元グラフにする、というアプローチは非常に有効なのではないでしょうか。意外に使われていないアプローチなので、取り上げてみました。

このサイト自体も、様々なデータを扱っているので、うまく使えば教育等の分野に使えそうですね。

8maki IT, proposal, デザイン , , ,

ウェブサービスインターフェース勉強会でしゃべらせてもらいました

10月 8th, 2007

今回、百式の田口さんがデザイナー集めて勉強会やる、ということでなぜか僕がしゃべることになりました。

» 『ウェブサービスインターフェース勉強会』へのお誘い

全2時間の中、はじめに僕が十数分話して、次にbebitさんのWEBユーザビリティ事例紹介、最後には会議といういつもの感じです。

僕のターンでは、『出会い系に見るWEBインターフェースの今後』というテーマで、以下の4サイトのコミュニティサイトとしてどんなおもしろい機能、インターフェースがあるか、サイトレビューのような形で進めました。

詳しい内容は参加者の方がブログで書かれているので割愛。

「ウェブサービスインタフェース勉強会」に行ってきた。 (treasuring misc.)

Webインターフェース勉強会に参加してきました (ちきんぶれいん.com)

にゃりんこ: 金曜日の勉強会。⇒ 翌日の朝練。

100_1986.png

とは言えコンテンツはほとんど田口さんが用意してくれたようなもんなので、僕はいかにうまく伝えるかに専念。

プレゼンはそこそこ慣れていたと思うほうなのですが(学生にしては)、人からお金をもらって(今回は¥1000)人前で話すというのがどれだけプレッシャーがかかるか、思い知りました。

いや、別にプレゼン自体の緊張感が増した、というわけではなくやはり、それなりのコンテンツを提供しないといけない、というプレッシャー。
ITイベントにいってつまらんかった、という経験もありますし、お客さんの満足度が低かったらどうしよう、っていう部分が一番怖かったです。
まあどっちにしろかなり緊張はしましたがw

飲み会や帰り際には「よかったよ」「面白かった」というお声もいただきましたが、精進必須!
田口さんからの反省メールでは

プレゼンは100点だったが、120点にするには「期待させる言葉」を効果的に使うと良いね。あと、声のトーンに強弱つけようねー。

といただきましたが、所詮学生にしては。プロとして話せるようになるにはまだまだ遠い。
「いかにうまく伝えるか」の視点も欠けていました。

高みを目指すものにとって人前で話すという壁は避けては通れないませんし!!w

8maki IT, proposal, survey, イベント, デザイン, 八巻 , ,

LOVE Cartierのサイトがイカす

6月 4th, 2007

via Brutus

今、地球上ではさまざまな紛争や飢餓など多くの問題を抱えています。カルティエが掲げるテーマ”LOVE”は、まさに世界中の人たちへの重要なメッセージ。”LOVE”チャリティブレスレットとともに、友情の絆、恋人同士のつながりなど愛の絆を誓いましょう。

ということで、Cartierがイカすサイトを作っています。

love-cartier.png

» Cartier – Love

本サイト/キャンペーンでは4つのテーマを掲げていて、

  • LOVE Stories
  •  クリムゾンリバー2を手がけたオリヴィエ監督のショートムービー

  • LOVE Gallery
  •  現代アーティスト作品のバーチャルアートギャラリー

  • LOVE Collection
  •  Cartierの新製品(6色ブレスレットなんかは69,300と比較的お手頃)

  • LOVE DAY
  •  来たる6月8日

 というラインナップ。ちなみにこのコレクションの売り上げの10%がチャリティ団体に寄付されるそうです。

私は特にGalleryに注目で、マサチューセッツ工科大学メディア研究室の教授:ジョン・マエダ氏が今回参加するアーティスト作品をコーディネートするらしい。

テーマは『人間とコンピュータの調査

love-cartier3.png

非常に興味深い分野です。WEBデザイナー必見。
(今回のサイトもこの方が手がけている。)

と、久々にワクワクさせるようなデザイナーズサイトに出会えたのでご紹介しました。

”ジョン・マエダのクリエーションによる比類なきバーチャル体験”

ブランドのWEB業界への参入は今まではあまり目に付いてきませんでしたが、これからはおもしろいことがおきそうな予感。最近WEBに限らず大いにブランディングが大事だと実感します。まあブランディングとマーケティングを混同してはいけませんけどね。

いづれにせよWEBやるにもデザイン力が欠かせなくなる、ということだと思います。以前百式の田口さんも「デザインセンスのあるエンジニアって貴重だよねー」っておっしゃってたそうです。いやはや今後は必須課題となるかもしれませんね。

love_cartier2.jpg

» カルティエから華奢(きゃしゃ)ひもブレス – アクセサリー – @zinoスクープ&フォーカス

8maki IT, proposal, デザイン