Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
ゲーム

ウェブブラウザとオンラインゲームの今後

数年前からオフィス系のソフトウェアは次々とWebブラウザ上で扱えるようになってきましたが、ゲームも似たような状況になりつつあります。Flashゲームのような小さなゲームは以前からブラウザで遊べましたが、 MMORPG [http://ja.wikipedia.org/wiki/MMORPG] のようなスケールの大きいゲームもブラウザへ移行しつつあります。ユーザー数が多いゲームで有名なのが RuneScape [http://www.runescape.com/]。サービスが立ち上がった 2001年当初はポリコンそのままのグラフィックでしたが、今では高画質でフルスクリーン表示も可能です。アクティブユーザーは何人か分かりませんが、850万アカウントあると言われています。 ブラウザベースの MMORPG は他にも Free Realms [http://www.freerealms.com/] があります。どちらかというとコミュニティサイトですが、Club Penguin [http://www.clubpenguin.com/] もオンラインゲームといえます。いずれもコンソールゲーム
未来

IDEOが考える教育の姿

新しいビジネスが必要とされているのと同じように、教育においても21世紀という時代に合った形が必要とされています。教育は常に変化し続けていますし、必要とされていることと言っても様々な視点があります。 IDEO [http://www.ideo.com/]の考える未来の教育の姿はどういったものなのでしょうか。「IDEO’s Ten Tips For Creating a 21st–Century Classroom Experience [http://www.metropolismag.com/story/20090218/ideos-ten-tips-for-creating-a-21st-century-classroom-experience] 」で10の項目に別けて解説しています。以下に簡単に要約したものをリストアップしてあります。いかにも IDEO らしいリストといったところでしょうか。 押しではなく引く生徒からたくさんの質問が生まれるような環境をつくる関連性を持たせる教えているコンセプトを直接体験し、話し合えるようにする ソフトスキルと呼ぶ時代ではない クリエイティビティや
アート

フラクタルいろいろ

Jenn3d [http://www.math.cmu.edu/~fho/jenn/] フラクタルを描くことが出来るソフトウェア。Windows/Linux/Mac で動かせるだけでなく、ソースコードもダウンロード出来ますNaturally Occurring Fractals [http://www.miqel.com/fractals_math_patterns/visual-math-natural-fractals.html] 自然界にあるフラクタルを幾つか紹介George W.Hart [http://www.georgehart.com/] フラクタルの彫刻作品が幾つか掲載されていますJulius Ruis [http://www.fractal.org/Julius-Ruis-Gallery/Index-Gallery.htm] フラクタルを幾つか見れますが、自分で作れる「Fractal Imaginator (Windows)」のダウンロードも出来ますManny Lorenzo [http://www.
google

簡単にコンテンツが最適化されているかを見る方法

サイト運営側が「こうみられたい」と考えて作ったコンテンツでも、実際は異なる捉え方をされている場合があります。外からどのように捉えられるかを調べる方法のひとつとして Google のウェブマスターツール [https://www.google.com/accounts/ServiceLogin?service=sitemaps&hl=ja] があります。サイトがインデックスされているか、そして検索結果にどのように表示されているのか、調べることが出来ます。取得出来る幾つの情報の中に「上位の検索クエリ」という統計があります。 統計データは２つの順位表に分かれています。左側がサイトのページの表示に最も多く使用された検索クエリ。そして右側が実際のクリックに繋がったクエリになります。地域や検索の種類、そして期間で絞り込んだ結果を出すことも出来ます。サイトに記載されているキーワードがランキングで表示されているので、利用者からみたサイトのイメージを漠然と捉えることが出来ます。このデータから２つの可能性と対策が考えられます。 * これらがあなたのサイト (もしくは企業サイト) を象徴するキー
OSX

Grapeを使って散らかったデスクトップを整理

Canvas for OneNoteの感覚的な情報整理 [http://www.yasuhisa.com/could/article/canvas-for-onenote/] というエントリーで、自動ではなく手動による情報整理の可能性を紹介しました。Canvas は、OneNote 限定ですが、BumpTop [http://bumptop.com/]のようにデスクトップ上のファイルを手動で整理出来るアプリケーションもあります。BumpTop のような３Dにすることで、ファイルを配置する平面がさらに３つ増えます。マウスで操作するには少々効率が悪いですが、機械的なソートでは整理出来ない情報整理の提案しています。 こうした手動による情報整理が出来るソフトで最近見つけたのが Grape [http://tayasui.com/Grape.html] です。Mac OSX で動作するこのアプリケーションを使えば、仮想のデスクトップ上でファイルを自由に整理・検索が出来るようになります。手動と自動によるファイル整理をバランスよく行えるという意味でお勧めです。 仮想デスクトップの広さはスクリーン
コンテンツ

コンテンツを活かすためのサイト制作

ウェブサイト制作の仕事をしているとはいえ、サイトの情報構造やインターフェイスについて考えているだけではありません。どのようにしてサイトにコンテンツを掲載するのか、それらをどのように管理していくのか、なぜそのコンテンツをサイトに掲載する必要があるのか検討しなければいけません。クライアントによっては掲載したいコンテンツが漠然であったり、壮大な場合があります。クライアントのニーズに応じて、CMSに頼る部分を検討する必要もあります。ウェブの媒体を活かした戦略はあるので、それがどういったものか、専門用語も含めて解説を行ったり、フィードバックをするプロセスがあります。 これがデザイナーの仕事なのかといえば、違うのかもしれません。私が好んでこうしたやりとりをクライアントとしているのは、デザインをするための材料であり、中心的存在となるコンテンツについて考える時間に参加して調整が出来る点にあります。ウェブサイトは立ち上がったので終了というより、立ち上げてからどうサイトを成長させるのかが重要です。最初の段階でクライアントとコンテンツについて考える時間を設けることは、同時に立ち上げた後のプランも立てやすい
UX

お勧めのオンラインコラボツールいろいろ

基本的なコミュニケーションはメールやチャットといった文字情報のみで出来ますが、ビジュアルに関する考えを共有する場合、文字だけでは難しいです。スクリーンショットに手軽に情報を入れたり、スクリーンキャスト (動画) を作るツールが充実してきたので、ビジュアルを共有するのも難しくなくなってきました。絵を見せて意見を交換するというやりとりだけならメールでも難しくありません。しかし情報共有したり、共同作業をしたいと考えると、オンラインツールが最適です。今回はウェブサイト制作に役立つオンラインでコラボレーションを可能にするツールを幾つか紹介します。 Protonotes [http://www.protonotes.com/]以前builder.comの記事 [http://builder.japan.zdnet.com/member/u514743/blog/2008/11/21/entry_27018103/] として紹介したことがありますね。ウェブサイトに JavaScript のコードを埋め込むだけで、どのサイトにも付箋を貼付けることが出来るサービス。使う側は会員登録やプラグインを必要と
IA

効果的なプロトタイプを早く作るコツ

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意するよく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用 [http://www.yasuhisa.com/could/roundup/graffletopia/]とPowerPoint用 [http://www.yasuhisa.com/could/article/powerpoint-prototyping/]を利用すると手軽です。 テンプレートを用意するOmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成すること
インターネット

企業がTwitterをするべきではない10の理由＋

海外では Twitter をカスタマーサービスや利用者とのコミュニケーションツールとして利用しているところが増えてきています。自動車メーカーではFord [http://twitter.com/scottmonty]、GM [http://twitter.com/gmblogs]、Honda [http://twitter.com/Alicia_at_Honda]。スポーツだとChicago Bulls [http://twitter.com/chicagobulls]、San Diego Chargers [http://twitter.com/chargers]。他にもComcast [http://twitter.com/comcastcares]、 Travel Channel [http://twitter.com/travelchannel]、DirecTV [http://twitter.com/DIRECTV]、Best
UI

変わりゆく「保存」の存在

アプリケーションに必ずあるコマンドのひとつに「保存」があります。このメタファーとしてフロッピーディスク [http://tinyurl.com/2xnvon] が長く採用されています。採用された当時は「フロッピーディスクのアイコンがあるから何かを記録するものだろう。よってこれは保存するという意味だ」と関連づけすることが出来たと思いますが今はその逆で「保存をするには、このアイコンをクリック」という認識になっているかと思います。 フロッピーディスクが姿を消してしばらく経ち、知らない人も多いのにも関わらず、このメタファが使われ続けられているのも、ひとつの理由として、アイコンが意味を示すものではなく、意味を示すためのアイコンになり、広く認知されているからかもしれません。 Office 2007 [http://www.amazon.co.jp/gp/product/B001GCUTW0?ie=UTF8&tag=could-22&linkCode=as2&camp=247&creative=7399&creativeASIN=B001GCUTW0]
OSX

SousChefでレシピ管理がしたい

MacHeist 3 [http://www.macheist.com/] にはウェブサイト制作にや役立ちそうなアプリケーションが幾つかありますが、違う系統で興味をひいたのが SousChef [http://www.acaciatreesoftware.com/] というレシピ向けのアプリ。単にレシピを書き込んで整理するだけでなく、材料を買ったり作るときに便利な工夫が幾つかなされています。 レシピに書き込まれた材料の分量は人数分 (yield) を変更することで自動的に変化するようになっています。アメリカ製のアプリなので用意されている単位が oz や gallon と分かり難いですが、こうした単位も自分で加えたり、自分のオリジナルの単位も作ることが出来ます。ひとつの材料がなくても、他の材料でどうにかなる場合がありますが、代わりになる材料のリストもあらかじめ作っておくことが出来、料理の際はあるもの材料で作ることも簡単に出来そうです。 買い物の際は、作るレシピを「Grocery Lists」へドラッグ＆ドロップすると、印刷可能な買い物リストを作ってくれます。ついでに料理とは別に必要
アイデア

開発合宿2009年3月号

既に百式さんのところで紹介 [http://www.ideaxidea.com/archives/2009/03/devcamp200903.html] されていますが、開発合宿に参加してきました。しばらく参加していなかったので、本当に久しぶりですね。サイドフィード [http://sidefeed.com/] の赤松さんと、読書メーターの赤星さん [http://akahoshitakuya.com/archives/516] との合計４名での合宿でした。開発合宿だからといって食事費を削ってはいかんですね。たっぷり良いもの食べた方が開発にも力が入るなと実感しました。珍しく２日間かなり集中して取り組むことが出来たのもよかったです。 もう2,3年前になると思いますが、「egoport」というブックマーク数やブログからのリンクをチェックするための1ページサイトを作ったことがあります。当時としてはまずまずなのですが、今回は iPhone に特化した別バージョンを作ることを課題にしました。 とはいっても、前と一緒のようにフィードをとってくるだけでは今では意味がないですよね。ブックマークサー
OSX

LittleSnapperで自分だけのサイトコレクション

昨日から始まった Mac のシェアウェアキャンペーン MacHeist 3 [http://www.macheist.com/] 。今回も魅力的なソフトが幾つかありますが、購入を迷っている方のためにお勧めのソフトを幾つか紹介していきます。1,2つくらい欲しいのがあれば十分元はとれるので購入を検討してみてはいかがでしょう。 Webデザインをしている方なら LittleSnapper [http://www.realmacsoftware.com/littlesnapper/] は入手しておきたいソフトのひとつです。スクリーンキャプチャが出来るソフトですが、特にウェブサイトのキャプチャするのに特化しています。私も今年のはじめから使い始めているのですが、今までコレクションする場所に困っていたスクリーンショットの数々が一カ所にまとまっていい感じです。 今見ているサイトをショートカットキーで撮ることが出来、ビューエリアだけでなくページ全体をキャプチャすることが出来るようになっています。キャプチャした際に自動的に URL を保管してくれるだけでなく、Webアーカイブとして保存もするので、万が
OSX

TextExpanderをAppleScriptで拡張

よく使うフレーズやコードをまとめて格納し、省略形ですぐ呼び出すことが出来る TextExpander [http://www.smileonmymac.com/TextExpander/] (日本語版 [http://tinyurl.com/cldtpw] )。特定のアプリケーションに依存することなく、スニペットを自由に使い回すことが出来るのが魅力です。例えばメールの署名も Gmail や Mail.app では設定せず、TextExpanderであらかじめ作っておきます。こうすれば、それぞれのメーラーで全く同じものを使えるだけでなく、他の場で使いたいと思ったときにもすぐに対応出来ます。僕の場合、署名だけでなく、住所や郵便番号、日付といった情報だけでなく、Get URL をスニペットにして特定の検索キーワードをすぐに探せるようにしたり、microformats や html/css のテンプレートなど仕事につかえるデータも格納しています。MobileMe [http://me.com]を利用して複数の Mac で同じスニペッツを使えるのも便利です。 中でも便利なのが、AppleScr
google

感性によるデザイン データによるデザイン

３年前に Doug Bowman [http://stopdesign.com/] が Google に参加したニュースを聞いたときは、意外な組み合わせだと感じると同時に今後どう Google が変化するのか楽しみになりました。彼がどのように Google に関わったかどうかは知りませんが、表に出る出ない関係なく様々なレイヤーにおいて影響を及ぼしたと思います。そして、先日 Goodbye Google [http://stopdesign.com/archive/2009/03/20/goodbye-google.html] というエントリーで Google を去ることになったと告げています。次どのような活動をされるのか楽しみではありますが、エントリー内には気になる部分も幾つかあります。 彼は文中で「エンジニアばかりの企業になると、問題をいかに処理 (engineering) するかが話の中心になる」と書いています。主観をすべて省いてデータから答えを探るアプローチ。Google はどの青が良いのかインハウスで決めず41種類の青を使って [http://www.nytimes.com/
シンプル

シンプルの本当の意味は何だろう

「シンプル」はデザイナーがよく使う言葉のひとつ。サイト構築をする際もシンプルにすることを考えることがあると思います。しかし、シンプルという言葉の使い方や捉え方は人によって異なる場合があります。要素や機能が絞られていていたり、色彩の使い方に対してシンプルと呼ぶことがありますが、それだけではありません。また、要素が多いからといって複雑ではなく、シンプルと考えられる場合もあります。シンプルとは視覚だけでは語られませんし、むしろ文脈や内面的なところから生まれてくる価値ではないでしょうか。 例えば mixi [http://mixi.jp/] をはじめとした SNS には様々な機能や情報がひとつのページに盛り込まれています。見た目は大変複雑ではありますが、毎日使っている方にとっては苦になりませんし、自分がやりたいことを自由に出来れば、そのサイトは「シンプルである」と表現するでしょう。機能が絞られていて、簡単そうにみえる Twitter [http://twitter.com/] も複雑 (分かり難い) になることがあります。いきなり「なにしている？」と訊かれても書き出せる方は多くないでしょう
UI

Canvas for OneNoteの感覚的な情報整理

Office Labs [http://www.officelabs.com/]では、Microsoft Officeの使い方を変えるかもしれない興味深いプロトタイプを幾つか公開しています。映像や画像だけのコンセプトもありますが、実際ダウンロードして使うことが出来るのもあります。情報の見せ方でありそうでなかったものが、 OneNote [http://www.amazon.co.jp/gp/product/B000JQJPUG?ie=UTF8&tag=could-22&link_code=as3&camp=767&creative=3999&creativeASIN=B000JQJPUG] 用のアドオンソフト「Canvas for OneNote [http://www.officelabs.com/projects/canvasforonenote/Pages/
IA

各プロトタイピングの長所・短所

ウェブサイト制作でもプロトタイプを作成する機会が増えてきたと思います。しかし、プロトタイプ一言でいっても様々な方法で作ることが出来ます。今まで 様々な種類のプロトタイピング [http://www.yasuhisa.com/could/?s=%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97] を紹介したことがありますが、どの方法を使った方が良いか迷うところです。短時間で作れるかどうかだけでなく、誰と共有するのか、変更がしやすいか、完成品とどれくらい近づけるのかなど考慮したい項目は幾つかあります。Adobe Dev Center の「Industry trends in prototyping [http://www.adobe.com/devnet/fireworks/articles/
アイデア

DreamweaverはCSから独立してもいいと思う

Dreamweaver [http://tinyurl.com/c22tzj]は、たくさんのウェブサイト制作者 [http://www.yasuhisa.com/could/roundup/ask-twitter-web-authoring/] が愛用しているソフトウェア。毎回バージョンが上がる度に目まぐるしい発展を遂げていますし、新しいバージョンのCSを買おうと思うひとつの要因になるキーソフトだと思います。私個人は Dreamweaver を使用していませんが、それでも使うメリットを感じますし、Dreamweaver ならではの良いソリューションも少なくありません。特に印刷向けのデザイナーがスムーズにWebに向けたデザインが出来るようにした功績は素晴らしいです。ウェブサイトを制作するのにかかせない存在ではありますが、同時に改善点も少なくありません。それは「Dreamweaver」というソフトウェアの存在そのものの見直しだと感じています。 2,3バージョンくらい前からですが、わざわざ Creative Suite というバンドルの中のひとつに Dreamweaver が必要なのか疑問
ブラウザ

Web版Twitter利用者向けの便利なUserscript

以前は Twitterrific [http://iconfactory.com/software/twitterrific] のようなクライアントを使って、Twitter を追っていましたが、最近は Webブラウザで直接自分のページにアクセスして観覧しています。独立したクライアントや IM のほうが手軽なのですが、頻繁に更新しているのが視野に入ってしまうと集中出来なくなります。いつでも見るのではなく、見たいときに見るほうが良いなと思って今は Web 版を利用しています。 Twitter用のソフトウェアのメリットは単に手軽にアクセス出来るだけでなく、それぞれ独自のカスタマイズがされている点もあります。Web版はシンプルに構成されているので、ソフトウェアを使っているときのような使い込みが難しいですが、 Userscripts [http://userscripts.org/]を利用することでカスタマイズが可能です。（Firefoxなら Greasemonkey [https://addons.mozilla.org/ja/firefox/addon/748]、Safari/Webki
Webデザイン

Web creatorsで連載を始めました

先月発売された Web creators 3月号 [http://www.amazon.co.jp/gp/product/B001P83QHK?ie=UTF8&tag=could-22&linkCode=as2&camp=247&creative=7399&creativeASIN=B001P83QHK] からになりますが、連載をもつことになりました。「WebデザインxIT フォーカスノート」と題して、毎月デザイナー向けの技術関連の記事を執筆しています。ITというとかなり幅が広く、専門的なところも突き詰めるとキリがないですが、ウェブデザイナーが知っておきたい技術と、ウェブデザインとの関連性を紹介する短い読みものです。 この連載記事に挑戦してみたいと思ったきっかけは、ビジュアルデザインが中心の誌面で少し突っ込んだ技術の話が出来るという点にあります。ウェブデザイン雑誌でもコードという側面から技術が紹介されることがありますが、それらは見た目を実現するための手段だけで、技術そのものの解説ではありません。また、ソリューションとしてのデザインと技術の関係を表しているわけでもありません。見た目と技
デザイン

デザインに関するよいお言葉

以前、UXに関するよいお言葉 [http://www.yasuhisa.com/could/roundup/good-quotes-about-ux/] という記事で、様々なデザイナーが残した UX に関する言葉を引用しました。今回はネット上で見つけたデザインに関する様々なメッセージを紹介します。 Edwin H. Land [http://en.wikipedia.org/wiki/Edwin_H._Land] > クリエイティビティに必要な側面のひとつに「失敗を恐れない」がある。 Saul Bass [http://tinyurl.com/5asdc2] > デザインとは考えを視覚化することである。 MetaDesign [http://www.metadesign.com/] > 深みのない美しさは、単なるデコレーションである。 Josef Albers [http://en.wikipedia.
ブラウザ

Firebug用リファレンスツール「Firescope」

サイト構築の際、欠かせないツールのひとつといえば Firebug [http://getfirebug.com/]。JavaScript を使ったウェブアプリケーションのデバッグだけでなく、サイトデザインをしている方にとっても便利なツール。テストの際、レイアウトが崩れていたとしても Firebug で調べればだいたいのことは解決します。この Firebug のコンパニオンツールが Firescope [http://tools.sitepoint.com/firescope] です。 Firescope は、Firebug 内で CSS/HTML のタグの意味や使い方をチェック出来るツール。インストール後、Firebug のパネルに新たに「Reference」というタブが追加されます。HTMLビューや「調査」の際に選択したタグと下階層にあるタグの意味が Reference に表示されます。最新のブラウザだけですが、その場でサポート状況も見れるのは便利です。もっと詳しく知りたい方は提供元の Sitepoint のページへ誘導する仕組みになっています。 W3Cの仕様が頭に入っている方や