デザイン

A collection of 252 posts

デザイン

感情移入の邪魔をするエンパシーギャップに注意

「自分は絶対にそうしない」の正体 デザイナーであれば思いやりではなく感情移入ができるようになっておきたいですが、同じ立場になって考えるだけだと思わぬ落とし穴に出くわします。 ダイエット、新年の抱負、過労、セクハラなど、様々な方達のエピソードを聞いたときに「自分だったらそんなことはしない」「なぜそうなってしまったのか」と反応してしまったら危険信号です。それは、Empathy Gap(エンパシーギャップ)と呼ばれる認知バイアスの可能性があります。 エンパシーギャップには大きく 2 パターンあります。 感情の高ぶりや非日常的な状況の影響力を過小評価してしまう状態 どのような状況でも客観的に分析・思考できると過大評価してしまう状態 例えば新年の抱負を考えるときは、真っ新な気持ちで様々なプランを立てると思います。しかし、日が経つと次第に宣言した習慣が続かなくなってしまうことがありますが、これもエンパシーギャップによる過大評価が原因です。ちょっとした状況の変化や気分によって行動が大きく変わることを考慮できていないパターンです。過去の経験を無視して、今年こそ!と真っ先に考えてしまうのもエンパシーギャップのひとつです。 デザイナーであれば自分がつくった成果物を過大評価してしまうエンパシーギャップがあります。これにより上手く使えないユーザーや反対意見に対して「分かっていない」「エッジケースだ」という結論に至ってしまいます。 ユーザーインタビュー(ユーザー調査)でもエンパシーギャップが発生する可能性があります。ただ、ユーザーに行動や考えていたことを聞くだけでは、「ターゲットユーザーにはないケースだ」と結論付けてしまうかもしれません。

デザイン

それでも私はデザイナー

今の働き方をするキッカケ 最近、私は業務で Sketch をはじめとしたデザインツールを開く機会が減ってきています。意図的に名を伏せるようにしていますし、実際はチームで作っているわけですから「私がこれを作りました」と言えるものもありません。それもあって周りからは何をしているか分からないと怪しまれるわけですが、それでも「私はデザイナー」と言っています。 何かを作って世に送り出すことがデザイナーと定義するのであれば、私はそう呼ぶ資格がないかもしれません。今は人の課題、部署間の課題、作り方の課題、進め方の課題、改善の課題、運用の課題といった外からでは見えにくいところを取り組んでいます。 上記の課題に興味をもったのも、出来上がった成果物への不満や失敗をした経験があるからですが、「誰のためのデザイン?」の著者であるドン・ノーマン博士が 10 年前に書いた「Why Design Education Must Change」はインスピレーションになりました。 記事は教育について書かれているものですが、私たちデザイナーの働き方の問題の根底にも繋がるものと解釈しました。 複雑化する課題解決 Many designers are woefully ignorant of the

デザイン

ユーザー調査に必要な分析の「はじめの一歩」

分析で価値が変わる ユーザー調査(ユーザーリサーチ)は始めるのも実施するのも大変ですが、分析するのも楽なことではありません。せっかく調査してもログがあるだけでは意味がありません。ユーザーの言葉を引用してポスターやスライドで見せるのは啓蒙目的であれば良いですが、本当に必要なのは次の開発へ繋げるための判断材料です。分析でユーザー調査の価値が決まるところがあるので、次へ繋げるためにも分析は欠かせないところになります。 分析もデザインと一緒でツールの使い方を覚えたり、綺麗なレポートの事例を見ただけでは上達しません。基本を覚えた上で、何度か実践を繰り返すことで少しずつ上達していくものです。定性調査でも定量調査でもつかえる分析の第一歩になるポイントを押さえておけば、レポートの質もグッと上がります。 目的を明確にすること 分析をする前に重要になるのが、調査の目的を明確にすること。分析手段を知っていても、分析対象になるデータの質が悪いと意味がありません。ユーザーインタビューでも「どうやって使っていますか?」という広い質問ではなく、「〇〇のタスクをどのように完了していますか?」と絞った質問にしたほうがあとで分析がしやすくなります(もちろん誘導質問にならないような聞き方が必要ですが)。 データを集めて整理したらいよいよ分析が始まるわけですが、以下の 4 つがユーザー調査で行う代表的な手段。深掘りを始めるための第一歩にはなるはずです。 パターン よく見かける傾向は何かを見るけること。情報整理の基本中の基本ですが、ユーザー調査の分析にも欠かすことができません。たくさん見かけるフィードバックや行動は何でしょうか。五月雨式にフィードバックを見ているだけでは見えにくい傾向も、表にして整理すると見えてくることがあります。 例外・アンチパターン よく見かける傾向を探し出すだけでなく、意外なことを見つけることも忘れてはいけません。場数を踏まないと見えてこないですが、

UI

UIデザインのバグを減らすための施策

UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態(ステート, State)を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。 理想型 エラー 情報が少ないとき 読み込み中

デザイン

デザインをスケールしていくための役割分担

数だけのデザインチームは『弱い』 インハウスデザイナーの数が少ない組織だとあらゆるコトができる方がいたほうが早く動けます。プロダクトはもちろんプロモーションやマーケティング用の成果物も作りますし、ディレクションに近いことをする場合もあります。小さなチームだとワークフローもシンプルですし、周りが何をしているかも Chatwork や Slack を眺めていればだいたい把握できるので身軽に早く動けることが重要になります。 しかし、組織が大きくなるとあらゆることが同時進行します。そこでデザインのスケール化が必要になるわけですが、小さかった頃と同じように「作る」に関わるあらゆる作業ができる人を求めている組織も少なくありません。 野球、サッカーのようなチームスポーツは良い例だと思いますが、それぞれが明確な役割をもってプレイをしています。デザインも同じようにポジションを明確にしてチームを作り上げていくべきですが、全員が全ポジションをやっているようなところもあります。ただ頭数を増やしているだけだと、周りが求めているスピードに追いつけません。 こうした『何でも屋状態』は若い頃は良いかもしれませんが、専門性をもちたい人もいるはずです。それでも何でもやらなければならないという職場にいると UX が付く肩書きがもつ不安を生み出します。 インハウスで何でもやるデザイナーの次のパスはどこにあるのでしょうか。最近だと「デザインマネージャー」「デザインリーダー」又は「CDO」といったポジションがあるものの、上の立場で働くしかないのも物足りない気がします。UX Collective が今年の初めの発表した The State

デザイン

フレームワークと共存できるデザインの向き合い方

フレームワークはクリエイティブを殺すのか プロダクトやサービスを運用しているサイトの多くは上図のようなフォーマットに収まります。画面上には大きな画像(又は動画)を背景に短めのメッセージ。3, 4 つの機能紹介、導入している企業のロゴが並ぶといった構成はよく見かけます。似たようなテンプレートがたくさんあるように、定番になっていると言えるでしょう。 こうした無難な形状をした web サイトを「Bootstrap っぽい」と表現することがあります。2011年にリリースされて以来、フロントエンドフレームワークとして多大な影響を与えた Bootstrap。模索・実装の敷居を下げたものの、同じような見た目の web サイトを量産したことを指摘される場合もあります。 フロントエンドフレームワークやデザインシステムのような『枠組み』に沿って作ることはクリエイティビティを奪うものだと危惧している方は少なくありません。実際、Bootstrap っぽい web サイトがたくさん出てきてしまっているのもその証拠と捉える人もいます。 ただ、本当に Bootstrap のようなフレームワークのせいなのでしょうか。 そのまま使うと単調なレイアウトになりがちですが、Layout Utilities を活用して カスタム CSS Grid

デザイン

健全なデザインの会話に必要なコト

デザイナーにある2つの仕事 デザイナーの仕事は情報を整理したり何か成果物を作ることであることに異論を出す人はいないと思います。何か形にできるのはデザイナーの特殊能力だと思いますが、それだけがデザイナーの仕事ではありません。デザインの見方や伝え方を周りに教えるのもデザイナーの役割です。 デザイナーの間では「デザインは課題解決すること」という認識が広まっていますが、周りからは「デザインは見た目を整えること」と思われています。デザイン思考、UX といった言葉をデザイナー以外が発することはありますが、それでもデザインは見た目の話に止まることがあります。 こうした状況に対して「デザインのことを分かっていない」と言うのはナンセンスです。私たちデザイナーと同じように情報収集と実践を繰り返しているわけではないのに、デザイナーと同じ認識と姿勢でデザインに取り組むことを期待するのは現実的ではありません。結局、見た目以上の話から発展しない理由として以下の 4 つが考えられます。 相手が分かる言語でデザインを伝えていない 感覚的な言葉が多すぎて個人的な意見に聞こえてしまう 課題解決と言うけど、デザインレビューは終始見た目の話 ファシリテーションがないので、自分の『デザイン観』で話が平行する デザインという言葉に対する理解も違う。デザイナーの仕事への期待も違う。非デザイナーになるとデザインの見方すら分からないので、見えるものについてしか話ができません。こうした状態で「これはどうですか?」「ちょっとみてください」という軽い言葉でデザインを見せるのはとても危険です。 「これはどうですか?」という言葉の中には様々なデザインの要素が凝縮されています 戦略的にデザインを見せる デザインの見方や伝え方を周りに教えるのデザイナーの仕事と書きましたが、

ツール

次世代デザインツールはどこへ向かうのか 後編

次世代デザインツールはどこへ向かうのか 前編 次世代デザインツールはどこへ向かうのか 中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント(部品)として捉えた UI の管理 複数人のデザイナーによるプロダクトデザインの運用 コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニーズが高まってきています。欧米ではここ数年でデザイナーとエンジニアの比率が小さくなってきている状況をみても、デザインが個人プレーからチームプレーになってきているのが分かります。 大企業でデザイナーの雇用(又はデザイン会社の買収)が増えていたけど、結果として開発者とデザイナーの比率が大きく変わっているみたいですね。場所によっては10倍違う #design https://t.co/ygQgAewkFU pic.twitter.com/AreCGpSWjq — Yasuhisa🧞‍♂️ (@yhassy) 2017年6月1日 表現力だけでなく、

ツール

次世代デザインツールはどこへ向かうのか 中編

実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうとしているのかもしれません。それくらい、デザインと実装には深い溝があります。 大小様々ですが、今でも増え続けています。 随分洗練されてきたデザインツールですが、今でもデザイナーが作った『絵』を見ながら、ゼロからコードへ転換するといった作業は発生します。PSDなどのデザインデータで作られたデザインは完成品というより、実装のための青写真に近いものです。つまり、実装しないと分からないことがあまりにも多いのにも関わらず、その絵を完成品の一歩手前として承認してしまう現場もあります。 実装のことを考慮していないデザインは主に 3 つの特徴があります。 情報共有不足:実装のための情報が足りなかったり不透明なところがあるため、開発者が空気を読まざる得ない エッジケース:情報が空の場合、エラーが発生したときなど、ある特定の状態が考慮されていない

UI

透明かつ自動化するUIデザイン

上図は、Facebook, Instagram, Snapchat をはじめとしたサービスが提供している「ストーリー」でよく見かける動きです。ストーリーはここ 1, 2 年で一気に広まりましたし、毎日観覧している人もいると思います。 UIデザインも成熟期に入ってきて、ベストプラクティスと呼ばれるものが出揃ってきました。タイムラインのUI、ナビゲーションのUI、ギャラリーのUI など、様々なコンポーネントがどのアプリを見ても大して変わらなくなりましたし、そこから大きく外れたものは「使いにくい」と言われる場合もあります。 ストーリー式 UI も他のコンポーネントと同様、似たり寄ったりになってきていますが今までの UI になかった特徴的なところがあります。 操作のための UI が極めて少ない: 従来であればスキップしたり次の動画を見るための操作 UI があったところが、ストーリー式 UI にはそれらがほとんどない。スワイプのようなジェスチャーを使うことを大前提としている。 自動的に次のコンテンツへ移動する: 従来であれば次のコンテンツを見るか見ないか決めることができる UI があったが、ユーザーの意思に関係なく次の動画が再生される。ジェスチャー操作はできるものの、

UI

Sketchから学ぶコンポーネントデザイン

部品から設計することに慣れる デザインツールとして Sketch や Figma を推している理由のひとつにシンボルがあります。Adobe CC ライブラリのアセット管理とは異なり、デザインした部品(コンポーネント)を拡張したり組み合わせることができるのが魅力。様々なスクリーンサイズに耐えられるように作るのはもちろん、デザインを運用していくには、部品からしっかりデザインできるのはこれからのツールでは必須です。 コードが書ける人、コードを書く思考が分かる人であれば、部品から作ってレゴブロックのように積み上げるという Atomic Design 的な考え方は当然と思えるでしょう。なので、デザインシステムを作りましょうという考えに至りますが、画面の全体像から徐々にディテールを作るやり方でデザインしていた人には難しかったりします。いきなり部品から作ることに慣れていないですし、マクロ(画面全体)とミクロ(部品)両方を交互に見ながら設計できるツールを使っているとも限りません。 全体からディテールを作るという進め方の弱点は、UI デザインに必須の一貫性を失いがちになりになるところ。また、ひとつひとつの画面の見た目作りになってしまい、全体像を見失うこともあります。 昨年、何度か Sketch セミナーで講師をした理由は、コンポーネントを積み上げて設計をする能力を身につけなければ、デザインシステムどころではないと感じたからです。Sketch が物足りないところはありますが、

ツール

現場で必要なデザインツールの見つけ方

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。 こうしたツールはデザイナーがビジュアルデザインだけを任されている環境、他の専門家の力を借りなくても完成品を作り上げることができる環境であれば機能します。紙媒体のデザインは、印刷という専門知識が必要になるもののデザインツールのなかで完結しますし、よほど特殊なことをしない限り、エンジニアの力を借りなければ印刷ができないということもありません。 Web サイトやアプリデザインは、デザインツールの中で完結することはありませんし、エンジニアをはじめ様々な専門家の力が必要になります。いくらデザインツールで作り込んだとしても、コードに落とし込むまで『

デザイン

野放しは危険!デザイナーに潜む4つのモンスター

身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正しい」という態度は、周りを突き放すことになります。 退治する方法: 解決をする前に、課題の定義と共有に集中すると良いでしょう。人それぞれ課題と感じる部分が違うこともありますし、そもそも何を解決しようとしているのか理解していないと、話が噛み合わないことがあります。デザイナーが考える「あるべき姿」を実現するための解決ではなく、課題に対して何ができるのか話し合える場を持つようにしましょう。 一匹狼モンスター ひとりで黙々と作業しなければならないタイミングはありますが、いつまでも自分の殻に閉じこもっているわけにはいきません。今はデザインとエンジニアリングを完全に切り分けて作業するのは難しくなってきています。Web サイトやアプリはコードで出来ているからこそ、実装してから分かることも数多くあります。自分は見た目を作るのが仕事だから実装は関係ないという態度は危険信号です。 退治する方法: デザインの仕事はデザインファイルの中で終わりません。コミュニケーションツールを駆使してフィードバックを求めたり、

デザイン

デザインプロセスにあるイケア効果

イケア効果という認知バイアス 自分で作ったものだからこそ、特別な感情を抱いてしまいます。だからこそ成果物が否定されると、自分自身が否定されたかのように聞こえてしまうことがあります。自分は自分。成果物は成果物と切り分けて聞き入れるべきですし、話し手も成果物の課題に対してきちんとフィードバックをしたほうが良いでしょう。しかし、実際はそう簡単にはいきませんし、たとえ話し手が上手なフィードバックをしていたとしても、上手に受け入れられない場合があります。 人は自分で作ったものに対して特別は感情を抱いてしまうのは、デザイナーだけではありません。自分で作ったものに本来以上の価値を与えてしまう認知バイアスで、誰でも持っているものです。こうした状態を「IKEA effect(イケア効果)」と呼ぶことがあります。 IKEA の家具は組み立て前の状態で販売されており、組み立てるのは購入者です。コスト削減のための施策ですが、購入者が自分の家具を自分で組み立てるという工程があることで、特別な感情を抱くことがあるそうです。The IKEA Effect: When Labor Leads to Love で紹介されている調査によると、プロによって組み立てられた家具より、自分で作った家具に高い価値を置く傾向があるそうです。家具そのもののが評価の対象ではなく、それがどのような工程で作られたのか身をもって体験したことが評価に繋がることがあるわけです。 一緒に作っている感を演出 以前からデザインのブラックボックス化は避けるべきと話していますが、単なる直感や好みで作られているわけではないことを周りに知ってもらう行為だと思っています。しかし、