デザイン

A collection of 251 posts

デザイン

なぜダメなデザインが生まれるのか

ますます力を増すダークパターン ユーザーが思いもしなかった操作をさせて、会員登録、購入、サイト流入をさせるテクニックを「ダークパターン(Dark Patterns) / Dark UX」と呼ぶことがあります。サイトへアクセスしたら問答無用にモーダル UI を出すのは初歩と言っても良いくらい。中には行動心理や知覚をうまく利用したダークパターンもあります。 Twitter のハッシュタグ「#darkpatterns」で数多くの事例を見ることができるので、こちらも注目。 集中力が低くなった今日のユーザーは、即座に判断して行動をする傾向があります。これ自体悪いことではないですし、デザインの力が試される部分ではありますが、下記のような手法で悪用されることもあります。 情報をわざと見えにくくする ベストプラクティスを逆手にとる 罪悪感を促す 偽 X を設置する 嘘をつく ダークパターンは聞いたコトがない怪しいサービスだけがしているのではなく、Facebook や Amazon といった誰もが知っている大企業でも実践されていることがあります。 正義を振りかざすのは容易 Web やアプリをビジネスの柱としているビジネスだと、売上、ページビュー、コンバージョン率、滞在時間などの指標を意識しています。

デザイン

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

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

デザイン

それでも私はデザイナー

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

デザイン

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

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

デザイン

プロダクトデザイナーのスキルマップを考えてみた

何でも屋が増えてもスケールしない 「UXが付く肩書きがもつ不安感 」という記事で、UX デザイナーが『何でも屋』になっているのでは?という疑問を投げかけました。ひとりのデザイナーとして様々な分野に関わりたいと思うものの、UX の文脈で求められるスキルと知識の幅は広いので、すべてをカバーするのが極めて難しいです。また、ひとりですべてを抱え込むと、組織が求める品質とスピードに応えることができない場合があります。 初期は複数の役割を受け持つことになりますが、プロダクトと組織が成長していかなければいけないときも同じように何でも携わるというやり方が適しているとは限りません。専門性を伸ばしていくことでより高度な提案とアウトプットができますし、互いの弱みを補いながらチームとして動く意味も増していきます。 デザイナーをひとりしか雇えない環境では数多くの分野に精通している人のほうが良いですが、そういう人ばかり増やしても強い組織(デザインチーム)は作れません。スポーツで例えるなら同じポジションの方を増やしているのに近いと言えるでしょう。 UXデザイナー求人情報のなかには企画から実装まですべてできる方を募集しているところもあります。UX の定義は広いかもしれませんが、デザイナーまで同じように広範囲で手を動かすことはありません。まず組織には何が足りなくて、どういう構成していけば良いのか考える必要があります。 伸ばしたいところを視覚化する 求人情報もそうですが、UX デザインだからこそ「何でもやらなければならない」と考えているデザイナーも少なくありません。組織の状態やキャリアステージにもよりますが、抱え込み過ぎることで周りの足を引っ張ってしまうこともあります。しかし、専門性を伸ばしたいと思っても具体的に何をすれば良いかイメージできません。Web 上では「デザイナーは〇〇すべき論」

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 つのスクリーンデザインが必要になります。 理想型 エラー 情報が少ないとき 読み込み中

デザイン

デザインとは交渉すること

受け身のままでは後退する 長くキャリアを積んだとしても、時に「デザインとは?」という疑問が頭に浮かび上がります。様々な定義がありますし、文脈や状況に応じて正解といえるデザインが変わると思います。私が携わっている web サイトやアプリケーション(デジタルプロダクト)という観点からデザインを捉えると「デザインは交渉すること」だと思っています。 ユーザーの立場・視点を想像して、質の高いプロダクトをデザインしたいと考えるのは良いですが、その想いをそのまま周りに伝えても理解されません。デザイナーが考える「質」は、その職域に携わる人独特の視点であることは多々ありますし、技術制約やビジネスゴールを考慮するとコスト高という場合もあります。 だから諦めましょう … ではないからこそ交渉する必要があります。デザイナーは与えられた課題に対して解決案を作るといった受け身の仕事になりやすいことから、指示・注文・提案も素直に受け止めてしまうことがあります。「○○してください」は絶対やらなければならない指示ではなく交渉する機会と捉えるべきですが、何もせずに手を動かし始めてしまう。これでは実現したいデザインから次第に遠ざかってしまいます。 特異なデザイナーの想いを察してくれる優しい人ばかりではありませんし、プロダクトに携わる人それぞれ「やってみたいこと」「追い求めたい質」をもっています。 交渉とは自分のアイデアを押し通すための説得ではなく、お互いが納得できる歩み寄りの対話です。「やりたいことがあるけど、なかなか実現できていない」と思っているのはデザイナーだけではありません。彼らが抱えている課題を聞いた上でデザイナーが何を提案できるかが交渉のキモになります。

デザイン

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

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

デザイン

内向的な人でも実践できるデザインの伝え方

外向的な方が多い仕事現場 デザイナー以外の方たちへデザインを伝えるには、あやふやな表現の言語化がスタートになりますが、「ハキハキと前へ出て話をしましょう」という意味ではありません。一歩前に出て意見を述べることができる外向的な性格であれば良いですが、誰もがそうではありません。内向的な人が無理な行動をしてもかえって負担になるだけでなく、伝えるべきコトが伝わらない場合があります。 声が大きい人が多い場所、明らかに立場が上な人たちと意見交換をするのは至難の業。リモートでの情報共有はさらに難易度が上がります。ニュアンスをはじめとした非言語コミュニケーションが共有されていないと、どんどん取り残されてしまいます。内向的な方にガンガン攻めていきましょうというのは酷ですが、内向的であることを言い訳にして伝えることをしないのも良くありません。 思ったことをドンドン口にする人との会話は難しい。 自分のペースを設計する 内向的な方は言葉を選ぶために思考する方が多いです。これは話しながら考えをまとめていく外向的な方とは大きく異なります。デザインを共有する会議だとリアルタイムでいろいろな情報が飛び交うので内向的な方が不利になりがち。そこで、周りの勢いに押し流されないために準備が欠かせません。事前に『情報の交通整理』をしておけば、外向的な人が多い場でも自分の意見が伝えやすくなります。 会議の前に質問を投げる アジェンダがない会議へ突進するのは、準備運動をしないで川へ飛び込むのと同じです。その場の気分で話が流れてしまうだけでなく、何も言えなかった自分を責めてしまうことになります。誰もアジェンダを作っていないようであれば自分で作って確認をとったほうが良いでしょう。 アジェンダを作る時間がないという気持ちは分かりますが、自分のペースで何を話すか考えることができるのがメリット。知りたいことをリストアップしておくだけでもアッと驚くような展開を避けることができます。 ルールを設定する 会議の進行役をしているのであれば、会話のルールを定めるのも手段です。どういうフィードバックを求めているのか、伝え方のコツは何か知ってもらうことで求めているフィードバックが得やすくなります。「こうやってデザインフィードバックを受けてみたい」という提案を口頭ではなく、Design

デザイン

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

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

デザイン

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

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

デザイン

作りたいものを作るのがデザイナーの仕事ではない

We’re just like five guys hanging out in a house, trying to make cool shit. (俺らは 5 人でスゲエもの創りしてるんだ) 海外テレビドラマ「シリコンバレー」に出てくる言葉。シリコンバレーを舞台に新しい技術の開発と新興企業の立ち上げに奮闘するという内容ですが、ジャンルはコメディ。しかも、今のテックカルチャーを風刺したシーンが満載で業界の片隅にいる自分としては笑えるようで笑えない何とも言い難いところがあります(とか言って全シーズン見ましたが)。 引用は主人公のリチャードではなく、相棒(?)のアーリックの言葉ですが、全編に「俺たちが作りたいモノを作るんだ」というメッセージが伝わってきます。こうした姿勢は、モノ創りをしている人であれば共感すると思います。ただ、こうした作り手を中心に置いたモノ創りが今のシリコンバレーを作り出しているといっても過言ではありません。 「the four GAFA 四騎士が創り変えた世界 」のような書籍をはじめ、シリコンバレー企業や文化に疑問視する声が増えてきています。

デザイン

デザイン指標から価値を伝えてみよう

価値の説明が下手なデザイナー IBM の社長だったトーマス・J・ワトソン・ジュニアが「良いデザインは良いビジネスである」と言ったのが 1973 年。最近だと Design in Tech Report 2017 (PDF) のなかで、 デザインは見た目の美しさだけでなく市場に合うものを作り成果を出すものとし、ビジネスと密接な関係にあるものとしています。今も昔もデザインはビジネスにおいて重要なポジションにあるべきだと言われていますが、未だにあちこちで『説明・説得』があるということは、うまく伝わっていないのかもしれません。 私は価値が伝わりにくいというより、価値の伝え方が上手くないではと考えています。ここで言う「伝える」とは、ただ言葉にするだけでなく体系化も含まれています。 プロセスと価値が結びついていない UX やデザイン思考のような言葉がビジネスシーンでも流行したことで、見た目が良いものを作るだけがデザインではないことは認知されたと思います。プロセスがフレームワーク化されたことで、チームでデザインについて考えやすくなりました。 しかし、良くも悪くもプロセスであり手段であることから、具体的な成果物を作り上げるには不十分です。また、盲目的に手段だけ取り入れることで「そもそも何でやっているの?

ツール

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

次世代デザインツールはどこへ向かうのか 前編 次世代デザインツールはどこへ向かうのか 中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント(部品)として捉えた 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 つの特徴があります。 情報共有不足:実装のための情報が足りなかったり不透明なところがあるため、開発者が空気を読まざる得ない エッジケース:情報が空の場合、エラーが発生したときなど、ある特定の状態が考慮されていない

ツール

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

プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような存在でした。画面遷移と大まかな情報設計であれば、紙(ペーパープロトタイプ)で十分という場合もありました。 画面遷移を作って共有するサービスとして始まった inVision ですが、今はアニメーションやコンポーネント管理など機能拡張しています。 今のデザインツールは画面遷移を作るだけはありません。精度が高い見た目を作れるのはもちろん、web やアプリのようなデジタルプロダクト特有の課題を解決するために作られています。 アニメーション レスポンシブ

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 で紹介されている調査によると、プロによって組み立てられた家具より、自分で作った家具に高い価値を置く傾向があるそうです。家具そのもののが評価の対象ではなく、それがどのような工程で作られたのか身をもって体験したことが評価に繋がることがあるわけです。 一緒に作っている感を演出 以前からデザインのブラックボックス化は避けるべきと話していますが、単なる直感や好みで作られているわけではないことを周りに知ってもらう行為だと思っています。しかし、

ツール

Sketchが解決しようとしているデザインの課題

2017年4月22日、東京で「UIデザインのための「Sketch」1dayブートキャンプ」が開催されました。セミナーとハンズオンがある全編 Sketch を扱ったイベント。ポッドキャストにも出演してくださったことがある UI デザイナーの山本麻美さん(@linen_beau)と、多数の執筆や登壇をしているデザイナー こもりまさあきさん(@cipher)とご一緒させていただきました。当日の様子は Togetter のほうでまとまっているので、興味がある方はぜひご覧ください。 私は「なぜSketchがUIデザインで力を発揮できるのか」と題して、Sketch のようなツールが出てきている背景と、今後のデザインツールとの付き合い方について話しました。 Sketch に限った話ではありませんが、新しいから使う、流行っているから使うでは、ツールが提供したい価値を十分に引き出せなくなります。Figma や Affinity Designer にも言えますが、ここ 4, 5 年で出てきた新しいツールは、今までなかったデザインの課題を解決しようとしています。