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:
ブラウザ IE6から先へ行くための提案が必要 YouTube [http://www.techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/] やDigg [http://www.techcrunch.com/2009/07/10/can-you-digg-it-maybe-not-if-youre-stuck-on-ie6/] といった海外でアクセスの多いサイトが次々と IE6 のサポートを中止する動きを見せています。YouTube は他のブラウザに変更するメッセージの表示以外に具体的にどのようなサポートを止めるのかが分かりませんが、Digg では、コメントや Digg ボタンといったサイトのコア機能のサポートを止めることを考えているそうです。このニュースに影響されたのか、Twitter では、「IE6 Must Die [http://twitter.com/#search?q=IE6%20Must%20Die]」が、トレンドトピックにランクインしましたし、Twibbon [http://twibbon.com/join/IE6-M
ixd ジェスチャーを使ったモバイルコミュニケーション マルチタッチやタップによるソフトウェアとのインタラクションが携帯電話で増えてきました。スクリーンに直接触れるという直感的な操作が魅力的ですが、指を使った操作だけでなく、ジェスチャーを使った操作も近年注目を浴びています。 Nintendo Wii [http://www.amazon.co.jp/exec/obidos/ASIN/B000WN67L6/could-22/ref=nosim/] のようなゲームデバイスもそうですし、日本の携帯電話にはモーションセンサーが実装されたものがあり、ゲームなどに利用されています。iPhone でも Friend Book [http://tapulous.com/friendbook/] のようなアプリは握手をしているようなジェスチャーでコンタクトの交換が出来るような機能があります。 デバイスに触れる操作だけでなく、ジェスチャーを使った携帯電話の操作にはどのような可能性が秘められているのでしょうか。Nokia Research Center [http://research.nokia.com/] では、フィールドスタディをしながらジェスチャ
iphone iPhone / iPod Touch 向けのアート系アプリ 仕事効率の向上や生活に役立つ iPhone / iPod Touch アプリを使うのも良いですが、たまにはゲームやお楽しみアプリも欲しくなります。「使う」「遊ぶ」アプリはたくさん存在しますが、いずれとも言い難いのがアート系アプリ。 表現者にとって新たなプラットフォームになりつつ App Store。公開されているアプリは作品のショーケースというより、彼等が作ったシステム上で遊んだり、自分の表現を生み出すアプリになっています。今回はあなたのクリエイティブを刺激するアート系アプリを幾つか紹介します。 Bloom [http://www.generativemusic.com/bloom.html] (450円)Brian Eno がプロデュースした iPhone アプリ。タップするだけで不思議な音楽と映像を作り出すことが出来る21世紀の楽器クレヨン・フィジックス [http://www.dothehudson.net/jp/app/crayon-physics/] (600円)ハドソンの iPhone アプリ。描いた物体が重力を帯びてリアルに落ちるパズルゲーム。Fat Tag [htt
UI ワイヤーフレーム制作の５つのアプローチ ワイヤーフレーム [http://bit.ly/HMc0f] を作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早期から導入出来る制作方法で、制作時間もかかりません。ソフトウェアを使って制作することが出来ますが、コンテンツを入れない段階なので、紙上でも素早く作るこ
UI ユーザーが考えるブラウザの未来 Mozilla は去年からコンセプトサイト [http://labs.mozilla.com/projects/concept-series/] で未来のウェブの使い方の提案をしています。セミナー [http://www.yasuhisa.com/could/diary/websig-semanticweb/]でも紹介したことがある、Adaptive Path の Aurora [http://adaptivepath.com/aurora/] が有名ですね。コンセプトサイトだけでなく、Flickr の mozconcept [http://www.flickr.com/photos/tags/mozconcept/] というタグから、利用者が提案した様々なコンセプトデザインを観覧することが出来ます。 利用者が考えた優秀なコンセプトデザインが見たい方は、Design Challenge: Summer 09 [http://design-challenge.mozilla.com/summer09/
音楽 Discovery - LP Discovery [http://pitchfork.com/artists/27811-discovery/]という名前にピンと来なくても Vampire Weekend (VW) の Rostam Batmanglij と Ra Ra Riot (RRR) の Wes Miles のユニットと言えば、ちょっと聞いてみようと思う方もいるのではないでしょうか。VR、RRR 共に 2008年にアルバムをリリースしており、共に良作でした。私はどちらかというと RRR のほうが好みだったりしますが。今熱いニューヨーク出身のインディロックバンドのコラボといえば聞きたくなるではありませんか。 ただ、両バンドの音楽が好きな方がそのままのイメージを抱きながら聞くと、びっくりするかもしれません。アルバムは全編シンセサイザー、ノイズ、そして Auto-Tune (日本語ではロボットボイスとでも言うのだろうか) のボーカルで構成されており、いかにも今風の雰囲気です。曲によってヒップホップや R&B のようなメロディもあります。Jackson 5 の「
インターネット 「セマンティックなマーク付けとメタデータの活用」に参加してきました [http://www.flickr.com/photos/yhassy/3697215233/]先週の土曜日になりますが、サイバーガーデンbiz [http://cybergarden.biz/]主催、神崎正英さんによる「セマンティックなマーク付けとメタデータの活用 [http://cybergarden.biz/semantic/] 」というセミナーに参加してきました。2時間半という長丁場でしたが、セマンティクウェブというスケールの大きい話なので、時間がいくらあっても足りない感じがしました。その中、神崎さんの見解も交えてコンパクトにまとまった内容だと思いました。 スライドは既に公開されているので [http://www.kanzaki.com/works/2009/pub/0704pcs.html]参考にどうぞ。 何が簡単でシンプルなのか 今回のセッションで「簡単」と「シンプル」という言葉が何度も出てきました。神崎さんがこの言葉をどのような意味を含めて語っているのかが重要だと思います。例えば、クライアントや利用者のためにウェブサイトを作るという仕事をしている視点から「簡単」や
ニュース ジャーナリストを中心とした新しいビジネスモデル 最近イランと政治 [http://www.itmedia.co.jp/news/articles/0907/01/news062.html]という話題が Twitter を中心に話題になっています。従来、ジャーナリズムといえば取材した情報に編集を加えて媒体に適した形で配信するという、いわばパッケージングされた情報でした。最近では、まずいちはやく情報を配信して、配信しながらニュースの全体像を徐々に形作るプロセス型のジャーナリズムが登場しました。Twitterだけでなく、Guardian のライブブログ [http://www.guardian.co.uk/global/blog/2009/jun/23/iran-crisis] はその一例です。ジャーナリストがプロセス中心の情報配信になっただけでなく、従来読者と呼ばれていた方もプロセス型になっており、ニュースサイトにそういった機能を組み込んでいるところもあります。CNNが運営している iReport [http://edition.cnn.com/ireport/] は、市民ジャーナリスト向けの動画サイト。利用者が動画を共有する別サイ
仕事 Progressive Enhancementに関する調査結果 このエントリーは「質問: ウェブサイトの見た目は同じにしなければならないか？ [http://www.yasuhisa.com/could/announcement/question-progressive-enhancement/] 」の続きにあたります。もう１ヶ月前になってしまいましたが、ついに結果を発表出来るようになりました。有効回答数は 134 とサンプルとしては良い数になりました。ひとつの調査結果として捉えるには十分な数ですが、私のサイトと Twitter で告知したということもあり、若干偏っている可能性があるのでご了承ください。前回のTwitter経由でいただいた回答 [http://www.yasuhisa.com/could/article/ask-twitter-progressive-enhancement/] も一緒にご覧になるとおもしろいかと思います。 回答に参加していただいた皆様、本当にありがとうございました。 回答された方の役職はコーダーとデザイナーが半数を占めるものの、様々な役職の方が均等にいるという印象があります。今回は複数回答をアリにしましたし、特
Twitter Ask Twitter: ウェブサイトの見た目は同じにしなければならないか？ このエントリーは「質問: ウェブサイトの見た目は同じにしなければならないか？ [http://www.yasuhisa.com/could/announcement/question-progressive-enhancement/] 」の続きにあたります。やっと明日に結果レポートを出せる状態になったので、まずは Twitter [http://twitter.com/yhassy] 経由でいただいたウェブサイトの見た目や Progressive Enhancement に関する意見をまとめて紹介します。アンケートだけでなく、こうして意見まで送っていただき感謝しています。140文字内でこれだけの情報を詰め込めるのかと関心してしまう意見も多数です。 Progressive Enhancement を簡単に説明すると「ブラウザに応じて最適だと考えられるインタラクションと見た目を提供する」になるかと思います。ただ、この説明文だけ読むとブラウザによって異なるデザイン／レイアウトを作らなければならないという印象を与えかねません。実際はそうではなく、新しいブラウザで見ると text-shad
コンテンツ SwapSkillsでコンテンツの話をしてきました しばらくセミナーで話をするという機会がなかったわけですが、先日SwapSkills 2009 vol.3 [http://swapskills.info/archives/236]にて「ウェブに向けたコンテンツ配信と戦略 」というタイトルでプレゼンをしてきました。以前からこちらのサイトでも「コンテンツを活かすためのサイト制作 [http://www.yasuhisa.com/could/article/learn-and-promote-content/] 」という記事で改めてコンテンツを意識したウェブデザインの提案をしたほうが良いのではないかと書きましたが、さらに話を広げたのが今回のセッションでした。そもそもウェブのコンテンツは他媒体と何処が似ていて何が違うのかといったところから、効果的なコンテンツと呼ばれる６要素とその事例といった具体的なものまで紹介しました。 「コンテンツは王様だ」という言葉がありますが、その割にはウェブサイト構築において、コンテンツの作り込みは最後のほうにあるケースがあります。また、コンテンツと最も密接な関係にあり、なおかつビジュアルやインタラクションを繋げる
