サービス Adaptive Path 買収から思う銀行のこと、デザインのこと 米国の金融大手キャピタル・ワンが UX コンサル会社である Adaptive Path を買収 [http://www.adaptivepath.com/ideas/adaptive-path-where-were-going-next/] しました。その２ヶ月前にはモジュール式スマートフォン「Ara [http://www.projectara.com/]」を手がけた Daniel Makoski 氏が同銀行へ移籍しています [http://www.fastcodesign.com/3032630/why-one-of-googles-wildest-designers-left-for-a-bank] 。金融機関という巨大な組織でいかにデザイン思考が広がり、形になるのか今から楽しみです。ひとつの案件としてではなく、組織の一員として内側から変えていくという Adaptive Path のアプローチは、最近の私の仕事の仕方と重なるところがあります。 デジタル化は進んでいるものの、改善余地が数多く残されている大手金融機関。一般企業とは比べものにならないほど、安全性、プライバシー、危機管
デザイン 疲れない情報収集と何を知るべきかを知るためのヒント 何を知るべきなのか分からない 昨年「情報だけでは価値がない時代の学びの姿 [http://www.yasuhisa.com/could/article/learning-in-network/] 」という記事で、流れの速い今の時代における学習との向き合い方について執筆しました。当時、変化し続けるプロセスに自ら身を投じることで学習しやすくなるのではと提案しました。 まずはアウトプットする、そして失敗を恐れず模索できる場を築くことで、体験しながら学習することができます。私の場合、このサイトやポッドキャスト [http://automagic.fm/] は良い実験場になっていますし、仕事にも役立っています。情報をインプットするためのコストが限りなくゼロになった現在。アウトプット（消化 ）をすることで情報を知識／スキルに変えていかなければ身にならないどころか、膨大なインプット（情報）によって圧殺されてしまう恐れがあります。 インプットとアウトプットのバランスを保つのが難しい現在。鳥のように食い、象のように糞をしよう [http://www.yasuhisa.com/could/arti
デザイン カスタマージャーニーマップが使える理由と注意点 デザインに使えるマーケティングツール カスタマージャーニーマップ（Customer Journey Map, CJM）は、顧客がどのように製品やサービスと関わるかを視覚化することによって、課題を共有することができるツール。デザインプロセスの一部として採用されるようになりましたが、マーケティングでは顧客との接点を俯瞰して見ることができるということで 5, 6 年前くらいから注目を集めています。（外来語をそのままカタカナ表記にしたくなかったということで「体験のマッピング [http://www.yasuhisa.com/could/article/dh-prototyping-course/] 」と名付けて以前から実践しています。） オンラインでもオフラインでも顧客との接点は劇的に増えました。しかし、接点が増えたことにより利用者行動の多様化が進んだだけでなく、接点になる場所・媒体の浮き沈みも激しくなりました。また、企業やブランドに関わる利用者の心理や行動も変化してきているので「A と B と C でコンテンツやサービスを発信すれば良い」といった一方通行のメッセージ配信では伝わり難くな
デザイン デザインが分からない人とデザイン話をするコツ 良いって何ですか？ デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い＝売れる」と解釈する人もいれば「良い＝使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以下のようなリアクションが戻ってくる可能性があります。 * 青がどうも好きになれない * このボタンはもっと大きく見せるべきだ * 必須情報が他にもあるので、上のほうに表示させたい
デザイン 道具の選び方、関わり方を考えるためのヒント 間違ったツールの選び方 ペーパープロトタイプは、紙に書き込むというアナログなアプローチであることから、作るための敷居が低いだけでなく、アウトプットも早く改善がしやすいです。メリットが多いペーパープロトタイプですが、 時間の無駄 [http://www.gv.com/lib/paper-prototyping-is-a-waste-of-time] という意見もあります。紙で作られていることから再現性が低く、的確なフィードバックを利用者から得るには難しいからです。 それでは、ペーパープロトタイプが使えないのかといえば、こたえは「No」になります。こうした「○○は使えるのか？」という疑問は制作の方からよく聞かれる質問ですが、回答に困ることがあります。ペーパープロトタイプだけではありませんが、手法や技術そのもので使えるかどうかの判断はできません。採用する前に以下の 4 点を考慮して選ばないと上手くいかないですし、手法や技術へ責任転換をしてしまう恐れがあります。 誰とつくるのか 誰がその手法を使うことになるのか。自分ひとりだけなのか、それとも組織外の方も関わる可能性があるのか。彼らの背
デザイン クリエイティブとデータの間にあるもの 危ういバランス Webサイト制作でも、アプリの開発でも、いつも気にしているのがデータとクリエイティブのバランスです。この 2 つの理解が、デザインには不可欠だと考えています。いずれも「重要」と言われていますが、企業の規模や、文化によって重きを置くバランスが異なると思います。 データを重要視する企業成熟したプロダクトやサービスをもつ企業。エンジニア文化が浸透しているところや、営業の力が強いところ。クリエティブを重要視する企業 発展途上のプロダクトやサービスをもつ企業。起業家の文化や、戦略としてのデザインに強く感心があるところ。Google Analytics のようなツールを使えば手軽にデータを解析できるようになりましたし、A/Bテストをするのも難しいことではありません。データから最適だと思われる改善策を提案することができますし、とても説得力のあるように見えます。 講演 [http://www.yasuhisa.com/could/tag/%E8%AC%9B%E6%BC%94/] で「数字はストレートで分かりやすいから、多くの人に理解してもらえる」と話すことがありますが、すべてを数
デザイン ペルソナ設計に人間像は重要ではない理由 人間像ではなく動機や文脈を明確に プロジェクトを本格始動する前にペルソナを設定することがあります。様々な背景の方がデザインプロセスに参加すると、何をもって『良い』と判断すれば良いのか分からなくなることがあります。ペルソナは、このプロジェクトにおいて適切な『良い』を判断する際に役立ちます。 ペルソナには「人/登場人物」という意味が含まれていることから、表層的な人間像（性別、年齢、出身地など）を描かなければいけないと考えがちです。しかし、それはペルソナを設定することにおいて、それほど重要ではないと思います。私はペルソナを1枚のシートにまとめることがありますが、見た目やライフスタイルといった属性は、詳細まで掘り下げていません。ほとんどの場合 2 〜 3 つくらいのリストにして省略しています。 代わりに「なぜ、人はプロダクトやサービスと触れ合うのか 」という部分を、ペルソナを通して語るように心がけています。その理由は、人口統計学的な属性によって、達成したい目的や道筋が大きく変わることがないからです。 例えば、ある人が アマゾン [http://www.amazon.co.jp/?_e
デザイン コードが教えてくれるデザイン思考 今プログラミングを教育に取り組もうという声が高まっています。CODE.org [http://code.org]のようなサイトも立ち上がっていますし、 Scratch [http://scratch.mit.edu] のような子供から楽しめるビジュアルプログラミングもあります。 デザイナーの中でもプログラミングを始めたい方もいると思います。WWDC 2014 で発表された Swift [https://developer.apple.com/swift/] は、スクリプト言語のような感覚でコードが書けるので、始めるには良い機会なのかもしれません。 ただ、デザイナーの立場からみると、プログラミングは遠い存在に見えることがあります。しかし、「問題解決のため」という視点からみると、デザインとプログラミングには共通点がたくさんあります。人間中心デザインに基づいた発想にも、実装可能なところまで落とし込んで模索しないと、夢心地なアイデアになることがあります（もちろん自由な発想が必要なときもありますが）。コードを書くひとの考え方を取り入れることで、アイデアを洗練させることができるようになり
デザイン デザインの会話にあるぶつかり合いのメリット ぶつかるから良くなる 文脈や話し手の背景により「デザイン」の意味合いが変わることがあります。先月のセミナー [http://www.yasuhisa.com/could/article/how-we-talk-about-design/]では、デザインには 葛藤やぶつかり合いが含まれていると話しました。ぶつかり合いと書くと、負のイメージが先立つかもしれませんが、デザインプロセスにおいて欠かせない要素だと思います。 デザインを語る場において、参加者が考えを述べることがアイデアを検証する（ぶつける）ことになります。『考えを述べる』ということは、自分の考え方がひとつの解になるということを証明しなければいけませんし、そうしなければ聞き手には理解できないことがあります。時には意見の相違がありますが、自然なことですし違いを歓迎するべきです。アイデアを出し合うからこそ見つかる課題もありますし、アイデアがより洗練することもあるからです。 良い会話ができたと思う瞬間は、誰のアイデアか分からないけど、皆が理解して先に進めることができる状態。「○○さんの意見が通った」「リーダーの意見でまとまった」と
デザイン デザインの話をするときに気をつけたいこと デザインの意味や感覚を理解させようと努力するのではなく、プロジェクトのゴールとの関わりについて語れるようになると、デザインの評価の仕方、され方が少しずつ変わるでしょう。
デザイン デザインを決めて進めるために必要なこと 先月は東京 [http://www.creativevillage.ne.jp/PR/seminar123.html]、そして今月は大阪 [http://www.creativevillage.ne.jp/PR/seminar133.html] で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、
コンテンツ 全面リニューアルの幻想と、取り組むときの注意点 リニューアルでは何も変わらない Webサイト制作の仕事で、いつの間にか当たり前になっているのが『リニューアル案件』。2, 3 年おきに見た目の衣替えをしたり、使い勝手の向上のためナビゲーションや情報構造の見直しをします。 テクノロジーだけでなく、Web を取り巻く文化や社会が目まぐるしく変わるので、定期的なリニューアルをして『追いつく』ことは必要なのかもしれません。しかし、ただ見た目を変える、情報構造を変えるといった「作る」「作り直す」ということが目的になることがあります。リニューアルをすれば何かが変わるという淡い期待感が寄せられることがありますが、費用対効果が良くないことがあります。 第一印象はとても重要です。 全面リニューアルを通して見た目がよくなれば、印象は良くなるかもしれません。しかし、デザインを変えたからといって、コンテンツも自動的に良くわけではありません。最初の印象がよくても、訪問者のニーズが満たされていないのであれば、金メッキはすぐに剥がれてしまいます。 また、リニューアルが話題性があるのかというと、それほどではないことがあります。刺激的なグラフィック、先進的な
UI デバイスと利用シーンへの最適化から学べること Web サイトデザインでは 2, 3 年くらい前から モバイルファーストでデザインをする [http://www.yasuhisa.com/could/article/responsive-design/] という考え方が浸透し始めていますが、最近アプリでも似たような傾向が見られるようになってきました。先週 Foursquqre が チェックインとショップガイドを分ける [http://techcrunch.com/2014/05/02/foursquare-swarms-over-swarmly/] と発表しました。一方、Facebook は、メッセージアプリを分断 [http://techcrunch.com/2014/04/09/facebook-messenger-or-the-highway/] しようとしています（Google+ は、Hangout を分断してしばらく経ちます）。 デスクトップ版の使い勝手に慣れ親しんでいる方にとっては『改悪』なのかもしれません。しかし、モバイル（又はスマートデバイス）中心で活用している方には、
デザイン デザインの仕事にある成熟と熟練 デザインの意味とは … といった禅問答のような質問をときどき耳にします。語源まで辿って「記号を表す」といった説明をする人もいれば、「設計をする」と応える方もいます。装飾という意味合いをデザインから離す人もいますが、装飾もデザインの一部として捉えることもできます。 デザインの定義は読者ひとりひとりに委ねますが、デザインを学習したい場合「人それぞれだから頑張って」で済ますわけにはいきません。デザインの『入り口』が必要ですし、どこへ向かっていくのかという目的地も必要だと思います。 デザイナーの成熟度は、以下のような UI を見たときの反応で判断することができます。 あるサイトの UI を基にしてつくったスケッチ デザイナーによって、この UI に対するリアクションは異なります。大きく分けると 4 つあります。 見た目を変えたいインプットフィールドの見た目が良くない。タイポグラフィの選択が良くない。色彩を変えたいといった、見た目をデザインしたいという方。 作り方を見直したいどの技術を使えば実装できるのか。何かツールを活用することで、UI を改善できるのか。どのような技法を採用すれば、
デザイン デザインにある繋げること、導くこと 行程の先にあるもの コンテンツ [http://www.yasuhisa.com/could/tag/%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84/] の仕事ばかりしていると、利用者のことを考えていないように思われてしまうかもしれませんが、そんなことはありません。コンテンツと利用者は切っても切り離せない関係です。以前は 電子書籍としてまとめることができるくらい [http://www.yasuhisa.com/book/exp/] UX のことを書き続けてたわけですから、利用者のことを無視するなんて考えられないわけです。しかし、最近は意図的に取り上げないようにしています。 UX について頻繁に書いていたときからそうですが、「UX デザインを実践したけど、そのあとどうするの？ 」という疑問を常に感じていました。プロセスを踏めば、ワイヤーフレームが描けるのかといえば、そうではないことがあります。そのあと、
デザイン 変わりゆく利用者行動と情報の流れ 縮小する Search & Find Google 以後の Web 利用は「Search & Find（検索して見つける）」が根底にありました。情報を見つけるために、キーワードを入力して検索したり、ディレクトリを掘り下げて目的の情報へたどり着くという行動です。 今や『当たり前』となった利用者行動ですが、Web の黎明期からそうだったわけではありません。90年代は、検索するといっても、欲しい情報が見つかる検索エンジンはなく、使わないほうが良いという考えもありました。そうしたなか、Google という優秀なアルゴリズムを実装した検索エンジンが登場したことで、広大な Web の中から情報を探し出すことが出来るようになりました。 このように技術が『当たり前』を作りだすことがあります。私たちの行動や思考は、技術に大きく左右されることがあるわけです。Google のような検索エンジンが登場したことで、Search & Find という行動が助長されたといえるでしょう。このように、技術に影響されるのは私たちの行動だけではありません。広告もマーケティングもすべてそうです。 Search &
UI カードUIとコンテンツのパッケージング 小さなパッケージとしてのカード 前回の記事 [http://www.yasuhisa.com/could/article/message-card-ui/] で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ [http://www.yasuhisa.com/could/article/content-package-design/] 』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest [http://pinterest.com/] 。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。P
デザイン ポストPC時代のWebで注目している2014年のキーワード タブレットの販売台数が PC を超えた [http://www.idc.com/getdoc.jsp?containerId=prUS24314413] 2013年第四半期。（スマートフォンは 2011 年で超えています [http://tech.fortune.cnn.com/2011/02/07/idc-smartphone-shipment-numbers-passed-pc-in-q4-2010/] ）。スマートフォンやタブレットはもちろん、情報へアクセスするための『ガラス』は、今後ますます増えていきます。2014年は、Web へアクセスするための手段が文字通り多様になるといっても過言ではありません。iPhone をはじめとするマルチタッチのスマートフォンが出回りはじめた頃は『モバイル Web』という言葉が用いられていましたが、これからは『The Web（これが Web）』と言い換えたほうが良いでしょう。PC がなくなることはありませんが、「まずはパソコン版を前提」という考え方はいちはやく拭い去らないといけなくなります。 自動的に取得した睡眠のデータを、いつでもアクセスでき
アイデア 作れることは正義である 撮影：飯田昌之 12月14日に CSS Nite Shift7 [cssnite.jp/lp/lp31/] が開催されました。基調講演ということで、少し先の未来を話すようにしていましたが、今回は未来に備えるための『今の話』をしました。「スクリーンの先、私たちの仕事の先 」という題名で話した今回の講演。スクリーンの外を見ようというメッセージは伝わったと思いますが、仕事の先の意味が捉え難かったかもしれないので、この記事で解説しようと思います。 アイデアと完成品との間 アイデアがあるからこそ、新しいサービスやプロダクトが生まれます。しかし、この間には大きな溝があって、なかなか繋がらないことがあります。素晴らしいアイデアでも製品にしてみるとそうでもなかったり、どこかで質が低下してしまったり、アイデアが製品にうまく反映していなかったり、いろいろです。 Web サイト制作の世界では、この溝が広く深いことがあります。アイデアを生み出したり、設計に関わる「考える人」と、実際手を動かして構築する「作る人」が完全に分離（分業）していることがあります。作るひとが、考える側に立ち入る余地がないこともあ
ガイドライン 問題解決のためのスタイルガイド入門 定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。 ロゴやコーポレートカラーの使い方を記したスタイルガイド [http://www.logodesignlove.com/brand-identity-style-guides]は昔からありますし、 ライターにもスタイルガイド [http://web.calstatela.edu/library/styleman.htm]があります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。 YUI 並の UI アセット [http://yuilibrary.com/] をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイ
UI 利用者モードとUIの関係 タッチデバイスを視野にいれた UI パターンの事例がかなり出そろってきました。使いやすいと定評があるもの、流行なもの、採用例が多いものなど様々ですが、実際のところどの UI パターンを採用すれば良いか迷う場合がでてきます。「○○の場合は、このパターン」と一発で決めることが出来なくても、考慮したいパターンを絞ることができます。絞り込みの際に利用者のモードが役に立ちます。 モードとは、人がアプリケーションやサービスと向き合うときの状態のことを指します。利用者の意図、環境、時間、向き合っているデバイスに応じて、モードがダイナミックに変化することがあります。モードを理解することで、利用者のニーズに近いインターフェイスを提供することができます。同じ系統のアプリケーションでも UI が全く異なる場合がありますが、それは利用者のモードの捉え方の違いからだと考えられます。 モバイルアプリケーションの多くは以下の 5 つのモードに振り分けることができます。 1. Explore（探索）: 全貌を見渡したり、新しいものを見つけ出す 2. Consume（消費）: コンテンツ観覧にフォーカスする
デザイン 模擬のWebから特性を活かしたWebへ 2013年10月5日に WebSig一日学校 2013 [http://1ds.websig247.jp/2013/] が開催されました。普通のセミナーとは異なり、廃校をリノベーションした独特の会場をつかって Web に関わる様々な分野の方が集まるイベントです。2011年も 一日学校で講師 [http://www.yasuhisa.com/could/article/design-is-politics/] をさせていただいたので、2回目の登壇になります。 WebSig一日学校は、毎回視野の広いテーマで開催されることから、日々の仕事にすぐ役立つ情報は少なめです。しかし、仕事にある制約や事情という縛りを一旦抜けて、自由に思考できる場なのが良いなと思っています。今年も１日学校の最後に開催されるワールドカフェに生徒の一員として参加しましたが、ひとりの Web の仕事に携わる人間として平等に語り合えるのは素晴らしいことだと思います。 模擬の時代の終焉 今年は「未来へ繋ぐWeb系デザイン思考」という題名で講演。作るだけでは価値がない時代に、どのように Web をデザインすれば良いのか
デザイン 偽デザイナーが送るデザインに関するメッセージ 素敵なデザインだなと思った人もいるかもしれませんが、実は全部『ウソ』。 アーティスト Amy West [http://amywest.ie/] が立ち上げたデザイナーをあざ笑うかのようなプロジェクト。「Grafik BS [http://www.behance.net/grafikBS]」へアクセスすると、他にもたくさんの作品をみることができます。 本質を追求せず、見た目やスタイルがすべてだと考える架空のクリエイティブエージェンシー GrafikBS。Behance Network のほうで本物のデザイナーと混じって作品を公開しています。わざわざ Twitter アカウント [https://twitter.com/GrafikBS] を作ったり、インタビュー映像まである懲りようです。インタビュー映像ではデザイナーらしからぬ危険な言葉を次々に発しています。 * スタイルがデザインで最も重要。見た目が良いものに人は反応する * インターネットで調べれば、今のトレンドが分かる。それを真似れば良い * デザインは見た目を良くすることであり、それ以上のものではない *
デザイン 即興が超える領域の壁 これは、私が好きな動画のひとつ。 歴史に残る映画の名シーンは、俳優たちによる即興が数多くあります。ヒース・レジャーが魅せた「ダークナイト [http://amzn.to/1dlJUJb] 」の怪演や「タクシードライバー [http://amzn.to/19Yew3b]」の名台詞が即興というのは、知る人ぞ知る有名な話。25 の映画のシーンを見ながら、俳優達の想像力と演技力を堪能できる内容です。（英語ですが、簡単な解説がアノテーションに記載されているので、表示しながら観覧すると楽しみが増します） 映画好きなら見ておきたい動画ですが、即興について考えさせられる動画でもあります。 俳優は台本どおりに台詞を話したり、監督の指示通りに演技をすることが仕事ではありません（それを好む監督もいますが）。「俳優だから」と、自分の周りにラインを引かず、与えられた世界の中を自由に動き回ることがあります。即興は、その表れだと思います。即興は、脚本によって定められた領域に留まらず、ときには領域からはみ出ることもあります。うまくいけば、作品の世界観を広げたり、登場人物に深みを与えてくれることがあります。
