Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

ビジネス

Bandcampが提案する今時の音楽販売

photo taken by auggie tolosa [http://www.flickr.com/photos/auggie_tolosa/3253632500/]もう1年半くらい前からありますが、Bandcamp [http://www.bandcamp.com/] は音楽系のサイトではトップレベルのサイトです。デジタルミュージックを販売するサイトはたくさんありますが、ここは幾つか工夫がなされています。 * 音楽配信に最適化されたカスタムページ * 非圧縮ファイルをアップロードすれば、複数フォーマットに自動変換される * ミュージシャンは無料から有料まで自由に設定できる * 音楽に反応して動くビジュアライザ付き * リスナーが値段を決める形式にも対応 * 低音質は無料で高音質は有料という分類が可能 * 豊富な共有オプション * どの音楽を最後まで聴いて、どれをスキップしたのか分かるアクセス解析 * 自分の音楽が何処で話題になっているか分かるリファラ表 ソーシャルメディアを利用するユーザーを意識したデジタルミュージック販売のひとつの形を Bandcamp は

資料

HTML5に関するW3Cのスライドをリデザイン

先日、Twitter経由で「Web標準化 (W3C) とHTML5の状況 (PDF形式) [http://www.soumu.go.jp/main_content/000048595.pdf] 」というスライドが総務省のWebサイトで公開されているのを知りました。早い時期から国に働きかけているのだなと関心しましたし、どのような内容を紹介しているのだろうと興味があったので早速ダウンロードしてみました。HTML5 の概要をコンパクトにまとめている点は良かったのですが、プレゼンのスライドとしての質はあまり高いものではない内容でした(一番最後のページに「ありがとうございました」と書いてあるのでスライドの可能性大)。 W3Cに携わる教授という視点だと考えられなくはない内容なのですが、国の方(もしくは IT プロフェッショナルではない方)に向ける内容ではない気がしました。せっかくHTML5を多くの方に知ってもらうという素晴らしい機会があってもこれではどうかなと私は思いました。以下が私が気付いた課題点です。 * 配布資料とスライドの兼用になっている。結果的にスライドの情報量が多くフォーカスがし

コンテンツ

コンテンツの質を上げるための第一歩

昔から量より質だった 「Top 25 Blogs About Blogging [http://www.dailyblogtips.com/top-25-blogs-about-blogging/] 」では、ブログに関するアドバイスなどを記載しているブログのトップ25がリストされています。Google や Alexa のスコアなどを基にランキングされているこのリスト。複数のライターを抱える大規模サイトもあり、それらは毎日情報を更新していますが、大半は毎日更新していないのが分かります。平均で 2,3日に一回更新しています。同サイトは「Top 25 SEO Blog [http://www.dailyblogtips.com/top-25-seo-blogs/]」や「Top 25 Web Design Blogs [http://www.dailyblogtips.com/top-25-web-design-blogs/]」という別分野のトップ 25 を同じ採点方法でランキングを出していますが、こちらも傾向が似ていて毎日更新しているサイトがトップに来ているわけではなさそうです。 > 数よ

IA

関係作りとしての IA の役割

IA (Information Architecture) において「関係」は重要なキーワードです。ページを構成する情報と情報との関係、サイト内のページとページとの関係。コーポレイトサイトであれば、メインサイトとサテライトサイトというサイトとサイトの関係も考慮します。これに加え、利用者という別の軸の関係も考慮して情報を組み立てて行きます。こうしたことから、IA の専門家達は、建築、情報科学、インダストリアルデザイン、認知学など様々な分野の知識に長けている方が少なくありません。彼等はその広い知識を活用することで様々な情報と コンテキスト [http://www.yasuhisa.com/could/diary/css-nite-lp7/] を繋ぎ合わせている(関係を作り上げている)といえるでしょう。 近年、情報とコンテキストが多様化し初めています。 情報の種類はテキストから動画まで様々ですし、サイズや扱われ方もたくさん出てきました。また、利用者が情報にアクセスする背景を考えてみると、自社の Web サイトという小さな存在だけでは語り尽くせない状態です。Web がパソコンからの情報だけの

ビジネス

デザイナーが相手にアイデアを伝えるときの心構え

日本国内外問わず、優れたデザインのサイトが増えてきているのを見ると、デザイナーと開発者が分断されているイメージは昔のものと感じることがあります。全体的に見ればそうなのかもしれませんが、悩んでいる方も少なくないも現実。技術的な要素が非常に強いと同時に、感性だけでは成り立たたない Web デザインにおいて、自分とは違う分野の方とのコミュニケーションは永遠の課題といえるでしょう。良いデザインを作り出すためには、どのようなことに気をつければ良いでしょうか。 以前執筆した「建設的な会話をするために気をつけておきたいこと [http://www.yasuhisa.com/could/article/constructive-feedback/] 」も似たようなトピックを扱っているので興味がある方はどうぞ。 開発者になる もちろん本職として仕事にしろという意味ではありません。Perl でも PHP でも Ruby でも何でも良いので、簡単なプログラムを作ることで彼等がどのような考えでモノを作り上げているのか分かります。開発者の声を聞いたり、書籍を読むのも手段ではありますが、体験することが最も効果

Twitter

ブログの価値を再確認する時期

今、ソーシャルメディアに参入しようとか、Twitter はスゴいと言った話があります。それもあってブログはもう終わった、次はソーシャルメディアと飛躍した発想も見かけるようになりました。Twitterでも紹介しましたが、現在 Twitter 内だけでもソーシャルメディアエキスパートと名乗る人が16,000人 [http://twitter.com/yhassy/status/7359352975]いるくらいですから、一種のバブルですね。SNS が流行った時期も似たようなフレーズがありましたが、また同じパターンを繰り返しているといったところでしょうか。そんな今だからこそブログを再検討する価値があると思います。 そもそも理解しなければならないことが、ブログは日本で流行りだした 2004 年あたりから、既に過大評価された流行モノだったということです。確かにブログには大きな可能性を秘めていますし、使い方によっては大きな変化になります。しかし、ツールは所詮ツールであってそれ自体が何かしてくれるわけではありません。つまり「ブログが儲かる」というのは簡略し過ぎた表現であり、儲かった理由は「このブログ

CSS

Blueprint CSS と仲良くなるツールあれこれ

ごくたまにですが、自分の本編講演が始まる前に簡単なツールの紹介をすることがあります。小難しいことを話す前にキャッチーな話題に触れて講演に少しでも注目してもらおうと考え、時間がうまく調整出来たときにしています。昨年9月に開催された CSS Nite LP7 [http://www.yasuhisa.com/could/diary/css-nite-lp7/] では、Blueprint [http://www.blueprintcss.org/] という CSS フレームワークを紹介しました。 Blueprintは、様々なレイアウトパターンを class 属性を変更するだけで作ることが出来ます。カラムの数、コンテンツエリアの横幅、ボックスの移動、そしてフォームの作成など手軽に操作が可能です。柔軟性に長けているだけあってコードの量やファイルの分け方が独特なので、納品物として出せない場合がありますが、HTMLでプロトタイプを作りたいという方には良いツールです。 CSS フレームワークと呼ばれるツールセットは他にも幾つかありますが、Blueprintは関連ツールが豊富にあるのが利用するひ

ビジネス

クリエイティブを伝えるためのヒント

Illustration is from H is for Home [http://www.flickr.com/photos/h_is_for_home/2310455009/]仕事を伝えるためのクリエイティブ ここ数年、デザインやクリエイティビティへ注目が集まっています。ものづくりの世界だけでなく、ビジネス戦略や組織論にまでデザイン思考やクリエイティブであることの重要性が強調されています。また、顧客のクリエイティブを利用したマーケティングキャンペーンやサービスも少なくありません。もちろん、中には誤解しているものもあれば非生産的なものもありますが、少なくとも言えることはビジネスの世界でもデザインやクリエイティブの価値は高いということです。 こうした中、私たちは何が出来るでしょうか。作品を単に見せるだけでは、クリエイティブを伝えるには物足りない場合がでてきます。今後、自分たちのクリエイティブを伝える上で、考えておきたい4つの項目があります。 * 作り上げるための道筋 (クリエイティブプロセス) を説明することが出来るか * クライアントが言う「クリエイティブ」の意図を読み解け

コンテンツ

Year in Review 2009

Twitter [http://twitter.com/yhassy] をはじめたことにより、ブログが減ったという話をよく耳にします。私の場合も記事を書く数は去年より減りましたが、個々の記事のボリュームが増えた印象があります。これは、Twitter をはじめとした他の場で軽めのメッセージや記事が書けるようになったことで、この場所がより明確になったからかもしれません。2010年も引き続き、他ではあまり読めない情報を盛り込みながら「有名ではないけど知る人ぞ知るWebデザイナーのサイト」を目指して行きたいですね。 単純にアクセス数だと「UIデザインガイドラインのまとめ [http://www.yasuhisa.com/could/roundup/ui-design-guidelines/]」や「 今のデザイナーに必要な10のスキル [http://www.yasuhisa.com/could/article/10-skills-designers-need/] 」のようなキャッチーで分かりやすいタイトルの記事が人気ですが、アクセス数が個人的にお気に入りの記事というわけではありません。今年

セミナー

WCANで今後のWebと利用者について話しました

12月19日に WCAN 2009 Winter [http://www.wcan.jp/index.php?ID=269] が名古屋で開催されました。年末はほぼ毎年、スピーカーとして参加させていただいているこのイベント。毎回、1年の総決算みたいな内容でしたが、今回は少々趣向を変えて「 2010年に飛躍するための7つのキーワード」という今のトレンドや人・社会の変化からみる今後について話しました。ちょうど先日行われた CSS Nite Shift3 [http://www.yasuhisa.com/could/diary/shift3/] が似たような内容だったわけですが、そのときの反応や情報収集が役に立ちました。時間が少々長めの 80 分だったこともあり、結果的に 140 枚のスライドと 70サイトの紹介 [http://www.yasuhisa.com/could/roundup/wcan-2009-winter-list/] というボリュームが大きい内容となりました。 今年もかなりの数のサイト・

インターネット

WCAN 2009 Winter で紹介したサイト一覧

12月19日、名古屋で開催された WCAN 2009 Winter [http://www.wcan.jp/index.php?ID=266] では、今年を象徴するサイト、制作においてインスピレーションになるサイト、そして来年の行方を想像させてくれるようなサイトを紹介しました。合計70サイトを駆け足で紹介したので、会場にいる方は少々混乱してしまったかもしれません。以下のリストを参考に今後の勉強に役立ててください。 * Windows 7 UX Guideline [http://msdn.microsoft.com/en-us/library/aa511258.aspx] * Introduction to Apple Human Interface Guidelines [http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.

プレゼン

Shift3で人と社会の変化について話しました

撮影: 飯田昌之 [http://www.masazo.net/]12月17日に CSS Nite 年末恒例イベント Shift3 [http://cssnite.jp/ginza/vol42/] が開催され、私はそこで「 不景気から学べる今後のサイト制作のありかた」という題名で 10 分間のプレゼンをしました。不況に関しては昨年の Shift2 [http://www.yasuhisa.com/could/diary/shift2-2008/] でも話したので、これで2年連続になります。去年は実感していた方が少なく、ピンと来なかった方もいたと思いますが、今年は直撃した方も多いかと思います。人材派遣会社や就職関連の方と話す機会がありますが、やはり今年に入って Web 関連の仕事が減ってきたと仰っていました(DTPはさらに前だったそうです)。年度末に向けてまた仕事が増えると予測されますが、厳しい状態はまだ続くでしょう。 不況で真っ先に行う対策の中に「予算削減」というのがありますが、実はこれは短期対策であってビジネスの成長を逃す可能性があります。Andrew Razeghi

意見

読まなくなった私たちと「読む」の今後

今、書籍を読む人たちはどれくらいいるのでしょうか。学生の頃はたくさん読んでいましたが、今は減ってきています。そもそも書籍を読むということが時にストレスがたまることも少なくありません。はやく要点に辿り着いて欲しいと感じる事もあれば、検索が出来ないのでとても不便と感じることもあります。 お菓子コンテンツが愛される 少ないメッセージやちょっとしたリンクであれば Twitter [http://twitter.com/yhassy] で十分役割が果たせるので、このサイトでは情報を盛り込んだ読み応えのある文章にするよう心がけています。Web には他にもたくさんの長文と呼ばれる記事はありますが、本のボリュームで考えると数ページの話です。それですら私たちは「あとで読む」とタグ付けをしてブックマークの奥底に放置します。むしろ、長文は読者受けされにくく、ザッピングに最適化されたリストや Tips が多いのが現状です。 このサイトでも長文かリスト形式の Tips にするかでアクセス数が大幅に異なることがあります。 Webだけが、こうした一口サイズのお菓子コンテンツになっているわけではありません。書

コンテンツ

私的今年のベストWebサイト

今年もたくさんのサイトを見てきたわけですが、個人的に最もインパクトがあったのが Boston Globe が運営する写真ブログ「The Big Picture [http://www.boston.com/bigpicture/]」。Twitter [http://twitter.com/yhassy]でいろいろな サイトを紹介 [http://www.yasuhisa.com/could/twitter/]していますが、かなりの頻度で The Big Picture を紹介しました。写真 (コンテンツ) が素晴らしいのは当然ですが、他にも注目する点は幾つかあります。 このサイトは Boston Globe という 100年以上続く新聞社が運営しています。他の新聞社と同様、発行部数は大幅に落ちており非常に厳しい状況 [http://www.editorandpublisher.com/eandp/news/article_

シンプル

複雑をシンプルにしても駄目な場合

「シンプルがベスト」という言葉はデザイナーでなくてもよく使う言葉です。しかし、すべてをシンプルにしてしまえば良いというわけではありません。シンプルの反意語で「複雑」という言葉があります。しかし、英語の「Simple」の反意語には「Complicate」と「Complex」という2つの言葉があります。いずれの単語も日本語にしてしまうと「複雑」になってしまいますが、使い方が違います。そして、「Complicate」をシンプルにするのと、「Complex」をシンプルにするのは意味が異なります。 「Complicate」は込み入ったものや困難という意味がありますが、「Complex」は幾つかの部品からなる複合体、入り組んだという意味が含まれています。共に複雑に構成されている可能性がありますが、必要なもので作られた複合体(Complex)だとしたら、シンプルにするのは難しいです。つまり、「Complicate」はシンプルにすると良いですが、「Complex」は一概にそうとは言えないということになります。複雑だからシンプルにしたほうが良いというわけではなく、その複雑さがどういった性質のものか判断

デザイン

2009年ベストイントラネットサイト

オーストラリアのコンサルティング企業 Step Two Designs [http://www.steptwo.com.au/] は、2007年から企業のイントラネットサイトで優れたデザインを紹介・分析したレポートを公開しています。詳細な情報を知りたい場合はレポートを購入する必要がありますが、概要であればオンラインで観覧することが出来ます。イントラネットサイトに関する情報はなかなか表に出ることがないので、貴重な情報です。しかも、公開されているスクリーンショットはぼかしがかかっているものではなく、実際動作しているサイトのイメージで掲載されているのも嬉しいです。 優秀サイト一覧はこちらのページ [http://www.steptwo.com.au/products/iia2009/winners-iia2009] にリストされています。CRS Australia のようなオーストラリア国内のものだけでなく、IDEO や IBM のような有名企業もリストされています。オリジナリティ、スタッフへのインパクト、企業利益という3項目を審査対象とし、優秀サイトが選出されたそうです。レポートにはな

UX

Nokiaが考える2015年の未来

Webを利用した共同作業 [http://www.yasuhisa.com/could/article/nokia-betalabs/]や ジェスチャーを利用したコミュニケーション [http://www.yasuhisa.com/could/article/gesture-mobile-communication/]など、ノキアは UX に注目したサービスやデバイスの模索をここ数年続けています。そのノキアが、今月はじめにフィンランドにて The Way We Live Next 3.0 [http://events.nokia.com/thewaywelivenext/home.htm] というカンファレンスを開催しました。そこで、2015年に人々はどのような生活をしているのか幾つか提案をしています。「インテリジェント・デバイス」と呼ばれるネットに常時接続と同期をするデバイスを利用することで人々とシームレスに繋がる構想が描かれています。イメージビデオを見ると、その全体像がなんとなく見えてきますが、ビデオの下にサマリーを書いておきます。 * すべてのデータがクラウドに保管される

テクノロジー

メールがこれからも残り続ける理由

Google Wave [http://www.yasuhisa.com/could/article/google-wave-and-you/] は、Web上でのコラボレーションをより効率的に行うための新しいツールになる可能性があります。今までメールでやりとりでしてきたことを Google Wave で代替することで、情報のズレや漏れを防ぐことが出来るかもしれません。Google Wave 以前からも「メールは時代に合っていない。新しい形が必要だ」と言われていましたが、依然メールは仕事においてよく使うコミュニケーションツールですし、様々なデータが添付されてくることがあります。 新しいツールを使わない(使われない)理由として Web リテラシーを挙げる場合がありますが、これも一概にいえません。RSS や Gmail を使いこなしている Web に詳しい方でもファイルはメール添付で送ってくる方がいます。「Dropbox [https://www.dropbox.com/] とか便利ですよ」とサービスを紹介してもメールで添付してくる方もいます。その方は Web を基軸にした仕事をしていま

仕事

マイコミジャーナルでの連載が100回を迎えました

本日掲載された Magntize [http://journal.mycom.co.jp/column/lifehack/100/] の紹介記事で、 クリエイターのためのライフハック [http://journal.mycom.co.jp/column/lifehack/index.html] がめでたく100回目を迎えました。第一回目の Writeboard [http://journal.mycom.co.jp/column/lifehack/001/index.html] の紹介が 2006年ですから3年以上かかってしまいました。週に2,3回で途中から別の連載 [http://journal.mycom.co.jp/column/anatomyofwebdesign/index.html] を始めていることもあるので余計時間がかかったのかもしれませんが・・・いや、かかりすぎか。

Webデザイン

私にとってテクニカルアートディレクターの意味

Twitter [http://twitter.com/yhassy]では、自分の趣向に合ったサイトをリンクしているだけ [http://www.yasuhisa.com/could/twitter/] ということが多いですが、たまに仕事に関係したことを書いていることがあります。先週ですが、以下のようなことを書きました。 > 優れたマークアップをする方はテクニカルアートディレクターみたいな存在になっていくのかな。既にそんな方いるけど。 — Yasuhisa🗯 (@yhassy) November 12, 2009 [https://twitter.com/yhassy/status/5652774126] Twitterの文字数ではどうも説明しきれない部分があるので、この場で少し補足しておきます。 マークアップする方は印刷機? 単価数百円のマークアップサービスがあるように、見た目のデザインを再現するという意味でのマークアップの価値は下がっていく一方です。もし見た目を形作るだけでマークアップがあるのであれば、それは当然のことです。紙の印刷業も同様で、見た目の再現の水準が同等で

Webデザイン

ゲームにもあるProgressive Enhancement

Progressive Enhancement [http://www.yasuhisa.com/could/article/progressive-enhancement-result/]は、Web サイト制作の取り組み方にも影響する重要なトピック。Web 特有の考え方だと思われるかもしれませんが、ゲームの世界では随分前から Progressive Enhancement をゲーム開発の一部として取り組まれています。 左が画質設定が最高の画面 影の中のディテールが鮮明だけでなく光の反射も繊細上の画像は「Crysis [http://www.amazon.co.jp/exec/obidos/ASIN/B000VYXVBU/could-22/ref=nosim/] 」というファーストパーソン・シューティングゲームのものです。同じゲームですが、少しだけ違う見た目を提供しています。ユーザーが影やテキスチャの質を自由に調整することが出来るので、環境により違う見た目になっています。素晴らしいグラフィックが特徴の Crysis ですが、こうしたハイスペックのゲームを古いパソコンで遊ぶとフレームレ

UI

Web OS 搭載のネットブック「litl」

正直、あまりネットブックに興味がなかったのですが、今月初めに発売された litl [http://www.litl.com/] は興味津々です。ソフトウェアのインターフェイスが独特なのと、機能ではなくライフスタイルからネットブックの可能性を提案している点が好感をもてます。ハードをフリップさせてデジタルフレームとして使える点のもおもしろいですね。 スペックをみると、HDDは2GB, 1GB RAM, 1.86GHz Intel Atom プロセッサなので、他のネットブックと変わりありません。しかし litl が他のネットブックより魅力的に感じるのは小さくて便利というスペックから見た魅力紹介ではなく、具体的な使い方を提案している点にあります。また、外へ持ち出すのではなく、家で使えるネットブックという見せ方もあまりないかもしれませんね。 litl の最大の特徴は、専用 OS にあります。これはモバイル向けの Ubuntu を改良したもので、インターフェイスデザインはロンドンを拠点とし今は世界各地に事務所をもつ Pentagram [http://pentagram.com/en/new

仕事

テラハウス訪問で考えた教育のこと仕事のこと

先日、東中野にあるテラハウス ICA [http://www.terahouse-ica.ac.jp/] キャリア開発研究所の見学に行きました。テラハウスは再就職訓練を実施している施設。東京都産業労働局には職業能力開発センターや職業能力開発校といった組織がありますが、テラハウスは民間委託訓練施設に属します。教務部長の金澤さま、 キョウリツネット [http://rico-web.net/]の新井さまと牧原さまにお時間をいただいて、職務訓練の現場について、そして教育する側からみた Web の仕事についてお話を伺いました。 再就職訓練という一度社会に出ている方を対象にして短期間で Web の仕事ができるためのスキルを教える場。3ヶ月の授業と1ヶ月、Webサイト制作会社にてインターンとして働くことが出来るカリキュラムになっています。週に5日の授業はトータルで360時間ありますが、その間に「使う拡張子はなに?」から具体的なワークフローの実践まで幅広く学ぶわけですからかなりハードです。しかも Photoshop, Illustrator, Dreamweaver, Fireworks, Fla

UI

決して使いやすいとはいえないタッチUI

iPhone [http://www.apple.com/iphone/] の登場以来、国内外問わず多くのスマートフォンがタッチスクリーンを採用しはじめています。これからのユーザーインターフェイスはタッチスクリーンだと感じている方もいるかもしれませんが、利用者はどのように感じているのでしょうか。 Canalys [http://www.canalys.com/]という調査会社がヨーロッパのモバイルユーザーにタッチスクリーンに関する反応をまとめています。 Survey reveals extent of shift in mobile UI preferences [http://www.canalys.com/pr/2009/r2009111.htm] この調査によると、次のモバイル機器の購入の際、指で操作するタッチスクリーンにしたいと考えている方は 38% にのぼり、スタイラス式(16%)の購入を考えている方を大きく上回ります。このようにタッチスクリーンの注目度は高いですが、既にタッチスクリーンの携帯電話を利用している方の反応は少し違います。Canalys の調査によると、47%

Adobe

アドビさんへ2

以前「アドビさんへ [http://www.yasuhisa.com/could/article/dear-adobe/]」という記事を書きました。当時 Dear Adobe [http://dearadobe.com/t] という Adobe 製品の不満や改善点を共有するサイトが話題になり、私も記事内で提案を幾つか書きました。そして、その記事を書いたおよそ1年後のAdobe MAX [http://2009.max.adobe.com/] で CS5 [http://cs5.org/] がほんの少し紹介されました。一体どのような改善点が見られるのか楽しみにしていたのですが、結果はガッカリする内容でした。 もちろん、今回が CS5 のすべてではないですし、Flash Catalyst を中心とした RIA 戦略が話題の中心でした。失望するには早すぎますが、Photoshop CS5