Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

仕事

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

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

仕事

Q&A デザインへの課題や不満をどう捉えますか?

> デザインが理解されない、という問題点と、デザイナーの存在価値を認めてもらえない、という不満を混在させると厄介なのかな、と感じているのですが、それら二つはやっぱりイコールでつながるものでしょうか。 匿名 同じ言葉 != 同じ意味 「デザインはビジネスに貢献する重要なポジションになってきている」 デザイナーとそれ以外の方でこの言葉の受け取り方が異なります。私たちデザイナーであれば、重要な存在になることで本来すべき理想的な工程と成果物が作れるようになると考えるでしょう。しかし、その考え方はデザイナー視点であって、他の役職の方が同じように捉えているわけではありません。デザインというものを『導入』すれば儲かるから重要なポジションだと捉えている人もいます。 同じ言葉でもまったく違う捉え方ができるわけですから、誤解も生じます。「デザインは重要」と言われているからといって、デザイナーが想像する重要な存在になったときの世界とは異なります。理想と現実とのギャップが「理解されない」「存在価値を認めてもらえない」という不満に繋がるのではないかと考えています。 デザイナーに対して「デザインは重

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 にはそれらがほとんどない。スワイプのようなジェスチャーを使うことを

デザインが理解されないと言いますが
ビジネス

デザインが理解されないと言いますが

ビジネスと共生関係の中で 「デザインが理解されない」 「ユーザー調査させてくれない」 「時代に合う作り方を実践したい」 こうした声をオンライン、オフラインでよく耳にします。孤独の戦いを強いられているからこその悩みという場合もありますし、いろいろ模索した末の声ということも少なくありません。また、私自身試行錯誤しながら実践しているところはあります。「理解されない」という声を発する気持ちは共感できるものの、以下の質問にあなたならどう答えるでしょう。 * もし、デザインが『理解』されたらどうしますか? * 理想の作り方ができれば今よりビジネスに貢献できると言い切れますか? * 具体的な効果があることを証明することができますか? デザイナー視点の優先順位がビジネス側の優先順位とうまく噛み合っていないまま「デザインは重要」と言っても伝わりません。そもそもビジネスにおいて、デザインはもちろんエンジニアリングもセールスもマーケティングも経理も すべて重要です [http://www.yasuhisa.com/could/article/tell-some-values/] 。デザイナーはデ

Adobe

Adobeとコラボレーションを始めました

今月から Adobe Creative Station [https://blogs.adobe.com/creativestation/] 編集部とのコラボレーション企画を進めています。Adobe Creative Station は、Adobe が公式で運用しているメディアで、製品の最新情報や使い方を紹介しています。そこでの寄稿、Creative Cloud 道場 [https://blogs.adobe.com/creativestation/category/ccdojo] のゲスト出演、ソーシャルメディアでのコンテンツ配信をやっていきます。週に 2 回以上は Adobe Creative Station 向けのコンテンツをどこかで見ることができるはずです。 今風Adobeツールとの付き合い方は? 長く Adobe 製品を利用していますが、Adobe のビジネスモデルに疑問を投げかけたり、使えないところはハッキリ言うこともあります。こうした言動に対して「アンチ Adobe ですね」と言われたこともありますが、足りていないところを口にしない(

仕事

Q&A 複数の企業の中で働くってどんなかんじ?

> 複数の企業に所属してデザインのお仕事をされていると伺ったのですが、複数の企業で働くメリット・デメリットを教えてください。 これから1つの組織にとらわれない働き方が広がっていくのではないかと思うのですが、デザイナーとしてどんな気づきがありましたでしょうか? 分人プレー 中から外部視点で働きかける 数年前から組織に片足を突っ込んで、中からデザインの進め方の提案と実践を行うという働き方にしています(外部コンサルみたいなかたちで入ることもあります)。制作をガッツリするということはありませんが、データ解析、企画立案、ライティング、コーディングなど現場の『穴』を見つけては、そこに入って仕事をすることもあります。うちのサイトで取り上げているトピックにバラつきがあるのも、私の仕事を映し出しているからかも。 外部の制作者としてクライアントと関わると、中からでは見つけ難い視点を提案できたり、社内政治から外れた思い切った意見も言えることがあります。ただ、それだと理想論になりがちですし、内部の人も理想の形、やりべきことは分かっていることが多いです。それでも実践できないのは何か理由(課題)があるわけ

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/] 的な考え方は当然と思えるでしょう。なので、

ツール

Q&A おすすめSketchプラグイン

> 使用されているSketchのPluginを教えてほしいです! しゅんさん どんなUIデザイナーかで決まります Sketch [https://www.sketchapp.com] は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査 [https://uxtools.co/survey-2017/]によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています(2018年1月現在)。 私の仕事でも欠かせないツールではあるものの、プラグイン [https://www.sketchapp.com/extensions/plugins/] の組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグイン [https://github.com/airb

インターネット

Q&A 情報収集はどうやってしていますか?

> 情報収集方法についておしえてください。見ている情報源、使っているツール、コツなど。 匿名さん よく聞かれる質問のひとつです。 Twitter [https://twitter.com/yhassy] で、平日毎日情報発信しているので不思議に思われる方もいるかもしれませんが、特別な手法で情報収集をしているというより、時間の費やし方が違うかもしれません。 80%英語です 知人のブログ、又はソーシャルメディアから流れてきた興味深い情報以外は英語中心です。自分の仕事に関わる情報収集は、日本語のを見てもだいたいが英語圏の情報の焼き回しだったり、表層的なところで終わっているところもあるのでほとんど見ていません。学生時代からずっとそうやって情報収集しているので単なる習慣なのかもしれませんが …。 以下がよく見ているサイトの一部です。 Designer News [https://www.designernews.co/] ココを押さえておけば、日本のデザイン系まとめサイトを見なくて済むようになると思います。ここ 1, 2 年少々質が下がってきていますが、UI デザインに絞って全体

デザインシステム

良いデザインの原則と『立ち止まる』こと

「ブラウンとアップル [http://www.yasuhisa.com/could/article/braun-apple/]」という記事で、デザイナー Dieter Rams(ディーター・ラムス)が提案した良いデザインの10の原則 [https://www.vitsoe.com/us/about/good-design] を紹介しました。1970年代に提案されたものですが、現在にも通じる普遍性のあるメッセージです。これのアップデート版のようなものを、Co.DesignのSuzanne LaBarre さんが提案しています [https://www.fastcodesign.com/90154519/10-new-principles-of-good-design]。特にアプリや web サイトをはじめとしたデジタルプロダクトを意識した内容になっています。 1. 良いデザインは様々な影響を考慮している 2. 良いデザインは『スロー』である 3. 良いデザインは正直である 4. 良いデザインは政治的である 5.