Tagged

視覚化

A collection of 15 posts

視覚化

ユーザー調査を実施するための地味だけど効果的な取り組み

うまくハマらないユーザー調査 ユーザー調査という言葉を聞くと、どういうイメージを頭に思い浮かべますか？ 数週間のインタビューと観察。実施するための入念な準備期間。数十ページにも及ぶ調査レポートなどを想像する人は少なくありません。本格的な調査が必要な場合はありますが、早く動かなければならないプロダクト開発の文脈では現実味がありません。例えば以下の理由で調査をしない（できていない）現場をたまに見かけます。 * アジャイルのような早いサイクルで成果物を作り続けるプロセスに、調査がうまくマッチしない場合がある * 特にスクラム開発は調査・デザインとの相性が悪い場合がある * プロセスに調査ができる人が参加していない場合がある * 時間とお金がかかるというイメージが強すぎて手が付けられない * 調査・プロダクト開発それぞれがもつ有益な情報が見えにくい 調査には「長くじっくり実施して、きちんとしたレポートを作る」という先入観が付きまといますが、それだけが調査の姿ではありません。『調査』というフェイズを設けるのではなく、今の開発プロセスの中でどういう調査（手法）が実践できるか考え
デザインシステム

要素名クイズから始めるUIの呼び名合わせ

あなただったら画面にある大きなテキストを何と呼びますか？ 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか？ 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト（大）」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップ [https://yasuhisa.com/could/article/ui-pattern-workshop/] では、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは、デザイナー、フロントエンドエンジニア、ディレクターといった違う役
デザイン

Palmが教えてくれたプロトタイプの真髄

Palm Pilot は木片から始まった 90年代から00年代にかけて手の平で使える PDA（Personal Digital Assistant）と呼ばれる種類のコンピューターが市場で出回っていました。ノートパソコンよりスペックが劣るものの、予定を管理したり、マルチメディアコンテンツを楽しむことができる『小さなパソコン』。後にスマートフォンやタブレットに吸収されて姿を消してしまいましたが、PDA はスマートフォンの前衛とも呼べる存在でした。 そんな PDA の代表格が Palm [https://ja.wikipedia.org/wiki/Palm] 。ハンドヘルドコンピューティングという概念を打ち立てたジェフ・ホーキンス氏によって考案されました。90年代初頭といえば、パソコンは机の上に置いてある大きな機械でしたし、ノートパソコンも今より数倍分厚くて重たいものでした。そうしたなか、パソコンよりスペックが劣り、2 台以上パソコンを持つことがまれだった時代に PDA のようなデバイスのニーズは未知数でした。そもそもコンピューターを手軽に持ち運ぶことが便利だと感じる人はごくわずかだっ
デザイン

デザインの理解につながる感情のメカニズム

上記は、ドン・ノーマン著「エモーショナル・デザイン―微笑を誘うモノたちのために [https://www.amazon.co.jp/dp/4788509210?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=4788509210&adid=1RPGXGNC0KXVHXZ0HEEE&] 」からの一節。機能的な部分より、感情に響くデザインが、今後の製品・サービスを成功へ導くだろうと説いています。確かにそうだと思いますが、感情という主観的なものを、いかにデザインへ落とし込むのか悩ましいところです。「かっこいい」「美しい」という感情だけで デザインの評価をするのは好ましくない [http://www.yasuhisa.com/could/article/how-we-talk-about-design/
デザイン

紙プロトタイピングから始まる問題解決への議論

先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA [http://basecamp-nagoya.jp/] で、「 プロトタイピングからはじめよう [http://basecamp-nagoya.jp/event/20120921.html] 」という題名でセミナー＋ミニワークショップを行いました。今年の春に開催した青森のセミナー [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/] 以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト？」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の
社会

デザインが優れている「政治の見える化」の現在

オバマ政権では情報の透明化を目指して、様々な情報を Web で入手出来るようになりました。例えば Data.gov [http://www.data.gov/] では、教育、エネルギー、治安など様々なデータ検索できるだけでなく CSV や XML 形式で入手することが出来ます。以前 builder by ZDNet [http://builder.japan.zdnet.com/member/u514743/blog/2009/07/09/entry_27023617/] で紹介した IT Dashboard [http://it.usaspending.gov/] を使えば、公開されている政府関連のデータをグラフ化することが出来ます。もちろん、こうしたデータによる政治の見える化はオバマ政権以前からあって、有名なのだと OpenCongress [http:
UI

いろいろあるインタラクティブ・テーブル

マルチタッチで操作可能なインタラクティブ・テーブルといえば Surface [http://www.microsoft.com/surface/] が有名ですが、他でも同類のテーブル（もしくは壁）が開発されています。カフェ、図書館、カンファレンスなど人がたくさん集まる場所にあると便利そうなインタラクティブ・テーブル。今回は GUI の見せ方も含めて興味深いものを幾つか紹介。アート作品から実際使われているものまで集めて参りました。リンク先のサイトには動画が掲載されているので、読むよりまずは見て体感すると良いと思いますよ。 Maeve [http://portal.mace-project.eu/maeve/]ドイツの University of Postdam で開発されているテーブル。専用カードを置くことで情報むことが出来たり複数のカードの情報の関連性を視覚化してくれます。Processing [http://processing.org/]とGestait [http://www.wortwechsel.biz/gestalt/] で開発されたそうです。Remotable [ht
アート

想像の世界の地図まとめ

小中学生の頃だったでしょうか。漫画のキャラクターやイラストなどいろいろ描いていた時期でしたが、なぜか地図もたくさん描いた記憶があります。地図を描きながら自分の創った世界を膨らまして楽しんでいました。今でもファンタジー系の地図とか見ているとワクワクしてくるわけですが、今回はそんなファンタジーな世界の地図を幾つか紹介します。こういうのを見ていると、昔からバーチャルな別世界はたくさん存在していたことが分かりますね。 小説など文字の世界を地図として可視化しているという意味でも、想像の世界の地図は非常に興味深いです。 Fantasy Atlas [http://www.fantasy-atlas.org/]ファンタジーから SF までかなりの数の地図がまとまっています。当然 ロード・オブ・ザ・リング [http://www.amazon.co.jp/exec/obidos/ASIN/B000069L4K/could-22/ref=nosim/]の地図 [http://www.fantasy-atlas.org/karten/tolkien1.html]もありますFantasy Cartogr
UI

3D空間でブラウジングするツールいろいろ

TiltViewer [http://www.airtightinteractive.com/projects/tiltviewer/app/]Flickr の写真を 3D 空間にタイル状に並べる UI。マウスを動かすことによって角度を変えることが出来ます。Tag Galaxy [http://taggalaxy.de/]Flickr のデータを使ったサイト。タグに関連した写真を太陽系の惑星のように表示させることが出来ます。 NewsGlobe [http://next.yahoo.net/download/newsglobe/index.html]Yahoo! News の記事を 3D の地球上に表示させ、どの地域のニュースが多く取り上げられているかも分かるようになっています。Cooliris [http://www.cooliris.com/]フルスクリーンで膨大な量の写真を観覧可能にする Firefox のプラグインsearch-cube [http://www.search-cube.com/] 検索結果を立方体に表示させます。
視覚化

北京オリンピックに関するインフォグラフィック

Olympic Pictograms [http://en.beijing2008.cn/spirit/beijing2008/graphic/pictograms/] 象形文字のような競技ピクトグラムGoogle Maps Summer Games 2008 [http://maps.google.com/help/maps/2008summergames/]メダルの数も分かるスペシャル版 Google Maps。サイトに貼付けることも出来ます。他にもトーチリレー [http://ditu.google.com/help/maps/torchrelay/] もありますねBBC Sport’s Olympic Map [http://news.bbc.co.uk/sport2/hi/olympics/7493757.stm] 衛星写真にオーバーレイした形で施設や競技が行われる場所が分かるようになっています。
視覚化

メールを視覚化するツールいろいろ

ネットを利用した様々なコミュニケーションツールがありますが、生活や仕事で最も使われるのがＥメールだと思います。スパムメールを含めると本当にたくさんのメールが行き来しています。 About Email [http://email.about.com/od/emailtrivia/f/emails_per_day.htm]によれば 12億人がＥメールを利用しているといわれています。2006年には 1830億通のメールのやりとりが毎日行われていたそうです (そのうちの7割はスパムという悲しい事実もありますが)。 今回は身近な存在であるＥメールを視覚化しているツールをいろいろ紹介。テキストベースのＥメールがいろいろな形に変化していておもしろいです。 3D Mailbox [http://www.3dmailbox.com/]メールのやりとりをバーチャル空間で見せるという凝ったメールソフト。個人的にゾンビ版 [http://www.3dmailbox.com/snapshots/level03/index.html]を使ってみたいですMountain [http://alumni.media