Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

テクノロジー

紙を使う理由 デジタルである理由

手元からいつでも情報へアクセスしたり、コンテンツを消費出来る世の中になっているとはいえ、私たちは紙を使い続けています。紙を使う理由は何でしょうか? 紙を使う理由のなかに、感情的な部分も少なからずあると思いますが、他にもあると思います。理由を考えるにおいて、ガジェットによる情報のやりとりと、紙を使った情報のやりとりの違いを把握することが重要になります。 デジタルメディアと紙媒体の違いは「消費」と「インタラクション」の2点。 紙はそれぞれスペースが制限されているとはいえ、簡単に持ち運びも出来ますし、使い捨てや再利用もしやすいです。しかも、紙を持った瞬間からそこに書き込まれている情報にアクセス出来ますし、何か情報を書き込みたいと思えばすぐに出来ます。それに対し、ガジェットの場合はガジェットそのものは、だんだん持ち運びがしやすくなってきているものの、いつでも何処でも使える(代用出来る)ものでもありませんし、柔軟性に長けているわけではありません。しかし、そこに表示されるコンテンツの量は膨大で、使い回しや上書き・編集も出来ます。ガジェットへのインプットも簡単になってきているとはいえ、アプリケー

ExpanDrive
OSX

ExpanDrive

Dropbox [https://www.getdropbox.com/]の魅力は一言で表すことが出来ないですが、ひとつの魅力はクラウド上にあるデータに Finder と同じ感覚でアクセス出来る点にあります。この感覚を FTP / SFTP 用アプリケーションで再現しているのが ExpanDrive です。設定後はサイドバーとメニューバーに表示され、まるで外付け HDD のときと同じようにファイルにアクセス出来ます。直接ファイルを開いて編集・更新も出来ますし、プレビューも表示されます。 うれしいのが、選択したファイルを指定アプリのアイコンにドラッグ & ドロップしたら開くという Finder でお馴染みの操作が出来るところです。サーバー上に保管してある PDF をその場で Quick Look も出来ますし、Cover Flow で観覧することも出来ます。 詳細な操作が必要な際は別アプリケーションのほうが良いかもしれませんが、ちょっとした作業をすぐに済ませたい場合は ExpanDrive は重宝します。39.95ドルと有料ですが、日本語にも対応しているので、すぐに使いこなせるように

仕事

Ask Twitter: 使っているサイト制作ソフトは何ですか? 2

前回 [http://www.yasuhisa.com/could/roundup/ask-twitter-web-authoring/] に引き続き、いろいろな方が使っているサイト制作ソフトの紹介です。 以前、制作ソフトに関して神森さん [http://www.t-studio.jp/column/] と話したことがあります。制作ソフトそのものの使い方を習得することも重要ですが、実は OS の特徴をいかに把握して活用するかが制作ソフトの使い勝手に大きな影響を及ぼします。テキストをダブルクリック、トリプルクリックしたときにどのような挙動が起こるのか、コピーしたデータがどのようにクリップボードに保管されるのか、他のアプリとの組み合わせで相乗効果があるのか・・・といったことを知っていると知っていないとでは大きな違いです。 自分が使っているソフトを支えている技術や別のソフトを改めて見つめ直すことで、自分の『武器』がさらに手に馴染むと思いますよ。 ブックマーク [http://b.hatena.ne.jp/entry/http://www.yasuhisa.com/could/round

ダウンロード

Bad Usability Calendar 2009

[http://www.flickr.com/photos/yhassy/3236395246/]Netlife Research [http://www.netliferesearch.com/]が、毎年ユーザビリティの観点でやってはいけない項目を「Bad Usability Calendar [http://www.badusability.com/]」というカレンダー形式でまとめています。2005年から続いており [http://www.badusability.com/archive/] 、2009年版も今月初めにリリースされました。年々、翻訳される言語が増えているのですが、今回は「LOLspeak」なんてちょっと変わった系統まで用意されています。 去年 [http://www.yasuhisa.com/could/announcement/bad-usability-calendar/] カレンダーを日本語訳したのですが、今年もやってみました。既に日本語版も PDF 形式でダウンロードすることが出来ます。今回は以前よりさらにウェブアプリケーション向けという印象があります。

仕事

Ask Twitter: 使っているサイト制作ソフトは何ですか?

エディタは何度か放浪しながら、そのときのワークフローに合ったものを使っています。今でもメインは相変わらず skEdit [http://skti.org/skedit/] ですが、サイト管理の機能がとても良い Coda [http://www.panic.com/jp/coda/] も併用しています。Coda はまだまだエディタとしては物足りないですが、バージョンが上がる度に良くなってきていますし、1.6.1 に導入された プラグイン [http://www.panic.com/jp/coda/developer/howto/plugins.php] でどれだけ多くの開発者の協力を得ることが出来るのかが今後の鍵でしょう。 また、CSSEdit を開発している MacRabbit が Expresso [http://macrabbit.com/espresso/] という本格的なエディタを開発しているのも見逃せません。こちらも Sugars

UX

Palm Preで追求したUX

先日の CES で発表された Palm Pre [http://www.palm.com/us/products/phones/pre/index.html] 。現在 iPhone を使っていますが、これが出たら乗り換えても良いかもと思うくらい好印象です。機能が盛りだくさんのわりにはシンプルにデザインされている印象があります。Apple の真似事ではない異なるスタイルのビジュアルを演出しているのも、iPhoneを意識しつつも、新しいソリューションを提供しているという姿勢の現れなのかもしれません。 モバイルの話題の中心に戻ってきた Palm ですが、彼等はどのようなビジョンの元、webOS を開発したのでしょうか。「Palm provides a case study in user experience strategy [http://www.mobileuserexperience.com/?p=593] 」という記事で詳しく解説されています。 webOS を開発する際、Palm が

UI

UIデザインガイドラインのまとめ

デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines [http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html] 個人的に UI デザインガイドラインといえばこれ。日本語訳 [http://potting.syuriken.jp/potting_conv/XHIG_J/XHIGIntro/chapter_1.html]も大変便利です Apple User Experience Guides [http://developer.apple.com/

Webデザイン

Tweets CS4.JPを勢いで作ってみました

以前は開発合宿に参加して勢いで作るということをやっていましたが、最近はめっきりしていませんでした。長いスパンで開発のお手伝いをするのも楽しいですが、逆に一気に作ってしまうやり方も時には挑戦したくなります。というわけで、久しぶりにデザインも含めて2日で作ったページを紹介。 Twitter [http://twitter.com/] で交わされている CS4 [http://www.amazon.co.jp/gp/product/B001JJCKD6?ie=UTF8&tag=could-22&linkCode=as2&camp=247&creative=7399&creativeASIN=B001JJCKD6] ネタを淡々と流しているだけのページです。時間がないといっても、時間がないときに作れてしまうからよく分からん。 Tweets CS4.JP [http://www.yasuhisa.com/is/cs4jp/

CSS

3D世界もWebKit採用へ

Qt [http://www.qtsoftware.com/]は、クロスプラットフォームで動作するアプリケーション開発を目的としたフレームワーク。開発と GUI デザインをワンストップで行えるメリットもあるので、様々なデバイスやアプリケーションで Qt が採用されています。代表的な例だと Google Earth [http://earth.google.com/] でしょう。 様々なライブラリも用意されているわけですが、その中で注目なのが QtWebKit [http://doc.trolltech.com/4.4/qtwebkit.html] (日本語 [http://qt.linux-life.net/4/doc/ja/qtwebkit.html]) というモジュール。Qtで開発されたアプリケーションの中に Webブラウザを埋め込むことが出来るようになります。 Qt は以前から GPL ライセンスとして配布されていたのですが、最近

ゲーム

GiantBombが提案するWikiとニュースの良い関係

Wikiはポテンシャルがあるシステムではありますが、あまり好例がないのが現状です。様々な情報をインプット出来るという意味で、特にニュースサイトで使える可能性があると思います。以前「 使えそうなニュース特集ページを考えてみました [http://www.yasuhisa.com/could/article/newsfeature-design-idea/]」で、ニュース記事に Wiki を付随することで、専門用語の解説や他のイベントとの関連性を読み取ることが出来るのではと提案したことがあります。Wiki とジャーナリズムが組合わさっている例としてウィキニュース [http://ja.wikinews.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8] がありますが、最近見つけた GiantBomb [http://www.giantbomb.com/

意見

何処で何を投稿していますか?

今年の4月で11年目になるこのサイト。昔は個人的な日記, リンク, 記事, 一言メモなど何でもこの場所に書いていたわけですが、ソーシャルメディアが普及したことによってその現状も変化してきています。2年くらい前までは個人的な日記を mixi や Vox で書く試みをしましたが、今は一言ちょっと書く程度ならすべて Twitter [http://twitter.com/yhassy] に移行しています。気になるリンクは delicious [http://delicious.com/yhassy] に保存していますし、興味深い画像が見つかったら Tumblr [http://yhassy.tumblr.com/] へ貼付けています。 記事を書く場所も分散してきています。もちろんメインでこちらで書くことは変わりませんが、このサイトにフィットしない内容もあるので、それらは別サイトで執筆しています。 greenhug [http://www.greenhug.net/], builder.com [http://builder.japan.zdnet.com/member/u514743/

UI

10年以上前からあったライフストリーム

ライフストリーム [http://www.atmarkit.co.jp/fwcr/column/ore01/01.html] (Lifestream) といえば去年あたりからよく耳にするようになった言葉。様々な利用者のネット活動をリアルタイムに追うことが出来るライフストリーム。FriendFeed [http://friendfeed.com/yhassy]のようなサービスを使って複数の利用者の活動を観覧することも出来ますし、自分で作る [http://www.yasuhisa.com/is/lifestream/]ことも可能です。 最近出てきた情報の見せ方なのかと思っていましたが、10年以上前から「ライフストリーム」とい言葉は同じような意味合いで使われていたみたいです。イェール大学では、1996年に The Yale Lifestreams Project [http://cs-www.cs.yale.edu/homes/freeman/lifestreams.html] というプロジェクトを立ち上げています。「Lifestream とは」

microformats

Microformatsとモバイルの関係

様々なアプリケーションを立ち上げるパワーもなければ、並べて眺めるだけの十分なスペースもないモバイル環境。それゆえデータの連携は使いやすさを向上させるひとつの鍵といえますし、ウェブサイト間で出来るのであれば、モバイルブラウザひとつ立ち上げておくだけですべて完結するかもしれません。 iPhone では vCard や iCalフォーマット (ics) をブラウザからダウンロード出来ないようになっています。つまり、カレンダーに書き留めておきたい情報がウェブ上にあったとしても、一旦カレンダーに切り替えて自分で書き込まなくてはならないというアナログチックな作業が必要ということになります。そこで Microformats を摘出して、自分が利用している Web サービス へ情報を自動入力するという形であれば iPhone だけでなく他のモバイル機器でも考えられるソリューションだと思います。 Bookmarkletを使うやり方もありますが、現状 iPhone では Bookmarklet の保存の仕方が大変面倒 (パソコンと同じようにはいかない) です。もちろん Greasemonkey も使え

4種類のコラボレーションタイプ

「コラボレーション」は「Collaboration」の音訳ですが、多くの方が使う言葉になりました。様々なシチュエーションでコラボレーションという言葉を耳にするようになりましたが、単に「共に働く、協力」では説明するのは難しいですし、協力する相手によってコラボレーションの形や接し方も変わってきます。Harvard Business Review に掲載されている Which Kind of Collaboration Is Right for You? [http://harvardbusinessonline.hbsp.harvard.edu/hbsp/hbr/articles/article.jsp?value=BR0812&ml_subscriber=true&ml_action=get-article&ml_issueid=BR0812&articleID=R0812F&

インターネット

Year in Review 2008

以前から、時が経っても古くならない記事を書くように心がけていましたが、今年はさらにその傾向が強かった1年だったような気がします(もちろん告知 [http://www.yasuhisa.com/could/category/announcement/] のような時間にセンシティブなのもありましたが)。その結果、年の初めのほうに書いた記事も息が長いものが増えてきました。『残せる』記事が増えてきたので、いい加減にアーカーブの仕方も工夫しないといかんなと思うわけですが。 雑誌だけでなく、他のサイトで書く機会が増えてきたこともあり、このサイトの更新数も減ってしまったのが残念でした。もちろん、読者との接点が増えるという意味では嬉しいのですが、原点であるこの場所のコンテンツが少なくなるのもちょっと寂しかったりします。サイトに関する課題を多く残したまま 2008年が終わるわけですが、それらをぜひ 2009年には形にしないといかんなと思いながら今こうして書いています。 以下が今年特に人気があった記事トップ10になります。まだ読んでいないのがあればぜひチェックしてみてください。そして、来年もよろしくお

インターネット

インテルのソーシャルメディアガイドライン

インテルは比較的早い時期からブログを始めており [http://blogs.intel.com/]、更新頻度も高くコメントも受け付けています (日本語版はこちら [http://blogs.intel.co.jp/] )。ブログというツールは気軽に導入出来たとしても、顧客と企業を繋げるひとつの窓口として運営していくのは大変なことです。インテルほどの大きな企業がどのようにソーシャルメディアと付き合っているのでしょうか。インテルでは Intel Social Media Guidelines [http://www.intel.com/sites/sitewide/ja_JP/social-media.htm] というガイドラインを設けています。ブログだけでなく Wiki や SNS にも通じるこのガイドライン。当然インテル向けに書かれている内容ですが、応用出来そうな内容です。 ブログを長くしている方にとっては『当たり前』な内容かもしれませんが、社内やチームの共有ツールとしてこうしたガイドラインはあったほうが良いでしょう。 透明であることブログを書く際は本名を書き、何の仕事をしてい

デザイン

ウェブサイトの見た目に関する資料が欲しい

今日、なんとなくですが神森さん [http://www.t-studio.com/]とTwitter [http://twitter.com/] で会話が弾んだので、この場で共有しようと思います。 Webサイトはまったく同じ見た目である必要はない [http://www.yasuhisa.com/could/article/dowebsitesneedtolookexactlythesame/] という記事でも書きましたし、先月あった Web Directions East [http://east08.webdirections.org] でも挙った話題ですが、ウェブサイトの見た目を全く同じにする必要はない(もしくは出来ない)という部分を制作側から超えたところでも共有出来るようになるとどうなるだろうとよく思います。見た目は重要ですし、レイアウトが崩れていては意味がないです。しかし、1ピクセルの違いの調整に苦労するよりかは、より良いブラウザに対してはさらなる上の体験を提供することの配慮を行ったほうがウェブサイトとしての質が高いと思います。そして、情報が受け手によって自由にコントロー

イノベーション

Shift2で不況とイノベーションについて話しました

撮影: 飯田昌之 [http://www.masazo.net/]先日 CSS Nite のスペシャルイベント Shift2 [http://cssnite.jp/shift/shift2009/] が、デジタルハリウッド東京本校で開催されました。CSS Nite にはよく講演させていただいているイメージがありますが、実は今回のが今年で最初で最後でした。当初はスピーカーとして参加する予定ではなかったのですが、20分の講演をさせていただきました。今回は「 reset.css: 不況が生み出す新たなウェブの可能性」で不況とイノベーションの関係について話をしました。 元々コードを表記するなど、今すぐ使える Tips について語ることが少ないですが、今回が今までの中で最もウェブデザインから遠ざかったところからウェブデザインの仕事について語ったプレゼンだったと思います。実践的な話が多い CSS Nite で、実践的ではない話をするのはチャレンジでしたし、僕としても今までとは違った切り口で話したという意味でもチャレンジでした。「不況」は毎日の仕事に直接関係ないかもしれませんが、今までのようには

UI

サイト制作に便利なOmniGraffleステンシル

制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle [http://www.omnigroup.com/applications/omnigraffle/] で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版 [http://www.omnigroup.com/applications/omnigraffle/provsstandard/] ではプレゼンテーションモードがあるので、出先で OmniGraffle を使

UI

iPhoneから学ぶユーザビリティの極意

iPhoneは、今までとは少し違った使い方や考え方を必要とするデバイスです。Appleらしい使いやすくするための工夫が随所見られますが、だからと言って万人受けするわけでもありませんし、僕のような Mac 使いとそうでない方とでは iPhone の捉え方は随分違います。Create with Context [http://createwithcontext.com/]はデザインリサーチを行っている会社で、iPhone 3G が発売された夏頃に iPhone のユーザーテストを行ったそうです。その結果は SlideShare に掲載されている「How people really use the iPhone [http://www.slideshare.net/createwithcontext/how-people-really-use-the-iphone-presentation/] 」で読むことが出来ます。 iPhoneを聞いたことあるけどほとんど触ったことない方や、聞いたことなくて初めて使う方など、僕のようなヘビーユーザー以外を対象に行われたこの調査。タスク別に調査やインタビ

サービス

Twitterを使った社会活動

様々な使い方や機能をあらかじめ提供している他サービスとは異なり、Twitterは大変シンプルなサービス。こうした機能を最小限に削ぎ落としたサービスは「こういうことが出来る」という明確な使い方が提示しにくい故、使い始めに苦労する場合もあります。明確な使い方がないのは同時に、工夫次第で使い方はいろいろあるわけです。英語圏で利用している方は多いので、リーチ出来る数も多いですし、ほぼリアルタイムでの対応が出来ることから、口コミやサポートのツールとして Twitter アカウントを持っている方も少なくありません。 また Twitter API を利用することで、具体的な使い方を提示出来るサービスをつくることも可能です。先月の Web Directions East [http://east08.webdirections.org/] で講演した Dan Cederholm [http://simplebits.com/] も Twitter API を使って Foamee [http://foamee.com/] というサービスを立ち上げています。サービスの機能や仕様に利用者が合わせるので

アート

想像の世界の地図まとめ

小中学生の頃だったでしょうか。漫画のキャラクターやイラストなどいろいろ描いていた時期でしたが、なぜか地図もたくさん描いた記憶があります。地図を描きながら自分の創った世界を膨らまして楽しんでいました。今でもファンタジー系の地図とか見ているとワクワクしてくるわけですが、今回はそんなファンタジーな世界の地図を幾つか紹介します。こういうのを見ていると、昔からバーチャルな別世界はたくさん存在していたことが分かりますね。 小説など文字の世界を地図として可視化しているという意味でも、想像の世界の地図は非常に興味深いです。 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

OSX

ヘルプメニュー検索を使って楽々選択

アプリケーションの起動や簡単な操作、そしてファイルナビゲーションは QuickSilver [http://code.google.com/p/blacktree-alchemy/] で問題ないですが、各アプリケーションでの詳細な操作をするにはあまり適していません。例えば Photoshop のように何階層もメニューがあるアプリケーションは大変です。QucickSilver でも、Proxy Object [http://wakabamac.blog95.fc2.com/blog-entry-455.html] と組み合わせることによって、なんとなくメニューを辿ることが出来ますが、使い勝手が良いともいえないですし、可能な限りビジュアルで操作したいところです。 Mac OSX Leopard で実装された数々の機能 [http://www.apple.com/jp/macosx/features/300.html] の中で結構使えるのが、ヘルプメニューの検索です。これは起動しているアプリケーションに特化した検索で、「Cmd⌘+? 」で呼び出すことが出来ます。ヘルプファイルの検索だけで

google

Gmailのテーマ機能とGoogleブランドについて

ウェブサイトにおいて機能やページの表示速度と同じくらいビジュアルデザインは重要ですし、ビジュアルデザインがより良いユーザー体験の提供に繋がることもあります。以前 Googleのデザインガイドライン10項目 [http://www.yasuhisa.com/could/article/google-design-guideline/] を紹介したことがありますが、この中に「魅力的」「美しい」といったビジュアルデザインに関係したキーワードがあるのは気になりますね。Google はビジュアルデザイン以外の部分(例えばシンプルさやスピード)を徹底的に追求することで高いユーザー体験を提供しているサービスというイメージがあります。 しかし、そういったイメージを覆すかのように、ここ 1,2年はビジュアルデザインにも力を入れていますね。例えば Analytics [http://www.google.com/analytics/] や Docs [http://docs.google.com/] のビジュアルはミニマムではありますが、非常に洗練されていて魅力的です。先週 Gmail が複数のテー

イノベーション

ゲームという名のサービスのあり方

オンラインゲームというと、ここ10〜15年くらいに出てきたように思えますが、実は30年という長い歴史があります。MUD [http://en.wikipedia.org/wiki/MUD] というテキストベースのオンラインゲームが登場したのが、1978年。パソコン上でしか体験出来なかったオンラインゲームも今はコンソールでも遊べるようになりましたし、ケータイをはじめとしたモバイルデバイスからも可能です。歴史は長いとはいえ、ゲームプレイに関していえばイノベーションの余地はあるでしょうね。 ゲームプレイや世界観など、ゲームそのものへの開拓の余地はもちろんありますが、オンラインゲームではそれ以外の部分でいろいろ模索出来る部分があります。今、オンラインゲームと言われて連想される種類のゲームだけでなく、ネットに繋げることが出来るゲームであれば、ゲームの遊び方だけでなく、ゲームという名のサービスの提供方法も変わってくるのではないでしょうか。そのヒントになるのが、もう10年くらい前に出たゲーム「 Starcraft [http://www.amazon.co.jp/exec/obidos/ASIN/