Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://twitter.com/yhassy https://www.facebook.com/yhassy/
インターネット

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.
iphone

2017年よく使ったiOSアプリ

今年もお世話になりました 生活だけでなく、仕事にも欠かせなくなってきている iOS アプリ。次々新しいものに変えるタイプではありませんが、1 年を振り返ると少しずつ変わっているようです。他にも使っているアプリがありますが、特にオススメのものを７つ紹介します。 Bear [https://itunes.apple.com/jp/app/bear-%E7%BE%8E%E9%BA%97%E3%81%AA%E3%83%8E%E3%83%BC%E3%83%88%E4%BD%9C%E6%88%90-%E3%83%86%E3%82%AD%E3%
ツール

現場で必要なデザインツールの見つけ方

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 * 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 * 要件を伝え、画面設計に落とし込むときの溝 * 画面設計から適切だと考えられるビジュアル言語を作るときの溝 * ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。 こうしたツールはデザ
UI

デザインの運用って何ですか？

公開しても終わらない コンテンツマーケティングの文脈でコンテンツの運用という言葉を耳にすると思います。いつ、誰に、何を、どのように配信するかを決めて、複数人で実践していくには運用が欠かせません。新しいコンテンツを作り続けなければいけませんし、現存コンテンツの維持・管理も必要になります。 コンテンツの運用で「公開したらあとは待つのみ」「納品したら終わり」という考えはありません。放置するとたちまち埋もれてしまい、存在していないのと同じになります。また、利用者の趣向・動向に合わせてチューニングをしていかなければ、ますます遠い存在になります。 公開したらデザインの仕事が終わるわけではないという意味でコンテンツの運用と似ていますが、デザインの運用は以下の点を解決することを目的とします。 * コンテンツの量に依存した『固い』デザインにしない * 基本的なことであれば短時間で実装ができる * 誰が触っても最低限の品質が担保できる * 一貫性のあるデザインが実装しやすくなる * ひとりのスターデザイナーに頼り切らない * 必要に応じて変更・改善し続けることができる CMS を導
デザイン

野放しは危険！デザイナーに潜む4つのモンスター

身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正しい」という態度は、周りを突き放すことになります。 退治する方法: 解決をする前に、課題の定義と共有に集中すると良いでしょう。人それぞれ課題と感じる部分が違うこともありますし、そもそも何を
インターネット

簡単ホームページサービスと次へ導く難しさ

ダンプカーを押し売りしていないか 社会学者エベレット・M・ロジャーズ（Everett M. Rogers）のイノーベーター理論に当てはめると、今ホームページを作りたいと考える人たちは「レイトマジョリティー」もしくは保守的な「ラガード」に入ると思います。Web サイトを作るだけで多くの方が訪れる、ネットワーク効果でどんどん広がるというのは 10 年以上前の話。あらゆる専門家が思いつくことをやり尽くしている現在。「さぁ ホームページでも作ってみるか」と立ち上がってはみたものの、見渡す限り戦後の焼け野原といっても大袈裟ではありません。 日本ではほぼ普及しきったと言える web。そういう状態だからこそ安心して参入できると考えるのがレイトマジョリティーですが、競争も激しく小手先の手段では変化は生まれません。Web プロフェッショナル達が「ただ、作っただけでは意味がない」と語るのはそのためで、飽和状態の市場で勝ち抜くには、お金と人を十分につかった『全力の投資』が必要になる場合があります。 成功・失敗事例をたくさん見ているだけでなく、経験も積んでいるからこそ、作って終わりにしないよう働き
仕事

デザイン業界にある『インスタ映え』な側面にふと思う

美しいものだけに囲まれている不安 Instagram [https://www.instagram.com/yhassy/] をはじめとした写真共有サービスでアップロードされる見栄えの良い写真を「インスタ映え」と呼ぶことがあります。ハッシュタグで繋がる様々な写真を見て楽しむことができる Instagram ですが、そこで映し出されている世界がすべてだと勘違いしている人も少なくないと思います。自分の生活と比べて「なぜ皆はこんなに楽しそうなんだろう」と悲観的になる人もいるかもしれません。 Instagram に限った話ではありませんが、ソーシャルメディアで共有されているものは、投稿者の生活がダイジェスト配信されているようなものです。言い換えるならば、「ベスト・オブ・◯◯さん」を見ているようなものでしょう。ソーシャルメディアを使う人たち全員が、自分の PRエージェントになって活動しているようなものかもしれません。 私は「インスタ映え」と似たような現象は、デザイナー、スタートアップをはじめとした組織が配信するコンテンツにも言えると思います。 * 「こうしたら上手くいきました」とい
UI

デザインシステムにおける色の命名ルール

崩れない色名にする 前回「デザインシステムに採用する色を決める5つのルール [http://www.yasuhisa.com/could/article/design-system-colors/] 」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん（@witch_doktor [https://twitter.com/witch_doktor]）が「ウェブサイトに使われる色に固有の名前をつけてみる [http://suikoudesign.com/suikolog/design/2270] 」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。 前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。 色名＝変数 色の名前を付けるのに困っている方は、Kromatic [http://kromatic.thoughtbot.com/] がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで
UI

デザインシステムに採用する色を決める5つのルール

始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム [http://www.yasuhisa.com/could/article/what-is-design-system/] は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理しているでしょう。しかし、現実は少し複雑です。 上図はある大
コンテンツ

Q&A 文章のトーン＆マナーや文章構造で気をつけていること

> 文体のトンマナづくりについて実践されていること、意識されていることがあれば教えてください。 @mjmjsachi [https://twitter.com/mjmjsachi] ライターを雇うのが理想的ですが、予算の都合上それが難しい場合があります。ライターを雇わなかったとしても、複数人でコンテンツを作ることもあるので、それぞれトーン＆マナーがバラバラになることがあります。私はライターと呼べるほどのスキルも経験もないですが、以下のようなことを気をつけています。 構造が意味を生み出す 大学時代ジャーナリズムを受講した際に「逆ピラミッド」というメタファーを学びました。どのような優先順位をつけて構造化するべきかを考える際に逆ピラミッドの考え方が役立ちます。逆ピラミッドは以下のような情報構造を持っています。 1. 最も価値のある情報 2. その情報に関する詳細 3. その他、知っておきたい情報 重要な情報を最優先に掲載することで、使いやすさも向上するとヤコブ・ニールセン博士も提唱 [https://u-site.jp/alertbox/mobile-content]
ツール

非デザイナーでもできるスライドデザインの工夫

ルールを守ればスライドは改善する 日本各地で登壇の機会をいただいていますが、内容そのものの感想ではなくスライドのデザインについて聞かれることがあります。デザイナーの端くれとしてスライドのデザインには気を使っているので、「どう作っているの？」と聞かれるのは光栄です。スライドのデザインは昔から Keynote [https://www.apple.com/lae/keynote/] で行なっています。貼り付けた動画を使って演出していることもありますが、ほとんど Keynote にある機能を使っています。 デザイナーでなかったとしても、以下のルールに従うことで、一貫性のあるビジュアルとストーリーを構築することができます。 カラーパレットを作る ひとつひとつ好きなように作るのはなく、全体を意識しながらひとつのスライドを作るようにします。スライドごとに色が違うと、統一感が失われるのでひとつのプレゼンとしてのインパクトも小さくなります。そこで、カラーパレットを用意して、その色だけでスライドをデザインするようにしてします。 あるプレゼンで用意したカラーパレット 白と黒を除いて、通常
コンテンツ

Q&A 運用の重要性を伝えたい

> 「運用」の重要性を説く場合、やはり企業内部の担当者を始めとする運用側の方たちに伝えたい／理解してもらいたいこともあると思います。 運用側に直接メッセージを届けられない場合、制作側の方やデザインシステム／スタイルガイドなどを通して、メッセージを伝える何か工夫をされているでしょうか？ @SawadaStdDesign [https://twitter.com/SawadaStdDesign] 最近は運用側に直接メッセージが伝えられない環境で働いていないこともあり、的確なアドバイスができないかもしれません。ただ、運用について誰かに伝えるとき以下のようなことを考えて企画・提案するようにしています。 * 運用を考えないと、どのような課題が生まれるか * 組織に合う運用はどのような体制で、何から始めることができるか * 運用をすることで、成果があったと言えるものは何か 簡単なことでも実践していると言える コンテンツ運用の重要性は何度も書いています [http://www.yasuhisa.com/could/tag/%E3%82%B3%E3%83%B3%E3%83%86%
コンテンツ

ソーシャルメディアで変わったwebサイトの役割

Webサイトが起点？ 利用者のニーズを考えて web サイトを設計し、ゴールまで導く。 Web サイトに限らずアプリケーションにも言える基本的な考え方です。昔から言われている当たり前の事ではあるものの、「Web サイトへ訪れる」という利用者の行動を大前提にしていることに疑問を感じています。 ブランド名など、何かキーワードが思い付けば検索をするでしょう。人によっては、ふと思い出して訪問することもあるかもしれません。しかし、そういったタイミングが 1 日でどれくらいあるでしょうか。Web サイトへわざわざ訪れるのが面倒と感じることもあるくらいです。 ターゲットにしている市場によっては検索が強かったり、わざわざブックマークしてサイトを訪れる人が多いかもしれません。しかし、そうした能動的な行動ではなく、ニュースフィードで偶然見かけた情報をキッカケに行動する人は少なくありません。ジャストシステムによる「 モバイル＆ソーシャルメディア月次定点調査 [http://markezine.jp/article/detail/26184] 」によると、10代のスマートフォン利用者のうち、7割はソ
仕事

AIとデザイナーの関係をポジティブに考えてみた

本当に脅威だけなのか 既に来ている機械化の波とデザイナーができること [http://www.yasuhisa.com/could/article/machine-and-creativity/] で、私たちが使っているデザインツールにも AI が使われていることを紹介しました。2017 年版の Photoshop には人工知能を活用した機能が実装される噂 [http://fortune.com/2017/06/10/fortune-500-adobe-ceo-photoshop-ai/] もあります。デザイナーが人工知能と一緒に働くことは、遠い未来ではなく、今起こっていることと言えるでしょう。 AI や機械学習は、仕事を奪う脅威と言われています。これから 20 年間でおよそ半分の仕事が AI によって入れ替わる [https://arstechnica.com/business/2016/12/federal-report-ai-could-threaten-up-to-47-percent-of-jobs-in-two-decades/] という話もありますし、クリエイティブ
ビジネス

デザイナーも知っておきたい数字との付き合い方

数字と向き合う ビジネスに貢献するデザイナーとして、ある程度のデータ分析能力は必要です。「デザインが重要」と言われるようになったのは良いことですが、それを証明しなければ装飾するだけの仕事に逆戻りしてしまいます。「データ分析」と書いてしまうと、深い数学の知識が必要そうに聞こえますが、そんなことはありません。 まず、数値が存在しないところにデザインを評価するところが幾つかあります。Web サイトやアプリを使う体験は主観的かつ感情的なものですから、ユーザーからの生の声が聞ける窓口を築いたり、ユーザーインタビューやヒューリスティック評価 [https://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html] をするといった定性分析が必要になります。 ただ、こうした定性分析にしても「これはどうですか？」といった質問から始めても、次に繋がる改善点が見つからないどころか、開発に混乱を招くことがあります。そこで、定量調査が大きな役割を果たします。ユーザーの動機や感情を数字から読み取ることはできませんが、ユーザ
UI

成熟期に入ったUIデザインとデザインシステム

先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖 [https://techcrunch.com/2015/12/08/facebook-kills-creative-labs-its-internal-incubator-plus-some-of-its-apps/] され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS [https://itunes.apple.com/jp/app/things-3/id904237743?mt=8&at=1l3vvRc] のように新鮮な UI とインタラクションが生まれる場があるものの、
UI

意外と難しいボタンのお話

ボタン？それともリンク？ 昨年からデザインシステム [http://www.yasuhisa.com/could/article/what-is-design-system/] をテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から「ボタンは難しい」という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、 いつ、どこで、どのように使うかを共有すること。考え始めると「そもそもボタンとは何か？」といった疑問が浮かび上がります。 フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも　iOS であれば UIButton を使えば良いと判断できるはずです。 文章のあとに「今すぐ始める」というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たして本当にボタンと呼べるでしょうか。ただ、見た目がボタン
アクセシビリティ

Webアクセシビリティがビジネスと付き合うための課題

5月18日、神戸でアクセシビリティの祭典 [http://accfes.com/]が開催されました。 Global Accessibility Awareness Day [http://globalaccessibilityawarenessday.org/] に合わせて開催されているイベントで、今回で 3 回目になります。Web サイト制作に留まらず、最新の支援技術の見学・体験ができたり、気軽に質問ができる場も用意されていました。今回は参加者として 1 日たっぷり勉強モード。当日の様子は Togetter のまとめ [https://togetter.com/li/1111823]を参照してください。 シフトレフトの課題 構築後の品質チェックの一環としてアクセシビリティを確認しているだけでは遅い場合が多々あります。設計段階から考慮されていないと、見た目だけでなく使い勝手に大きな影響を及ぼすからです。そこで、アクセシビリティも シフトレフトするべき [https://blog.motchie.com/accessibility/ja-shift-left-in-access
デザインの価値を伝えるための発想転換
仕事

デザインの価値を伝えるための発想転換

どれも重要という現場で 「ビジネスにデザインが不可欠」「差別化になるのがデザイン」といった表現をつかってデザインの重要性を示す場合があります。デザイナーからすれば嬉しい言葉でもあり、責任の重大さを感じます。しかし、ビジネスにおいて不可欠なものはデザイン以外にもたくさんあります。開発はもちろん、マーケティングや営業も不可欠な存在。そもそも、あってもなくても良い部分を探すほうが難しいわけです。 ここ数年でデザイナーが創設した企業が幾つか買収されていますし、資金調達に成功したスタートアップのなかにデザイナーが共同創設者のところも少なくありません。また、 Airbnb [https://www.airbnb.jp/] のようにデザイナーが組織の責任者になって、デザインの文化を広げているところもあります。こうした状況をみると「ビジネスにデザインが不可欠」と考えるのも当然かもしれません。 ただ、だからといってデザイナーが「不可欠」という表現に酔いしれても望んでいるデザインを実践することはできません。そもそも周りからはデザインは装飾をする仕事と思われている場合もありますし、先述したように他の役
プロセス

デザインの過程を見せるのはスキルアップの近道になる理由

結果だけでなく過程も 途中経過を見せることはデザインへの誤解が生じると考える人はいるかもしれません。また、途中経過は『企業秘密』だから見せるべきではないと考える人もいるでしょう。そもそも恥ずかしいから見せたくない人も少なくありません。自分も最初は恥ずかしかったですし、そもそも途中経過は見せる必要ないと思っていたほうでした。 しかし、今は途中経過を見せなければ良いデザインが生まれないと考えるようになりました。手描きのものから、インタラクションがあるものまで様々な形状を作っては見せています。仕事現場だけでなく、 Twitter [https://twitter.com/yhassy] や Instagram [https://www.instagram.com/yhassy/] のような場でも見せることもありますし、このブログにしてもデザインにおける途中経過を文章として表していることが多いです。 完成されたモノをどう作るかというノウハウも重要ですが、デザインという『よく分からないもの』が生まれるまでのプロセスを見せるほうに興味があります。 > Anyone who influe
ツール

Sketchが解決しようとしているデザインの課題

2017年4月22日、東京で「UIデザインのための「Sketch」1dayブートキャンプ [https://www.webprofessional.jp/sketch-seminar/]」が開催されました。セミナーとハンズオンがある全編 Sketch を扱ったイベント。ポッドキャストにも出演 [http://automagic.fm/post/143399744580/goma-apps] してくださったことがある UI デザイナーの山本麻美さん（@linen_beau [https://twitter.com/linen_beau/] ）と、多数の執筆や登壇をしているデザイナー こもりまさあき [http://protean.im/]さん（@cipher [https://twitter.com/cipher]）とご一緒させていただきました。当日の様子は Togetter のほうでまとまっている [https://togetter.com/