Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
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 の世界が明確になっていきました。 基本的に１話完結型なので気軽に見れますが、シーズンを通して展開するメタストーリーやテーマが幾つかあるので、内容をしっかり把握したい方は一気見するのがお勧めです。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のデザインアプローチについて

６月に公開された 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
コンテンツ

気づき・理解・納得を導きだす問いかけ

製品を「購入したい」と思うとき、デバイスを手に取って「私にも使えると」感じるとき、良いサイトを見つけて「また訪れよう」と思うとき。それぞれ異なる状況ではありますが、共通の思考プロセスが働きます。「 ソーシャルイノベーションデザイン [http://www.amazon.co.jp/exec/obidos/ASIN/4532313686/could-22/ref=nosim/] 」という書籍によると、そのプロセスには３つのステップがあるそうです。 まず第一に自分はこれが必要だと感じる最初のきっかけ「気づき」。第二に必要性の「理解」を深めていき、第三の「納得」に繋がることで購入や再度の利用というアクションに繋がるといわれています。書籍では製品の購入に対して上記のプロセスを挙げていましたが、コンテンツを活かしたサイトや Web サービスにも言えることだと思います。 Webサイトに掲載されているコンテンツが利用者にとって適したものになっているかどうか、まずは簡単な質問をしてみる [http://www.yasuhisa.com/could/article/content-driven-qu
Webデザイン

Webデザインについて何を勉強したいですか？

終わりがないのが辛いと感じる場合もありますが、終わりがなく新しい技術やアイデアが紹介され、常にエキサイティングでいられるのも Web の魅力です。技術やノウハウの習得だけでなく、情報収集することは Web デザイナーとして必須の業務といえるでしょう。学びたい技術はたくさんありますが、少し先を見据えた勉強もしてみたいですよね。すぐに使えなくても、次のステップへの手がかりになることはたくさんあると思います。その興味が IA かもしれませんしアクセス解析かもしれません。どの分野でも自分なりに消化・整理することで必ず良い仕事に繋がると思います。 いろいろ学びたいことあるよねーっと漠然に言うことがありますが、実際何を学びたいと思っているのでしょうか。Webデザインという切り口で幾つかリストアップしてみました。 サステナビリティとWebデザイン プロダクトデザインや建築など他の分野では「サステナビリティ」という言葉が世に出回る前から意識されていたものが多いですが、Webデザインにおいて「サステナビリティ」とはどういう意味をもつのでしょうか。そもそも Webデザインのようなデジタルメディアで達成
Twitter

Twitterで100回アバター変えました

今年の２月中旬頃から平日ほぼ毎日 Twitter [http://twitter.com/yhassy] のアバターを変えていました。恐らく、誰か分からない人がいきなりタイムラインに出てきているなぁと気になった方もいると思います。ユーザー名は覚えなくても、アバターで人と関連付けている方は少なくないでしょう。それゆえ、自分の顔写真をアバターに使っている方もいますし、覚えてもらうために、複数サービスに登録していてもあえて同じアバターにしている方もいます。そう考えると私はまったく逆の展開だったわけですね。変なリンクを毎日垂れ流していたのであれば、それはきっと私だったのだと思います。Remove しないで放っておいてくれてありがとう。 [http://www.flickr.com/photos/yhassy/3807045959/] 半年近くかかってしまいましたが、先週めでたく100人のアバターになりました。理由は特にありません。なんとなく自分がおもしろいからやっていただけです。人に覚えてもらいたいとは思いますが、良いのです。100個並ぶと迫力あるので、これを作りたいがためのプロセスのよう
ブラウザ

Opera Japan のパネルディスカッションに参加しました

[http://twitpic.com/cyjui]数日前の話になりますが、Opera Japan [http://my.opera.com/chooseopera-Japan/blog/] にて社員向けのパネルディスカッションが開催され、スピーカーとして招待されました。林 信行さん [http://nobi.cocolog-nifty.com/nobilog2/]、ミツエーリンクスの木達さん [http://kidachi.kazuhi.to/blog/] に並んで一緒に話すことが出来て恐縮でしたが、こんな機会はまずないので楽しんで参りました。Opera が示すことが出来る日本のプレゼンスに関するディスカッションもありましたが、Opera というひとつのブラウザに捕われない大きな話もありました。 HTML5 がこれからWebアプリケーションにどのような影響を及ぼすのか、そして使える環境が整えられ始めている現在においてデザイナーや開発者はどのような姿勢をとっているかといった話は多くの時間を費やしました。ジャーナリストから見た視点、大規模の Web サイト制作会社の視点、そしてひと
デザイン

IDEA 2009 全受賞作品をチェック

世界的に有名なデザイン賞「International Design Excellence Awards [http://www.idsa.org/IDEA/] 」が今年も開催されました。工業製品を中心にデザインの価値とビジネスやライフスタイルに結びつけた優れた作品が毎年選ばれています。今年、金賞をとった作品はデジタルとアナログの世界があやふやになったものや、サステナビリティを意識したものが多く見られます。Best of Show を受賞した Nike の Trash Talk [http://www.nikebiz.com/media/pr/2008/02/13_Nash.html] は今年を象徴する作品といえるでしょう。以前紹介したことある Energy Seed [http://www.greenhug.net/design/energy-seed/] も受賞したみたいですね。 1500のエントリーを 20人の審査員が観察したり実際試したりして受賞作品を決めました。見た目や感触だけでなく、利用する人や社会にとって有益なものかどうか、良い体験を提供しているかも審査の対象になってい
アイデア

好みを出さないレコメンデーションが欲しい

去年あたりからレコメンデーション系のサービスが目に付くようになりました。音楽だとPandora [http://www.pandora.com/]、 TasteKid [http://www.tastekid.com/]、echonest [http://www.echonest.com/]。映像だと Jinni [http://www.jinni.com/signin.html]。書籍だとBookLamp [http://beta.booklamp.org/]。TwitterでもTwollo [http://www.twollo.com/] というサービスがあります。総合的なものだと The Filter [http://www.thefilter.com/] がよく出来ているサービスのひとつです。それぞれ異なるアルゴリズムを持っているので特定は出来ませんが、レコメンデーションは以下のような要素が基本になっていると思います。 * 利用者の購買/使用/消費履歴 * 商品に対する評価 * 製品の属性/
UX

コンテンツにフォーカスした質問の仕方

セミナーや記事を通してコンテンツ [http://bit.ly/6vM7Z] を活かす方法を幾つか紹介してきましたが、サイトデザインを考えるときと同様、まず質問を投げかけるのが道筋を作る手がかりになる場合があります。「これはサイトにとって良いコンテンツか？」といった単純な質問をするのではなく、質問を洗練させていくことで、よりフォーカスされたコンテンツ開発につながる場合があります。 サイト開発に携わる役職は様々。携わる役目も違えばサイトの捉え方も違ってきます。サイトナビゲーションひとつをとっても、ユーザビリティ、IA、グラフィックデザインの切り口によって出てくる質問が異なるでしょう。それは、コンテンツ視点でも同じです。ナビゲーションもコンテンツの一部として捉えるとが出来、サイトや利用者にとって最適なのか判断の手がかりになる質問が出てきます。 例えばナビゲーションに対して、「このコンテンツ (ナビゲーション) はサイトの役割とゴールに適した文体になっているか？ 」という質問をしたとしましょう。ラベリングや用語が統一されているかのチェックだけでなく、付随している文章のトーンも一定なものに
apple

市場調査をしない Apple のビジョン

iMac, iPod, iTunes Store, そして今は iPhone。最初は批判が少なくなく、多くの疑問が投げかけられる Apple 製品ですが、気付いたら誰もが Apple のモデルを追いかけている形が続いています。Apple がすべて正しいことをしているとは言えませんし、最近も Google VoiceをiPhoneから締め出す [http://www.itmedia.co.jp/news/articles/0907/29/news059.html] といったニュースが報じられたりと、閉鎖的な動きをよく見かけます。それでも世界中で本当に先進的なことをしているなと感じる数少ない企業であることは間違いありません。 彼等のイノベーションの秘密は何なのでしょうか。実は Apple では市場調査を一切せず、過去 10 年でコンサルタントを雇ったのも1回限り。これからのトレンドを調査をして見つけ出すのではなく、自分たちで作り出すという彼等の姿勢の表れなのでしょう。詳しくは「 You Can’t Innovate Like Apple」と「Steve
デザイン

今のデザイナーに必要な10のスキル

見た目だけを考える仕事をしているわけではないという意味も含めて、「デザインする人」という肩書きのようなものを名刺に入れています。デザイナーと書くと、『外側』を作るというイメージのほうが強いかもしれないので、わざとそう書いています。両方とも意味は同じのはずですが、日本語で書くとちょっと印象が違うような気がします。どちらでも良いと思いますが、こう書くことで私自身は意味を重く受け止め、足りないことが多いですが、日々精進するきっかけになります。 最近デザインという言葉は考え方や仕事の仕方などあらゆるシーンで使われるようになってきました。ではデザイナーはどうでしょう。デザインと同じように意味が広がってきているのでしょうか。 Fast Company の「Beyond Design, 10 Skills Designers Need to Succeed Now [http://www.fastcompany.com/blog/ken-musgrave/thinkdesign/beyond-design-10-skills-designers-need-succeed-now] 」という記事で
ワイヤーフレーム

OmniGraffleを使ったテンプレート作り

OmniGraffle [http://www.act2.com/products/omni-graffle5.html] は、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル [http://www.yasuhisa.com/could/roundup/graffletopia/] 」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キ
コンテンツ

青森でコンテンツをテーマにマーケティングの話をしました

青森県主催で開催されたWeb マーケティングセミナー [http://www.pref.aomori.lg.jp/soshiki/shoko/sozoka/2009-0703.html]にて「 コンテンツを活かすために私たちができること」というタイトルでプレゼンをしてきました。先月開催されたSwapSkills のセミナー [http://www.yasuhisa.com/could/diary/swapskills-june-2009/] に引き続きコンテンツをテーマにした話。SwapSkills の際は Web サイト制作者に向けた話だったのに対し、今回はそれだけでなく、ウェブマスターや企画に携わる側の方にも通じる内容でした。 コンテンツとマーケティングという２つの言葉が同じ記事や話にでてくる場合がありますが、今後ますますその機会は増えると思います。Web の特性を活かしたコンテンツのあり方を探求し、開発していくだけでなく、作り上げたコンテンツをいかに利用者に見てみもらうのかということを、自社の Web サイトという枠組みを超えて考えて行く必要があります。Web 上にある様々なソ
マーケティング

トレント・レズナー流マーケティング論

Nine Inch Nails [http://www.nin.com/] の Trent Reznor といえば、オンラインを活用した様々な活動を数年前から積極的に行っているアーティストのひとり。ウェブサイトもちょっとした SNS になっていますし、以前からネット上で新アルバムの無料配信、GarageBand ファイル形式で楽曲を公開、400GBのコンサートのHD映像を BitTorrent で公開といった様々な活動をしています。 レコードレーベルに対して [http://www.contactmusic.com/news.nsf/article/reznor%20urges%20musicians%20to%20ditch%20labels_1099985] 強い意見を持っている方としても知られていますね。 そんな彼が公式フォーラムに降臨。「my thoughts on what to do as a new / unknown artist [http: