apple ブラウンとアップル Steve Jobs が他界した [http://www.yasuhisa.com/could/diary/thank-you-steve-jobs/] のがキッカケで、再度アップルのデザインが注目されていますが、忘れてはならないのが Dieter Rams（ディーター・ラムス） [http://ja.wikipedia.org/wiki/%E3%83%87%E3%82%A3%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%BB%E3%83%A9%E3%83%A0%E3%82%B9] の存在。
デザイン 非デザイナーも知っておきたいデザインにある葛藤とホンネ 去年から恒例イベントになっているWebSig 1日学校 [http://1ds.websig247.jp/2011/] 。古い学校の校舎を使って正に学校で学んでいるような気分で参加できるこのイベント。今年は「デザイン視点のコミュニケーション術 」というタイトルで講師をさせていただきました。主催者からの依頼が非常に難易度が高く、扱うトピックからスライドの完成まで悩みながら作りましたが、そのプロセスで見えたところもたくさんあり、イベントも含めて学びと出会いがたくさんありました。 なぜ『作る』以外について語ったのか デザイナーの仕事はレイアウト、UI、ルック&フィールなどを作る人。コンセプトや潜在的にあるものを視覚化出来る人と捉える方が多いと思います。作り出すことがデザイナーの能力ではありますが、語られる部分が「作る」という部分に集約してしまいがちです。しかし、実際のところ「作る」部分というのはデザイナーの能力のほんの一部でしかなく、それ以外が重要だったりします。IBM のデザインの氷山モデル [http://www-01.ibm.com/software/ucd/designconcep
コンテンツ 認知の違いから分かる効果的な情報の見せ方 情報は単に配信すれば伝わるというわけではありません。仕様書を読んで理解できる人もいれば、噛み砕かれた解説書を読むことで理解できる人もいます。また、文章を読んで論理的にアイデアを組み立てる人もいえば、絵から全体像を掴みながらアイデアを考える人もいます。 伝えるための情報デザイン、文章デザイン [http://www.yasuhisa.com/could/article/be-rhetoric/] で、情報（文章や絵図）をいかに構成することで人に伝わりやすくなるという話をしました。今回は情報を受け取る人に注目し、人が情報をどのように認知しているのかを考えてみます。 今回、Cognitive style and learning strategies [http://www.monografias.com/trabajos16/learning-styles/learning-styles.shtml] という文献を参考にしました。認知の視点から人がどのように学習をするのかを簡潔にまとめています。その文献によると、段階的に学習する Serialist と、メタな観点から学習する Holi
デザイン モバイルにある３つのモノレイヤー モバイル向けに設計する場合、場所は重要なキーワードです。「今、渋谷駅にいる」といった具体的な場所だけでなく、モバイルでは 3つの場所レイヤー [http://www.yasuhisa.com/could/article/mobile-layers/] を考慮しなければいけません。しかし、モバイルコンテキストを理解する上で、場所の理解だけでは不十分です。 モバイル機器におけるインタラクションはとてもパーソナルです。特定の場に居ざる追えない従来のデバイスに比べると、自由に動き回れて自分だけの時間をつくりやすいモバイル機器。スクリーンサイズも利用者とモバイル機器の１対１の関係をつくるのに丁度良い大きさです。パーソナルな関係が築き上げられているからこそ、１対１の関係で楽しめるゲームやエンターテイメントがモバイルでは人気ですし、家族・友人との対話に役立っています。 パーソナルな関係を築くのになくてはならないモバイル機器。利用者が触れるモノ（機器）にも、場所と同様３つのレイヤーが存在します。 デバイスレイヤー モバイル機器はさらに細分化することが出来ます。ハードウェア、OS、アプリ、バッテリ
デザイン 多側面ある一貫性と理解の共有 サイト全体の設計をするときに、必ずといっていいほど考える課題のひとつが一貫性 。GUIや情報の配置など一貫性を保ちたい要素は様々です。サイト全体の見た目だけでなく使い勝手や感覚的な印象を統一させることで、利用者にひとつの場にいるという安心感を提供すると共に、一定のブランドイメージを提供することが可能になります。 一貫性というのは単にすべてを同じにしたり、一定の基準を満たせば良いというわけではないところが難しいところ。ソフトウェア、Webデザインにおいて一貫性をつくるということはとても複雑なことだったりします。一貫性とひとことで言っても以下のように細分化することができます。 * 人の認知とシステムの振る舞いの一貫性 * OSのインターフェイスガイドラインを基にした一貫性 * 類似製品にある一貫性（ブラウザの進む・戻るボタンはどれを選んでも左上にあるなど） * ビジュアルの一貫性 * インタラクションの一貫性 * 操作上の一貫性 （ページレイアウトやフォームなど） * 用語の一貫性 * クロスメディアの一貫性（Webと紙媒体で同じ振る舞いをしているかなど） 実のところ
UX 体験について考えるとは UXでは見えてこない側面 ひとつの考え方として UX (User Experience) は今日のデザインでは無視をすることが出来ません。デザイナーだけでなく、今やビジネスシーンでも耳にする「体験」という言葉。しかし、この体験という言葉は非常に曖昧な表現です。体験というのは主観的かつ内面的に感じ取るものであることから、良い体験の定義の仕方も異なる場合があります。 ところで「体験」ってなんですか？ [http://www.yasuhisa.com/could/article/what-is-experience/] という記事で紹介したように、体験には「Experience Self」という今この瞬間を経験する自己と「Remembering Self」という記憶を辿る自己があり、どちらの体験を話しているかで話がズレてしまうことがあります。 体験について考える上で、「U（ユーザー）」が必要なのだろうかと疑問に思うことがあります。もちろん、ユーザーを無視してデザインしようと言いたいわけではありませんが、このユーザーという要素が入ることで体験そのものとはズレた議論になりやすいのではないかと懸
デザイン デザイン、コード、マルチスキルの世界と私たち 比較は実はナンセンス デザイナーはコードが書けたほうが良いのか？ ハイブリッドなのか専門家なのか・・・長く議論されてきているトピックのひとつです。Webデザインの分野でもデザイナーは HTML / CSS / JavaScript くらい出来た方が良いのでは？という意見がありますし、最近では UI デザイナーが Object-C や Java を学んだほうが良いのでは？という意見もあります。 デザイナーがコードの領域に踏み込めるようになることで、インタラクションや画面遷移など、見た目だけでなく細かい動きの制御の設計に直に触れることが可能になります。コードから物事が見れるようになることで、初めて視覚化・具体化できるアイデアもあるでしょう。では、コードも書けるハイブリッドデザイナーのほうが優れているのかといえば、答えは「YES」であり「NO」でもあります。多くの技能をもつということは、何でも屋になる可能性もありますし、特徴のない制作者になる可能性もあるからです。 コードも書けるデザイナーが求められているのか、それともデザインを突き詰めている人材が必要とされているのか？実際のところ
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 で実現出来
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% という数値が出て来て
デザイン 共感から始めるデザインの対話 より多くの方にクリエイティブプロセスに参加してもらうために、デザイナーの中には試行錯誤を繰り返している方もいると思います。「自社にUX文化を広めるコツ [http://www.yasuhisa.com/could/article/evangelize-ux/] 」という記事でミニワークショップやデザインについて語れる時間を築くと良いと書きましたが、話に参加してもらえない、理解してもらえない、やっぱり自分はデザイナーではないと拒否されるという場合もあると思います。 相手に物事を伝えるために、自分たちのコミュニケーションの仕方を変えるという方法がありますが、それだけではありません。相手がどのような視点で話をしているのかを理解することで次の試行錯誤に繋がることがあります。デザイナーにとってはごく自然なことであるデザイン思考も、他に方にとって途方もなく難しいこと、又は自分たちの考え方とは正反対と考えている方もいるわけです。 人にとってミステリアスで難しそうに見えるデザインプロセスに参加してもらうためにどうしたら良いでしょうか。考えられる課題と提案を幾つか挙げてみました。 根本的に考え方が
デザイン これからのWebデザイン教育【２】 前回の「これからのWebdデザイン教育 [http://www.yasuhisa.com/could/article/webdesign-education/] 」の記事は、Facebook グループ [http://www.yasuhisa.com/could/announcement/facebook-group/] をはじめ様々な場で意見が飛び交いました。あのような記事を書いた理由は、不満をぶちまけているのではなく、書くことによってちょっとだけ考えてみる機会を皆に持って欲しかったわけです。今回は様々な意見が出てきたことを踏まえて、私のほうで感じたことを幾つかまとめていきます。 教育機関だけの問題ではない 教育の話になると、まず学校の改革・カリキュラムの見直しという教育機関へ向けた問題解決に集約してしまう傾向があります。しかし、実際のところ教育機関が今のようにスキル中心の教え方をしている理由は、そこに需要があるからという現実もあると思います。企業の募集ページをみると「○○が出来る方」というスキルセットがリストアップされているわけですし、即戦力とはそういったスキルがある方を指す場合
デザイン モバイルコンテキストの見分け方と注意点 モバイルにおける文脈とは 「文脈を理解した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 は人類に与えられたまったく新しい道具のように表現されることがあるものの、活用方法は『過去の実績』にあまりにも捕われ過ぎて
UX 良い体験に繋がるちょっとした後押し UXの話で必ずといっていいほど出て来る「良い体験を提供する」というフレーズ。もちろん、その良い体験は利用者の視点に立って定義させるわけですが、私たちは本当に私たちが設計した体験を提供するべきなのでしょうか。あまりに体験を提供する（作り上げる）ことを考え過ぎることで、利用者にとって窮屈な環境を作り出してしまう可能性があります。 体験を作り出して提供するべき分野は幾つかあります。例えば映画はシナリオ、サウンド、編集、撮影を駆使してひとつの体験を作り出し、それを視聴者に感じてもらいます。その体験に対するリアクションは様々ですが、提供される体験そのものは皆同じです。映画のようにシナリオが一本線で、提供する体験を制作者側が明確に定義できる場合、制作者が思い描く良い体験を提供することになるでしょう。 しかし、映画と同じように Web サイトを作るとしたらどうなるでしょう。ページフローは明確に定義され過ぎて自由がきかない。寄り道ができない、ミスが許されない、世界観を強要しているようなグラフィックなど。Web の場合シナリオは一本線でもありませんし、感情やリアクションという分かりやすい結果を引き出
UX デザインのなかにある魔法と活用の仕方 2010年の iPad のプロモビデオ。この辺から「Magical」という言葉をよく聞くようになった印象があります。先月再開したポッドキャスト「Automagic」 [http://www.yasuhisa.com/could/announcement/automagic-podcast/] には「Magic（魔法）」というフレーズが含まれています。名前の由来についてはぜひエピソード１を聴いて欲しいですが、魔法という言葉をここ1年よく耳にするようになった印象があります。iPad のようなハードウェアだけでなく、何気なく訪れる Web サイトなど、私たちの周りにはたくさんの魔法が存在します。私たちのように技術や仕組みに深く入り込んでいる人間からすれば、大したことのないと感じることでも利用者の視点からすれば魔法のようだと感じることは幾つかあります。 Twitter の会員登録プロセスをみてみましょう。 登録を済ませるとワンクリックで友だちを見つけだし、その場でフォローをすることが可能です。ひとりで初めても楽しくない Twitter ですが、初めてすぐに何人かの友だちをフォローして Tw
デザイン ポッドキャストを再開します 2005年1月から2009年まで「Inflame Casting」という名のポッドキャストを配信していました。日本では初期から配信していたポッドキャストのひとつで iTunes Store にもなぜかオススメポッドキャストとして表示されていた時期もありました。聞いてくださっていた方もいるのではないでしょうか。2008年あたりからこのサイトの記事の内容を濃くするために時間を割くようになってから、反比例するかのようにポッドキャストの配信が減り自然消滅してしまいました。 いつか再開しようと考えていたのですが、またやるのであれば中途半端にしたくありませんでたし、YouTube や Ustream のような動画配信がある中、あえてオーディオでやるというおもしろさも再確認したいという気持ちもありました。今年に入って実験的に Facebook グループ [ http://www.yasuhisa.com/could/announcement/facebook-group/] にてポッドキャストを毎週配信していました。限定的な配信でしたがフィードバックもいただけたり、それなりのダウンロード数を確保
UX 文脈を理解したWebコミュニケーションデザイン パッケージングの違いは文脈の違い 前回の記事「あなたも私もメディアカンパニー [http://www.yasuhisa.com/could/article/you-are-media-company/] 」で、コンテンツを制作するだけでなくメディアカンパニーのように配信の仕方にも工夫をしなければならないという話をしました。コンテンツを配信する際に考えておきたいポイントを記事で幾つか紹介していますが、制作者として注目しておきたい要素は「パッケージング」です。情報を利用者・顧客に届けるために、どのようなパッケージングをすると最適なのかを考えなければいけません。 パッケージングは、制作者であれば意識しなくても常に考えていることです。パソコン上で動作する Web ブラウザ上でどのように Web サイトの情報を表示させれば良いかを常に考えていると思います。最近だとスマートフォン向けの Web サイトをどう作るか考えている方も多いでしょう。パッケージングでまず最初に考えておきたいのが、どの情報をどのように見せるかです。 例えば Web サイトのモバイル版を作るとしても、単に PC 版の情報をモ
アイデア 人の関係を考慮したレビューの見せ方提案 陳腐化しているレビューコンテンツ 製品を購入する際に、 製品情報だけでなくレビューに目を通す方は多いと思います。公式の製品情報だけでは分からない感覚や着眼点が書かれていることがあるレビューは製品購入の決定の際に多大な影響を及ぼします。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 などをはじめとしたソーシャルネットワークやレビュー専門サイトで人々が製品やサービスについて話しているのは、彼等がレビューやレコメンデーションを求め合っているからなのでしょう。 私たちの行動に大きな影響を及ぼすことがあるレビューですが、現状レビューがうま
デザイン デザインについて語れる批評をするコツ 批判ではなく批評 個人プロジェクトでない限り、公開前に誰かにデザインを見せる機会があると思います。相手はクライアントかもしれませんし、同僚・上司なのかもしれません。デザイナーの中には見せるのを躊躇している方もいるのではないでしょうか。知恵とスキルを出し切って作り上げた子供のような存在なので、万が一批判されたのであれば自分自身も批判されているように感じるのではないでしょうか。IDEOの Time Brown 氏が TED の講演で「デザインはデザイナーだけに任せるには重要過ぎる [http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html] 」という言葉を残しているとおり、デザインを皆で考える機会を作るべきです。デザイナーは早い段階から他の誰かとアイデアを共有するべきですが、会話が批判的なものになりすぎているのであればデザイナーも積極的に参加もしてくれませんし、デザインを前提とした会話にはならないでしょう。 「この色は違う」「使いにくそうだ」「分かっていない」 自分の作りだしたアイデアに対してこんな言葉が出
デザイン 直感を殺した効果測定崇拝は止めよう 宗教になった効果測定 昔、Webデザインは直感・経験・感性のみで作られていました。しかし、低価格・無料のデータ解析ツールが登場したことにより、より多くのサイトがデータ解析をサイトの成果測定に利用するようになりました。従来はページビューという大まかな数でしか価値を測定することが出来なかったわけですが、その場にいる利用者の姿も徐々に見えてくるようになりました。現在はページビューだけでなく滞在時間、訪問頻度、コンバージョンなど様々な要素を効果測定要素として取り上げるようになりましたし、それらを基に改善のプロセスが組まれるようになってきました。 ビジネスを考える上において、直感・経験・感性に行き過ぎていた従来の Web デザインは不十分な存在でした。そこで効果測定を積極的に取り入れようという動きが生まれたわけですが、今度は効果測定が『宗教化』してしまい本質を奪ってしまう場合も出て来ています。 効果測定は魅力的な存在です。なぜなら自分たちが作り上げたサイト・サービスの価値を確固たる数字として分かりやすく提示するからです。分かりやすい数値として表示されるからこそ、同僚・クライアントなど多くの人
デザイン らくだをデザインしていませんか？ > 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/] 」でもデザインをしない方や知識のない方が決定権をもつことが失敗に繋がると紹介しました。プロジェクトに携わっているのであれば
ゲーム キーワード2011: Fun（楽しむ） キーワード2011 * Empower（元気づける） [http://www.yasuhisa.com/could/article/2011-empower/] * Analyze（分析 / 観察） [http://www.yasuhisa.com/could/article/2001-analyze/] * Talk Now（今すぐ対話） [http://www.yasuhisa.com/could/article/2011-talk-now/] * Fun（楽しむ） 2010 年のキーワードを事例と共に紹介するミニシリーズ。最後に紹介するキーワードは「Fun 」です。楽しいという感情は様々な障害を越えてしまう可能性を秘めています。たとえ使いやすそうに見えるサイトでも楽しくなければ再度使ってもらえないかもしれません。楽しいという感情とゲームを関連付けさせて先月 WCAN で講演しました [http://www.yasuhisa.com/could/diary/wcan2010-gamedesign/] が、
サービス キーワード2011: Talk Now（今すぐ対話） キーワード2011 * Empower（元気づける） [http://www.yasuhisa.com/could/article/2011-empower/] * Analyze（分析 / 観察） [http://www.yasuhisa.com/could/article/2001-analyze/] * Talk Now（今すぐ対話） * Fun（楽しむ） [http://www.yasuhisa.com/could/article/2011-fun] 2010 年のキーワードを事例と共に紹介するミニシリーズ。今回は「Talk Now」です。コミュニケーションデザイン [http://www.amazon.co.jp/gp/redirect.html?ie=UTF8&
