Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://twitter.com/yhassy https://www.facebook.com/yhassy/
TV

ドキュメンタリー「Abstract」を観覧して抱いた違和感

Netflix オリジナル作品「Abstract: The Art of Design [https://www.netflix.com/title/80057883] 」を観覧しました。様々な分野で活躍するデザイナーをひとりずつ丁寧に扱った全８回のドキュメンタリーシリーズです。ただでさえ少ないデザイン系の番組なので楽しみにしていましたが、Inspiration（刺激）より Confusion（混乱）の想いが強く残りました。 どのデザイナーも第一線を走り続ける有名人ばかり。登場するデザイナー達が遠い存在に見えるのは当たり前なのですが、デザインですら遠い世界の何か別のものに見えました。トップクラスのクライアントを抱えるグラマラスなデザイナー達。「自己表現」という言葉がところどころに出てくる本編を見ていると、デザインとは一体何なのか余計分からなくなるかもしれません。 デザインは課題解決という定義をする場合もありますが、表現を無視するのはナンセンスです。視覚的な美しさが課題解決に繋がることもありますし、そこには作り手（デザイナー）による『ある視点』が含まれるのは当然だと思います。しか
ツール

XD vs Sketch みたいな比較は意味がない理由

エコシステムかプラットフォームか たまに「Adobe XD [http://www.adobe.com/jp/products/experience-design.html] と Sketch [https://www.sketchapp.com/] はどちらが良いですか？」という質問をいただくことがあります。Sketch 関連のコンテンツ [https://storify.com/yhassy/sketch-app-dede] を発信しているので、『Sketch 派』と思っている方もいるかもしれませんが、個人的に勝ち負けをつけるような比較はできないと考えています。いずれも UI デザインが得意なアプリケーションと分類できますが、コンセプトも違えば向かっている方向も違います。機能が多い方を選んだら良いというほど単純な話ではないわけです。 私のなかで、Adobe XD はエコシステムで、Sketch はプラットフォームと捉えています。 Adobe は製品同士の連携が最大の強みなので、XD もその特徴を最大限に活かしたアプリケーションへ成長するはずです。つまり Adobe のエコシ
UI

結局デザインシステムは何なのか

フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法 [http://www.yasuhisa.com/could/article/ui-pattern-workshop/]」をはじめ、記事やイベントを通して 維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language [http://amzn.to/2gfm74M] 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を持たせることは、作
UI

デザインしやすい部品の分け方を考える

Atomic Design の課題 デザインシステムを作っていく際、Atomic Design [http://bradfrost.com/blog/post/atomic-web-design/] は非常に参考になる考え方です。Atomic Design は以下の 5 つの要素によって構成されていて、Pages へ近づくほど、より複雑で大きなものになります。 1. Atom : UI を構成する最小かつ基礎要素。ラベルやボタンなどが含まれる。 2. Molecules : 2 つ以上の Atom によって構成された小さなグループ。ラベル、インプット、ボタンで構成された検索フィールドはその一例。 3. Organisms : 2 つ以上の Molecules もしくは Atoms によって構成されており、画面上で独自の枠組みになっていることが多い。 4. Templates : コンテンツ構造が分かる大きな枠組みで、利用文脈によって分類できるレイアウトになっている。 5. Pages
仕事

制作者が自分の価値や課題を伝える方法

2017年2月25日、東京の東京ガーデンテラス紀尾井町で Inside Frontend [http://inside-frontend.com/] が開催されました。単なる小手先のテクニックではなく、複雑な課題にどのように取り組んだら良いのかという考え方も学べる 1 日でした。また、大企業で働くエンジニアが多数登壇していたころから、チームでどのように開発するのかといった話も聞くことができました。当日の様子は #insideFE まとめ [https://togetter.com/li/1084968] を見ると分かりますが、中級者以上の内容を聞ける集まりではあるものの、雑談もできる良い雰囲気のイベントでした。たくさんのツイートが流れ続けていたところもエンジニアのイベントらしいなと思いました。 人は変化を好まないという事実 今回はフロントエンドエンジニアの前で登壇するという理由から「フロントエンドの課題を啓蒙する方法 」という題名にしたものの、話の内容はデザイナーでもディレクターでも共通するものだと考えています。ツールだけでなく、コミュニケーション手段も充実してきているとはい
コンテンツ

必要なコンテンツを発見するための簡単調査方法

コンテンツ発見のために必要な調査 現存コンテンツの課題を発見するためにコンテンツ・イベントリー [http://www.yasuhisa.com/could/article/creating-content-magic-sheet/] は欠かせない存在です。スプレッドシートにひたすらデータを入力するという地味な作業が伴いますが、コンテンツを一望することで「なんとなく」と察していた課題を目に見える形にして共有できるようになります。コンテンツを気軽に作って配信できるようになりましたが、それが利用者にとって意味のあるものなのか評価も必要ですし、そもそも現存コンテンツは誰がどう管理しているか把握しておかなければ改善すらできない場合があります。 自分たちが持つコンテンツから課題を発見するだけでなく、利用者が求めるコンテンツは何かも知る必要があります。そのためにユーザー調査があるわけですが、調査を通してコンテンツに関わる以下の課題を解決することができます。 * 言葉 : 配信側の言葉遣いや分類の仕方が、利用者と同じとは限りません。ニュアンスが似ているだけでまったく違う言葉を使っている可能
UI

デザイナーがデザインシステムに参加するための課題と対策

実装寄りの情報だけでは不十分 コンテンツだけでなくデザインも運用していきたいと考えたとき、デザインシステム [http://www.yasuhisa.com/could/article/design-system-language/] を作ることが不可欠です。属人性を省きつつ、最低限の品質を担保することが可能なデザインシステムですが、作りさえすれば組織で広まるのかというと、そんなことはありません。 Salesforce の Lightning Design System [https://www.lightningdesignsystem.com/]、MailChimp の Design Patterns [https://ux.mailchimp.com/patterns] をはじめ、自社でデザインシステムを取り入れるためのインスピレーションは幾つか見つけることができますが、フロントエンド寄りになりがちです。早く Web サイトやアプリを実装するためのガイドラインなので当然ではあるものの、これだけではデザイナーがデザインシステムへの参加が難しくなる場合があります。多くの要因
ツール

今必要とされている時間を作るためのデザイン

集中できる時間が少ない現在 今の仕事で最も難しいのは、集中できる時間を作ること。作るためのツールは充実していますし、一緒に作ることができる優秀な人も周りにいます。いろいろなものに恵まれていたとしても時間を作ることは簡単なことではありません。1 日 24 時間が、突然 32 時間にはならないわけです。 時間は有限であるのはもちろんですが、その貴重な時間を有効に使うのは非常に難しいです。特に集中するのが難しい時代に生きています。誰かが声をかけるくらいなら良いですが、メール、チャット、ソーシャルメディアなど絶え間なく注意を引こうする通知が鳴り続けています。たとえ通知をオフにしたとしても「あれはどうなっているだろう？」と、ついついスマートフォンを開いて画面を再読み込みしたり、スクロールを続けている方は少なくないはずです。 The Telegraph が 2015 年に公開した記事によると、私たちは年間 759時間も時間を無駄にしている [http://www.telegraph.co.uk/finance/jobs/11691728/Employees-waste-759-hours-
UX

日本の新聞サイトから学ぶパフォーマンスの現在

パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 * 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez [http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf] ） * 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com [https://www.dropbox.com/s/8rffw1px0yn05gm/Velocity-NY-Jed-Wood-Ancestry-User-Centered-Metrics.pdf?dl=0] ） * 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44%
UI

会話から考える情報設計のコツ

会話はデザインの基盤 2016年は、Facebook Platform [https://messengerplatform.fb.com/] や Slack Bot [https://slack.com/apps/category/At0MQP5BEF-bots] のようなチャットを利用した会話式 UI [http://www.yasuhisa.com/could/article/ai-and-conversational-ui/] が話題になりました。人工知能（AI）の話題とも重なって『バズった』UI デザインでしたが注意が必要です。利用者の期待をコントロールしなかったり、情報のインプットとアウトプットの工夫がないと「やっぱり使えない」「会話型でないほうが便利」という結果になります。何でも会話式 UI ではなく、現実的かつ有効な活用例が今後出てくることを期待しています。 『会話』とは、チャットのような見た目のインターフェイスだけを指しているわけではありません。Amazon Echo [https://www.amazon.
Webデザイン

Webデザインにおける『正直』とは

素材に正直であれ Webサイトの品質 [http://www.yasuhisa.com/could/article/what-is-website-quality/] には、高い技術と表現を盛り込むという『上を目指す品質』と、どのような状況でも必要最低限の見た目と操作性を保証する『地を固める品質』の 2 つがあると説明しました。しかし、これだけではなくデザインにおける普遍的な考え方も品質に大きく関わっています。 ドイツのインダストリアルデザイナー Dieter Rams（ディーター・ラムス） [http://bit.ly/2iY9meS] が提案する良いデザインの十ヶ条 [http://www.yasuhisa.com/could/article/braun-apple/]の中には、良いデザインは正直である という項目があります。製品を必要以上に大げさに見せるのではなく、ありのままを伝えること。素材や形状を生かし、機能を明確に伝えることをラムス氏は『正直』と捉えています。 Web デザインに限ったことではありませんが、素材に正直であることは良いデザインには欠かせないことです。こ
ツール

デザイナーが使っておきたいiPadアプリ5選

仕事の仕方が変わった2016年 今年の春に iPad Pro [http://www.apple.com/jp/ipad-pro/] を購入して以来、ペーパーレスの生活を続けています。今までは RHODIA のドット方眼ノート [http://amzn.to/2i17rrf]でアイデアの書き込みやスケッチをしていましたが、その役割を iPad に置き換えてみました。今でも iPad Pro を続けていますが、それが続けられている最大の理由は Apple Pencil [http://www.apple.com/jp/apple-pencil/] の存在。今までスタイラスは何度も試したことがありますが、鉛筆・ペンを使う感覚とはほど遠いものでした。Apple Pencil はその名の通り鉛筆と同じような書き心地と、デジタルならではの使い勝手を実現していて、「これなら移行できる」と思えました。発売当初に出たビデオは大袈裟に表現しているものではなく、本当にできるわけですから驚きです。 iPad Pro
アクセシビリティ

改めてWebサイトの品質について考える

制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイト [http://www.starbucks.co.jp/]と、米国サイト [https://www.starbucks.com/]は良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーションも深く掘れるものになっています。それに比べると、米国サイトは「殺風景」「
ツール

デザインツールを振り返って気付いた今後のデザイナーの役割

広がるデザインツールの役割 2016年はデザインツールのあり方が大きく変わった年でした。スマートフォンが主流になってから、平面な画面をひとつひとつ設計するのではなく、利用者の遷移や UI フィードバックを塾考するようになりました。多彩なデザインツールが出てきている [http://www.yasuhisa.com/could/article/design-tools-revolution/] のは、デザイナーの作り方だけでなく、役割も少し変わってきているからでしょう。ひとりの職人が閉じ籠って完成品に近いものを作るのではなく、デザインプロセスを共有しながら少しずつ作るというやり方に変わりつつあります。 デザインのブラックボックス化を避けるための手段 [http://www.yasuhisa.com/could/article/wcan-prototype-design/]は今も増え続けています。 従来のデザインツールは、ひとりのデザイナーがデザインに集中するための道具であって、途中経過を共有したり、協力して作ることを得意としていませんでした。現在のデザインツールは複数のデザイナーが
デザインシステム

デザインシステムが作り出す明文化への道

明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しい [http://www.yasuhisa.com/could/article/design-sdk/] という記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイド [http://www.yasuhisa.com/could/article/starting-webdesign-system/] はコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評 [http://www.yasuhisa.com/could/articl
デザイン

有意義な批評・評価をするためのデザイン原則

ニュアンスを明文化するという行為 大企業のように Web 上で公開しなかったとしても、デザイン原則はどの現場でも必要 [http://www.yasuhisa.com/could/article/why-you-need-design-principles/] です。ステークホルダー、クライアントそしてチームメンバーと対話をする際「本プロジェクトにおける良いデザイン 」を予め定義しておくことで、ファシリテーションの難易度を下げることができます。見た目はもちろん、機能実装や画面設計も「これは原則に沿ったものだろうか？」という質問を投げかけることで、感情や直感だけに頼らないデザインが決めやすくなるでしょう。 わたしたちデザイナーがよく使う「利用者にとって分かりやすく、使い易い」「素早くタスクを完了できる」「シンプルで見やすい」といった言葉は、実はそれほど明確な表現ではなかったりします。シンプルも 捉え方で様々な見た目が生まれます [http://www.yasuhisa.com/could/article/task-interface-simplicity/] し、使いやすさも個々の
アート

文脈の共有から始まるデザインの会話

知ることで変わるアートの見方 ジャクソン・ポロックが描く抽象表現主義の絵画を見て、「分からない」「何かゴチャゴチャしている」という感想を述べる方はいると思います。彼の作品だけでなくとも、美術・芸術作品にはパッと見ただけでは理解が難しいものは数多くあります。「素晴らしい」と絶賛される芸術作品でも、昔から普遍的にそうであったとは限りません。例えば世界で最も有名な絵画といっても過言ではないモナ・リザも、1911年にあった盗難事件で一気に有名になったと言われています（ 参考記事 [http://www.ibtimes.com/why-mona-lisa-so-famous-310480]）。 アートは自分の好みで「素晴らしい」「美しい」というリクアションを語ることができますが、それだけではありません。芸術家が歩んできた人生や歴史背景を知ることで、作品への理解が増すだけでなく、作品の見方が大きく変わる場合があります。 ジャクソン・ポロックは、幼少の頃厳しい生活をしていたのが彼の生き方にも影響していますし、メキシコ壁画運動が大型でダイナミックな彼の作風の土台を作り出したと言われています
ガイドライン

NASAのマニュアルからデザインシステムを学ぶ

Web サイトやアプリのデザインにおいて、再利用可能な部品（UI）をカタログしたスタイルガイド [http://www.yasuhisa.com/could/article/frontend-styleguide/] が必要とされています。公開されてから次のリニューアルまでデザインが変わらないという状況はまれですし、即座に対応しなければならない場合もあります。制作時は想定されていなかった要素も出てくるでしょうし、対応できる技術が変われば、コードから見直しも考えられます。変わり続けるのはコンテンツだけででなく、デザインにも同様のことが言えるわけです。 Web サイトやアプリといったデジタルプロダクトだけでなく、紙媒体やソーシャルメディアなどあらゆる場でデザインの一貫性が求められています。そうした場合、フロントエンド寄りのスタイルガイドだけでは不十分で、ロゴ規約や書体の扱い方などデザインに関わる様々な素材・ツールを揃えた何かが必要です。 デザインSDK [http://www.yasuhisa.com/could/article/design-sdk/] のようなもの。特定のデザイナ
プロセス

プロセスなんて下手でも我流でも気にしない

デザインプロセスの儀式化 随分昔の話になりますが、茶道（表千家）をしばらく学んでいた頃があります。日本伝統をひとつでも知っておきたかったというのもありますし、茶道にある特有の礼儀に興味があったのが理由です。茶道は、使う道具はもちろん、たてかた、飲み方にも決まったルール・プロセスがあります。できあがった茶の味だけでなく、茶がたてられる過程も楽しむのが茶道の魅力であり奥深さです。 完成品だけでなく、過程を重んじるのは茶道だけの話ではありません。日本に昔からある芸道だけでなく、「寿司を食べる」といった食の世界にもあります。美味しく寿司をいただくには、決まった順序がありますし、正しいとされる礼儀もあります。プロセスというより、一種の『儀式』と呼ぶことができるでしょう。 過程（プロセス）を重んじ、儀式のように進めるという行為は日本文化だけでなく、他国でもあります。プロセスには言葉として表現するのが難しい魅力があるものの、無心で信じるのは良くありません。今日のデザインにおいて、どの環境、どのプロジェクトでも適応できる完全無欠のプロセスは存在しません。しかし、それでも私たちは確実性や安心を求
デザイン

的確なデザインアドバイスをするための確認事項

段階的に考えるデザインのアドバイス 時々「デザインのアドバイスもらえますか？」という依頼を受けることがあるわけですが、応えるのに困ることがあります。尋ねている側は「もっと良い見た目、さらに使いやすくするにはどうしたら良いか？」というニュアンスを含めて質問しているわけですが、初めて見る成果物に対して評価するのは極めて困難です。 成果物は突然生まれるものではありません。価値共有を行ったり、あえて省いた機能や、意図的に作られた表現もあります。こうした過程を経て Web サイトやアプリという成果物があるわけですから、それらを理解する前に評価するとなると、どうしても「好き」「嫌い」といったリアクションに近いものになりがちです。「 これはどうですか？ [http://www.yasuhisa.com/could/article/starting-design-critique/] 」と尋ねても、的外れなフィードバックが来る場合があるのはそのためです。 ムードボード [http://www.yasuhisa.com/could/article/webdesign-control/] を作ると
デザイン

Palmが教えてくれたプロトタイプの真髄

Palm Pilot は木片から始まった 90年代から00年代にかけて手の平で使える PDA（Personal Digital Assistant）と呼ばれる種類のコンピューターが市場で出回っていました。ノートパソコンよりスペックが劣るものの、予定を管理したり、マルチメディアコンテンツを楽しむことができる『小さなパソコン』。後にスマートフォンやタブレットに吸収されて姿を消してしまいましたが、PDA はスマートフォンの前衛とも呼べる存在でした。 そんな PDA の代表格が Palm [https://ja.wikipedia.org/wiki/Palm] 。ハンドヘルドコンピューティングという概念を打ち立てたジェフ・ホーキンス氏によって考案されました。90年代初頭といえば、パソコンは机の上に置いてある大きな機械でしたし、ノートパソコンも今より数倍分厚くて重たいものでした。そうしたなか、パソコンよりスペックが劣り、2 台以上パソコンを持つことがまれだった時代に PDA のようなデバイスのニーズは未知数でした。そもそもコンピューターを手軽に持ち運ぶことが便利だと感じる人はごくわずかだっ
ガイドライン

コンテンツ運用に役立つツールあれこれ

意外と忘れがちな運用向けツール Web サイトは作ってからが本番と言われて久しいですが、運用は簡単なことではありません。 CMS を実装することでコンテンツ入力の敷居は下がりますが、誰かがコンテンツを作らない限り何も始まりません。また、コンテンツ設計・制作・配信・分析の各ステージで必要になるツールが異なることがあります。例えば設計時であれば、ペルソナや運用ガイドラインが必要ですが、配信時であればエディトリアルカレンダーやソーシャルメディアガイドラインが求められます。 デザインもイラストも文章もひとりで作って出せる場合があります。しかし、こうした個に頼る運用では成長が難しくなります。コンテンツが作れたとしても、何か基準がなければ「我が社として適切なコンテンツを出している」と言い切れないですし、配信を躊躇することもあるでしょう。チームで役割分担した場合でも課題はあります。デザインチームがグラフィックを作るまで何もできないという状態はなるべく避けたい一方、不本意な見た目のまま公開されるのも困ります。 日々の運用に役立つツールを揃えるのは、短期的には効果が見難いですが、コンテンツ制