視覚化

A collection of 16 posts

視覚化

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

うまくハマらないユーザー調査 ユーザー調査という言葉を聞くと、どういうイメージを頭に思い浮かべますか? 数週間のインタビューと観察。実施するための入念な準備期間。数十ページにも及ぶ調査レポートなどを想像する人は少なくありません。本格的な調査が必要な場合はありますが、早く動かなければならないプロダクト開発の文脈では現実味がありません。例えば以下の理由で調査をしない(できていない)現場をたまに見かけます。 アジャイルのような早いサイクルで成果物を作り続けるプロセスに、調査がうまくマッチしない場合がある 特にスクラム開発は調査・デザインとの相性が悪い場合がある プロセスに調査ができる人が参加していない場合がある 時間とお金がかかるというイメージが強すぎて手が付けられない 調査・プロダクト開発それぞれがもつ有益な情報が見えにくい 調査には「長くじっくり実施して、きちんとしたレポートを作る」という先入観が付きまといますが、それだけが調査の姿ではありません。『調査』というフェイズを設けるのではなく、今の開発プロセスの中でどういう調査(手法)が実践できるか考えたほうが取り組みやすくなります。 調査を取り入れるための対策 きちんとした調査をしなくても、調査ゼロより圧倒的に良いです。議論がまとまらないときの拠り所になりますし、周りから「もっと知りたい」という声が出てきます。以下は私も実践している小さな調査を始め方や、共有するための手段です。 先回りの計画を立てる スクラム開発は早く成果物を作り上げるのに適したプロセスですが、抜本的な課題解決を考える時間をとるのが難しいです。例えば、1 週間のスプリントという短いサイクルでは、

視覚化

職種を超えたコミュニケーションデザインを考える

2018年9月8日 builderscon tokyo 2018 (#builderscon)に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有するための視覚化です。 言語化・視覚化はデザイナーはもちろん、エンジニアやマーケターなど様々な職種で実践しています。デザイナー同士、またはエンジニア同士であればうまくやれている言語化も、職種を越えるとまったく届いていないという場合があります。使っている言葉が少し違うだけで、やっていることは同じということは幾つかあります。 例として挙げたのがコンテンツモデル。「記事」「レビュー」のようにコンテンツを大きな枠組みとして考えるのでなく、「タイトル」「概要」など小さく分類して、他コンテンツとの関連性を視覚化するのがコンテンツモデルです。

デザインシステム

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

あなただったら画面にある大きなテキストを何と呼びますか? 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか? 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト(大)」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップでは、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは、デザイナー、フロントエンドエンジニア、ディレクターといった違う役職で構成されたグループにしていますが、そうすると見事に呼び名が違うことに気付きます。ここに web・アプリ制作に直接関わっていない人が加わるとさらに複雑です。 デザインシステムの第一歩として色から始めるのをお勧めしていますが、早期に始めておきたいのが言葉の共有です。せっかく UI のカタログを始めても、後のほうで「

デザインシステム

デザインシステムの最初の一歩として原則を作る理由

メンタルモデルから始める デザインする上でユーザーのメンタルモデルの理解は欠かせません。 UI やコンテンツに出くわしたとき、それをどう解釈・判断し行動するかを決めるのがメンタルモデル。 Web サイトであれば青色の文字に下線が入っていればリンクであると判断するのも、過去の経験や知識を基にメンタルモデルが築かれているからです。私たちが「使いやすい」「直感的」と感じるのもメンタルモデルとインタラクションが一致しているからと言えます。 同じデザインでも評価は変わる デザインをチームで評価するとき、メンタルモデルが共有されていないために議論が思わぬ方向へ進む場合があります。Web サイトのリンクのように広く使われているものであれば共通のメンタルモデルが築かれていますが、多くの場合そうでははありません。オンボーディング、アイコンの見た目、通知のコピーなど、UI に関わるあらゆる部分で意見の相違が発生します。 Sketch の Libraries、Figma の Team Library を使えば、チームで見た目を合わせることはできますが、プロダクトにおける『らしさ』まで共有できていません。つまり、プロダクトのコミュニケーションデザインを評価するためのメンタルモデルが共有できていない可能性があります。 デザインシステムを作る際、まずデザイン原則から始めるのも、チームで共有できるメンタルモデルを作るためのでもあります。 UI コンポーネントを作る前に、原則を作るというコンセプチュアルなところから入って感覚を合わていったほうがお互いが考える『

デザイン

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

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

デザイン

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

上記は、ドン・ノーマン著「エモーショナル・デザイン―微笑を誘うモノたちのために」からの一節。機能的な部分より、感情に響くデザインが、今後の製品・サービスを成功へ導くだろうと説いています。確かにそうだと思いますが、感情という主観的なものを、いかにデザインへ落とし込むのか悩ましいところです。「かっこいい」「美しい」という感情だけでデザインの評価をするのは好ましくないですが、その感情がどこから、どのように生まれてくるのかを探求することは重要です。 感情とは主観的であると同時に、体系化することも可能です。 Delft University of Technology で教授をされている Pieter Desmet 博士が 2002 年に「Designing Emotions」という論文を発表しています。人間は製品や感情に対する感情のメカニズムを以下のような図のようにまとめています。 感情は、何かに反応した結果に表れるものですが、反応は大きく分けて2つの要素で構成されています。「刺激(Stimulus)」は製品やサービスといった、私たちが実際触れたり体験することができるもの。もしくは製品をつかって何か行動をしたり、

デザイン

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

先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA で、「プロトタイピングからはじめよう」という題名でセミナー+ミニワークショップを行いました。今年の春に開催した青森のセミナー以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト?」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の手法と同様、弱点がありますし、万能の手法ではありません。 ツールは自分の好みで一途に使うのではなく、幾つかのツールを適材適所で使い分けることで、効果を発揮します。ペーパープロトタイピングも得意分野があるので、それらを理解した上で活用すると、良い結果に繋がるはずです。パワーポイントや Visio といった特別なソフトウェアではないので、誰でも簡単に始めるのは大きなメリットです。 プロトタイピングと一言でいっても、使う目的が異なる場合があります。達成しなければならないゴールは、開発フェイズによって様々なので、その時々に応じてツールを選ぶという視点も忘れてはいけません。ペーパーという簡易ツールは、

社会

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

オバマ政権では情報の透明化を目指して、様々な情報を Web で入手出来るようになりました。例えば Data.gov では、教育、エネルギー、治安など様々なデータ検索できるだけでなく CSV や XML 形式で入手することが出来ます。以前 builder by ZDNet で紹介した IT Dashboard を使えば、公開されている政府関連のデータをグラフ化することが出来ます。もちろん、こうしたデータによる政治の見える化はオバマ政権以前からあって、有名なのだと OpenCongress という政治家や法案のデータを観覧できるサイトがあります。RSSも充実しており、特定のテーマの法案のみ購読するといったことが可能です。政治家のデータシートも様々な情報ソースから集めて掲載しているマッシュアップページですが、読みやすく統一感があるデザインです。 上記に紹介したサイトをみると分かるように、最近はデータを使った情報の視覚化がニュースだけでなく政治分野にも広がっています。データを自由に使える環境が整ったことにより開発者が様々な可能性を模索するようになっただけでなく、デザイナーも参加してデータに新たな価値を与えています。こうした中、Sunlight Labs は非常に興味深いサイトとして今注目しています。ここがコミュニティハブとなり、政治の見える化に関わるプロジェクトが幾つか立ち上がっています。プロジェクトのステータスも公開されており、

UI

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

マルチタッチで操作可能なインタラクティブ・テーブルといえば Surface が有名ですが、他でも同類のテーブル(もしくは壁)が開発されています。カフェ、図書館、カンファレンスなど人がたくさん集まる場所にあると便利そうなインタラクティブ・テーブル。今回は GUI の見せ方も含めて興味深いものを幾つか紹介。アート作品から実際使われているものまで集めて参りました。リンク先のサイトには動画が掲載されているので、読むよりまずは見て体感すると良いと思いますよ。 Maeve ドイツの University of Postdam で開発されているテーブル。専用カードを置くことで情報むことが出来たり複数のカードの情報の関連性を視覚化してくれます。ProcessingとGestaitで開発されたそうです。 Remotable スウェーデン在住の学生によって作られたテーブル型のリモコン。観覧しているDVDのコントロールや部屋の灯りの調整をジェスチャーで行えるのが特徴。テーブルにリモコンの機能を足しただけといえば単純ですが、リモコンがあるとないとで随分見方も変わるなという印象があります。 Interactive Mirror 眺めるのがちょっと楽しくなりそうな鏡。Lit Studio が考案したこの鏡は、触れることで様々なエフェクトをその場で作り出すことが出来ます。エフェクトだけでなくウェブ上の情報も表示させることが可能。もうひとつの現実が鏡の向こうのあるイメージ。 Organigami Mireia Subirana と Iván

アート

想像の世界の地図まとめ

小中学生の頃だったでしょうか。漫画のキャラクターやイラストなどいろいろ描いていた時期でしたが、なぜか地図もたくさん描いた記憶があります。地図を描きながら自分の創った世界を膨らまして楽しんでいました。今でもファンタジー系の地図とか見ているとワクワクしてくるわけですが、今回はそんなファンタジーな世界の地図を幾つか紹介します。こういうのを見ていると、昔からバーチャルな別世界はたくさん存在していたことが分かりますね。 小説など文字の世界を地図として可視化しているという意味でも、想像の世界の地図は非常に興味深いです。 Fantasy Atlas ファンタジーから SF までかなりの数の地図がまとまっています。当然ロード・オブ・ザ・リングの地図もあります Fantasy Cartography ファンタジー系の地図をひたすら紹介しているブログ。更新頻度は低いですが、見ているだけで楽しくなる地図がたくさん ProFantasy Software ゲーム用の地図を作ることに特化したソフト。拡張するためのツールキットも充実しています Zombie Nirvana Games Photoshopを使った地図の作り方を説明しています。スクリーンキャストもあるので分かりやすいです MAPS OF FICTIONAL WORLDS ファンタジーでなくても地図はあります。こちらのページでは小説を基に描かれた地図が幾つか紹介されています VGMaps.com ビデオゲームのマップを淡々と紹介しているページ。いろいろな意味で気が遠くなるコレクションでございます

UI

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

TiltViewer Flickr の写真を 3D 空間にタイル状に並べる UI。マウスを動かすことによって角度を変えることが出来ます。 Tag Galaxy Flickr のデータを使ったサイト。タグに関連した写真を太陽系の惑星のように表示させることが出来ます。 NewsGlobe Yahoo! News の記事を 3D の地球上に表示させ、どの地域のニュースが多く取り上げられているかも分かるようになっています。 Cooliris フルスクリーンで膨大な量の写真を観覧可能にする Firefox のプラグイン search-cube 検索結果を立方体に表示させます。キーボードかマウスを使って回転させ、立方体に表示されているプレビューを観覧、サイトへアクセス出来ます。 Spectra MSNBCが提供するのRSSリーダー。ニュースを3D空間に表示され、クリックしてコンテンツも読むことが出来ます。ニュースの種類によって色も違うので視覚的に分かりやすいです。 SpaceTime 検索結果を Vista の フリップ3Dのように表示させることが出来るだけでなく、サイトそのものも 3D 空間でそのまま見ることが出来るインターフェイス Amazon Windowshop アマゾンの製品をまるでウィンドウショッピングをしているかのように、

視覚化

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

Olympic Pictograms 象形文字のような競技ピクトグラム Google Maps Summer Games 2008 メダルの数も分かるスペシャル版 Google Maps。サイトに貼付けることも出来ます。他にもトーチリレーもありますね BBC Sport’s Olympic Map 衛星写真にオーバーレイした形で施設や競技が行われる場所が分かるようになっています。BBCの記者が Twitter をした場所まで表示されてます El mejor nadador de la historia 8冠を達成したマイケル・フェルプスの泳ぎを分析したビデオ。見ているだけでも興味がわいてきます A Map of Olympic Medals NYTimes は今回かなり気合いが入っています。そのひとつが、このメダルの獲得数を地図に見立てて表現してあるインフォグラフィック Architectural Monuments in

視覚化

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

ネットを利用した様々なコミュニケーションツールがありますが、生活や仕事で最も使われるのがEメールだと思います。スパムメールを含めると本当にたくさんのメールが行き来しています。About Emailによれば 12億人がEメールを利用しているといわれています。2006年には 1830億通のメールのやりとりが毎日行われていたそうです (そのうちの7割はスパムという悲しい事実もありますが)。 今回は身近な存在であるEメールを視覚化しているツールをいろいろ紹介。テキストベースのEメールがいろいろな形に変化していておもしろいです。 3D Mailbox メールのやりとりをバーチャル空間で見せるという凝ったメールソフト。個人的にゾンビ版を使ってみたいです Mountain IBM Group からの作品。ひとつのレイヤーがひとりの人間とのメールのやりとりを表しており、まるで地層のようです Thamail メールにあるキーワードを様々な形で視覚化。タグクラウドの見せ方の参考にもなりそう MyMap Paul Baker さんのメールのやりとりを視覚化したもの。メールならではの SNS とも言えますね Email Visualization こちらは Jamin Hegeman さんのメールのやりとり。よりオルガニックな見せ方 Anymails Carolin Horn さんのメールのやりとり。『バクテリア』がメールの種類を表しています