Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。

デザイン

U2 360° 関連情報まとめ

96,000人を動員した 10月25日の U2 コンサート [http://360.u2.com/]は YouTube でライブ中継 [http://www.youtube.com/u2official] されました。U2好きでなかったとしても一見の価値があったイベントだったと思います。音楽を楽しむだけでもよかったのですが、仕事柄どうやってこのコンサートを実現したのか気になってしまいますね。コンサート中に Twitter [http://twitter.com/yhassy] でも幾つか情報発信していましたが、そこで公開しなかった情報も含めてこちらに一挙公開。いろいろな意味ですごいコンサートでした。 YouTubeでコンサート映像今日の中継を逃した方は別の日の映像なら見れます 1 [http://www.youtube.com/watch?v=FLaLeUaAh-M] 2 [http://www.youtube.com/watch?v=I3Sng0Bl69o] 3 [http://www.

IA

探索的検索という違う時間の流れ

検索とひとことで言ってもいろいろな形があります。私たちが Google などでキーワード検索するときは、答えを導き出すためのキーワードが分かっている場合がありますが、いつもゴールへの辿り着き方が分かるとは限りません。ゴールが何か明確でない場合もありますし、辿り着くためにまずは関連情報を学ぶ必要があるかもしれません。閲覧 (Browse) と検索 (Search) が合わさったような利用者の行動を Exploratory Search (探索的検索) と呼んでおり、ここ数年様々な研究・調査がされています。概要が知りたい方は Wikipedia の記事 [http://en.wikipedia.org/wiki/Exploratory_search]が参考になります。 今すぐ欲しい情報を探すのであればキーワード検索でも十分ですが、調査、仕事のプロジェクト、ライフプランなど中・長期に渡って探し続ける情報をいかに補助するかが課題です。今でもブックマークを使ったりメモソフトを組み合わせることで管理が出来ているものの、別の解も考えられます。探索的検索を理解することが出来れば、キーワードから導き

google

Google Waveがもたらす心理の変化

数日前に Google Wave [http://wave.google.com/] の招待状をいただき、いろいろ使ってみました。従来からあるメール、IM、Wiki そして WebEx [http://www.webex.co.jp/]のような Web 会議システムが混ざり合った独特の形といえます。具体的に何が出来るのか知りたい方は、動画 [http://www.youtube.com/watch?v=v_UyVmITiYQ]や記事 [http://www.atmarkit.co.jp/news/200905/29/wave.html] を確認してください。ブレインストーム、レビュー、共同で文書作成などコラボレーションをする際に使えそうな印象があります。 多くのサイトで既に語られている Google Wave

microsoft

マイクロソフトが提案する次世代マウス

先週、マウスとキーボードの代りになる可能性を示すデバイスとインターフェイスのデモ 10/GUI [http://www.yasuhisa.com/could/article/10gui/]を紹介しました。Microsoft のほうでもマルチタッチ機能をマウスに組み込むことが出来ないかといろいろ模索しているようです。10月初旬にカナダで開催されたUser Interface Software and Technology conference [http://www.acm.org/uist/uist2009/] で、5つの次世代マウスのプロトタイプが発表されました。Webサイト [http://www.microsoft.com/appliedsciences/mouse20.mspx] のほうで、5つのプロトタイプに関する書類と動画を観覧することが出来ます。 FTIR Mouse形状はマウスに似ていますが、マルチタッチ操作がしやすいように軽く曲線がかかったフラットな表面が特徴Orb Mouse マウス全体がマルチタッチインターフェイスなので、違う場所を触ることで違う操作が出来ますC

ユーザビリティ

見た目と使いやすさの素敵な関係

Web は、受動的に「観覧する」というより、能動的に「利用する」という特色が強いです。それゆえ、高いユーザビリティ [http://www.yasuhisa.com/could/tag/ユーザビリティ/] が求められますし、試行錯誤を続けている方もいると思います。ユーザビリティを洗練させることで、より人に使ってもらえる (売り上げに貢献する) Web サイトになると考えがちです。極端な例だと Google がそうで、見た目はともかく使いやすいさ、使い心地を徹底的に追及しています。では、使いやすければ好感度も高く満足されるサイトなのかといえば、実はどうでもないようです。 Wichita State University にある Software Usability Research Laboratory [http://www.surl.org/] で、サイトの見た目とユーザービリティの関連性について調査を行っており、その結果が Web サイトに公開されています。 Visual

コンテンツ

リクリでコンテンツとデザインについて話しました

先日スピーカーとして第2回 Re:Creator’s Kansai [http://www.re-creators.jp/vol2/]に参加しました。WDE [http://east.webdirections.org/] の菊池さんも加わり、これから何をしようかといった将来の話題が中心のイベントになりました。大阪でセミナーをするのはかなり久しぶりだったので、こうした機会が巡ってきて嬉しかったです。今年は執筆している記事も含め コンテンツ [http://www.yasuhisa.com/could/tag/コンテンツ] にフォーカスした講演が多かったですが、リクリでも再びコンテンツをテーマにした話題でした。今までは概念的な部分が多かったのに対し、今回は「 コンテンツ戦略を意識したデザインアプローチ」という題名で、コンテンツにフォーカスしたサイトの組み立て方を、実際あるサイトを例に挙げて解説しました。 テレビ、紙媒体、ラジオでは顧客・消費者を「視聴者」「読者」「観覧者」と呼びます。受動的な呼び名が使われているのに対し、Webでは「利用者」という能動的な表現を使います。ちょっとした違い

UI

10/GUIとマルチタッチインターフェイスの可能性

マウスとキーボードを使って GUI に表示されている情報を操作するという手法は 30 年以上採用され続けています。多くの方が慣れ親しんでいる方法とはいえ直感的に使えるわけではありませんし、複雑な操作をマウスだけで行うのは難しいです。今の時代に合ったマウスに代わる次世代の操作を模索している動きは以前からありますが、 10/GUI [http://10gui.com/] はその中でも出来が素晴らしいです。Techcrunch [http://www.techcrunch.com/2009/10/13/10gui-one-very-slick-desktop-multi-touch-concept-video/] をはじめ幾つかのサイトで紹介されているので、既にご覧になった方もいるかと思います。 次はタッチスクリーンと考えがちですが、手が邪魔でスクリーンが見えなくなるという問題があります。これを解決した例としてデバイスの裏からタッチする Nano touch [http://builder.japan.zdnet.com/member/u514743/blog/2009/10/08/ent

デザイン

知識ではなく知恵を養おう

先日開催された3.4.U [http://www.yasuhisa.com/could/diary/3-4-u/]で、サイバーガーデンの益子さん [http://www.cybergarden.net/] にお会いしました。イベントが始まる前に少し話をすることが出来たのですが、そのとき「知識ではなく知恵を大事にしないとね」という話をされていました。サラッと名言を残し姿を消した益子氏でしたが、よくよく考えてみると仕事においてとても重要な考え方だなと思いました。Webデザインという狭い範囲で考えても当てはまることですね。 他の分野と同様、Webデザインにも幾つかのルールが存在します。検索をすると「すぐ出来る」「知っておきたい」「鉄則」「ルール」あたりの言葉が添えられたノウハウがたくさん出てきますし、書籍も似たような感じです。こうしたルールを示す情報があること自体は重要ですが、これによって本当に「正しいこと」が出来ない場合があると思います。 ルールがある以上、例外は存在します。大まかに「Webサイト」とひと囲みしてもそれぞれ目的や作り方が違うので、ルールに当てはまらない場合は出てきます。

Webデザイン

3.4.U!で情報とテクノロジーの変化について話しました

2009年10月8日、JWDA・CSS Nite・PCC の共同イベント 3.4.U! [http://www.jwda.jp/event/e20091008/] にて「コミュニケーションの変化からみる今後のWebデザイン 」とう題名で講演をしました。毎回セミナーに行くと数人知っている方にお会いするのですが、今回はほとんどいなかったので少しだけアウェーな感じがしました。それも恐らくビジュアルデザインやマーケティングなど Web という共通項があるものの、違う立場で仕事をしている方が集まるセミナーだったからかもしれません。こうした場にあまり参加したことがなかったので、新鮮でもあり良い体験をさせていただきました。私の前に話をした un-T factory [http://www.un-t.com/] の中川さん、ニューロテクニカ [http://www.neuro-technika.com/]の細野さん共にプレゼンが上手だったという意味でも刺激になりました。 いろいろ技術が出て来ては消えています。人によっては何を学べば良いのか分からなくなったり、覚えることが多過ぎて気が滅入ってしまうこ

openwebdesign

404ページのデザイン提案【後編】

このエントリーは「404ページのデザイン提案」の続きにあたります (前編 [http://www.yasuhisa.com/could/article/designing-404-1/]) (中編 [http://www.yasuhisa.com/could/article/designing-404-2/])スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。 すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く

google

Googleが考える新聞の生き残る道

随分前になりますが、今年の 4 月に Google の Eric Schmidt が Newspaper Association of America の集会で 演説を行いました [http://newshare.typepad.com/newshare/2009/04/audio-google-ceo-eric-schmidt-addresses-the-naa.html] 。また、別のサイトで質疑応答の筆記録 [http://www.poynter.org/column.asp?id=101&aid=161441] も公開されています。新聞の発行部数も広告収入も急激に落ちて来ているアメリカでは、Web サイトに様々なコンテンツを掲載し、開けた印象を作り始めています。質疑応答のほうでは良くも悪くも Google 視点な見解と提案がなされていますね。以下に要約をリストアップしておきます。 * いずれかひとつではなく、広告、購読、マイクロペイメントの3つが収入源になるだろう。

openwebdesign

404ページのデザイン提案【中編】

このエントリーは「404ページのデザイン提案【前編】 [http://www.yasuhisa.com/could/article/designing-404-1/]」の続きにあたります。なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。 通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは、読みたい

openwebdesign

404ページのデザイン提案【前編】

Twitter [http://twitter.com/yhassy/status/4492566304]のほうでひっそりと告知しましたが、404ページ [http://bit.ly/z8X7x] のデザインを変更してみました。なぜこんなところから始めたのかというと、サイト制作でいつも後回しになってしまう部分なので考えてみたかったですし、1ページ完結型なので早く形に出来るというのが理由です。いわゆるエラーページなわけですが、「見つかりませんでした」という結果表示ではなく何か補助出来ないかというのがテーマでした。 機械的なエラーの表示の仕方はケアが必要です。多くの利用者はエラーをみると、たとえシステムエラーでそうなったとしても、自分のせいにしてしまう場合があります。メッセージの出し方によっては「何か誤操作をしてしまったか」「そもそも何が起こったの?」「もしかして壊した?」といった感情を引き出してしまう可能性があります。利用者が悪くないのに、悪いと突き出してしまうような見せ方だけは避けなくてはいけません。 専門用語を使ったり、簡略化過ぎるエラーの説明もよくありません(説明抜きにしておも

アイデア

IntelとNokiaが学生と一緒に考えたデザイン案

Copenhagen Institute of Interaction Design [http://ciid.dk/] では、インタラクションデザインの修士プログラムが用意されています。ユーザー調査、GUI 研究、データの視覚化など興味深いコースが幾つも用意されていますが、その中でも企業で働くデザイナーを招いたワークショップが注目です。Intel とのワークショップの際はサステナビリティを意識した IT ソリューションの研究がなされました。ワークショップで生まれたアイデアは Webサイトにて公開 [http://dkds.ciid.dk/py/industry-project-intel/projects/]されています。 どのプロジェクトもビデオがあるので文章を読まなくても何をするデバイスなのか分かるのが良いですね。何が出来るというより、ストーリー仕立てで人がどう使うところにフォーカスしているのも分かりやすい理由といえるでしょう。自分が利用したいエネルギーだけ購入し、デバイスごとに制限を設定出来るシール「 Energy Rehab [http://dkds.ciid.dk/py/

コンテンツ

Webサイト運営でしてはならない質問

どうやったら人がもっとサイトに訪れるのか? これは Web サイトを構築・運営においてよく耳にする質問ではありますが、投げかけるべき質問なのかどうか疑問です。私が知っている方の多くは質の高い HTML マークアップが出来る方が多く、妙な SEO トリックを使うことなく検索エンジンの上位に作成したサイトを表示させることが出来るでしょう。しかし、Web サイトにたくさんの方が多く訪れたらそれで良いのでしょうか。1日に数百万の方がアクセスするようになったとしても、彼等がそこで何もしなかったら意味がありません。Web は世界中に広がる大きなネットワークですが、Web だからこそ量ではなく質がものをいいます。訪れる人たちを顔が見えない数字として捉えるのではなく、どのような人たちに来てもらいたいのか、何を提供出来るのか、何を利用者にしてもらいたいのかを問いかけなければいけません。 つまり「どうやったら人がもっとサイトに訪れるのか?」ではなく「利用者に提供したいコンテンツは何か?」を追求するべきでしょう。実はこのシンプルな質問の変化が Web サイト制作・運営に大きく関わってきます。 もしいつ

google

Chrome Frame はひとつのソリューション

今週リリースされた Chrome のように JavaScript や HTML5 レンダリングを実現することが出来る IE 向けプラグイン、Chrome Frame [http://code.google.com/chrome/chromeframe] 。プラグインをインストールしているブラウザのみ認識するたった一行の meta を記入するだけなので、制作者にもやさしい仕組みになっています。Techcrunch [http://jp.techcrunch.com/archives/20090922google-turns-internet-explorer-into-chrome-yes-seriously/] あたりでは、「笑える」「スマート爆弾」だとおもしろおかしく Chrome Frame を表現していますし、「IE を乗っ取った」と書いている方も見かけますが、個人的にこれは素晴らしいデザインソリューションとして見ています。 まず、構造からして「乗っ取り」ではなく、利用者を意識した配慮がなされています。Chrome Frame は Browser Helper Object

Fringe Season 2 Episode 1
TV

Fringe Season 2 Episode 1

幾つか海外 TV ドラマを見ているわけですが、その中でも昨年おもしろかったのが Fringe [http://www.amazon.co.jp/exec/obidos/ASIN/B001C4CI8U/could-22/ref=nosim/] でした。 シーズン1第1話のレビュー [http://www.yasuhisa.com/could/review/fringe-pilot/] を書いた当初は、ストーリーの全体像が見えてない状態だったので何を期待したら良いのか分からなかったわけですが、シーズンが進むにつれて徐々に Fringe の世界が明確になっていきました。 基本的に1話完結型なので気軽に見れますが、シーズンを通して展開するメタストーリーやテーマが幾つかあるので、内容をしっかり把握したい方は一気見するのがお勧めです。J.J.ブライムスが製作に関わっている作品らしく、細かい演出もたくさん用意されているので、シーズンを全部見てまた最初から見るとハッとするシーンも少なくありません。 コマーシャル前にさりげなく表示される植物や動物(ビデオ [http://www.youtube.co

IA

CSS Nite LP7 で IA に関する講演をしました

撮影: 飯田昌之 [http://www.masazo.net/]2009年9月12日ベルサール神田にて CSS Nite LP, Disk 7「IAスペシャル」 [http://lp7.cssnite.jp/] が開催されてました。IA を語るならこの人と呼ばれる方々から様々な視点の IA を聞くことが出来ました。6時間という長丁場で、しかも相当量の情報があったと思うので消化するのは少し時間がかかるかと思いますが、既に たくさんの方 [http://cssnite.jp/archives/post_1619.html] が、レポート&感想を書いています。 私はイベントの一番最後に「IAからWebサイトデザインへの突破口 」という題名でプレゼンを行いしました。長丁場の終盤だったので来場者の多くは疲れていたと思います。そんな中で漠然とした内容のプレゼンを聞いても頭にピンと来なかった方も多かったのではないかと心配していますし、伝える力が足りなかったのではないかと反省しています。幸い Twitter 上では [http://twitter.com/#search?q=

Pixelmator 1.5
ソフトウェア

Pixelmator 1.5

以前からお勧めソフトとしてセミナーなどで紹介していた Pixelmator。仕事に使えるというよりかは、Photoshop Element [http://www.amazon.co.jp/exec/obidos/ASIN/B001EHEFOU/could-22/ref=nosim/] の代りになるくらいの位置づけでしたが、先日リリースされた 1.5 でその考えを改めなければならないと思いました。 Webサイト制作をしている方にとって今バージョンで最も大きなニュースは「Web用に書き出す」と「スライス」機能が追加された点にあります。以前から JPG や GIF への書き出しは可能でしたが、画質設定をリアルタイムで見ながら確認出来るようになりました。また、全バージョンに比べると圧縮の仕方もよくなったような気がします。スライスも Photoshop と同じような感覚で区分け出来ますし、その場で画質設定もすることが出来ます。 Pixelmator を使って感じるのが Photoshop の使い勝手が必ずしもベストではないと気付かせてくれる点にあります。Web用に書き出すにしても、Pho

マーケティング

透明化されていく多彩なレビューサイト

Webマーケティングにおいて「透明化」はよく耳にするキーワードのひとつです。企業が提供する製品やサービスだけでなく、消費者との対話も透明化されている今日。レビューは誰でも手軽に出来るようになり、消費者もレビューを読んで購入を検討しています。いわば、レビューが Web では広告そのものなのかもしれません。例えば「東京 ホテル [http://tinyurl.com/l8gs9l] 」と検索すれば、レビューがすぐ読める状態になっています。良いサービスを顧客に提供するというベーシックな部分ではありますが、それが検索結果にも直結し始めているといえます。 幅広くレビューを扱う総合サイトは以前からありますが、最近は特化したものも少なくありません。Sleeping In Airports [http://www.sleepinginairports.net/] は、6,300の空港の寝心地具合をレビュー。レストランのレビューはたくさんありますが、 dishola [http://www.dishola.com/] は、食べ物の種類ごとにレビューされています。また、Printer.com [http

アイデア

Government 2.0 への4つのポイント

先日、ティム・オライリー氏が Government 2.0 [http://jp.techcrunch.com/archives/20090904gov-20-its-all-about-the-platform/] というアイデアを提唱しましたが、彼のいうとおり、公共機関や政府は Web サイトを構築するというよりかは Web サービスを立ち上げる姿勢が必要だと思います。広報新聞やパンフレットを作るというより、Web 上に新たな公共施設を設けると想像すれば良いのでしょう。 オライリー氏記事では幾つか具体的な例も含めて書かれているので、これだけ読むだけでもいろいろイマジネーションは広がりますが、彼の考えるビジョンにたどり着くには何をしたら良いのか考えてみました。 コミュニケーションの隔たりの明確化 SNS でもブログでも何でもいいですが、とりあえず技術を取り入れたものの上手く機能しない場合がありますが、その原因は組織の構成である場合があります。縦割りのコミュニケーションが普通に行われている中、それとはまったく違うコミュニケーションを前提にしたツールを導入してもうまくいかないのは当

社会

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

オバマ政権では情報の透明化を目指して、様々な情報を 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:

社会

欧米視点でみた日本のメディア入門

以前から日本のメディアは特殊であると言われていますが、先月末に行われた総選挙がきっかけで幾つかの海外のメディアが日本のメディアやジャーナリズムにスポットを当てた記事を幾つか掲載しました。部分的に日本のメディアの姿を取り上げている記事は少なくありませんが、客観的に日本のメディアの全体像が分析されているものはあまりありません。2005年に設立されたアメリカの Open Source Center [https://www.opensource.gov/] (OSC) は、オープンソースとして公開されている情報を収集、分析を行っている機関。その OSC が先日、日本のメディアについて取り上げた 67 ページの資料を公開しました [http://www.fas.org/irp/dni/osc/]。PDF 形式で無料でダウンロードすることが可能です。 Japan — Media Environment Open; State Looms Large [http://www.fas.org/irp/dni/osc/japan-media.pdf] 日本人からすれば特に珍しい情報はありません

UX

好ましいという感情と使いやすさの関係

もう2年以上前の話になりますが京都で講演 [http://www.yasuhisa.com/could/entries/001104.php] をしたとき、利用者に響くWebサイトにおける構成要素を幾つか紹介しました(スライドはこちら [http://yhassy.heteml.jp/slides/community_pdf.pdf] )。機能性や有用性のようなユーザビリティに関わる要素だけでなく、有意義や満足度といった感情に関わる要素も紹介しました。利用者へよい体験を提供したいと考えているのであれば、こうした感情的な要素は外せません。利用者にとって有益なコンテンツを提供しているかどうか判断する上でも感情的な部分はひとつの測定要素といえるでしょう。人間のもつ特性や要因を把握し、利用者に良いと思ってもらうようにデザインすることを「 Desirability」と呼ぶことがあります。 あまり聞かない言葉ですが、Useful, Usable and Desirable: Usability as a Core Development Competence [http://msdn.micro

UX

bingのデザインアプローチについて

6月に公開された Microsoft の新しい検索サービスbing [http://www.bing.com/]。先日 comScore が発表した検索エンジン市場の調査報告書によると [http://enterprise.watch.impress.co.jp/docs/news/20090820_309545.html] 、7月が公開月に比べてシェアが 5% 増だったそうです。公開されたばかりということもあり、試しに使っているという方も少なくないでしょう。今後どうなるか分かりませんし、吸収する形になるであろう様々な Yahoo! 検索の技術がどのように bing に影響を及ぼすかが注目です。特に自分の検索エンジンが作れるプラットフォーム BOSS [http://developer.yahoo.com/search/boss/] や、セマンティック検索を可能にする SearchMonkey [http://developer.yahoo.com/searchmonkey/] は何かしらの形で bing