Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
Webデザイン

顧客ロイアリティをあげるための８要素

近年、ページビューといったマス視点の数稼ぎではなく、ひとりひとりの利用者にどのようにリーチして関係を作るかといった部分が注目されています。それはＥコマースだけでなく、コンテンツサイト、そして私が運営しているような個人サイトでもいえることだと思います。また次も訪問してもらうためには何が必要なのでしょうか？コンテンツ (製品やサービスを含）があることが必須ですが、他に何があるとロイアリティを上げることができるのでしょう。Webデザインという視点からみても幾つか提案できることがあります。 2002 年 Journal of Retailing に掲載された「Customer loyalty in e-commerce: an exploration of its antecedents and consequences (PDF) [http://linkinghub.elsevier.com/retrieve/pii/S0022435901000653]」という記事 には、顧客ロイアリティを上げるためには８つの要素が絡んでくると解説しています。随分昔の記事ですが、ソーシャルメディアと騒
アイデア

アイデアを引き出すゲームストーミングと学びのゲーム化

ゲームの要素を盛り込むことで、難しい問題の解決に繋げたり教育に活用することを「シリアスゲーム」と呼んでいます。最近あまり取り上げていませんが、シリアスゲームに関しては 3,4年前に高い頻度で記事として紹介していました。ダルフール紛争の難民問題どう解決するかをゲーム化した Darfur is Dying [http://www.darfurisdying.com/]。2004年スペインでおこった列車爆破事故を基にした Madrid [http://www.newsgaming.com/games/madrid/index.html] などなど。Kuma/War [http://www.kumawar.com/] というサイトには世界中の紛争・戦争をモチーフにしたゲームがたくさん紹介されているだけでなく、実際遊ぶこともできます。ただ銃を撃ちまくったり点数を稼ぐというゲームではなく、与えられた状況化でいかに最適なソリューションを提供するのかという考え方をゲームを通して学ぶことができます。 シリアスゲームというジャンルは元々アメリカで始まったらしく、Serious Game Initiat
コンテンツ

確信と不確信が生み出す次のアクション

CSS Nite LP11 [http://lp11.cssnite.jp/] で開催したミニワークショップ「人の特徴から見えてくる次のデザイン提案」。時間の都合でたくさんのことを伝えきれなかった部分がありますが、受講者の中にはアイデアをまとめて送ってくださった方がいます。文章にまとめてくれた方からスケッチをしている方まで実に様々。今まで３回記事にして紹介しました。 * 物理的な近さと心理的な近さから考えるプロセス [http://www.yasuhisa.com/could/article/proximity-thinking/] * ペルソナからはじめるストーリーの構築 [http://www.yasuhisa.com/could/article/persona-to-story/] * ストーリーで再認識するコンテンツの大切さ [http://www.yasuhisa.com/could/article/story-and-content/] 開催から既に1ヶ月経ちましたが、受講者の方からアイデアをいただいたので紹介します。 確信 確信がもてる情報を欲する
facebook

Facebookグループをはじめました

先週 Twitter [http://twitter.com/yhassy] でひっそりと告知しましたが、Facebook のほうでグループをはじめました [http://www.facebook.com/home.php?sk=group_163011900399339]。 Facebook Groups [http://www.facebook.com/groups/] は、その名のとおり特定のグループに対して情報共有がしたいときに便利な機能です。先週新バージョンが発表された Facebook for iPhone [http://www.facebook.com/iphone] もグループにアクセスしやすくなるよう改善されていますね。 今回のグループの開設は、今後考えているコンテンツ展開の一環で始めました。Twitter や mixi といった他のネットワークの情報を連動配信するといった使い方ではなく、このサイトにある Web デザイン関連のコンテンツを繋げ、拡張するために使います。最終的には Facebook で
UX

文化の違いで変わるデザインアプローチ［後編］

前回の「文化の違いで変わるデザインアプローチ [http://www.yasuhisa.com/could/article/cultural-difference-ux/]」で社会学者の Geert Hofstede [http://www.geerthofstede.nl/] が提唱した５つの文化測定指標を紹介しました。欧米の用語やノウハウがたくさん日本に『輸入』されるわけですが、そのまま適応しても日本ではうまくいかないことがあります。「使いやすい」「よい体験」のニュアンスも国ごとに少し違うのは当然でしょう。その違いをどのように吸収するかを考えるときに５つの文化測定指標は参考になります。 アメリカと日本で文化測定指標を比較すると、集産主義、不確実さ、長期的志向の３項目が大きく違うのが分かります。前回の記事で集産主義を考慮したデザインアプローチを紹介しましたが、今回は残り２つの指標をもう少し詳しく紹介します。 不安を解消するための明確さ 日本語という言語は抽象的な言い回しが多く、ニュアンスを捉えるのが難解な文章がたくさんあります。日本語の文学は、言語の特徴を活かした想像力豊か
UX

文化の違いで変わるデザインアプローチ

文化を測る５つの指標 世代・経験値・背景によって価値観は異なりますし、時が経つにつれて次第に受け入れることができるものがあります。価値観が変わることがあるものの、根底にはその人が住んでいる国や地域の文化の影響を受けていることは少なくありません。前回「 日本的なUXの解釈とは [http://www.yasuhisa.com/could/article/what-is-japanese-ux/] 」で国が違えば良い体験の解釈の違いがあるのではと仮説しました。それを見分ける項目のひとつとして文化を挙げたわけですが、既にある文化を測定するための指標に注目することで日本ならではの良い体験の価値観を見つけることができるかもしれません。 社会学者のGeert Hofstede [http://www.geerthofstede.nl/]は、IBMで研究していた1967年から1973年にかけて 70 カ国の従業員から様々なデータを収集。そのデータから生まれたパターンを「Cultural Dimension （文化の範囲）」名付け、５つの指標から文化測定ができると提唱しています。その５つの指標は以下
UX

日本的なUXの解釈とは

おもてなしをどう解釈してますか？ UX という言葉を仕事とどう関連付けさせるのかという課題は「UXの定義と私たちの仕事の関係 [http://www.yasuhisa.com/could/article/ux-and-me/] 」という記事をはじめ何度か取り上げています。とはいうものの以前から気になっているのは「良い体験」というのは果たして世界共通なのかということです。日本的に解釈するとどうなるのか、何が共通しているのかについて時々考えています。何気に使っている外来語（例えばイノベーションとか）も日本独自の解釈で使われていることがあります。Webデザインにしても日本独自のトレンドはもちろんありますし、海外では流行していることがそのまま日本で使えるとは限らない場合があります。 よく UX の言葉の和訳的存在になっている「おもてなし」という言葉。日本人の耳にはとても気持ちよく聞こえるわけですが、この言葉をどう解釈しているのかで考え方も変わります。「モノを持って成し遂げる」という語源をもつこの言葉。意味を調べると以下のような言葉がでてきます。 * とりはからい。処置。取り扱い * 表
コンテンツ

ストーリーで再認識するコンテンツの大切さ

CSS Nite LP11 [http://lp11.cssnite.jp/] のミニワークショップ「人の特徴から見えてくる次のデザイン提案」の受講者のアイデアを共有します。過去２回の紹介は以下をご覧ください。 * 物理的な近さと心理的な近さから考えるプロセス [http://www.yasuhisa.com/could/article/proximity-thinking/] * ペルソナからはじめるストーリーの構築 [http://www.yasuhisa.com/could/article/persona-to-story/] ストーリー 私たちの選択は、実経験か想像に関係なく何かのストーリーと関連している。 今まで発表したサイトは CSS Nite [http://www.cssnite.jp/]の提案でしたが、課題にでていたサイトは CSS Nite だけでなく KDDI Web Communications 様の CPI [http://www.
セミナー

ペルソナからはじめるストーリーの構築

> cssniteのサイトを対象とし、はじめて参加される方へ敷居を下げる改善プラン抽出の為、既存サイトとあるべき像を擬人化@nakagawanさんのプレゼン内容をプチ実践。 from: kazumissimi [http://twitter.com/kazumissimi] 前回 [http://www.yasuhisa.com/could/article/proximity-thinking/]に引き続きCSS Nite LP11 [http://lp11.cssnite.jp/]のミニワークショップ「人の特徴から見えてくる次のデザイン提案」の受講者のアイデアを共有します。JWDA の 中川さん [http://lp11.cssnite.jp/#nakagawa_jwda] が自身のセッション内で「ペルソナをつくる」という話をされていましたが、ペルソナつくりを今回のワークショップに取り入れて発表したのが kazumissimi [http://twitter.com/#!/kazumissimi/]さんです。 ストーリー 私たちの選択は、
UI

読書体験を共有するためのデザイン提案

ページ上に読者の感想や、ディスカッション、そして読まれている文章の傾向が分かるというのは電子書籍のひとつの読み方としておもしろいと思います。しかし、それは様々ある読書スタイルのほんの一部にマッチした提案です。読書は基本的に『一人旅』に近いと感じています。読書という旅の経験を人と共有することはあると思いますが、それは読書する前後であって読書している最中に思いを共有することはさほどないような気がしています。読んでいる瞬間に生まれる読者と作者 (書籍) の一対一の関係が読書をまた特別なものにしていますし、そのときの体験を共有する楽しさはあると思います。 読書を一人旅と例えるのであれば、読書の最中の演出・機能はむしろ邪魔な存在かもしれませんし、それだけが電子書籍の魅力だとすると今の読書の体験とズレているのではないでしょうか。 ノンフィクションやハウツー本だと同時に他の読者の様子が分かるというのは有効かもしれませんが、一人旅としての読書を補助することができる電子書籍のあり方もあったも良いのではと考えています。 > カフェで友達に会ったとき本の話題が出て「あぁこれだよ、読んでみなよ」ってデバ
セミナー

物理的な近さと心理的な近さから考えるプロセス

CSS Nite LP11 [http://lp11.cssnite.jp/] で「人の特徴から見えてくる次のデザイン提案」というミニワークショップを行いました。時間の都合で考えたアイデアは後ほど共有という形で終了しました。今回から数回に渡りいただいたアイデアを幾つか紹介していきたいと思います。 近さ モノとモノが近いと、遠いもの同士に比べて関連性が近いと理解する。 人の特徴を活かしてサイト特有のゴールを達成させるためのアイデアを練るというのが今回のワークショップの目的ででした。ワークショップでは14もの人の特徴を紹介しましたが、その中のひとつに Proximity (近さ) というのがありました。 上の図を見てください。色が違いますが、直感的に隣り合っている円が同じグループに属しているように見えると思います。色にはまったく共通点がありませんが、近さが同じグループであると思わせています。ＡとＩ、ＦとＨはそれぞれ同じ形と色です。しかし、それぞれに何か関連性があるとは考え難いです。たとえ同じ情報でも近くなければ関連性が見えてこない一例です。上の図は極端な例ですが、情報を設計する上
本

Q&A: 「人の特徴」について書かれた書籍があれば教えてください

> 「人の特徴」について書かれた書籍、紹介していただけるとありがたいです。わたくし、日本語しか読めませんが。 from: withoutsugar [http://twitter.com/withoutsugar] 先日開催された CSS Nite LP11 [http://lp11.cssnite.jp/] で、技術的でもなく、単なる見た目だけでもない新しいデザイン提案を人の特徴に注目して考えてみようというワークショップを行いました。大急ぎで 14 もの特徴を紹介したので飲み込めなかった方もいたかと思います。同時にちょっと興味あると思った方もいるのではないでしょうか。 今回ワークショップで紹介した主な特徴は行動経済学で研究されていることで、このサイトでも何度か紹介しています。基本的なことが知りたいというのであれば、行動経済学の立役者であるダニエル・カーネマン氏の紹介記事 ところで「体験」ってなんですか [http://www.yasuhisa.com/could/article/what-is-experience/] を参照してください。経済という言葉がはいっているだけあり
コンテンツ

伝えるための情報デザイン、文章デザイン

私たちは人に何かを伝えたいときに、言葉・絵・音・映像などを駆使して表現します。標識のようにひとつの形式でユニバーサルに伝わることもありますが、そうはいかないことがしばしばあります。このサイトでよく取り上げている「 デザイン [http://www.yasuhisa.com/could/tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/]」「 マーケティング [http://www.yasuhisa.com/could/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%
プロセス

ブレないワイヤーフレームを作るコツ

すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ [http://www.yasuhisa.com/could/article/5-approaches-of-wireframes/] 」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか作ることで何を達成させたいのかを明確にします制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか ワイヤーフレームを作るという
コンテンツ

効率よくタグ付けをするツールとサービス

「コンテンツを繋ぎ合わせる理由とメリット [http://www.yasuhisa.com/could/article/create-semantic-contents/] 」で、コンテンツにメタデータを付随することの重要性を解説しました。発行日・更新日・筆者といったデータは CMS から簡単に引き出せますが、コンテンツの文脈を示すタグ (キーワード) をどう記入するかが難しいところです。執筆したコンテンツを全体から捉え、短くて明確なキーワードを考えるのはなかなか難しい作業です。個人サイトであればまだいいですが、一日に複数のコンテンツを配信しなければならない環境だとひとつひとつタグを考える時間はないでしょう。複数人の人がタグの記述に携われば言葉のブレも発生するかもしれません。 そこでコンテンツを解析し、的確なキーワードを提示するサービスの利用が欠かせなくなります。SmartLogic [http://www.smartlogic.com/] や Nstein [http://www.nstein.com/en/] が解析・分析を行っているサービスですが、いずれも大企業向けのソリュー
microformats

コンテンツを繋ぎ合わせる理由とメリット

コンテンツに意味をもたせる SEO、アクセシビリティ、ユーザビリティを考慮するのであれば「セマンティック」は忘れてはならない言葉です。しかしながら「セマンティック」という言葉は HTML のようなマークアップのみを指しているのではなく、別の側面もあります。例えばあるページに「デザイン」という言葉があるとします。そこに「CSS」「HTML」「レイアウト」など幾つかのキーワードが付随することで、「デザイン」だけでは捉え難いコンテンツの文脈と範囲を理解することが出来ます。キーワードだけでなく誰が書いているのかといった情報も付随すれば、情報を別の角度から繋ぎ合わせることも考えられます。コンテンツにメタデータがあることで各コンテンツとの関わりが明確になるだけでなく、各コンテンツの意味が深まるのでコンピュータの理解力が増します (つまり SEO 的な効果も考えられます) 。 制作側はコンテンツを載せるためのコンテナ (レイアウト、ナビゲーション、ウィジェットのようなサブエリア) のマークアップを可能な限りセマンティックになるよう整備をしていますが、コンテンツはどうでしょうか。ライティングガイドラ
仕事

最近Geek Outしてる？

「Geek」はオタクとか熱中している人という意味ですが、「Geek out」は聞いたことがないという人もいるのではないでしょうか。モノを作ったり何かを伝えたいと思っている人にとって（良い意味でもそうでない意味でも）覚えておきたいフレーズだと思います。 Urban Dictionary [http://www.urbandictionary.com/define.php?term=geek+out] には以下のように書かれています。 > The act of becoming emotionally and physically aroused by the sight or the thought of a technicality of a certain topic of major interest. 自分が興味をもっている何かに対して興奮したりワクワクしたことはありますか？「Helvetica [http://www.amazon.
ワイヤーフレーム

OmniGraffleを便利に使うあれこれ

制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle [http://www.omnigroup.com/products/omnigraffle/] があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作り [http://www.yasuhisa.com/could/article/omnigraffle-template/] で便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は
UX

自社にUX文化を広めるコツ

UX や HCD の勉強をしてみたり、ワークショップに参加しても、会社内での理解を獲得するのが難しい場合があります。装飾より広い範囲でデザインを考えことは時間 (コスト) が必要だけでなく、同僚のデザインプロセスの参加は不可欠です。しかし、成果物として見え難いプロセスですし、「自分はデザイナーではない」と最初から拒否されることもあります。外で入手した様々なデザインアプローチをひとりでいきなり始めても何も変わりませんし負担が大きくなるだけです。UX を社内の文化として取り入れるよう働きかけ、デザインがしやすい環境作りがまず必要になります。 つまり、勉強の次は啓蒙活動です。 社内勉強会をしているところであれば、そこで外で学んできた知識を共有することはできると思います。やっていない企業でも忙しいスケジュールの中から2,3時間ほど共有する時間を絞り出すことは出来るはずです。では、そこで何を話せば良いのか、何に注意しなければならないのでしょうか。 * 制作以外の方にも参加してもらう * UXが何かの解説ではなく、なぜそういった考え方が必要なのか説明する * UXを考慮したデザインプロ
言葉

英語モードに切り替えるシンプルな方法

H2O Space [http://h2o-space.com/] は、不定期に少人数の勉強会を開催しています。Webデザインや電子書籍など勉強で取り扱うトピックは多岐にわたっていますが、先週行われた勉強会のトピックは『英会話』。長くアメリカに在住していたという経験と、 Web Directions East [http://east.webdirections.org/] でときどき通訳をしているということで、谷口さん [http://twitter.com/seltzer] から講師として指名を受けました。高校のとき「おまえの英語の成績じゃ留学しても失敗する」と先生に言われるくらい英語の成績がよろしくなかった私ですが、なんとか読み書き話せるようになりました。当時の経験と、帰国後も英会話のスキルを保つため自分が何をしているのかという話をしました。 英語は英語として受け止める 私もたまにありますが「この英語の表現ってなんで言うんだっけ？」なんて思うことがあります（時々記事を書くときに英和で意味を調べることもあります）。その理由として、ひとつひとつの英単語の対訳を覚えているわけではなく
UI

インターフェイスとしてテキストをみたときに考慮すること

サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter [http://twitter.com/yhassy] をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。 インターフェイスをデザインする際に、考えなければならないことは幾つかあ
コンテンツ

Webを活用したマニュアルの役割とは

先週、新宿で開催されたテクニカルコミュニケーションシンポジウム2010 [http://www.jtca.org/symposium/index.html] にて、パネルディスカッションのパネラーとして参加させていただきました。Web技術やデザインに関連する話ではなく、ネット社会のいまとマニュアルのこれからを考えるという内容でした。マニュアル（テクニカルライティング）という世界はあまり詳しくありませんでしたが、出演のオファーをいただいた２ヶ月前から調査・勉強をし、このサイトでも紹介しているような情報を交えて話に加わりました。 そもそもマニュアルとは？ 電子書籍でもハマる問題 [http://www.yasuhisa.com/could/article/metaphor-usability/] ですが、今までのマニュアルの見た目・印象を活かしつつ電子化してしまうと、紙のように見えて紙ではないよく分からないデジタルマニュアルになります。「よりリッチに」ということでインタラクティブなコンテンツが盛り込まれた CD-ROM が同封される場合もあります。しかし、そんな形ではマニュアルの電子化に
アイデア

紙の漫画とは違う電子漫画の可能性

先週、集英社の漫画雑誌「ジャンプSQ.」が iPad アプリとして無料配信 [http://www.itmedia.co.jp/news/articles/1008/17/news061.html]されました。他にも Yahoo!コミック [http://comics.yahoo.co.jp/promo/appli/iphoneos/] や eBookJapan [http://www.ebookjapan.jp/ebj/index.asp] のように漫画をたくさん読める場も日本で増えて来ています。iPad は単行本に比べて少し大きいので見やすいですし、文字数が少なくサイズもあるので、雑誌のレイアウトをそのままスキャンしたようなものに比べて読みやすいです。漫画の電子書籍というジャンルであれば携帯電話が先取りしていますが、スクリーンのサイズと独自のインタラクションを加えることが出来るという点で、iPad をはじめとしたタブレット向けの漫画は雑誌より先に広まりそうです。 iPad くらいの大きさ（もう少し小さくてもいいです）