Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
インターネット

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年よく耳にするようになった印象があります。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] まで登場し、すっかり市民権を得ているイメージがあります。２つかそれ以上の曲を組み合わせてまったく新しい曲を作るマッシュアップですが、372の曲をサンプルしてアルバムを作ってしまったのが Girl Talk の 5 つ目のアルバム「All Day」です。単純計算で 1 分間に 6 つのサンプルがある計算になります。 最新のポップソングから70年代のヘビーメタルまで様々な曲が「ありえない！」と思いつつもきちんと曲として成り立っています。どれが元ネタなのか分からないくらいたくさんあるわけですが、 リアルタイムで紹介するサイト [http://mashupbreakdown.com/]もあります。 アメリカにはフェアユース [http://ja.wikipedia.org/wiki/%E3%
デザイン

ポッドキャストを再開します

2005年1月から2009年まで「Inflame Casting」という名のポッドキャストを配信していました。日本では初期から配信していたポッドキャストのひとつで iTunes Store にもなぜかオススメポッドキャストとして表示されていた時期もありました。聞いてくださっていた方もいるのではないでしょうか。2008年あたりからこのサイトの記事の内容を濃くするために時間を割くようになってから、反比例するかのようにポッドキャストの配信が減り自然消滅してしまいました。 いつか再開しようと考えていたのですが、またやるのであれば中途半端にしたくありませんでたし、YouTube や Ustream のような動画配信がある中、あえてオーディオでやるというおもしろさも再確認したいという気持ちもありました。今年に入って実験的に Facebook グループ [ http://www.yasuhisa.com/could/announcement/facebook-group/] にてポッドキャストを毎週配信していました。限定的な配信でしたがフィードバックもいただけたり、それなりのダウンロード数を確保
Webデザイン

Webデザインにある駆け引きとコダワリ

Webは人とデータに開放された世界 電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver [https://www.amazon.co.jp/dp/B003F7831I?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F7831I&adid=14E6WW5MR5ZFNY1RQ6MB&] のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP
UX

文脈を理解したWebコミュニケーションデザイン

パッケージングの違いは文脈の違い 前回の記事「あなたも私もメディアカンパニー [http://www.yasuhisa.com/could/article/you-are-media-company/] 」で、コンテンツを制作するだけでなくメディアカンパニーのように配信の仕方にも工夫をしなければならないという話をしました。コンテンツを配信する際に考えておきたいポイントを記事で幾つか紹介していますが、制作者として注目しておきたい要素は「パッケージング」です。情報を利用者・顧客に届けるために、どのようなパッケージングをすると最適なのかを考えなければいけません。 パッケージングは、制作者であれば意識しなくても常に考えていることです。パソコン上で動作する Web ブラウザ上でどのように Web サイトの情報を表示させれば良いかを常に考えていると思います。最近だとスマートフォン向けの Web サイトをどう作るか考えている方も多いでしょう。パッケージングでまず最初に考えておきたいのが、どの情報をどのように見せるかです。 例えば Web サイトのモバイル版を作るとしても、単に PC 版の情報をモ
ソーシャルメディア

あなたも私もメディアカンパニー

メディアを配信することは権利に近い 以前 「ソーシャルメディアの語源から分かる課題 [http://www.yasuhisa.com/could/article/what-is-socialmedia/] 」という記事で、ソーシャルメディアという言葉はコンテンツを共有するサイトが次第に SNS 的な機能を盛り込んできたところから生まれたと解説しました。ソーシャルという言葉が付いてくると、どうしても社会的関係性・人と人との繋がりにフォーカスされがちです。実際、ソーシャルメディアの活用といった話になると、特定の社会ネットワークに最適化されたコンテンツを配信するという話題になることがあります。活用するという結果という意味では確かにそうなのですが、ソーシャルメディアという言葉は「人と人とが繋がっているメディア」と捉えることが出来ると同時に「メディアの社会化・公共化」と捉えることが出来ます。 カタカナ英語で表現すると「ソーシャルなメディア」であると同時に「メディアがソーシャル」になったわけです。 メディアをもつということは特定の団体や個人による専売特許ではなく、普通にあるものへと変化していま
LEAFから始まるソーシャルメディアの対話
アイデア

LEAFから始まるソーシャルメディアの対話

SIPSからみえてくる課題 先日サトナオ・オープン・ラボがソーシャルメディアに対応した新しい生活者消費行動モデル概念「SIPS」を発表しました [http://www.dentsu.co.jp/sips/]。今の時代における消費者の行動を Sympathize (共感する）、 Identify (確認する）、Participate（参加する）、Share & Spread（共有・拡散する）という４つのステージに分解。共感から共有へ。そしてまた共感へと繋がるサイクルを分かりやすく表現しています。資金をもつ企業だけが情報を伝達できるのではなく誰もが影響力をもつということを前提に、顧客とどのようにコミュニケーションをとれば良いか考える上において SIPS は基本といえるのではないでしょうか。 しかしながら、SIPS のサイクルには幾つか検討しなければならない点があります。 解説ではソーシャルメディアという一般消費者も影響力がある世界を意識してはいるものの、「共感する」のステージからいきなりマスメディア的なアプローチなのが気がかりです。他の人に伝えたいコンテンツの中に共感は確かにあります
アイデア

人の関係を考慮したレビューの見せ方提案

陳腐化しているレビューコンテンツ 製品を購入する際に、 製品情報だけでなくレビューに目を通す方は多いと思います。公式の製品情報だけでは分からない感覚や着眼点が書かれていることがあるレビューは製品購入の決定の際に多大な影響を及ぼします。Nielsen が 2009 年に出した調査結果 [http://blog.nielsen.com/nielsenwire/consumer/global-advertising-consumers-trust-real-friends-and-virtual-strangers-the-most/] によると 70%〜90% 以上の方が知人や購入者の意見を信用するといっています。これはブランドのWebサイト (70%) や雑誌などの記事に書かれているコラム (69%) より高い数値です。Facebook などをはじめとしたソーシャルネットワークやレビュー専門サイトで人々が製品やサービスについて話しているのは、彼等がレビューやレコメンデーションを求め合っているからなのでしょう。 私たちの行動に大きな影響を及ぼすことがあるレビューですが、現状レビューがうま
UX

SEOとデザインは今後より密接になる理由

SEOの終わる部分とそうでない部分 情報が無限大に広がる Web の世界。そこから自分にとって必要な情報を見つけ出すのは至難の業です。 そこで、検索エンジンが活躍するわけですが、ただ Web サイトを作っただけで的確なかたちで検索結果に表示されるとは限りません。コンテンツ配信側が検索エンジンに対して自分たちのサイトがどういったサイトなのかを的確に知らせることを「SEO (Search Engine Optimization)」と呼びます。検索する利用者に対して効果的に露出したいという意味で「SEO対策する」という言葉が使われることがあります。この場合、SEO は瞬時にアクセス数を上げるための起爆剤として活用していると考えることができます。 SEO はこうした起爆剤的な要素だけを指しているわけではありませんが、「アクセスが上がる」というキャッチーなフレーズが付随されていることもあり、SEO と聞くとアクセスを上げるためのテクニックと連想する方がいると思います。そこだけを SEO と見なすのであればキーワードを購入したり、ソースコードを調整すれば良いと考ることができますが、それは狭い意
openwebdesign

今月のデザイン変更点

昨年8月に「記事ページのアクセス通信簿 [http://www.yasuhisa.com/could/diary/report-on-article-design/] 」と題して記事ページのデザインの変更の意図とその効果について解説しました。その後、いろいろ機能を追加して模索をしているのですが今月が大きな機能が幾つか追加されたのでその紹介も含め、効果と課題について紹介していきます。 次に繋げるための工夫 まとめ系記事を除いて、記事は非常に高い割合で最後まで読まれている場合が多く、滞在時間も長いです。コンテンツの質も月ごとで若干異なるのでなんともいえないですが、今月は直帰率も低かったので読者が滞在してくれた月といえるかもしれません。 しかし、このサイトは検索やソーシャルメディアなどを通じてサイトにアクセスする方が多いこともあり、一期一会の関係で終わってしまう場合が多々あります。平均ページビューを増やすにはどうにかしたらいいのか、どのサイトも頭を悩ませているかと思います。たくさん選択肢を与えればクリックするわけでもありませんし、メインコンテンツ (記事) の邪魔をしていたら逆効果です。
デザイン

デザインについて語れる批評をするコツ

批判ではなく批評 個人プロジェクトでない限り、公開前に誰かにデザインを見せる機会があると思います。相手はクライアントかもしれませんし、同僚・上司なのかもしれません。デザイナーの中には見せるのを躊躇している方もいるのではないでしょうか。知恵とスキルを出し切って作り上げた子供のような存在なので、万が一批判されたのであれば自分自身も批判されているように感じるのではないでしょうか。IDEOの Time Brown 氏が TED の講演で「デザインはデザイナーだけに任せるには重要過ぎる [http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html] 」という言葉を残しているとおり、デザインを皆で考える機会を作るべきです。デザイナーは早い段階から他の誰かとアイデアを共有するべきですが、会話が批判的なものになりすぎているのであればデザイナーも積極的に参加もしてくれませんし、デザインを前提とした会話にはならないでしょう。 「この色は違う」「使いにくそうだ」「分かっていない」 自分の作りだしたアイデアに対してこんな言葉が出
デザイン

直感を殺した効果測定崇拝は止めよう

宗教になった効果測定 昔、Webデザインは直感・経験・感性のみで作られていました。しかし、低価格・無料のデータ解析ツールが登場したことにより、より多くのサイトがデータ解析をサイトの成果測定に利用するようになりました。従来はページビューという大まかな数でしか価値を測定することが出来なかったわけですが、その場にいる利用者の姿も徐々に見えてくるようになりました。現在はページビューだけでなく滞在時間、訪問頻度、コンバージョンなど様々な要素を効果測定要素として取り上げるようになりましたし、それらを基に改善のプロセスが組まれるようになってきました。 ビジネスを考える上において、直感・経験・感性に行き過ぎていた従来の Web デザインは不十分な存在でした。そこで効果測定を積極的に取り入れようという動きが生まれたわけですが、今度は効果測定が『宗教化』してしまい本質を奪ってしまう場合も出て来ています。 効果測定は魅力的な存在です。なぜなら自分たちが作り上げたサイト・サービスの価値を確固たる数字として分かりやすく提示するからです。分かりやすい数値として表示されるからこそ、同僚・クライアントなど多くの人
facebook

脱テンプレートなFacebookの難しさと関係の変化

ネットワークのテンプレート化の終焉 2003年頃から次々にでてきた SNS。Facebook [http://facebook.com] もその一種なのにも関わらず、使い方セミナーや勉強会が各地で開催されています。多機能、複雑というイメージが先行しているのも事実ですし、実際いろいろやることが多いのが Facebook。数多くの SNS がでてきた中、なにが Facebook が違うのでしょうか。 代表的な例として実名で公開しているという点が挙げられることがありますが、それが特に珍しいわけではありません。ビジネスに特化してしまえば LinkedIn [http://www.linkedin.com/] も元々そうですし、規則ではなかったにしても他の SNS でも実名を記入することからコミュニケーションを楽しんでいた人たちはいました。 Facebook がなんとなく難しく感じる理由と、実名公開を貫く Facebook の姿勢。一見関係のないふたつのように感じますが、他の SNS との根本的な違いが複雑そうに見えるけど実名公開は OK かもと思える環境を作り出しています。 従来の SN
らくだをデザインしていませんか？
デザイン

らくだをデザインしていませんか？

> A camel is a horse designed by committee. (ラクダとは委員会によって設計された馬である) Alec Issigonis [http://en.wikipedia.org/wiki/Alec_Issigonis] らくださんがかわいそうですが、いろいろなアイデアを盛り込むことで結果的に何がなんだか分からない不細工なものが出来てしまうという意味が込められています。「We just made a camel（らくだをつくってしまった）」という表現を使う場合がありますが、語源は上記の格言になります。デザインの決定権をもっている人がたくさんいて、彼等の意見をすべて取り入れてしまうことで最初のビジョンとはかけ離れたものになってしまう・・・なんとも人ごとではないシナリオです。 以前「デザインが失敗してしまう理由 [http://www.yasuhisa.com/could/article/why-designers-fail/] 」でもデザインをしない方や知識のない方が決定権をもつことが失敗に繋がると紹介しました。プロジェクトに携わっているのであれば
モバイル

モバイル開発に欠かせないテストツール14選

Adobe Device Central CS5 [http://www.adobe.com/jp/products/creativesuite/devicecentral/] Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK [http://developer.android.com/intl/ja/sdk/index.html] Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox