たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を

12月12日、名古屋にて WCAN 2015 Winter が開催されました。今年はスクリーンが 32:9 という超ワイドスクリーンがある会場でした。今までにないスライドデザインで困難なところが幾つかありましたが、良い経験をさせてもらいました。会場や観客に応じてスライドデザインは工夫していますが、その大切さを改めて痛感したイベントでした。 登壇内容も含め、イベント全体に関するレポートを参加した方々が公開しています。ぜひこちらも参考にしてください。一緒に登壇した佐藤歩さん（@ahomu）の「HTML6 でも CSS4 でもない Web 技術のゆくえ – WCAN 2015 Winter に登壇してきました」も必読です。 WCAN 2015 Winterに参加してきました – LOGzeudon WCAN 2015 Winterに参加しました – focusmark.jp WCAN 2015

デザインの議論で以下のような対立を見かけることがあります。 アプリ/Web 文系/理系 テキスト/ビジュアル アート/デザイン アクセシビリティ/視覚表現 UI/UX 私たち人間は様々なことを分類することを好みます。一見相反するものは、明確に分類しようとしますし、それぞれの定義を明確にしようともします。片方を選ぶことで、もう片方は諦めなければいけないと考えている方もいると思います。それぞれの言葉の意味を理解しておくべきですが、どちらかを選ぶというものではないと考えています。 ふたつを合わせることで、私たちの仕事の可能性を広げることができるはずです。 自分の仕事をアプリか Web いずれかに絞ることはありません 文系だからといって数字が弱いということはありません テキストとビジュアルが合わさることでコンテンツが増幅します アートと呼べるような問題解決は存在します 視覚的な表現が豊かでもアクセ

分かっていないのは誰か？ デザインの評価は、デザイナー同士でも難しいこと。それが違う職種や背景の方と話をするとなると、さらに難しくなります。プロであれば、仮説を基にして議論をするよう努力しますが、周りがそうであるとは限りません。 人間工学者 Gitte Lindgaard が 2006 年に発表した文献「Attention web designers: You have 50 milliseconds to make a good first impression!」によると、ユーザーはわずか 0.05 秒で Web サイトの見た目に判断を下すそうです。これはアプリをはじめ、様々なデザインにもいえると思います。デザインの意図やプロセスを知ることはないわけですから、「ダサい」「見難い」「分からない」といった突発的な判断を下すのも当然かもしれません。 では、「デザインを理解していない」と一蹴し

Empathy（感情移入）と Sympathy （思いやり） 。日本語だけでなく、英語でも混同してしまいやすいこの言葉。実は大きな違いがあることを分かりやすく説明しているのが上の動画です。RSA で Brené Brown博士が話した内容の一部が、素敵なアニメーションで再現されています。感情移入とは、相手との繋がりを築いた上で共感すること。一方、思いやりとは繋がらずに一歩離れたところからのコミュニケーションと Brown 博士は説明します。 Brown 博士によれば、感情移入には 4 つの性質が含まれているそうです。 相手の視点で周りがみれる決めつけをしない相手が何を感じているのかを理解できる相手の視点を理解した上で対話ができるよく感情移入はデザインに不可欠であると言われます。重要とはいえ、感情移入（エンパシー）という言葉が多用されることで、意味が薄れてきている側面もあります。利用者を客観

今だからこそ再入門 2015年7月12日東京 OpenCU のイベント「CMS SUNDAY Vol.4」に登壇しました。セミナーと一緒にワークショップも実施されましたが、CMS のカスタマイズ知識なくても参加できるカリキュラムが組まれていました。ファシリテーションを務めた羽山祥樹さんのワークショップの進め方も含めて勉強になる充実した１日になりました。私のほうはワークショップ前の準備運動としてプロトタイプの基本を振り返る話をしました。 2012年頃からプロトタイプに関するセミナーやワークショップをしています。翌年にはデジタルハリウッド大学院でプロトタイプの講座も開いています。 それから、およそ3年。 プロトタイプをつくるためののツールは高機能になり、当時では難しかったことを10分ほどで作り上げることもできるようになりました。紙芝居でするしかなかったアニメーションも、今だと Pixate の

今後はさらに測れない領域が増える 今のところウェアラブルデバイスの通知は賢いとは言えないものの、今後利用者の文脈に応じて柔軟かつタイミングよく送られてくる可能性があります。また、Google の App Indexing や、Apple の App Search など、アプリとデバイスとの間、アプリとアプリとの間、アプリと Web との間があやふやになっていきます。ウェアラブルやスマートフォンでは、その瞬間に欲しいコンテンツへ直接アクセスするという行動が増えていくでしょう。今までのようにアプリアイコンをタップするだけが接点ではなくなりますし、アプリのトップ画面から見ていく必要もないわけです。 通知が賢くなり、そのとき欲しいコンテンツが届くことは利用者へのメリットは大きいです。しかし、『アプリの成功』を評価するという意味では大きな課題があると思います。通知が賢くなればなるほど、エンゲージメン

デザイナーや開発者であれば、アプリや Web サイトを見ると何かしらリアクションがあると思います。「かっこいい」「面白い」「使いやすい」といった感想は、口に出さなかったとしても考えることです。第一印象から生まれる感覚は大事ですし、常に身の回りにあるデザインに意識を向けることは良いことです。しかし、そうした感情的なリアクションがデザインに対する良い批評にならないことがあります。 批評やフィードバックは、現行のデザインをさらに良くするために行われます。「これは使いにくい」はひとつの感想ではありますが、次のステップのための道筋とは言えません。それが誰にとって、なぜ使いにくいのかを共有しないままでは意図が伝わっていないようなものです。むしろ、使いにくいものを作ってしまったデザイナー個人への批判に聞こえてしまう恐れもあります。デザイナー自身も、すべてのフィードバックが個人に向けられているものではない

Apple Watch をはじめとしたウェアラブルを使い始めてから、瞬間の体験についてよく考えるようになりました。しかし、実際のところスマートフォンでも瞬間（ひととき）は存在しています。Google は 4 月に「Micro-Moment」という状態を提示しました。Webサイトやアプリと、きちんと向き合って操作するのではなく、突発的に起こった欲求に対して即座に行動をとる状態を指します。Micro-Moment は以下のような要素で構成されています。 今この瞬間に訪れる欲求（リアルタイム） ある特定の目的がある（意図的） 一番近くにあるデバイスを選ぶ（マルチデバイス） ながら作業のときが多い（マルチタスク） 瞬間に対するニーズに応えるかのように Google は検索結果に「購入」ボタンの実装を検討しています。「あれが欲しい」という瞬時に起きたニーズに対して、すぐに応えるためのアプローチです。

利用者中心とは言いますが 自分たちが作りたいものを作るのは身勝手な行動のように見えますが、「自分たち」という価値（アイデンティティ）が確立されているかされていないかは大きな差があります。価値がないまま、「利用者のため」という考えだけ一人歩きしてしまうと、極度な A/B テストの実践など、数字が高いほうを選択するという製品開発になる可能性があります。 利用者中心のデザインは必要です。しかし、それは土台になる【価値観＝ビジョン】があるから成り立つものであり、いきなり利用者中心のデザインプロセスを実践しても意味のないことだと考えています。スタートアップ向けの講座で ビジョンの共有が重要だと話したのもそのためです。プロジェクトを始める際は、必ずといっていいほど「我々は何者か」という部分を振り返るようにしています。 付箋には「気分が良い」「落ち着く」といった、感情的なフレーズが含まれることがあります

UIデザイン スマートウォッチで加速する瞬間の体験デザイン Web デザインでも、アプリのデザインでも、見えるデザインだけでは不十分になります。瞬間に関わるためのデザインは、スマートなデバイスが人の手元に常にある今だからこそ注目していきたいです。 先日からソニーの SmartWatch 3 を使い始めました。以前から Fitbit のような運動に最適なウェアラブルは使っていましたが、スマートウォッチと呼べるものは初めての使用になります。店頭で触ったり、動画を見るだけでは理解できないことが分かって勉強になります。 今回はスマートウォッチの利用を通して感じた、デザインの課題を 2 点紹介します。 Web != Webブラウザ スマートウォッチのような小さなスクリーンで Web を見るのは非常に困難です。一応、Androidアプリがありますし、Samsung Gear S には Opera mi

上記は、ドン・ノーマン著「エモーショナル・デザイン―微笑を誘うモノたちのために」からの一節。機能的な部分より、感情に響くデザインが、今後の製品・サービスを成功へ導くだろうと説いています。確かにそうだと思いますが、感情という主観的なものを、いかにデザインへ落とし込むのか悩ましいところです。「かっこいい」「美しい」という感情だけでデザインの評価をするのは好ましくないですが、その感情がどこから、どのように生まれてくるのかを探求することは重要です。 感情とは主観的であると同時に、体系化することも可能です。 Delft University of Technology で教授をされている Pieter Desmet 博士が 2002 年に「Designing Emotions」という論文を発表しています。人間は製品や感情に対する感情のメカニズムを以下のような図のようにまとめています。 感情は、何かに

コンテンツをスマートにするには、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。 マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。 Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Aja

消えるハードとソフトの境界線 Apple Watch のドキュメンテーション には、以下のような言葉がデザインコンセプトとして記載されています。 Even the physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible. Thoughtful app design should contribute to this experience of hardware and software feeling indistinguishable. 物理的なオブジェクトとソフトウェアには境界線がなく、UI デザインにもそれが表れています。よく考えられたアプリデザインは、ハード

内輪受けは止めにしようではないか LSD LAB で公開されている UIデザイナー不要説は、テクノロジーと付き合うデザイナーであれば一読しておきたい記事のひとつです。私が記事を読んで感じた課題は、 UI デザインが重要視されているかどうかということではなく、果たしてデザイナーは デザインを営業できているかどうかというところです。 たとえビジネスゴールが共有されていたとしても、デザイナーが考える UI デザインの価値と、それ以外の方が考える UI デザインの価値が異なることがあります。特にデザイナーが考える価値は、内輪受けになりやすいことが多々あるように思えます。デザイナーが「すごく良いよね」「イケてるね」というものは、ほとんどの場合デザイナー以外には理解されません。内輪で分かりやすい言葉や感覚で語りかけても、聞き手は「？」（価値を感じない）になってしまいます。 今でもデザイナーのなかでは「

たとえ小さな市場を狙ったとしても競争が激しく、せっかく作ったコンテンツはすぐに埋もれてしまいます。また、増え続ける膨大なコンテンツを受け取れる容量をはるかに超えてしまったため、情報の受け皿を小さくしている方もいます。コンテンツ供給は膨れ上がる一方、利用者からの需要が頭打ちしている現在。良いコンテンツを作れば読まれるというわけではないからこそ、前回紹介したような配信の仕方を工夫する必要があります。 しかし、配信を工夫することだけがすべてではありません。コンテンツの設計や作り方を改善することで、狭くなりつつある利用者の窓口へコンテンツを届けることが可能になります。 今だけを見ないコンテンツ制作 昨年のコンテンツワークショップでは、今出回っているデバイスのためだけにコンテンツを作らないための基礎を話しました。Goodpatch の藤井さんとのポッドキャストでは、GUI がない UI デザイン（情

ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過

良いって何ですか？ デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い＝売れる」と解釈する人もいれば「良い＝使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以

先月は東京、そして今月は大阪 で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、その手法がどのような意味を持っていて、それを基にどうゴールに向かって走れば良いのか見えないことがあります。 点は理解できたけど、それをどう線にしたら良いか分からないわけです。 例えば社内ワークショップ

デザインの意味とは … といった禅問答のような質問をときどき耳にします。語源まで辿って「記号を表す」といった説明をする人もいれば、「設計をする」と応える方もいます。装飾という意味合いをデザインから離す人もいますが、装飾もデザインの一部として捉えることもできます。 デザインの定義は読者ひとりひとりに委ねますが、デザインを学習したい場合「人それぞれだから頑張って」で済ますわけにはいきません。デザインの『入り口』が必要ですし、どこへ向かっていくのかという目的地も必要だと思います。 デザイナーの成熟度は、以下のような UI を見たときの反応で判断することができます。 あるサイトの UI を基にしてつくったスケッチ デザイナーによって、この UI に対するリアクションは異なります。大きく分けると 4 つあります。 見た目を変えたい インプットフィールドの見た目が良くない。タイポグラフィの選択が良くな