Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
UI

Kinectから始まる新しいインタラクション

既に 1000 万台が販売されていると言われている Microsoft Kinect [https://www.amazon.co.jp/dp/B003T9VDJQ/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003T9VDJQ&adid=18CVSS3GS5PZPPHH7QMH&] 。コントローラーを持たなくても身体を動かすだけで様々な操作を実現するこのデバイス。USB接続を使用していることもあり、発売開始直後から、PC や Mac に接続をしてハッキングをする方が続出。プログラミングのためのプラグイン・アドオン・ライブラリが続々と登場しました。久々にモノ作り魂に火が付いた方も少なくないと思います。 Kinect と AR を組み合わせたデモこうした開発者達の草の根活動を禁止することは出来たはずですが、
本

Automagic Book Club がはじまります

結構前から「ブッククラブ」やりたいなぁと思っておりまして、運営に便利なシステム（サービス）を立ち上げようと人に持ちかけたことがあるくらいです。日本ではあまり馴染みのないフレーズですが、読書会と言われるケースもありますね。定期的に会って課題として出した書籍について感想や意見を交換する集まりです。もちろん、ブッククラブ自体は新しいアイデアでもなく、 UX Book Club Tokyo [http://uxbookclub.org/doku.php?id=tokyo] という集まりもあったりします。最近だと NB Reading [http://nbr.business.nikkeibp.co.jp/] がソーシャルメディアと組み合わせて「雑誌を読む」という行為をソーシャル化しています。 今回、Automagic Book Club [http://automagicbc.tumblr.com/] というブッククラブを始めることにしました。デザイン系、Web/IT系の書籍を一緒に読むことを目的にした Web 上のブッククラブです。北海道にいても、
UI

マルチデバイスUI設計で注目したい５つの要素

2011年 UI/UX トレンド [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/] という記事で、モバイルWebデザインのノウハウがデスクトップにも影響し始めているという指摘をしました。Mac OSX Lion [http://www.apple.com/jp/macosx/] や Windows 8 のような OS だけでなく、Web サイトにも変化が見られています。スクリーンの大きさを活用してモバイル環境では再現が難しいダイナミックで動きが多いレイアウトも出て来ている一方、モバイルアプリの血を受け継いだかのような目的にフォーカスしやすく、目的までのステップと選択肢が少ない Web サイト / アプリケーションも次々と出て来ています。 Windows Phone 7 をそのまま受け継いだかのような Windows 8 の UI今後デスクトップOS がモバイルOSのようになり、利用者がシンプルな操作と体験を求めやすい環境になれば、Web サイトも次第にシンプルになる可能性がありますし、そうしなければならない状況も出て
UI

2011年 UI / UX トレンド

2011年の1月。まだ年が始まったばかりでしたが、今年の Web デザイントレンド [http://webdesignledger.com/tips/web-design-trends-in-2011] という記事が発表されたりしていました。その後、数々のトレンド記事が国内外で数多く紹介されていますが、ルック＆フィールに関する話題、又は技術的な側面から見た話題が多くを占めています。こうしたトレンドを知ることは重要ですが、トレンドの全体像として捉えるには多少偏っていると思います。そこで今記事では、UI / UX デザインの側面からみた 2011 年のトレンドを幾つか紹介していきます。 To Do アプリ Flow [http://www.getflow.com/] は、まるでデスクトップ向けの Mac アプリを使っているかのような UI デザインを Web 上で再現しています。この記事で挙げる幾つかのトレンドが現れるキッカケを作ったのは、テクノロジーと Web が今まで以上に強い連携が可能になったからです。デスクトップ（又はオフライン）アプリケーションと同等の能力を Web で実現出来
facebook

SNSにある自己表現とFacebookが見出した人の欲求

以前 脱テンプレートなFacebookの難しさと関係の変化 [http://www.yasuhisa.com/could/article/facebook-and-networkdesign/] という記事で、SNS の構造や仕組みから見た Facebook の独自性を解説しました。今回は SNS と利用者との関わり方を重点において解説します。日本でこれからどうなるか分からないですが、海外では学生からお年寄りまで魅了している Facebook。なぜ彼等は他の SNS ではなく Facebook にハマるのでしょうか。 ハマるといえば、最近ではゲームの要素を盛り込むという話がよく出てきます。私も昨年末に ゲームをテーマにした講演 [http://www.yasuhisa.com/could/diary/wcan2010-gamedesign/] をしましたし、そこでもゲームの要素を加えることで楽しさを増幅させることが出来ると解説しました。しかし、そうした要素を追加する前にソーシャルアプリやサービスの本質を見極める必要があります。そこの理解をなしにしては、たとえゲーム的な要素を加えたり
セミナー

7月は2カ所で登壇します

昨年末からセミナーで話すという機会に恵まれていませんでしたが、7月は2つあります。ひとつは7月2日、東京で開催される SwapSkills doubbble01 [http://swapskills.info/2011/doubbble01.html]。こちらはモバイル制作から見る次世代の Web のカタチを、コンセプト的な話から実践的なところまで幅広くカバーするセミナー。もうひとつは7月9日、青森市で開催されるIT活用サポーター活動事業セミナー [http://yes-aomori.jp/?p=1746]。こちらは Web サイト運営の見直しをテーマに私がコンテンツ戦略、坂本さん [http://bookslope.jp]が IA の視点から話をします。 [http://swapskills.info/2011/doubbble01.html]SwapSkills doubbble01 では、「Mobile First:モバイルファースト」が意味する今後のWebコミュニケーションデザインと題して、モバイル機器向けの Web サイトを作るという意味と、今後それがパソコンを含めた他デ
Order and Chaos
ゲーム

Order and Chaos

Gameloft [http://www.gameloftjapan.com/]が出すゲームは、どこかで見たようなゲームが多いという印象があります。 モダンコンバット [http://www.gameloftjapan.com/products/000637/index_iphone.html]や ヒーロー・オブ・スパルタ [http://www.gameloftjapan.com/products/000537/index_all.html] などコンソールや PC にあるゲームの類似品を幾つか見つけることができます。では、Gameloft がパクリゲームを作っているのかというと、そうではありません。Gameloft は、どこかで見たことあるゲームをモバイル環境に最適化し、誰でも気軽に楽しめる本格派ゲームを作り続けているところが魅力です。今回紹介する Order Chaos [http://itunes.apple.com/jp/app/
インターネット

境佑司さんとフラグメンテーションをテーマに対談をしました

対談が続いている Podcast 「Automagic」ですが、今回は音声、映像、テキストで幅広い情報を配信している境佑司さん [http://admn.air-nifty.com/web_design/]との対談。今年で2回目になります。2月に [http://www.yasuhisa.com/could/announcement/automagic-podcast/]境佑司さんと対談 [http://admn.air-nifty.com/web_design/2011/02/file-6372010--2.html] をしたときは、電子書籍や今後のWeb制作をしている人が入れる領域について話をしました。今回は、デバイスや情報のフラグメンテーション（分断）をテーマから入り、いつの間にやらゲームの話までしてしまうというという内容。１時間半くらい話していたのですが、アッと言う間に時間が過ぎ去ってしまいました。 過去10年くらいに登場したモバイル機器を並べながら行われた今回の対談。Android で起こる統一感のないインタラクションやインターフェイス、Webアプリとネイティブアプリの
TV

ロングテール化するTVと４つの展望

Apple TV [https://www.amazon.co.jp/dp/B004BR2CL8/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B004BR2CL8&adid=1SKXA5YKF6N8T9HXH85A&] で見たい海外TVドラマや映画を好きなタイミングですぐに見れたり、自分がお気に入りの購読チャンネルを iPad や iPhoneで気軽に見れたりするようになった現在。HDDレコーダーが出たあたりから、CM をスキップして番組が見れる環境が整い始めてきましたが、今はクラウドからのストリーミング、オンラインサービスとの連携でいつでも何処でも見れたり、予約も何処からでも簡単にできます。TV が TV 局の番組を受信・映写する機械から、クラウドに通じるモニターに変化しているんだなとシミジミ思います。 Hulu
UI

GIMPが提案するソーシャルUI

着実に機能を増やし続けているオープンソースの Photoshop [https://www.amazon.co.jp/dp/B003F783CW/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F783CW&adid=06T97V7BAYT1H3AXJMQD&] 代替プログラム GIMP [http://www.gimp.org/]。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されている [http://registry.
ポッドキャスト

3pandaさんとコーディングについて話しました

Web関連ポッドキャスト Automagic [http://www.yasuhisa.com/could/announcement/automagic-podcast/] も無事 10 回目を迎えました。 今回は大阪でコーディングの仕事をされている @3panda [http://twitter.com/#!/3panda] さんとコーディングの魅力を中心にお話をしました。彼はパンダの会 [http://pandanokai.net/]という勉強会を 2010 年から続けており、そこでの活動内容や今後の展望についても語ってもらいました。 コーダーという仕事をしている方にとってコーディングをするということの魅力は何でしょうか？専門性がより一層必要とされているものの、多角的な視点が必要とされる現在の Web 設計。コーダーという仕事はこれから何処へ向かうのでしょうか、そして何が必要とされているのでしょうか。仕事やパンダの会を通じて様々なスキルセットをもつ人たちとコミュニケーションをとっている 3panda さんの意見は貴重だと思います。 Automagic #10 [http://
インターネット

Webから始まる教育パラダイムシフト

Sir Ken Robinson Changing Paradigms Creativity expert Sir Ken Robinson will ask how do we make change happen in education and how do we make it last? 教育システムと教育に対する考え方に鋭い疑問を投げかけるサー・ケン・ロビンソンの講演。同講演のイラスト版はこちらから [http://www.youtube.com/watch?v=zDZFcDGpL4U]。 MIT が講義を無料で公開する OpenCourseWare (OCW) をはじめて 10年になります [http://ocw.mit.edu/about/next-decade/
UX

UXの下準備に使える３要素

利用者によりよい体験を提供するために設計をする・・・といっても膨大な課題です。どれに手を付け始めたら良いか分かりませんし、何にフォーカスして考えたら良いのかもハッキリしません。ペルソナ、シナリオ、ストーリーなど、UX を考える上で便利な方法論やツールはありますが、照準を絞った視野がなければ一体何をしているのか分からなくなる場合もあります。UX はユーザビリティやインタラクションデザインに比べ、照準が広くなってしまう場合があり、何に注目し、どう設計するのかがあやふやになりがちです。 プロジェクトの UX の何にフォーカスしたら良いのか分からない。そんな時は「体験」の意味を少し分解し、結局のところ利用者は何をしたいの？という部分に立ち返ると何をしなければならないのかが見えやすくなります。そこで、UX を大まかに３要素に分解してみました。 1. 人 モバイルにある３つの場所レイヤー [http://www.yasuhisa.com/could/article/mobile-layers/] で、人は３種類の『場所』に立っていると解説しました。では、その場所に立っている人はどのような
デザイン

拡大・縮小機能からみるブラウザの課題

拡大・縮小はレガシー機能？ JIS X 8341-3:2004 には、ブラウザの機能で文字の拡大・縮小ができるようにしたり、ユーザースタイルシートで変更できるようにすることを推奨しています。当時多く方が利用していた IE6 は、ピクセル指定の文字の拡大縮小が出来なかったこともあり、ブラウザの機能とは別に JavaScript で実現した文字サイズ UI が実装されてたのだと推測しています。もちろん、JIS規格が IE 中心で見ていたとは思っていませんが、ブラウザによって拡大・縮小の解釈が様々でした。その名残もあって今でも Web サイトに文字サイズ変更の UIが設置されている場合があります。 今は時代も変わりほとんどのブラウザがピクセル指定がしてあってもレイアウトも文字も拡大・縮小出来る機能を実装しています。こうした時代の変化を考慮して JIS X 8341-3:2010 では、文字に関する達成基準のニュアンスが変わっています。現在は「コンテンツ又は機能を損なうことなく，テキストを支援技術なしで200%までサイズ変更できなければならない。」としています。200% という数値が出て来て
ポッドキャスト

たにぐちまことさんと仕事の仕方について対談しました

基本的にソロで話していますが、時々ゲスト呼んで話をしている Automagic [http://www.yasuhisa.com/could/announcement/automagic-podcast/] 。デザインからビジネス、エンターテイメントまで。Web に関わることであれば何でも話しているポッドキャストです。前回は谷拓樹さんとモバイルWebについて対談 [http://www.yasuhisa.com/could/announcement/automagic-inkdesign/] したわけですが、今回のテーマは「仕事」。 会社を作って社員を増やして大きくする、企業に入ってキャリアを積んでいく、それだけが Web 関連の仕事をする人の道ではありません。Web だからこそ身軽に仕事が出来たり、場所も関係なく様々な人と柔軟に繋がりながら仕事をすることが可能です。震災の影響もあってか身軽にかつ経済的に仕事がしたい人も増えて来ており、Facebook でノマドライフ [https://www.facebook.com/nomadlife]というページや、ノマドワーカーズグループ [
デザイン

共感から始めるデザインの対話

より多くの方にクリエイティブプロセスに参加してもらうために、デザイナーの中には試行錯誤を繰り返している方もいると思います。「自社にUX文化を広めるコツ [http://www.yasuhisa.com/could/article/evangelize-ux/] 」という記事でミニワークショップやデザインについて語れる時間を築くと良いと書きましたが、話に参加してもらえない、理解してもらえない、やっぱり自分はデザイナーではないと拒否されるという場合もあると思います。 相手に物事を伝えるために、自分たちのコミュニケーションの仕方を変えるという方法がありますが、それだけではありません。相手がどのような視点で話をしているのかを理解することで次の試行錯誤に繋がることがあります。デザイナーにとってはごく自然なことであるデザイン思考も、他に方にとって途方もなく難しいこと、又は自分たちの考え方とは正反対と考えている方もいるわけです。 人にとってミステリアスで難しそうに見えるデザインプロセスに参加してもらうためにどうしたら良いでしょうか。考えられる課題と提案を幾つか挙げてみました。 根本的に考え方が
UX

モバイルにある３つの場所レイヤー

モバイルコンテキストの見分け方と注意点 [http://www.yasuhisa.com/could/article/mobile-context/] という記事で、モバイル機器とそれに触れる人間との間で生まれる文脈を、誰が使っているか・何を使っているか・何処にいるのかの３つに分けて解説しました。しかしこの３つは文脈を理解する上での始まりにか過ぎません。例えば何を使っているか（What）を想定するにしても、ハードウェア、OS、ソフトウェア、そして前回の記事でも指摘した回線速度など幾つかの考慮項目があります。今回は、何処にいるのか（Where）をもう少し深く掘り下げてみたいと思います。 「何処にいるか？」という質問を「電車にいる」「お店のショーウィンドウを見ている」といった場所・地名だけに限定できません。もう少し視野を広げて「何処」という意味を探ることで、モバイル利用者の像がより明確に浮かび上がる場合があります。ここでは「何処」を３つのレイヤーに分けてみました。 文化レイヤー 経済、社会構造、流行など、利用者が住む社会がどのようなものか、そしてそこから生まれて来る価値観（エチケット）
ザ・コーポレーション
映画

ザ・コーポレーション

法律によって「人」とされている法人に対して精神分析をしたらどうなるだろう？それがドキュメンタリー映画『ザ・コーポレーション [https://www.amazon.co.jp/dp/B000FIHDHA/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B000FIHDHA&adid=02KCTT9XEQF2M1RQKSEP&] 』のテーマです。どん欲に利益を求め続ける法人の行動が、環境・社会・動物・人を傷つけていることがあります。嘘つきで長期的な関係を続けることが出来ない法人は、人格障害者と変わらないと判断されてもおかしくないそうです。しかし、法に守られ、法によってつくられた人であるが故に犯罪にならず、今日も利益を追い求めています。 映画でも指摘していますが、利益をどん欲に追い求める法人に働く人たちも悪なのかというとそうではありません。
UI

ジェスチャーUIの課題と対策

タブレットやスマートフォンで積極的に導入されているマルチタッチテクノロジー。デジタルなオブジェクトに触れているような感覚が味わえるタッチインターフェイスは、抽象的なマウス操作に比べて直感的だと言われています。スクリーンに触れるだけの動作は直感的で簡単そうですが、これにジェスチャーが加わることで突然ややこしくなる場合があります。感覚的・直感的というよりかは、操作を覚えなくてはならない負荷がかかる可能性もあります。 未来のインターフェイスを語る上でよく出て来るのが映画『マイノリティ・リポート [https://www.amazon.co.jp/dp/B00006CTJN/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B00006CTJN&adid=14NPG0DWDPFKW1YA2AQA&] 』。この映画に登場するマルチタッチ UI の技術は一般化されつつあるといっても過言ではありませんが、大きく腕を振りかざし、長時間立ち続けなければならないのであれば、すぐに疲れてしまいそう
デザイン

これからのWebデザイン教育【２】

前回の「これからのWebdデザイン教育 [http://www.yasuhisa.com/could/article/webdesign-education/] 」の記事は、Facebook グループ [http://www.yasuhisa.com/could/announcement/facebook-group/] をはじめ様々な場で意見が飛び交いました。あのような記事を書いた理由は、不満をぶちまけているのではなく、書くことによってちょっとだけ考えてみる機会を皆に持って欲しかったわけです。今回は様々な意見が出てきたことを踏まえて、私のほうで感じたことを幾つかまとめていきます。 教育機関だけの問題ではない 教育の話になると、まず学校の改革・カリキュラムの見直しという教育機関へ向けた問題解決に集約してしまう傾向があります。しかし、実際のところ教育機関が今のようにスキル中心の教え方をしている理由は、そこに需要があるからという現実もあると思います。企業の募集ページをみると「○○が出来る方」というスキルセットがリストアップされているわけですし、即戦力とはそういったスキルがある方を指す場合
Webデザイン

これからのWebデザイン教育

Web Design Education? Webデザインにフォーカスした教育は、時々頭に浮かぶ話題のひとつ。日本全国に Web デザインに特化した学科をもつ専門学校は幾つかありますし、学ぶための書籍もたくさんあります。ただ多くの場合、スキルセットを習得することが中心というイメージがあります。ソフトウェアの使い方、レイアウト・タイポグラフィ・ドローイングの基礎などを扱うことが Web デザインの基礎教育で軸になっています。デザイン全般にしても、基本的に仕事で即時必要となるスキルセットを身につけることが先行しています。 デザイナーを「Craftman (職人・工芸家)」として捉えるのであれば、それで良いのかもしれません。腕を磨くための情報を収集し、練習・実践を繰り替えしていれば、職人としての価値がより上がるでしょう。そして、スキルを得るための最初のステップとして、ノウハウを教えるという教育は適しているのかもしれません。 しかし、私は Web デザイナーは職人ではないと考えています。 スキルセットを学ぶことが重要ではないと言っているのではなく、そのスキルをつかって形作る理由、そし
ポッドキャスト

谷拓樹さんとモバイルWebとデザインについて対談しました

震災後、諸都合で１ヶ月ほどお休みしておりましたが、その後順調に回を重ねているポッドキャスト「Automagic [http://www.yasuhisa.com/could/announcement/automagic-podcast/]」。毎週、Web デザインを中心に私が思うことを手短に話している番組ですが、今回は inkdesign [http://www.inkdesign.jp/] の谷拓樹さんをお呼びしてモバイルWebを中心に話をしました。昨年の 11 月に「HTML5＋CSS3で作る 魅せるiPhoneサイト [https://www.amazon.co.jp/dp/4899772750/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=
言葉

失敗を繰り返そう

読みにくい記事がある理由 記事ごとにレイアウトや装飾を変えるようになってしばらく経ちます。中にはおもしろいもの、うまく表現されたものもありますが、読みにくい記事も少くないと思います。文章のフローが変則的すぎて読みにくい、色の使い方が読み難くしているものなど様々だと思います。Twitter や はてブにコメントを残す方もいらっしゃるので、どれが評判が良くなかったのかも多少わかります。 なぜ読みにくいのか？なぜそんな記事を作っているのか？それは単純に私が失敗しただけです。 雑誌では奇抜な背景や色を使ったり、変則的な読ませ方をさせる場合がありますが、それを同じように Web で実践できるのか？ どこまで出来るのかという考えがそもそもの発端です。縦も横も固定された紙の世界では実現しやすいことも、縦横に無限に広がり、制限もかけれない Web ではとても難しいことが分かりました。もちろん、まだ模索するべきことはたくさん残っていますし、私のスキルを磨けという部分もあります。 ただこうしたひとつの結論に至るには今までの失敗がなければ辿り着くことはできませんでしたし、失敗を通して何が可能で何を改善
デザイン

モバイルコンテキストの見分け方と注意点

モバイルにおける文脈とは 「文脈を理解したWebコミュニケーションデザイン [http://www.yasuhisa.com/could/article/context-web-communication/] 」という記事で、利用者のコンテキスト（文脈）に応じて Web サイトの見せ方も変化させる必要があると話しました。利用者から取得できるコンテキストを７つ挙げましたが、今回はモバイル環境におけるコンテキストとは一体何であるかを少し掘り下げてみようと思います。モバイルにおけるコンテキストとは何でしょうか？何を基にして仮定することができるのでしょうか？ モバイルにおけるコンテキストを理解する上で以下の３つがキーになります。 * 誰が使っているか（Who） * 何を使っているか（What） * 何処にいるのか（Where） これらをリアルタイムかつ自動で取得することでコンテキストをある程度把握することができるようになります。例えば何を使っているのかを User Agent などで理解することが出来れば、PC版のフルサイトではなく自動的に最適化されたサイトを最初に表示させることが
デザイン

過去の束縛から解き放たれたWebの可能性

行き詰まり始めているWeb 私たちは過去の知識や事例をモデルにして未来を考えることが多いと思います。今の電子書籍に関する議論がされるときも、紙の書籍や CD-ROM を使ったマルチメディアなど、過去に作られた形との比較が多くされます。Webビジネスもそうですね。「Web 2.0」は従来の Web の進化型、そのさらに進化したかたちが「Web 3.0」。名前からして過去の形を継承しています。最近も「ソーシャルなんたら」みたいなフレーズは実にたくさんありますが、まったく新しい概念というよりかはブログ、CGM、掲示板など従来からあった様々なコミュニケーションツールが進化したものです。 物事を理解するときに、過去にあったものと比較すると分かりやすい場合があります。また、未来を考えるときも過去に起こったことは大変参考になります。過去は今の私たちの立ち位置の確認になったり、進むべき方向を示すときがあるわけですが、我々は過去にとらわれ過ぎではないかと感じることがあります。Web は人類に与えられたまったく新しい道具のように表現されることがあるものの、活用方法は『過去の実績』にあまりにも捕われ過ぎて