Yasuhisa Hasegawa - Yasuhisa Hasegawa (Page 40)

Designer meets Designers 03 で話します

MdN が web creators conference の後継として去年から始めている Designer meets Designers [http://www.mdn.co.jp/webcre/d2/]。毎回異なるテーマを扱って幾つかのセッションで構成されています。来月になる 5月9日金曜日に行われるイベントのテーマは『Web標準』。デジパ [http://digiper.com/]の加藤さん、ミツエーリンクス [http://www.mitsue.co.jp/]の木達さん、IMJ [http://www.imjp.co.jp/]の山本さんという蒼々たるメンバーが Web標準について語りますが、その中に僕も混じっております。東京で何か話すのは1年ぶりですね。こうしてまた話す機会があるというのは嬉しいではありませんか。当初、「Web標準最新事情について話していただきませんか」というところからスタートしたわけですが、HTML5 [http://www.w3.

考え方

1998〜2008

could という名でサイトを始めたのが 1998年4月16日。今日でちょうど 10年になりました。さすがにあの頃からこのサイトを見ている方は少ないでしょうけど、今とはかなり違う内容でした。個人的な日記だけでなく当時よく描いていたスケッチやペインティングも掲載していました。今やどんどん個人的な内容がなくなって仕事関連が中心になってるので雰囲気も全然違いますね。もちろん当時はバリバリテーブルデザインで時にはフレームも多用してました。ちなみに4月16日に書いた日記はこんなかんじ。 > 今日は一週間ぶりに歴史の授業に出た。この授業はチャングという中国人教授が教えてくれる。いつもダイナミックなしゃべりだ。疲れないのだろうか。彼の英語は中国語なまりのせいか解かりづらい。話しも中国のことばかりで授業が進まないことがある。最初は文章だけのシンプルな構成の日記も、99年くらいから右のようなレイアウトが凝ったものも登場しました。書いているテーマによって異なるレイアウトを作ってそれに文章を載せていたわけです。当然のことではありますが、当時は CMS なんてありませんから、アーカイブも手動で日記も全部手

デザイン

ヤコブ博士が考える４つの悪いWebデザイン

10年以上経った今でもユーザービリティに関する興味深い記事を Web上に掲載しているヤコブ博士 [http://www.useit.com/]。今回は「 Four Bad Web Design [http://www.useit.com/alertbox/bad-design.html] 」というシンプルなタイトルで悪い例を４つ挙げています。Web designers don’t do what I told them to do 13 years ago (13年前に言ったことを未だに出来やしない) と少々強めのトーンで始まるこの記事。もちろん、人ごとだと思って笑えない深刻な問題でもあります。以下にヤコブ博士が見つけた４つの悪い例を挙げつつ僕の見解を書いていきます。悪いコンテンツデザインと関係ないと思ったら大間違い。デザインは文章から始まるといっても良いです。魅力的な見た目であろうが、正しくマークアップしてようが、文章がおかしかったらすべて台無しになります。ヤコブ博士が出している例では必要な情報がないときがあると訴えていますが、あったとしても文章が伝わり難かったり回りくどか

microformats

セマンティック・ウェブ検索の現在

セマンティック・ウェブ [http://ja.wikipedia.org/wiki/セマンティック・ウェブ] はひとつの理想論であって現実にはほど遠いと考えていた時期がありましたが、徐々に形になってきているようです。簡易なかたちであれば、セミナーで話したこともある Microformats [http://microformats.org/] がありますし、Social Graph [http://www.yasuhisa.com/could/article/socialgraph-hconnect/] もその一環といえるでしょう。数年前に比べると随分 RDF やメタデータも増えてきているわけですが、それらを効率的に検索したり、オントロジーを利用して情報をつなぎ合わせるツールや、使いやすいインターフェイスをあまり見かけません。どうせなら hConnect [http://flickr.com/photos/yhassy/sets/72157594321694651/] のようなものを誰か作ってほしいわけですが、こうした夢の話ではなく、実際に使うことが出来るセマンティック・ウェブ

動画

言葉なしで伝わる CM いろいろ

Axe: Pulst [http://www.youtube.com/watch?v=B8GS_npw4jg]ドキドキするってすごいWWF. Beautiful Day [http://www.dailymotion.com/video/x510hj_wwf-beautiful-day_creation] 音楽と映像のミスマッチでメッセージ性を強めていますMTV Arabia [http://www.youtube.com/watch?v=8rblGc8hfIw] お国柄が出ているけど結局 MTV らしいところが良いPhilips: Paquera de Bêbado… [http://www.youtube.com/watch?v=kZHj4pY0rmw]オチがすべてLenovo. Facial Recognition [http://www.youtube.com/

ダウンロード

Bad Usability Calendar 日本語版

[http://www.flickr.com/photos/yhassy/2401906134/]2005年からノルウェーにある Netlife Research [http://www.netliferesearch.com/]が「Bad Usability Calendar [http://www.badusability.com/]」という PDF を配布しています。ユーザビリティの観点でやってはいけない 12項目を毎年用意して広くユーザビリティの重要性を訴えているそうです。始めた年はノルウェー語しかありませんでしたが、年々翻訳が増えて今年は 13カ国語になっています。実は数週間前にこのカレンダーの日本語訳をつくって提出したんですよ。そしたら最近ダウンロード出来るようになりました。ちょっと文字の配置がおかしいですが、使えないことないです。A3 か A4 の紙に印刷出来るようになっており、自分のデスクの近くや会議室に貼っておくことも出来そうです。話しのネタにはなりそうなので、ぜひどうぞ。ミコちゃんもユーザビリティくらい知っていると言っています。

ゲーム

オンラインゲーム開発のチェックリスト11項目

今も時間があるときに遊んでいる [http://matatavi.com/travel/show/yhassy/601] World of Warcraft [http://www.worldofwarcraft.com/index.xml] 。このゲーム自体がおもしろいというのもありますが、オンラインゲームには独特の魅力があると思います。それは単にゲームとして遊ぶ以上の何かがありますし、Webという共通項があるので学ぶことも多く存在します。いずれオンラインゲームをネタにしてじっくり話をしてみたいですが、それはまた今度ということで。 World of Warcraft を開発している Blizzard [http://www.blizzard.com/us/] は、他にも数多くの良質ゲームをリリースしているところで定評があります。Blizzard のイノベーションの秘密は何でしょうか。11 innovation lessons from creators of World of Warcraft [http://innovation.freedomblogging.com/

IA

リンクタイプの構成案

可能な限りフィードバックを得れるような状態にしながら、徐々に方向性を固めて組み立てれるように複数のサイクルで構成されたプロセス [http://www.yasuhisa.com/could/article/multiple-cycle-process/] を提案しました。今回はその第一弾である「リンク」タイプのデザインに取りかかろうと思います。リンクは「クラフトっぽいアート作品いろいろ [http://www.yasuhisa.com/could/links/craft-art/] 」のようにゆるいテーマがあるかもしれないですが、リンクが羅列しているようなエントリーのことを指します。このタイプのエントリーはあまりブックマークもされることもなく、どちらかというと検索からくる方のほうが多いです。サイトへのロイアリティもあまり高くないので、最近のエントリーやタグリストなどといった全体像が分かるものを省いて、読者が必要しているものをはっきり見せることが必要とされるタイプになります。リンクタイプはイントロダクションのような文章もない単純なリスト（ <dl> で記述）なので、文体も統一されてい

テクノロジー

2020年のヒューマンインタラクション

コンピュータと人間の関わりはここ10年で急激に変わってきています。10年前は１人に対しパソコンという 1台のコンピュータがあるだけでしたが、今はそれだけでなく携帯電話をはじめとした小さなコンピュータを 2,3台持つようになっています。そしてこれからはさらに多くのコンピュータを１人の人間が扱う社会になると言われています。その一例がもうすぐお目見えする Microsoft のSurface [http://www.itmedia.co.jp/news/articles/0804/03/news019.html] でしょう。携帯電話を置くだけで、自分に関連した情報とインタラクションすることが可能になります。つまりキオスクのように単に情報が一方的に流れているコンピュータでなく、いつでも何処でもどのデバイスでも簡単なインプット（Surfaceでは携帯電話を置くだけ）で自分のデータにアクセス出来るようになるわけです。ときにはWebと接続されたコンピュータの可能性もあるので、写真屋にあるデジタルプリントのキオスクも将来的には Flickr や Picasa から直接プリントなんて可能性も出てく

apple

Quick Look でビジュアルブラウジング

Mac OS X Leopard から実装された新機能 Quick Look [http://www.apple.com/jp/macosx/features/quicklook.html]。スペースバーか Cmd+Y で素早くファイルの内容が見ることが出来、iWorks さえ入っていれば MS Office がなくても .doc や .xsl ファイルをプレビュー出来るので大変便利です。Plugin をインストール [http://www.qlplugins.com/]することで Quick Look で見れるファイル形式を増やすことが出来るので、アプリケーションを開かなくてもほとんど Quick Look で済ませることが出来ます。あまりにも便利なので Quick Look を使ってフォルダ移動を快適に出来ないか模索してみました。 Quick Look の操作は

openwebdesign

ブログの向こう側にある会話を追う

この記事は「ブログでの会話を見えるようにするには [http://www.yasuhisa.com/could/article/blog-conversation/]」の続きにあたります。従来オンライン上の会話は一元化されていました。例えばフォーラムや掲示板で会話を始めるためのネタが挙り、それに対しての反応がその場に連なっていました。ブログが使われるようになると、フォーラムでの会話だけでなくブログを中心とした会話もスタートしました。簡単にブログを設置することが出来るので会話が一カ所ではなく数多くの場所で発生するようになったものの、ブログにあるコメントやトラックバックによってなんとなく繋がり合っていました。また、 Technorati [http://www.technorati.jp/]やGoogleブログ検索 [http://blogsearch.google.co.jp/] を利用してある程度、会話を追うことも可能です。しかし、現在はさらに会話を追うのが難しくなってきています。今はブログより気軽に自分の意見を書き込む場所が数多くあります。Livedoor クリップ [http

セミナー

VCもエキサイティングな仕事だ

先月 [http://www.yasuhisa.com/could/diary/meetup-february2008/]に引き続き、百式の田口さん [http://www.100shiki.com/] が主催の勉強会に参加してきました。今回はエンジニアの方、アニメーター、企画やプロデュースをしている方など10人くらいが集まりました。ベンチャーキャピタル [http://ja.wikipedia.org/wiki/ベンチャーキャピタル] (VC) の方に基本的なことを教えていただいたり、質問や疑問に応えていただくという形式で、前回より勉強会の色が濃かった集まりでした。短い時間ではありましたが、VCの特徴やビジョン、そして VC と組むときに気をつけること、逆に VC が投資をするときに気をつけていることなど貴重な話を聞くことが出来ました。「知らない」「分からない」という感覚が「怪しい」や「不安」に繋がってしまうことがあります。これは様々なことにいえることで、今回勉強会に行く前に VC に対して抱いていた感覚も (ほとんどステレオタイプかもしれませんが) そういうところが多少あったと

wasp

Web標準に関する良書を教えてください

Web Standards Project [http://webstandards.org/] は、今でも Adobe Task Force [http://www.webstandards.org/2008/03/10/announcing-the-adobe-task-force/] を立ち上げるなど、Web標準を考慮したサイト作りが出来る環境をつくるために様々な活動を行っています。その中で興味深いのがWaSP Street Team [http://streetteam.webstandards.org/]。図書館や学校にある古い書籍にこっそり URL 入りの栞を忍び込ませて草の根的な活動をするというちょっと変わったプロジェクト。本当にやっている方 [http://www.flickr.com/groups/wasp-streetteam-bookmarks/pool/] もいるみたいですが、同僚や同業種の友達に渡すちょっとしたアイテムにもなりそうです。春ですし、新入社員に渡すということも出来そうですね今のところ洋書のリスト [http://streetteam.web

セミナー

湯川鶴章さんの勉強会へ行ってきました

[http://www.flickr.com/photos/yhassy/2366851274/]前回ポッドキャストで対談した [http://www.yasuhisa.com/inflame/show.php?s=118]安田さんからのお誘いで、AMN [http://agilemedia.jp/] 共催の広告代理店や企業のマーケ担当の方向けの勉強会 [http://agilemedia.jp/blog/2008/03/post_58.html]に参加してきました。Webマーケティングに関して鋭い視点をもつ湯川鶴章さん [http://it.blog-jiji.com/0001/] の生の声と最新事情が聞けた貴重な時間でしたが、広告に携わる方が大半を占める中で、彼らの言語や視点を体感出来たという意味でも有意義な時間でした。先月あった百式の田口さん主催の勉強会 [http://www.yasuhisa.com/could/diary/

視覚化

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

ネットを利用した様々なコミュニケーションツールがありますが、生活や仕事で最も使われるのがＥメールだと思います。スパムメールを含めると本当にたくさんのメールが行き来しています。 About Email [http://email.about.com/od/emailtrivia/f/emails_per_day.htm]によれば 12億人がＥメールを利用しているといわれています。2006年には 1830億通のメールのやりとりが毎日行われていたそうです (そのうちの7割はスパムという悲しい事実もありますが)。今回は身近な存在であるＥメールを視覚化しているツールをいろいろ紹介。テキストベースのＥメールがいろいろな形に変化していておもしろいです。 3D Mailbox [http://www.3dmailbox.com/]メールのやりとりをバーチャル空間で見せるという凝ったメールソフト。個人的にゾンビ版 [http://www.3dmailbox.com/snapshots/level03/index.html]を使ってみたいですMountain [http://alumni.media

IA

サイドバーの行方

サイドバーはブログが広まる前から存在していたコンポーネント。メインコンテンツ以外の情報を上部に載せることが出来るので、多くのサイトでサイドバーが採用されています。実装も簡単に出来ますし、３カラム、４カラムと増やすことも出来るわけですが、実装の敷居も低いのでただの賑やかしになってしまいがちの部分でもあります。情報の配置の仕方によって、情報が活かされるときもあれば、そうでないときもあります。サイドバーもメインコンテンツ以外の情報を放り込む場所ではなく、的確な情報が載る場所として扱わなくてはいけません。ブログのサイドバーで必要なものサイドバーによくある情報は * 最近のエントリーリスト * 最近のコメントリスト * アーカイブリスト * カテゴリリスト * タグクラウド * Feed をはじめとした購読ボタン * ウィジェット諸々アクセス解析やサイトコンセプトによってサイドバーの使い方も変わってきます。このサイトは Feed は多くの方に登録されていますが、サイトまで訪れる方はその中のわずかな数ですし、エントリーによってアクセス数も数倍違うこともあります。よって、情

google

Google のデザインガイドライン10項目

以前 Google の UX プロセス [http://www.yasuhisa.com/could/article/google-ux-process/] というエントリーで、Google が考えるユーザー体験を向上するための対策を紹介しました。Google のような数多くのサービスを運営している大企業でなかったとしても、参考になる項目が幾つかありましたが、先日 Google Operating System で Google’s Design Guidelines [http://googlesystem.blogspot.com/2008/03/googles-design-guidelines.html] という記事が掲載されました。Google アプリケーションのユーザー体験を担当する Jon Wiley 氏が WritersUS Conference [http://www.writersua.com/ohc/track1.htm#

データを一望出来るダッシュボードいろいろ

特定のデータを詳しく分析したいという要望もあると同時に、全体を見渡して傾向を把握したいときもあります。そういった場合、ダッシュボードがトップページとして表示されることがあります。様々な種類のデータやコンテンツが一望出来るという意味では iGoogle をはじめとしたウィジェット（ガジェット）を使ったサービスもダッシュボードの一種といえるでしょう。ダッシュボードも見せ方はいろいろあって、様々なサービスをみると参考になります。 ClubReady [http://www.clubready.com/management.asp]フィットネスクラブ管理ツール。ブログ [http://www.clubreadyblog.com/]のほうでスクリーンショットが見れますCapital One Card Lab [http://capitalone.com/cardlab/]見た目も優れていますし、横のステップが見えるインターフェイスも良いですねGoogle Sites [http://sites.google.com/a/altostrat.com/project-eggplant/Home

仕事

Find Job! にインタビューが掲載されました

Find Jobs! ではクリエーターを目指している方に向けたインタビューコンテンツ『生業』を毎月掲載しています。有名な方や知っている方も出ているこのシリーズですが、今回僕のインタビューが掲載されました [http://www.find-job.net/support/nariwai/09.html] 。インタビュー自体は約１時間あり、いろいろ話した記憶がありますが、いい感じに短くまとめられています。なぜこの仕事を始めたのかといういきさつも少々書いてあります。こうしてインタビューといて掲載されていると、よく考えていたようにみえなくもないですが、結構行き当たりばったりの部分が多かったりします、はい。インタビューでは今までブログで書いてきたところを断片的にして話しているところがあるので、このサイトを読んでいただいている方にとっては総集編のように見えるかもしれませんね。たぶん以下のエントリーと合わせて読むと分かりやすいと思います。 * Webデザインへの理解を深める [http://www.yasuhisa.com/could/entries/001210.php] * Webと

openwebdesign

複数のサイクルで構成されたプロセス

ブログエントリーをタイプ別に振り分け、どのような読者がサイトを訪れているのか漠然的ですがみえてきました。そして、ついにプロトタイプをそろそろ作って行くという段階に近づいて来たわけですが、ここでプロトタイプからテスト、もしくは公開までの進め方を紹介していこうと思います。通常、上図のように分析、プロトタイプ、デザイン、コーディング、テストというプロセスが順に行われます。それぞれのフェーズにサイト全体を考慮しつつ進めて行くわけです。このプロセスは多くのサイト構築に使われていますし、特に問題もないと思いますが、別の方法も考えられます。特に様々なタイプのページが存在するところだと、全体を一気にデザインしたりコーディングするのではなく、細分化して進める方法もあると思います。こうした進め方をするメリットは幾つかあります。 * 一部の機能やページに特化するのでフォーカスしやすくなるだけでなく、ビジョンの共有もしやすい * ひとつひとつ組み立てていくことで全体的な方向性も見えて来る可能性がある * 先に行われたサイクルが次のサイクルを進めて行く上で参考になるので、より洗練されていく *

MacBook Air の入れもの

PowerBook G4 12 inch を持っていたときは、それにピッタリはいるバッグのようなものがあったので愛用していたのですが、MacBook Air [http://www.yasuhisa.com/could/review/macbookair/] にしてから、そのバッグが形に合わせないので使わなくなりました。なかなか「これ！」というものが見つからず、結局保護するためのケースがないまま持ち歩いています。とはいうものの、そのまま持って行くのは嫌なので文房具屋やコンビニで買うことが出来る A4書籍用の角形2号の封筒に入れて持ち歩いていました。見た目はどうかと思いますが、とりあえず保護してくれているのでそのまま使っているわけですが、打ち合わせに持って行くと「あーあの CM [http://www.apple.com/jp/macbookair/#ad] の真似してるのね」と言われて笑いのネタになることもしばしば。どうせなら CM のと同じのほうが良いのに中途半端に真似しているようで余計微妙というか・・・（笑そんな中 CSS Nite [http://cssnite.jp

IA

今時のプロトタイピング

この記事は「PowerPoint を使ったプロトタイピング [http://www.yasuhisa.com/could/article/powerpoint-prototyping/]」の続きにあたります。ページベースの Webサイトを制作するのであれば、多くの方が利用出来るということも含めて PowerPoint [http://office.microsoft.com/ja-jp/powerpoint/default.aspx] や Keynote [http://www.apple.com/jp/iwork/keynote/] といったプレゼンテーションアプリが最適だといえます。しかし、Ajax や Flash を利用したページを移動することなくデータにアクセスするサイトや Webアプリケーション、ショッピングサイトのような会員/非会員によって異なるコンテンツやフォームを必要とするサービスでは、ページベースで Webサイトを考えるのは困難です。ユーザーテストをする際も PowerPoint や Keynote では難しい場合もあるでしょう。共に高度な描写が可能になり見た目

IA

拡張性のあるデータ配置を模索する

そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。下の図はページを大まかに4つに別けて、異なる配置を考えたものです。 ※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。ナビゲーションサイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多いコンテキスト / データセット現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。

powerpoint

PowerPoint を使ったプロトタイピング

プロトタイプを作るソフトウェアは Visio [http://office.microsoft.com/ja-jp/visio/FX100487861041.aspx] のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 [http://office.microsoft.com/ja-jp/powerpoint/default.aspx] がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー [http://www.microsoft.com/expression/events-training/globalevent/player/Defa

google

Google の UX プロセス

今では小さなチームによるアジャイルソフトウェア開発はそれほど珍しくはないですが、Google は随分前からそれを実践している企業のひとつです。よりよいものを作ることであれば、時には今まで辿って来た道も変えてしまうこともあるダイナミックな環境でどのようなプロセスが存在するのでしょうか。 David Sherwin さんのブログ [http://changeorder.typepad.com/weblog/2008/03/secrets-of-ux-d.html]で、Google のユーザーインターフェイスデザイナーである Jake Knapp さんのセッションに関するレポートが掲載されています。 Knapp さんのセッション内で、ダイナミックに変わる環境化の中で、よりよいユーザー体験をもったサイトを構築するための8の対策を紹介したそうです（細かく別けると全部で17）。以下に簡単にですが紹介しておきます。確固たるプロジェクトの基盤をもつチームが小さい分、フォーカスしなければならないプロジェクトのもつ影響力は？他のプロジェクトではなく、それを選ぶ理由を考えるビジネスインパクトを知るU