Tagged

デザイン

A collection of 254 posts

デザイン

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

「自分は絶対にそうしない」の正体 デザイナーであれば思いやりではなく感情移入ができるようになっておきたい [https://yasuhisa.com/could/article/empathy-design/]ですが、同じ立場になって考えるだけだと思わぬ落とし穴に出くわします。 ダイエット、新年の抱負、過労、セクハラなど、様々な方達のエピソードを聞いたときに「自分だったらそんなことはしない」「なぜそうなってしまったのか」と反応してしまったら危険信号です。それは、 Empathy Gap [https://en.wikipedia.org/wiki/Empathy_gap] （エンパシーギャップ）と呼ばれる認知バイアスの可能性があります。 エンパシーギャップには大きく 2 パターンあります。 * 感情の高ぶりや非日常的な状況の影響力を過小評価してしまう状態 * どのような状況でも客観的に分析・思考できると過大評価してしまう状態 例えば新年の抱負を考えるときは、真っ新な気持ちで様々なプランを立てると思います。しかし、日が経つと次第に宣言した習慣が続かなくなってしまうことがあ
デザイン

それでも私はデザイナー

今の働き方をするキッカケ 最近、私は業務で Sketch をはじめとしたデザインツールを開く機会が減ってきています。意図的に名を伏せるようにしていますし、実際はチームで作っているわけですから「私がこれを作りました」と言えるものもありません。それもあって周りからは何をしているか分からないと怪しまれるわけですが、それでも「私はデザイナー」と言っています。 何かを作って世に送り出すことがデザイナーと定義するのであれば、私はそう呼ぶ資格がないかもしれません。今は人の課題、部署間の課題、作り方の課題、進め方の課題、改善の課題、運用の課題といった外からでは見えにくいところを取り組んでいます。 上記の課題に興味をもったのも、出来上がった成果物への不満や失敗をした経験があるからですが、「誰のためのデザイン？ [https://amzn.to/37KiEnG]」の著者であるドン・ノーマン博士が 10 年前に書いた「Why Design Education Must Change [https://jnd.org/why_design_education_must_change/]」はインスピレー
デザイン

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

分析で価値が変わる ユーザー調査 [https://yasuhisa.com/could/article/starting-user-research/] （ユーザーリサーチ）は始めるのも実施するのも大変ですが、分析するのも楽なことではありません。せっかく調査してもログがあるだけでは意味がありません。ユーザーの言葉を引用してポスターやスライドで見せるのは啓蒙目的であれば良いですが、本当に必要なのは次の開発へ繋げるための判断材料です。分析でユーザー調査の価値が決まるところがあるので、次へ繋げるためにも分析は欠かせないところになります。 分析もデザインと一緒でツールの使い方を覚えたり、綺麗なレポートの事例を見ただけでは上達しません。基本を覚えた上で、何度か実践を繰り返すことで少しずつ上達していくものです。定性調査でも定量調査でもつかえる分析の第一歩になるポイントを押さえておけば、レポートの質もグッと上がります。 目的を明確にすること 分析をする前に重要になるのが、調査の目的を明確にすること。分析手段を知っていても、分析対象になるデータの質が悪いと意味がありません。ユーザーインタ
UI

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

UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App [https://developer.apple.com/videos/play/wwdc2019/204/]」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface [https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-st
デザイン

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

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

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

デザイナーにある2つの仕事 デザイナーの仕事は情報を整理したり何か成果物を作ることであることに異論を出す人はいないと思います。何か形にできるのはデザイナーの特殊能力だと思いますが、それだけがデザイナーの仕事ではありません。デザインの見方や伝え方を周りに教えるのもデザイナーの役割です。 デザイナーの間では「デザインは課題解決すること」という認識が広まっていますが、周りからは「デザインは見た目を整えること」と思われています。デザイン思考、UX といった言葉をデザイナー以外が発することはありますが、それでもデザインは見た目の話に止まることがあります。 こうした状況に対して「デザインのことを分かっていない」と言うのはナンセンスです。私たちデザイナーと同じように情報収集と実践を繰り返しているわけではないのに、デザイナーと同じ認識と姿勢でデザインに取り組むことを期待するのは現実的ではありません。結局、見た目以上の話から発展しない理由として以下の 4 つが考えられます。 * 相手が分かる言語でデザインを伝えていない * 感覚的な言葉が多すぎて個人的な意見に聞こえてしまう * 課題解決
ツール

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

* 次世代デザインツールはどこへ向かうのか　前編 [http://www.yasuhisa.com/could/article/nextgen-design-tools/] * 次世代デザインツールはどこへ向かうのか　中編 [http://www.yasuhisa.com/could/article/nextgen-design-tools-2/] デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステム [http://www.yasuhisa.com/could/article/what-is-design-system/] の存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 * 一貫性のあるデザインの作りやすさ * コンポーネント（部品）として捉えた UI の管理 * 複数人のデザイナーによるプロダクトデザインの運用 * コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニー
ツール

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

実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界である [http://www.yasuhisa.com/could/article/wd101-no-edge/] と説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも　1　年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代は デザインツールの革命期 [http://www.yasuhisa.com/could/article/design-tools-revolution/] と呼んでも良いくらい様々なデザインツール
UI

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

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

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

部品から設計することに慣れる デザインツールとして Sketch [https://www.sketchapp.com/] や Figma [https://www.figma.com/] を推している理由のひとつにシンボルがあります。Adobe CC ライブラリ [http://www.adobe.com/jp/creativecloud/libraries.html] のアセット管理とは異なり、デザインした部品（コンポーネント）を拡張したり組み合わせることができるのが魅力。様々なスクリーンサイズに耐えられるように作るのはもちろん、 デザインを運用 [http://www.yasuhisa.com/could/article/governing-design/] していくには、部品からしっかりデザインできるのはこれからのツールでは必須です。 コードが書ける人、コードを書く思考が分かる人であれば、部品から作ってレゴブロックのように積み上げるという Atomic Design [http://patternlab.io/] 的な考え方は当然と思えるでしょう。なので、
ツール

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

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 * 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 * 要件を伝え、画面設計に落とし込むときの溝 * 画面設計から適切だと考えられるビジュアル言語を作るときの溝 * ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。 こうしたツールはデザ