Yasuhisa Hasegawa - Yasuhisa Hasegawa (Page 29)

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 くらいの大きさ（もう少し小さくてもいいです）

Webデザイン

組み立てるだけのサイト制作プロセスを変えるヒント

書籍や雑誌をはじめとした印刷物。TVやラジオで見られるような広告。デスクトップで動作するソフトウェア。これらの制作プロセスは Web サイト制作において影響を与えてきてモデル。テクノロジーやノウハウが蓄積され独自性も多少出て来たものの、Webサイト制作プロセスは基本的なところは10年くらい変わらないのではないでしょうか。配布してしまったら終わりの印刷物。一瞬でもインパクトがあればそれで良いテレビCM。企画といっても仕様や機能を決める話になり、始めたら後に戻りにくいウォーターフォール式のソフトウェア開発。いずれのプロセスも長所はありますし、それぞれの形に合っているから使われているわけですが、人と人、情報と情報、そして人と情報が常に双方向に繋がり続けている Web という有機体にはいずれの方法も適していません。流動的に変化を続ける Web だからこそ、アジャイルソフトウェア開発 [http://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%BD%E3%83%95%E3%

言葉

Q&A: エンゲージメントを与えるための考え方や手法はありますか？

> 成果物のUXにおいて、Jesse James Garrettが話しているようにエンゲージメントを与えるということが重要になってくると思います。それぞれのサイトの趣旨によっても変わってきますが、長谷川さんはどのようなアウトプットの仕方でエンゲージメントを与えようと考えますか？また、その際、気を付けていることや長谷川さんが持っている方法論等があれば教えてください。 from: toshi ここ数年、デザインやマーケティングなど様々な分野で耳にするようになった「エンゲージメント」。愛着心や絆など、分野でによってニュアンスが微妙に異なるこの言葉ですが、ここで言う「エンゲージメント」とは「積極的に行動する状態」「集中・没頭出来る状態」を指します。アプリケーションやサイトを利用において、利用者が意味のある体験をしたかどうかを測る測定値としてエンゲージメントに注目する場合もあります。エンゲージメントのある体験とは楽しいだけでなく、生産的でしょうし、簡単と感じる場合もあるでしょう。楽しい時間を過ごしているとき、自分にとって意義のあることをしているときは、集中力が増しますし、時間がアッと言う間

google

Waveから見えてくるGoogleの弱点

発表された当時から「なんかスゴそうだけど何かよく分からない」と言われていたGoogle Wave。常に細かな改善はされていましたし、今年の 5 月に開催された Google I/O 2010 [http://www.yasuhisa.com/could/article/google-positive-ux/] では Wave を利用したカンファレンスの整理や情報交換に利用されていました。私も先月開催されたセミナー＆ワークショップ [http://www.yasuhisa.com/could/diary/aomori-ux-2010/]で Wave を利用していたわけですが、発表されてわずか1年でGoogle Wave 開発中止 [http://googleblog.blogspot.com/2010/08/update-on-google-wave.html]になりました。一般公開されている Public Wave を見てみると結構盛んなやりとりをされているものも少なくなく、

UI

メタファーが作り出す期待値と使いやすさの関係

Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「メタファー」と呼びます。メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。フロッピーディスクアイコン (保存) [http://www.yasuhisa.com/could/article/meaning-of-save/] のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。メタファーが作り出す「使い難い」ユーザビリティを向上させることが出来るメタファーですが、何

openwebdesign

記事ページのアクセス通信簿

今のような記事ページになった理由今年の始めに記事ページを新しくしました。そのあと小さな調整を行ったり機能を追加はしていましたが、そろそろどのような結果が出たのが発表するには良い時期だと思いますので幾つか紹介したいと思います。ご存知の方もいるかもしれませんが、今「記事」と呼ばれるエントリーはほとんどすべてレイアウトが違います。中には色を変えただけのものもありますが、レイアウトが少し複雑なものや画像が活用されているものもあります。凝り過ぎたことをすると読み難くなってしまいますが、毎回見た目が新鮮なので飽きることもありませんし、それがキッカケで読んでくれる方もいるかと思います。最近、海外ではこうした記事ごとにレイアウトを変えるという手法が増えて来ていますが、私は10年近く前に同じようなことをしていました。当時は CMS もなく、ひとつひとつ HTML で書いていました（アーカイブページのリンクまで手書きで調整していたわけですから、今考えると信じられない手間ですね)。学生で時間があったということで日記を書く度にレイアウトを変えていましたし、場合によっては Flash も利用してい

デザイン

Q&A: ユーザー側面の変化をどのように促しますか？

> ユーザーを利用者や閲覧者などに分類するのをx軸と考えると、各タイプの成長、もしくは分類の変化をy軸と考えられるのではと思いました。最終的に獲得したいターゲットユーザーにもよりますが、例えば、ECサイトでの観覧者から消費者への変化という風に、各タイプの学びによるステップアップ、もしくは他タイプへの変化は、どういう道程・要因が考えられるかをお聞きしたいです from: CalmTech [http://twitter.com/calmtech] この質問に応えるには、まず全体像を視覚化してみたほうがよさそうですね。X軸のユーザ分類にはユーザーという言葉に潜む５つの側面 [http://www.yasuhisa.com/could/article/five-sides-of-the-word-user/] で紹介したものを活用します。左から右へ向かうにつれてユーザーがより能動的なアクションをとると見なして並べてみました。Y軸には「ECサイト」や「Webアプリ」など幾つかサイトの種類を配置。各種Webサイトがどういった側面をもったユーザに響くのか考えてみました。例えば EC サイトだ

意見

新聞サイトの有料サービスの糸口

有料コンテンツは成功しない？イギリスの新聞サイト The Times [http://www.thetimes.co.uk/] は、6月から有料サービス [http://www.timesplus.co.uk/] を開始し、記事の全文を読みたい場合は会員登録をしなければならないようにしました。その結果、2月のアクセス数に比べ 90% も落ちたそうです (詳細記事 [http://www.guardian.co.uk/media/2010/jul/20/times-paywall-readership] )。外サイトからリンクを辿ってアクセスした際は、自動的に登録ページへリダイレクトされるように設定されており、そのうちわずか 25.6% が先に進んでサイトを観覧したそうです。値段だけでなく、やり方も不味かったと思いますが、これは大打撃といえるでしょう。 The Times は 15,000 の有料会員を獲得したので、一概に失敗例とは呼べません。

UX

青森で話したＵＸの大事なコト

先週7月17日、青森のほうで UX をテーマにした講演 [http://yes-aomori.jp/?p=583]をしました。青森は CSS Nite AOMORI 2007 [http://cssnite.studiomd.jp/seminar/2007.php] 以来、毎年来青しているので「訪れる」というよりかは「戻ってきた」というイメージがしますね。2008年前はWebマーケティング [http://www.yasuhisa.com/could/diary/seminar-in-aomori-july2008/]、そして2009年はコンテンツ戦略 [http://www.yasuhisa.com/could/diary/aomori-marketing-seminar/] について話をしました。来青経験はあるものの、ほとんどのセミナーが講演のみでしたが、今回はセミナーとワークショップをワンセットにしたイベントでした。 UX

セミナー

不合理な人間から導き出すデザイン提案

作り方ではなく考え方で変わる [http://www.amazon.co.jp/gp/product/4152089792?ie=UTF8&tag=could-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4152089792] 最近、行動経済学に関わる書籍や文献を読む機会が増えてきていますが、その中でおもしろかったのが「予想どおりに不合理 [http://www.amazon.co.jp/gp/product/4152089792?ie=UTF8&tag=could-22&linkCode=as2&camp=247&

UX

ユーザーという言葉に潜む５つの側面

U > X 抽象的なアイデアを話しているかのようにみえる「UX」ですが、意味をあやふやになってしまうのは実は「Experience (体験)」のほうではなく「User (ユーザー)」という部分にあるのではと感じています。「Webサイト」とひとことで表すものの、Webアプリケーション、Ｅコマース、コミュニティサイト、個人サイトと様々な種類があり、それぞれ人との関わり方が違います。Webでの操作は能動的なものが多く「User / 利用者」と表現しやすいですが、すべてが能動的な Web サイトではありませんし、能動的な行動にも幾つか違いがあります。使うといっても、Webアプリケーションを操作する方と、Ｅコマースを訪れる方は見所が違いますし、自分がした体験の評価の仕方も異なります。つまり、UX について語るとしてもどのような人たちに何を提供したいのかという前提を共有していないと、「よい体験を」なんていうえらく抽象的で当たり前のような回答しか出てこないこともあります。「U」なくして「X」はないわけです。言葉では User と単純に表していますが、単なる利用者としてしか言葉を捉えていないとすれ

google

Google が考えるよりよいユーザー体験とは

先月開催された Google I/O 2010 [http://code.google.com/intl/ja-JP/events/io/2010/] は、WebMプロジェクト、Chrome Web Store、Google TV などなど興味深い話題が目白押しだったわけですが、デザイン関連でもおもしろい講演があったのも見逃してはいけません。Google とデザインはかけ離れていると考える方もいるかもしれませんが、そんなことはありません。装飾的な意味でもデザインはないかもしれませんが、彼等は高いデザイン意識をもって開発をしています。その例として以前紹介した Google のデザインガイドライン10項目 [http://www.yasuhisa.com/could/article/google-design-guideline/]が挙げられます。 Google I/O では「Beyond design: Creating positive user experiences [http:

UX

使いやすいさと認知負荷のバランス感覚

私たちが「使いやすい、直感的」だといっている機器やソフトウェアでも、脳や身体は何かしらの処理を行っています。自分が使いやすいと思っていることも、人にとってはそうではない場合があります。これはリテラシーの高い／低いということで片付けることが出来ることでしょうか。デザインを考えるにおいて「簡単に（気軽に）使ってもらう」ということはひとつの課題であると同時に目標です。インストラクショナルデザイン [http://ja.wikipedia.org/wiki/インストラクショナルデザイン] は、人がいかに学習するのかを研究しデザインする分野です。Wikipedia では「より良い学習の環境を総合的にデザイン」と書かれているので、教育分野のデザインと考える方も少なくありません。20世紀後半から今世紀になると人の学習の仕方だけでなく、脳がどのように情報を処理するのかにも注目が集まりはじめます。こうした背景から認知負荷理論 [http://en.wikipedia.org/wiki/Cognitive_load_theory] (Cognitive Load Theory) が登場します。人

コンテンツ

よりよいコンテンツ開発と環境つくりの関係

先月ひっそりと実装された、新しい機能「読むモード」。このサイトの読書体験を毎回新鮮なものにしたいという思いから様々なレイアウトで提供しているものの、人によってはシンプルに読みたいという方もいます。そういった方に向けてナビゲーション要素や独自のレイアウトを一切省いて読むことを可能にするのが「読むモード」です。 RSSを購読 [http://www.yasuhisa.com/could/rss] してもらえれば、同等のシンプルな見た目で読むことは出来ますが、わざわざ購読はしたくないけどシンプルにさっと読みたいという方には最適な機能だと思います。 iPad で読むモードに切り替えても読みやすい記事ページのリニューアル以来、どれくらいの方が下のほうまでスクロールしているのかをモニタリングしていますが、およそ8割の方が記事下までスクロールしています。今のところ読むモードにするとトラッキングの JavaScript も Off になってしまいます。それゆえ読むモードによって最後まで読む方が増えたかどうかというのは検証しにくいですが、設置後の滞在時間が若干減ったことを考えるとすぐに読み終えている