Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。

プロセス

Q&A 成果物に合わせた説明の仕方が知りたい

> インハウスで3人ほどの少人数のデザイン部門にいますが、周りの知識レベルがバラバラで、デザイン批評をするのが難しいです。 また、途中成果物(ワイヤーフレーム、デザインカンプなど)がそもそもどういう目的で作られるものかも理解されていない状態です。 伝えやすくするためのコツや手段があれば知りたいです。 匿名 プロセスを進めるために手段がある 「デザインカンプを作らないと分かってもらえない」というのは昔からある制作者の悩み。デザインカンプは漠然としたビジュアルの印象を共有するためであれば良い途中成果物ですが、コンテンツの検討やインタラクションなど不得意分野もあります。 デザインカンプを作ったデザイナーは、それを通して何を共有して決めたいか頭の中でイメージしていますが、見ている側は下図のような様々な課題を一気に見せられているようなものです。 デザインといっても解決している課題は様々です。 いきなりデザインカンプを作ることの危険性は単に制作コストがかかるだけはありません。高いファシリーテション能力がないと、話が様々な方向へ広がってしまいます。ビジュアルの刺激が強いことから、本当

ワークショップ

ワークショップをするときに自己紹介の時間を多く費やす理由

私はワークショップの序盤に参加者全員に自己紹介をしてもらっています。自己紹介では役職名だけでなく、「仕事で興味があること、悩んでいること」を話してもらうようにしていて、上のメモは自己紹介タイムに残したものです。30 人前後参加するイベントなので結構時間をとってしまいますが、それでも実施するようにしています。 自己紹介はアイスブレイクになるのはもちろんですが、私も含めた参加者全員で文脈を共有するためにしています。「デザイナー」「Webデザイナー」「UXデザイナー」「UI デザイナー」「Web ディレクター」など役職名がたくさんあるこの業界。たとえ同じ名前でもまったく同じようなことをしている人はいません。責任範囲も違えば、現場で求められている成果物も様々です。 自己紹介を通して「なるほど、そういう働き方もあるんだ」という気づきもあると思いますし、「似たような悩みある」という共感が生まれることもあります。何よりも自分と違う価値観と環境で、様々なデザインの挑戦をしている人がいるんだという見えにくい背景を知る機会になると思っています。 登壇者⇄参加者のコミュニケーションがあるといっても

デザイン

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

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

UI

ジェネレーティブUIデザインが作り方を変える

デザインツールのもうひとつの未来 「次世代デザインツールはどこへ向かうのか(後編) [https://yasuhisa.com/could/article/nextgen-design-tools-3/] 」で、デザインプロセスはよりチームスポーツのようになると書きました。デザインツールはより開発との連携がしやすくなり、より実装を考慮したデザインがしやすくなるのでは?と仮説しました。しかし、デザインと実装の溝がなくなることだけがデザインツールの未来の姿ではないと思います。 デザインツールにあるもうひとつの可能性が、ジェネレーティブデザイン(generative design)です。 ここでいう『ジェネレーティブ』とは、コンピューターアルゴリズムで何かを生成・構築するもの。ジェネレーティブアートであれば随分昔からあります。例えば Gerg Nees の Computergrafik [http://dada.compart-bremen.de/item/exhibition/164] は、コンピューターアルゴリズムによって作られたグラフィックアートを 1965 年に発表していま

仕事

優しくいこうよ、どこまでも

ネガティブは伝染する 仕事現場にしても、業界にしても、今足りないのは「優しさ」じゃないかなと感じることがあります。 100% 間違ったことを言っている人はマレです。けど、5%、10% 違うというところを広げて相手を評価してしまうということがあります。自分がもっている物差しで測るしかないものの、サバ読み・軽率な判断になっていないでしょうか。それがネガティブなリアクションになることが多いですし、そのリアクションがさらにネガティブを引き起こすという危うい現象もあります。デザインという小さな分野しか見ていない私ですが、そういう傾向が見られます。 自分と違うことが「分かってもらえない」という対立姿勢になり、余計コミュニケーションがギクシャクすることもあります。少し優しくなれば状況が変わると分かっていても「どうせ無駄」「なぜ自分だけ」と思ってしまって踏み切れない。けど、実は皆そう考えているかもしれません。 「自分だけ」という視点が周りに優しくなれなくなる原因のひとつでしょうし、それが周りにも伝染している可能性があります。 見えにくいところを見ようとする デザインの仕事は様々な解決方

仕事

オトナがwebを殺さないために

「分からない」が将来を潰す 「インターネットってどうせ流行りでしょ?」 「FAXのほうが良いじゃないですか」 「今までのやり方で上手くいっているから必要ない」 小さな頃から web を当たり前のように使っていた人には信じられないですが、昔はそんなことを言っていた人がいました。企画提案をするにしても、過ぎ去っていく流行ではないことを説得するところからスタートすることもありました。 若い頃は昔の価値観にしがみついている人たちにどう伝えれば良いか分からなくて苦労しましたし、自分が『オジサン世代』になったら絶対こうなりたくないと思っていました。自分には分からないから、周りにはさせないみたいな態度が成長を遅れせてしまうのではないでしょうか。 『オジサン世代』になってしまった今でもそう考えながら仕事していますが、周りが次第に閉鎖的になっているのを見ると「ヤバいな」と感じることがあります。 「TikTok を使っている人がまったく理解できない」 「昔のほうがいろいろ面白かった」 「今まで通りホームページありきで考えるべきだ」 私と同じように、web の可能性から説得しなければならなかっ

ツール

Q&A デザインツールの見方・選び方

> 似たようなツールが多くて一長一短で、「〇〇(What)をするならコレを使う」というよりも、「状況 (Where, Who, How) によって今はコレを使う」といった目線で見ています。 ただ、どんどん新しい (けれども似たような) ツールが出てきている中、それぞれのツールの特徴を見出して、差別化するまでにモヤモヤしています。 ヤスヒサさんは新しいツールや類似のツールを触る時、どういった目線で見ていますか? 匿名 注目は実装目線のデザインツール デザインツールの評価は非常に難しいトピックです。 Sketch [https://www.sketchapp.com/]、Adobe XD [https://www.adobe.com/jp/products/xd.html]、Figma [https://www.figma.com/]、 InVision Studio [https://www.invisionapp.com/studio] などツールが出揃った感がありますが、

仕事

バランスなんて他人が決めつけるものではない

バランスとは均等のことではない 昔は「バランスが大事」という言葉を使っていました。 また、アドバイスをいただくときも「バランス」という言葉を耳にしたことがあります。ワークライフバランスもそうですし、何か新しい施策やアイデアを提案するときも「バランスですね」と、対になる考えを一緒に話す人もいます。 最近どうもこの「バランス」という言葉の使い所に困っています。全体を見失っていない感を装う都合の良い言葉に聞こえることがありますし、明確な方向性を打ち出していないと感じることがあります。仕事文脈でバランスについて話すと響きは良いですが、言い方を変えると無難なわけです。そして、私の経験では無難なことやっていると何も変化に繋がらないと考えています。それもあって最近は質疑応答でアドバイスするときに避けている言葉のひとつです。 どちらもバランスがとれています バランスを「釣り合いがとれている」ではなく、「均等」と捉えている方は少なくありません。つまり「50/50」な関係です。ライフワークバランスとは可能な限り 50/50 に近づけることと思っている方がいるのではないでしょうか。バランスという

コンテンツ

ラベルデザインから読み解くコンテンツ設計の課題

色やタイポグラフィだけでなく、言葉でプロダクトの雰囲気が決まることがあります。早期からダミー文字を避けて [https://yasuhisa.com/could/article/lorenipsum-isnot-good/] コンテンツをデザインするべきですが、簡単に作れるものではありません。 良い事例を探そうとすると必ず辿り着くのが Mailchimp の Voice and Tone [https://styleguide.mailchimp.com/voice-and-tone/] 。「Mailchimp らしさ」が明文化されているだけでなく、ライティングの基礎も書かれている優良コンテンツです。しかし、英語の壁がありますし、文化の違いもあるのでそのまま真似するのは困難です。 そこで今回はラベルのライティングというミクロの視点と、出来上がるまでのプロセスを把握するマクロの視点からコンテンツの課題と対策を紹介します。 ラベルデザインにある3つの特徴 UI のラベルをどのようにデザインすれば良いのかを考える上で、 Airbnb [https://www.airbnb.jp/]

IA

UIの意味付けに情報アーキテクチャは強い味方

Atomic Designは数ある分類方法のひとつ Atomic Design [http://atomicdesign.bradfrost.com] のように UI の『粒度』で分類することがあります。ボタンやフォーム要素のような小さな『分子』。大小様々な要素で構成された『ページ』と呼ばれる大きな集合体。UI を積み木構造のように考えやすくなりますが、Atomic Design 特有の思想であって、特定のアプリケーションの UI に適した分類ではない場合があります。 汎用性をもたせるために、Atoms、Molecules、Organisms、Templates、Pages の 5 段階が作られていますが、web サイトやアプリケーションによっては段階が多すぎます。無理に当てはめようとするあまり、Molecules かOrganisms かを議論するということにもなりかねません。 よくある話でボタンの分類があります。ボタンは Atom と呼べますが、アイコン付きボタンはどうでしょう。 2 つの Atom によって構成されているので

デザインシステム

要素名クイズから始めるUIの呼び名合わせ

あなただったら画面にある大きなテキストを何と呼びますか? 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか? 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト(大)」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップ [https://yasuhisa.com/could/article/ui-pattern-workshop/] では、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは、デザイナー、フロントエンドエンジニア、ディレクターといった違う役

ビジネス

ビジネスを考慮したデザイン提案をする前に決めておきたいこと

改善の意味を合わせる Web サイトやアプリの運用・改善は欠かすことができないプロセス。一発で正解を出すのが難しいのはもちろん、市場やユーザーの動きも常に変わるので、それに合わせた対応が必要になります。改善をすることに異論を唱える人はいないと思いますが、何に対して改善したいと言っているのか異なる場合があります。 例えば web サイトやアプリの制作者(デザイナーや開発者)であれば、UI や使い勝手を改善したいと考えるはずです。しかしマーケターであれば流入チャンネルを改善したいと考えるかもしれないですし、経営幹部であれば収益を上げるための施策を改善と呼ぶかもしれません。 それぞれが考える改善をしていても最大の効果は得られませんし、ひとつに集中しなければ効果が見えてこない場合があります。 また、ビジネスインパクト(利益になるかどうか)を考えたとき、私たちがやりたい UI 改善による効果が極めて小さい場合があります。押しやすいボタンにデザインを変えたとしても、ユーザー数が少ない中では望める効果を得るのは難しいです。それより、ユーザー数を増やすための施策にデザイナーが参加するほうがビ

プロセス

デザインをスケールさせるためのツール選び

なぜスケールすべきなのか よく多くの改善、より早い提案・対応が求められている今日。エンジニアは昔から大規模化して動くための施策と実践を続けていますが、デザイナーは大規模化の歴史がないといっても過言ではありません。エンジニアのように確固したワークフローの構築が難しいというのもありますが、デザインは『個人プレー』で作るものというニュアンスが強かったという背景もあると思います。 しかし、いつまでも個人に依存したデザインをしていると、新しい施策や改善がひとりのデザイナーの動き次第になります。もちろん、それでも運用可能な環境はありますが、増え続けるビジネスサイドの要望に対応するために、ひとりでデザインを続けるのは困難です。ひとつひとつ対応してるときは、「分かりやすい一貫性のあるデザインを作ろう」と思って取り組んでいたとしても、全体を振り返ると実はそうではないということはあります。 ではどうやってデザインをスケールさせていくのかというと、国内外問わず手探りの状態です。人事からマネージメントまで様々な課題がありますし、最適なチーム構成も組織によって異なります。Spotify は Squad

UX

調査を当たり前にするための第一歩

調査という行為は日常では当たり前 車や家など高い買い物をするとき、値段や見た目だけで買うことはないと思います。専門家や信頼できる知人に相談することがありますし、書籍やインターネットで情報収集することもあります。買う前に調査するのも「失敗したくない」「自分にとって最良なものが欲しい」という欲求があるからでしょう。値段が高いのであればなおさらです。 購入前の調査は車や家のような高い買い物だけではありません。食事、書籍、服など数千円のものでも調査をすることがあります。インターネットのおかげで情報と近くなったことから、あらゆることが調査しやすくなったかもしれません。 高い買い物であれば調査は必ずするといっても過言ではありませんが、web サイトやアプリ開発になるとそうでもなかったりします。高い買い物をしているにも関わらず調査をしないところが今もありますし、定量調査はするものの、ユーザーの声を聞くという定性調査までできていないところがあります。 日常であれば数千円の買い物でも調査することがあるにも関わらず、数百万以上かかる web サイトでは調査をしないというのも不思議な話です。 身

ツール

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

* 次世代デザインツールはどこへ向かうのか 前編 [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 の管理 * 複数人のデザイナーによるプロダクトデザインの運用 * コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニー

UI

良いUIでも悪い体験は作れる

下図は、デジタルカードゲーム「Magic: The Gathering Arena [https://magic.wizards.com/en/mtgarena](MTG: Arena)」の画面。現在、βテスト中なので一般公開時には大きく変わる可能性がありますが、良い UI が良いデザインになるとは限らないという例で紹介しています。 カードパックを購入するには、Gems という通貨が必要になります。ゲーム用の通貨を購入してアイテム課金するゲームは他にもたくさんあります。押しやすいボタン。分かりやすいラベル。魅力的なグラフィック。ちょっとしたアニメーションを加えた演出を見ると MTG: Arena は優れた UI デザインと捉えることができます。デジタルカードゲームを楽しみたいユーザーの気持ちを高めるデザインと言えるはずです。 魅力的な表面とは裏腹に、たくさん Gem を購入してもらうための仕掛けが隠されています。例えば 6 パック分のカード(1,200 Gems)を手に入れるために、1,600 Gems 分の課金をします。6

ツール

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

実装を考えながら作れなかった従来のツール 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/] と呼んでも良いくらい様々なデザインツール

インターネット

ユーザーデータの先にあるデザインの闇

ようこそ、ブラックミラーへ ユーザーデータは今のデザインに欠かせない存在です。レコメンデーションや操作の省略など、ユーザー体験の向上に役立っています。また、デザインを提案するときもデータがあるとないとでは説得力が違います。 「ユーザーのため」と耳障りの良い言葉を添えてユーザーデータを集めた先には何があるのでしょうか。それは本当にユーザーのためになっているのでしょうか。Google 社員向けに作られた「The Selfish Ledger」というビデオがユーザーデータを集めた先の世界を描いています。 2016年に作られたこのビデオは Google のプロダクトビジョンを描いたものではなく、Google のデザイナーの教育向けに作られたそうです。このビデオで描かれている世界を目指すべきなのか、それとも別の道や考え方を模索すべきなのか。見る人によって様々な意見が生まれそうです。 ビデオでは全人類のデータを集めることで今までにない体験をユーザーに提供できるとしています。データはユーザーのプロフィールや行動という表層的なところに留めず、DNA にも及んでいます。生まれてくる子供達