Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
アイデア

開発合宿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の仕様が頭に入っている方や
テクノロジー

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

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

以前は開発合宿に参加して勢いで作るということをやっていましたが、最近はめっきりしていませんでした。長いスパンで開発のお手伝いをするのも楽しいですが、逆に一気に作ってしまうやり方も時には挑戦したくなります。というわけで、久しぶりにデザインも含めて２日で作ったページを紹介。 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/