Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://twitter.com/yhassy https://www.facebook.com/yhassy/
デザイン

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

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

デザインが伝わらないシンプルな理由

ぬるま湯の会話が生む勘違い デザイナーだけに限った話ではないですが、クリエイティブ職の方との会話が楽なのは、感覚的なところもスッと通じ合えるところだと思います。見せるだけで「そうだよね！」「ちょっと違うよね」のような会話が始まります。こうしたコミュニケーションはひとつの理想ですが、言い換えると『ぬるま湯』です。気持ちが簡単に伝わるコミュニケーションだけしていると、それが当たり前と勘違いするだけでなく、周りが理解しないことに不満を抱いてしまいます。 例えば、何も文脈を共有していないまま以下のような言葉でデザインを説明しても伝わりません。 * 信頼性 * シンプル * ブランドに合う * 使いやすい * かっこいい * かわいい * 感情に響く * エモい デザイナー同士であればこうした言葉ですんなり伝わってしまうので、ついつい使いがちです。しかし周りからすればこれらはユルフワな表現で、何が言いたいのか分かりません。「信頼性」という言葉はよく使われますが、以下の質問を説明できなければ個人的な感覚に過ぎないわけです。 * そのプロジェクトにおいて
視覚化

ユーザー調査を実施するための地味だけど効果的な取り組み

うまくハマらないユーザー調査 ユーザー調査という言葉を聞くと、どういうイメージを頭に思い浮かべますか？ 数週間のインタビューと観察。実施するための入念な準備期間。数十ページにも及ぶ調査レポートなどを想像する人は少なくありません。本格的な調査が必要な場合はありますが、早く動かなければならないプロダクト開発の文脈では現実味がありません。例えば以下の理由で調査をしない（できていない）現場をたまに見かけます。 * アジャイルのような早いサイクルで成果物を作り続けるプロセスに、調査がうまくマッチしない場合がある * 特にスクラム開発は調査・デザインとの相性が悪い場合がある * プロセスに調査ができる人が参加していない場合がある * 時間とお金がかかるというイメージが強すぎて手が付けられない * 調査・プロダクト開発それぞれがもつ有益な情報が見えにくい 調査には「長くじっくり実施して、きちんとしたレポートを作る」という先入観が付きまといますが、それだけが調査の姿ではありません。『調査』というフェイズを設けるのではなく、今の開発プロセスの中でどういう調査（手法）が実践できるか考え
プロセス

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 によって構成されているので