Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

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

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

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

製品の外にある体験を視覚化しよう

これは iPhone 7 [http://www.apple.com/jp/iphone-7/] のコマーシャルの一コマ。少年が夜中に写真を撮りに行ったときのシーンです。夜でも撮影できる、スマートフォンでも綺麗な写真が撮れるという機能的な部分を暗に語っていると同時に、少年の感情や動機も表現しています。夜中突然、撮影をしに行きたくなる動機を iPhone 7 が与えてくれてるかのように見えます。それはコマーシャルのところどころに出てくる少年の表情から見ても分かります。iPhone 7 は、彼にとって自己表現のデバイスであるわけです。 iPhone 7 のコマーシャルを 1200 メガピクセルのカメラ、手振れ補正の改善、最大10倍のデジタルズームといったスペックを中心に語ることができたでしょう。代わりに、iPhone 7 を使う人にフォーカスを当てた内容になっており、視聴者によっては感情移入した人もいるかもしれません。 こうした語りかけは、Web サイトやアプリという製品そのもののデザインをしていると忘れがちな視点だと思います。実は製品がどれだけ素晴らしいかというのは、一部のファ
仕事

デザイナーとしての失敗との付き合い方

失敗を恐れないわけがない 「失敗はたくさんしたほうが良い」「失敗を恐れるな」という言葉を耳にしたことがあります。確かに失敗を通して学ぶことは少なくありませんし、書籍やセミナーで学んだことより残る知識になることもあります。しかし、だからといって失敗したくないのが本音です。また、失敗は私たちの社会では 許されざること と捉えられている場合もあります。「失敗を恐れるな」の前に「失敗は許されない」という考えが先立ってしまって、なんとか失敗せずに済む方法、失敗から免れる手段を選ぼうとしてしまいます。 ただ、失敗しないための努力をしたところで、失敗してしまうことはあります。また、周りからそう思われていなくても、自分にとって失敗を感じることもあるでしょう。事業がうまくいかなかったとき、提出したデザイン案がやり直しになったとき、プレゼンテーションの反応が良くなかったとき、同僚と話したときに生じたぎこちない雰囲気など、大小様々な失敗があります。 失敗のやっかいなことは、いつまでも私たちの頭の中に残っていることです。残るからこそ学びに繋がることはありますが、恐怖や不安として半年、1 年残ることもあ
仕事

デザイナーに必要な「作る」と「考える」バランス

作るだけだと失うバランス スキルが多ければ就職のチャンスが増えるでしょうし、デザインとコードの間を取り持つためのコミュニケーションの手間も省けます。新しい技術を取り入れたデザインが考えられることで、表現の幅も広がるはずです。柔軟性、拡張性のあるデザインを作るときに コード脳が役立ちます [http://www.yasuhisa.com/could/article/code-and-thinking/] が、デザイナー自らがコードを書く必要性はないと考えています。 小さな組織、フリーランスであればコードを書かざるを得ない状況があるので、それは仕方ありません。『書けるべき』という強い表現が、どのような状況にも当てはまるように聞こえてしまうことに疑問を感じます。また、制作スキルばかりに力を入れても、デザイナーとしてのスキルの伸びに限界がある考えています。 デザインは人によって様々な定義が出てくるややこしい言葉ですが、私の中で「作る」ことと「考える」ことの 2 つに分けています。作ることは、何か目に見えるもの、触れることができるものを作り上げること。Web サイトが作れる、アプリの U
アイデア

協働のためのデザイン思考の再構築

2016年9月3日HTML5 Conference 2016 [http://events.html5j.org/conference/2016/9/] が開催されました。1,200 人を超える参加者。6トラック同時進行という巨大イベント。どちらかと言えばエンジニア向けのセッションが多いイベントですが、そういう場だからこそ「ぜひ話したい」と思えたところがあります。 今回「協働のためのデザイン思考の再構築 」という題名で話しました。以前からエンジニアとデザイナーとの間をどう繋げるかという課題について話したいという欲求がありました。ただ、こういうトピックはデザイナーばかりの場で話すのは意味ないですし、逆もしかりです。HTML5 Conference 2016 は、デザイントラックもあったことから、両方へリーチするには好都合。幸いエンジニアの方も私のセッションに参加していただいたみたいで、非常に嬉しかったです。 デザインシステムの課題 私は HTML, CSS, JavaScript は書けますし、PHP も多少書けます。コードがある程度分かると、全体構成からではなく部品からデザイン
apple

根拠や成果を超えたデザインに思いを馳せる

人間中心設計だけでは見えないこと 今では見なくなりましたが、ひと昔の MacBook Pro や Power Mac の本体側面にあるスリープインジケーターや電源ボタンは、スリープ時に点滅をしていました。これがただの点滅ではなく、まるで人が眠っているときの呼吸のような動きをしていました。Apple はこの点滅のデザインの実現のためにコストをかけ、特許も取っています [http://www.freepatentsonline.com/6658577.html]。 Apple 製品は小型化・薄型化が進んでいるので、こうした『演出』が少なくなっていますが、今振り返るとスゴいなと思うわけです。誰も気にしないディテールに拘るという点はもちろんですが、製品に実装してしまっていること自体がスゴいなと。 最近は「利用者のニーズを引き出して、実装しましょう」「そのデザインに効果があったか数値化しましょう」という文脈の中でデザインが語られることが多いわけです。たぶん、そうした中で「電源ボタンを人間の呼吸のように点滅させる」というアイデアが実装されるのか疑問です。利用者から「電源ボタンに心地の良い点
デザイン

なぜ多彩なデザインツールが出てきているのか

2010年代は『革命』 2000年代であれば、デザインツールは Adobe 以外の選択肢を考えることができませんでした。小さなツールは幾つか出ていましたが、仕事で使おうと思えるデザインツールはほぼ皆無。しかし、2010年に Sketch [https://www.sketchapp.com/] が登場して以来、状況が大きく変わり始めてきています。他に使おうと思えるものがなかった 2000 年代に対し、2010 年代は次から次と魅力的なツールが登場しています。今では「また出た」とウンザリしている方もいるかもしれませんが、2000 年代の静けさと比べると革命といって良いほどデザインツールが増えています。 こうした変化のなか、Adobe も Experience Designer [http://www.adobe.com/jp/products/experience-design.html] という Creative Cloud には今までなかった種類のアプリを 2016 年にリリースしました。今までデザインツールを独占していた Adobe でさえ、2010年代に起こっている変化に対
デザイン

ありがちなプロトタイプ失敗パターン

次へ進むための『何か』 プロトタイプは今日の設計プロセスにおいて必須の役割を果たしている … といった論調を見かけることがあります。特にアプリの場合、Web サイト制作以上に開発者とデザイナーの密接なコミュニケーションが必要になるので、単なる静止画データの受け渡しでは不十分です。そこで「プロトタイプを作りましょう」となるわけですが、他のツールと同様、手法を取り入れただけで制作における課題が解決されることはごくまれです。 プロトタイプは、紙で作るもの [http://www.yasuhisa.com/could/article/reintroduction-to-paper-prototype/]から、 Principle [http://principleformac.com/] のようなアプリケーションを使ってインタラクションを加えるものまであります。プロトタイプの完成度も制作スピードもツールによってまちまちなので、どのように扱えば良いのか迷う方も少なくありません。また、新しいツールを採用してプロトタイプ（のようなもの）を作ってみたけど、以前と状況が変わらないどころか、大変に
デザイン

ごめんなさい、すぐに結果は出せません

手法や道具にある幻想 手法や道具はやっかいな存在だなと思うことがあります。それを導入すれば組織の文化が変わって物事がうまくいくのではないかという期待が寄せられることがあるからです。ここ数年のデザインの世界では UX [http://www.yasuhisa.com/could/tag/ux/] に似たような期待をしてしまっているところがあります。この摑みどころがあるようでない UX を『導入する』ことで製品やサービスが改善されると考える方も少なくありません。 この記事の冒頭に掲載してあるイラストのような概念図を見たことがあると思います。インフォグラフィックと言い表しても良いような図でデザインプロセスが紹介されているのを見て、「なるほど、この通りにやれば良いのか」と感じる方もいるでしょう。そうした図を作って紹介しているデザイナーや組織は、実際そのとおりやっていると思います。しかしそれは単にプロセスを導入したというより、そうしたプロセスが動かせるような文化を作り出した結果だと考えています。 UX を導入するということ自体ありえないと 3 年前の講演で話したことがあります [ht
デザイン

デザインドキュメンテーションにある制作と共有の課題

ドキュメンテーションのための３つの課題 Web サイトデザインはもちろん、アプリデザインでも画面ではなく部品から始める [http://www.yasuhisa.com/could/article/wd101-start-with-components/] ほうが有効です。画面ごとで制作していくと、いつの間にか一貫性を失うことがありますし、様々なスクリーンサイズに対応するためのルールを後付けにすると、結局またやり直しになってしまうこともあります。 では、インターフェイスを一度見直してスタイルガイド（パターンライブラリ）を作り始めれば良いのかというと、それほど単純は話ではありません。私の中で以下の 3 つの課題があると考えています。 * 人とコトの課題 – これはワークショップを通して指摘しましたが [http://www.yasuhisa.com/could/article/ui-pattern-workshop/] 、ステークホルダーによって優先順位が違えば、指している要素の呼び名が違うことがあります。制作側視点だけで作ると思わぬ誤解が発生する可能性があります。
プロセス

なぜ自信をもってデザインを説明するべきなのか

コラボレーションは難しい コラボレーションは今日のデザインプロセスにおいて必須です。様々な分野の専門家たちが集まるからこそ、より良い製品へと進化していきます。専門家だからこそ出せるインプットによって、最適な解決策が見つかる … はずなのですが、実際そうはいかないことがあります。立場が違えば、物事の捉え方も違います。それぞれが置かれている状況によって、意見が分かれることがあります。意見が一致すればコラボレーションとしての相乗効果が生まれますが、そうでないときは、不平や妥協する人が出てくるでしょうし、最悪の場合は製品の利用体験を損なうものを実装してしまうこともあります。 コラボレーションは響きの良い言葉ですが、一筋縄にはいきません。意見が合わないとき、私たちはよく自己防衛の姿勢になりがちです。「これは違う」と言われると、反射的に「そんなことはない」と言うことがありますが、こうしたやりとりがコラボレーションの歯車を狂わしていきます。自分を守ること、相手の意見を変えることが先決になり、肝心の課題解決の話し合いではなくなっていきます。こうなると以下の 3 パターンで話に決着が付いていきます
デザイン

チーム内コミュニケーション設計に使える視覚化あれこれ

通じ合うための設計 デザイナーの仕事はコミュニケーションを設計することだと思います。Web サイトやアプリの画面設計をするのはもちろんですが、その画面が使う人たちにどのような影響を及ぼすのか、彼らがインプットをした場合、どのようなフィードバックを提供するのが適切なのか考える必要があります。ここで言うコミュニケーションの設計とは、製品と人、もしくは人と人との関係をどのように取り持つのかを考えることです。その関係を視覚的に伝えることができるのがデザイナーの強みと言えるでしょう。 ただ、デザイナーが考えなければいけないことは、製品とそれを扱う人たちの関係だけではありません。クライアント、開発者、マーケターといった、制作に携わる人たちの関係を設計することも含まれています。プロジェクトの全体像を見渡せるようにしたり、携わる人たちが共通認識をもてるようにするためのツールが必要になります。チームメンバー同士の関係性を円滑にするためのツール作りもコミュニケーションの設計の一部だと考えています。 抽象的な表現に留めない言語化は必要ですが、「かわいい」「モダン」といった緩い表現を許さない現場も良く
コンテンツ

次へ繋げるためのコンテンツファーストなプロセス

7月2日 Web Creators Kochi 主催で「コンテンツ設計から考えるUXデザイン基礎講座 [http://www.kochiweb.com/event/sessions/sessions_archives/entry-108.html] 」が開催されました。これは、金沢や高松など数カ所で開催したワークショップ [http://www.yasuhisa.com/could/article/ux-content-workshop/]のアップデート版。以前は カスタマージャーニーマップ [http://www.yasuhisa.com/could/article/customer-journey-map/] を活用して必要なコンテンツを見つけ出すというワークがありましたが、今回はコンテンツインベントリ [http://www.yasuhisa.com/could/article/creating-content-magic-sheet/] を使うなど、現状を監査しながらニーズを見つけ出すという内容に調整しました。 抽象的なデザイン手法の課題 私は「利用者」
コンテンツ

リニューアルやCMS導入前に解決したいコンテンツの課題

2016年6月25日、仙台市で MTDDC Meetup TOHOKU 2016 [http://mtddc2016.mt-tohoku.net/] が開催されました。本イベントは、Web 解析、パフォーマンス、セキュリティなど「Movable Type」という言葉を一度も聞かないセッションが半分以上占めていました。イベント運用チームに伺ってみたところ、Movable Type を開発している Six Apart [http://www.sixapart.jp/] も製品に止めず幅広いトピックを扱ってほしいと助言しているそうで、それが講演者のラインナップにも影響しているのかなと思いました。 ツールやプログラミング言語のイベントだと、同じ言葉、同じ趣向をもった人達が集まる傾向があります。コミュニティを育てるという意味で深く学ぶキッカケを作るのは大切なことですが、内向化してしまう恐れもあります。どちらが良いとは言えないですが、新しい人にも興味を持ってもらうためにトピックの幅を特定のツールや言語を超えるのは有効な手段でしょう。 私は「2020年以降を見据えたコンテンツ設計」という
AIがデザインの仕事を拡張する理由
未来

AIがデザインの仕事を拡張する理由

対立ではなく協働 最近の AI の話題は「人から仕事を奪う」という文脈で語られることが多いです。デザインの世界も例外ではなく、人の代わりに作ってくれるサービスが幾つか出てきていることから、そう考える人は少なくありません。Web サイトのレイアウトを AI の力を借りて自動的に作ってくれる Grid。最近だと Wix がサイト制作に AI を導入したと発表しました。また、Tailor のように、幾つかの質問に答えたら、適したデザインパターンを出してくれるサービスもあります。作ることだけがデザイナーの仕事ではないと言われて久しいですが、AI の発展により、ますますそれが現実的なものになりました。 クリエイティブの世界でも機械化・自動化は当たり前になりつつあります。10 年以上前だと、機械によって生成されたコードは汚くて使い物にならなかったわけですが、今だと経験の浅いコーダーに任せるより良いものが作られることがあります。複雑なレイアウトで構成されたレスポンシブ Web サイトもPageCloud を使えば、コードを触らずとも難なく作れるわけです。 ここで紹介したツールはほんの一部ですし
UI

AIの進化から学ぶ会話型UIの課題

UIを考える前に本質を探る 人と情報の関係が会話（チャット）のようになることに伴い、コンテンツだけでなく UI デザインも、会話の中でどのように表示すると適切なのか考える必要があります。会話型になる UI デザインについて2年前に記事にしました [http://www.yasuhisa.com/could/article/message-card-ui/]が、今は状況が大きく異なります。 自然言語が使えるチャットボット「ELIZA [https://en.wikipedia.org/wiki/ELIZA]」は 1960年代に開発されました。 Facebook Messenger はボットの開発やコンテンツの最適化ができるプラットフォーム [https://messengerplatform.fb.com/]を発表していますし、Slack Bots [https://slack.com/apps/category/At0MQP5BEF-bots] は開発者にとって馴染みの深いものになっています。 また、友人のように振る舞うことができる Xiaoice