Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

仕事

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.

iphone

2017年よく使ったiOSアプリ

今年もお世話になりました 生活だけでなく、仕事にも欠かせなくなってきている iOS アプリ。次々新しいものに変えるタイプではありませんが、1 年を振り返ると少しずつ変わっているようです。他にも使っているアプリがありますが、特にオススメのものを7つ紹介します。 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割はソ