Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

UX

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

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

デザイン

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

拡大・縮小はレガシー機能? 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

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

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

ザ・コーポレーション
映画

ザ・コーポレーション

法律によって「人」とされている法人に対して精神分析をしたらどうなるだろう?それがドキュメンタリー映画『ザ・コーポレーション [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デザイン教育【2】

前回の「これからの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とデザインについて対談しました

震災後、諸都合で1ヶ月ほどお休みしておりましたが、その後順調に回を重ねているポッドキャスト「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 サイトの見せ方も変化させる必要があると話しました。利用者から取得できるコンテキストを7つ挙げましたが、今回はモバイル環境におけるコンテキストとは一体何であるかを少し掘り下げてみようと思います。モバイルにおけるコンテキストとは何でしょうか?何を基にして仮定することができるのでしょうか? モバイルにおけるコンテキストを理解する上で以下の3つがキーになります。 * 誰が使っているか(Who) * 何を使っているか(What) * 何処にいるのか(Where) これらをリアルタイムかつ自動で取得することでコンテキストをある程度把握することができるようになります。例えば何を使っているのかを User Agent などで理解することが出来れば、PC版のフルサイトではなく自動的に最適化されたサイトを最初に表示させることが

デザイン

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

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

インターネット

Webコンテンツをもう一度考える

MdNが刊行していた雑誌「Web Strategy [http://www.mdn.co.jp/di/articles/64/?page=46] 」第一号に掲載されていた記事を若干調整したものです。2005年の記事ですが、2011年現在にも通じる部分があるので掲載することにしました。 文字数が多いので ePub 版と PDF 版を別途用意してあります。あとでじっくり読みたい方はそちらをご利用ください。 * ePub (504k) [http://yhassy.heteml.jp/data/webcontent_epub.epub] * PDF (655k) [http://yhassy.heteml.jp/data/webcontent_pdf.pdf] 変わったもの変わらないもの インターネットが一般ユーザーにも利用されるようになってはや10年以上になる。10年の間にデータ転送速度は動画を気軽にダウンロードできるほどのスピードになり、有線のパソコンだけでなく携帯電話をはじめとした様々なネットデバイスからワイヤレスでアクセスすることも容易になった。こうしたユーザー側のネットとの

UX

良い体験に繋がるちょっとした後押し

UXの話で必ずといっていいほど出て来る「良い体験を提供する」というフレーズ。もちろん、その良い体験は利用者の視点に立って定義させるわけですが、私たちは本当に私たちが設計した体験を提供するべきなのでしょうか。あまりに体験を提供する(作り上げる)ことを考え過ぎることで、利用者にとって窮屈な環境を作り出してしまう可能性があります。 体験を作り出して提供するべき分野は幾つかあります。例えば映画はシナリオ、サウンド、編集、撮影を駆使してひとつの体験を作り出し、それを視聴者に感じてもらいます。その体験に対するリアクションは様々ですが、提供される体験そのものは皆同じです。映画のようにシナリオが一本線で、提供する体験を制作者側が明確に定義できる場合、制作者が思い描く良い体験を提供することになるでしょう。 しかし、映画と同じように Web サイトを作るとしたらどうなるでしょう。ページフローは明確に定義され過ぎて自由がきかない。寄り道ができない、ミスが許されない、世界観を強要しているようなグラフィックなど。Web の場合シナリオは一本線でもありませんし、感情やリアクションという分かりやすい結果を引き出

ゲーム

未来の仕事はゲーム化する

以前から、人の「楽しむ [http://www.yasuhisa.com/could/article/2011-fun/] 」という感情を理解し、その感情を助長することができるゲーム的な要素をアプリやサイトに取り入れることは有効な手段であると解説しています。しかし、ゲームの要素は foursquare [https://foursquare.com/] がバッジシステムを取り上げる前から様々な場所にありましたし、Web の世界だけでなく、私たちの仕事にしてもゲーム的な要素はあります。社内外であるコンペやチームになって仕事を完成させるというプロセスはゲームそのものといっても良いでしょう。 今後私たちの仕事スタイルはよりゲーム的になっていくのでしょうか。 会話トークン [http://www.43folders.com/2007/10/19/meeting-tokens-scarcity] という通過を利用してお互いの時間を利活用するという方法。これもゲーム的な要素を仕事に取り入れている例 例えばタスクに応じてポイント制にするとどうなるでしょう。今まで時給制といった時間で報酬金額を換

ゲーム

遊びがないなら未来はない

新しい文明が築かれるとき、そしてそこで生まれた社会で文化の花が咲くとき、必ずといって良いほど『遊び』が原動力となっている。そう考えたのがオランダの歴史家 ヨハン・ホイジンガ [http://ja.wikipedia.org/wiki/%E3%83%A8%E3%83%8F%E3%83%B3%E3%83%BB%E3%83%9B%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%AC] です。第二次世界大戦の真っ只中に彼は「Homo Ludens ホモ・ルーデンス [https://www.amazon.co.

ソーシャル・ネットワーク
映画

ソーシャル・ネットワーク

もしこの映画を Facebook が出来るまでの話、そして米国 IT 業界の裏側が知りたいと思って見たのであれば落胆してしまう映画かもしれません。映画『 ソーシャル・ネットワーク [https://www.amazon.co.jp/dp/B0047MZLTC/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B0047MZLTC&adid=0VQDRB4SNAEF0GV4QFND&] 』は Facebook や実在する方達の名前が登場するノンフィクションのようなフィクション(物語)を語っているだけのように見えると同時に、象徴的な設定やシーンが多い映画でした。 私たち人間は「地位を築きたい」「他人から認められたい」「誰かからの賛同・賞賛を聞きたい」

ソーシャルメディア

ソーシャルメディアがもつ光と闇

今年のはじめに起こったエジプトの革命。 そこではソーシャルメディアが活躍し、今まで以上に社会活動にソーシャルメディアを活用しようという声が高まった印象がある(遡れば 2004 年のハワード米上院議員の例があるが、日本で紹介したときはほとんど誰も注目しなかったが)。エジプトの件ではソーシャルメディアの底力・有用性が絶賛されたわけだが、私はそのときに「次に何か社会的な変動が起こったときにソーシャルメディアの闇もみえてくるだろう」と感じた。私がへそ曲がりだからなのかもしれないが、まぁそれはそれで。 今回の東北関東大震災で、私はソーシャルメディアに助けられた点は幾つかある。携帯電話サービスがすべて機能しない中、ソーシャルメディアが情報のライフラインとなり、家族や友と連絡をとることができた。被災地にはいないから出来た贅沢であることは承知だが、情報がまったくないという状況はほぼなかったといえるだろう。 こうしたソーシャルメディアの『光』と同時に今回は『闇』も幾つか見た。恐らくエジプトでもあったことなのかもしれないが、日本語ということもありそれが明るみになったのかもしれない。 多くの人は

CloudApp
ソフトウェア

CloudApp

最近は Dropbox [http://db.tt/G8gTbu5] をはじめ様々なオンラインストレージサービスがあるので、ファイルの共有がしやすい環境になりました。とはいうものの、単にファイルを送信したい場合や短期的にファイルを公開しておきたいときに便利なサービスがなかなかありません。手軽なサービスがないが故に、思わず何メガバイトのファイルをメールに添付している方もいるのではないでしょうか。 今回紹介する CloudApp [http://getcloudapp.com/] は、ファイルをアップロードして送信するプロセスだけであれば Dropbox のようなストレージサービスよりさらに手軽です。 会員登録後、デスクトップアプリケーションをダウンロード。メニューバーに雲の形をしたアイコンが表示されます。あとは送信したいファイルをアイコンにドラッグ & ドロップするだけで OK。アップロード時にファイルが補完されている固定 URL がクリップボードにコピーされるので、何もしなくてもすぐに URL を告知することができます。手間が恐ろしくかからないのが CloudApp の魅力です。

UX

デザインのなかにある魔法と活用の仕方

2010年の iPad のプロモビデオ。この辺から「Magical」という言葉をよく聞くようになった印象があります。先月再開したポッドキャスト「Automagic」 [http://www.yasuhisa.com/could/announcement/automagic-podcast/] には「Magic(魔法)」というフレーズが含まれています。名前の由来についてはぜひエピソード1を聴いて欲しいですが、魔法という言葉をここ1年よく耳にするようになった印象があります。iPad のようなハードウェアだけでなく、何気なく訪れる Web サイトなど、私たちの周りにはたくさんの魔法が存在します。私たちのように技術や仕組みに深く入り込んでいる人間からすれば、大したことのないと感じることでも利用者の視点からすれば魔法のようだと感じることは幾つかあります。 Twitter の会員登録プロセスをみてみましょう。 登録を済ませるとワンクリックで友だちを見つけだし、その場でフォローをすることが可能です。ひとりで初めても楽しくない Twitter ですが、初めてすぐに何人かの友だちをフォローして Tw

インターネット

All Dayが生み出した新たなクリエイティブ

先週紹介したオススメアルバム Girl Talk “All Day” [http://www.yasuhisa.com/could/review/girl-talk-all-day/] 。300曲以上の楽曲がマッシュアップされているというとんでもない作品というだけでなく、マッシュアップ文化の象徴という意味でも興味深いアルバムです。70分にも及ぶ音楽の虜になった方もいるのではないでしょうか。未な方は無料でダウンロード出来るのでぜひ一度聴いてみてください。 All Day が生み出したクリエイティビティは既に新しいアートを作り出そうとしています。上の PV は写真家であり映像作家の Jacob Krupnick さんが作ったもの。”All Day” の魅力にひかれ、全曲 70 分をそのまま使って映像作品を作ろうと計画。ひとまず予告編として作ったのが上のおよそ 8 分間の映像です。 [https://www.kickstarter.com/projects/720656387/girl-walk-all-day]今回の PV だけでなく他でも Anne さんはダンスを披露しています。

Webデザイン

ビジュアルツールのもつジレンマとツールの選び方

先日、Quora のほうで Life Without Photoshop [http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop/] というエントリーを見つけました。Quora.com のデザインは最初からコードで作り始めたというエピソードとブラウザ上でデザインすることのメリットがまとめられています。 Webサイトデザインで国内外で人気なのはやはり Photoshop [https://www.amazon.co.jp/dp/B003F783DG?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F783DG&adid=1XQTJXR1M0YQZZVPQC4C&] と Fireworks [https://www.amazon.co.jp/

IA

パン屑リストについてもう一度考えてみる

様々なパン屑リスト 利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リスト [http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88] があります。IA の専門家 Keith Instone [http://instone.org/] によると、パン屑リストには以下のタイプがあると言われています。 場所の示すWebサイトをツリー状として捉えたときの利用者の現在地を表示する経路を示す利用者が現在地まで辿り着いた道筋を表示する属性を示す 断面的な検索をして絞り込む際、選択済みの属性を表示する進行状況を示すアプリケーションの利用の際、タスクの進行状況を表示する それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。

Girl Talk「All Day」
音楽

Girl Talk「All Day」

今やグラミーミュージシャンになった DJ Danger Mouse が火を付けたマッシュアップムーブメント。アメリカではマッシュアップを題材にしているTV番組 [http://tv.foxjapan.com/fox/lineup/prgmtop/index/prgm_cd/891] まで登場し、すっかり市民権を得ているイメージがあります。2つかそれ以上の曲を組み合わせてまったく新しい曲を作るマッシュアップですが、372の曲をサンプルしてアルバムを作ってしまったのが Girl Talk の 5 つ目のアルバム「All Day」です。単純計算で 1 分間に 6 つのサンプルがある計算になります。 最新のポップソングから70年代のヘビーメタルまで様々な曲が「ありえない!」と思いつつもきちんと曲として成り立っています。どれが元ネタなのか分からないくらいたくさんあるわけですが、 リアルタイムで紹介するサイト [http://mashupbreakdown.com/]もあります。 アメリカにはフェアユース [http://ja.wikipedia.org/wiki/%E3%