ツール 現場で必要なデザインツールの見つけ方 ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 * 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 * 要件を伝え、画面設計に落とし込むときの溝 * 画面設計から適切だと考えられるビジュアル言語を作るときの溝 * ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。 こうしたツールはデザ
デザイン 野放しは危険！デザイナーに潜む4つのモンスター 身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正しい」という態度は、周りを突き放すことになります。 退治する方法: 解決をする前に、課題の定義と共有に集中すると良いでしょう。人それぞれ課題と感じる部分が違うこともありますし、そもそも何を
ツール 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/
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 会話から考える情報設計のコツ 会話はデザインの基盤 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.
ツール デザイナーが使っておきたい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/]は今も増え続けています。 従来のデザインツールは、ひとりのデザイナーがデザインに集中するための道具であって、途中経過を共有したり、協力して作ることを得意としていませんでした。現在のデザインツールは複数のデザイナーが
デザイン 有意義な批評・評価をするためのデザイン原則 ニュアンスを明文化するという行為 大企業のように 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]）。 アートは自分の好みで「素晴らしい」「美しい」というリクアションを語ることができますが、それだけではありません。芸術家が歩んできた人生や歴史背景を知ることで、作品への理解が増すだけでなく、作品の見方が大きく変わる場合があります。 ジャクソン・ポロックは、幼少の頃厳しい生活をしていたのが彼の生き方にも影響していますし、メキシコ壁画運動が大型でダイナミックな彼の作風の土台を作り出したと言われています
デザイン 的確なデザインアドバイスをするための確認事項 段階的に考えるデザインのアドバイス 時々「デザインのアドバイスもらえますか？」という依頼を受けることがあるわけですが、応えるのに困ることがあります。尋ねている側は「もっと良い見た目、さらに使いやすくするにはどうしたら良いか？」というニュアンスを含めて質問しているわけですが、初めて見る成果物に対して評価するのは極めて困難です。 成果物は突然生まれるものではありません。価値共有を行ったり、あえて省いた機能や、意図的に作られた表現もあります。こうした過程を経て 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 のようなデバイスのニーズは未知数でした。そもそもコンピューターを手軽に持ち運ぶことが便利だと感じる人はごくわずかだっ
デザイン なぜ多彩なデザインツールが出てきているのか 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/] 、ステークホルダーによって優先順位が違えば、指している要素の呼び名が違うことがあります。制作側視点だけで作ると思わぬ誤解が発生する可能性があります。
デザイン チーム内コミュニケーション設計に使える視覚化あれこれ 通じ合うための設計 デザイナーの仕事はコミュニケーションを設計することだと思います。Web サイトやアプリの画面設計をするのはもちろんですが、その画面が使う人たちにどのような影響を及ぼすのか、彼らがインプットをした場合、どのようなフィードバックを提供するのが適切なのか考える必要があります。ここで言うコミュニケーションの設計とは、製品と人、もしくは人と人との関係をどのように取り持つのかを考えることです。その関係を視覚的に伝えることができるのがデザイナーの強みと言えるでしょう。 ただ、デザイナーが考えなければいけないことは、製品とそれを扱う人たちの関係だけではありません。クライアント、開発者、マーケターといった、制作に携わる人たちの関係を設計することも含まれています。プロジェクトの全体像を見渡せるようにしたり、携わる人たちが共通認識をもてるようにするためのツールが必要になります。チームメンバー同士の関係性を円滑にするためのツール作りもコミュニケーションの設計の一部だと考えています。 抽象的な表現に留めない言語化は必要ですが、「かわいい」「モダン」といった緩い表現を許さない現場も良く
javascript SVGでプロトタイプを作って学んだこと 会話のような勉強会 5月20日 SVG 勉強会 という小さな集まりに参加しました。株式会社まぼろし [https://maboroshi.biz/]のデザイナーで、 ポッドキャストにも出演 [http://automagic.fm/post/131049219860/maboroshi-matsuda] していただいたこともある松田直樹さん（@readymadegogo [https://twitter.com/readymadegogo] ）主催のイベント。勉強会という名だけあって、参加者全員が SVG のネタを持ち寄って、実装から可能性の模索まで様々な話題が挙がりました。 講師/生徒のような関係が生まれやすいセミナーのような場だと、どうしてもコミュニケーションが一方通行になりがちですし、参加側も受け身姿勢になってしまいます。 SVG に関する質問でもいいから、とにかく発表するという条件を設けることで、発表内容を聞きに行くという考えが薄れ、個々の積極性が増したと思います。発表者が話している最中もお構いなしに参加者が質問をするなど、会話をしているような発表時間はとても良いと思いま
デザイン ビジュアルでもできるデザイン批評 好き !＝ 良い・正しい デザイン批評は、数年前から扱っているトピック [http://www.yasuhisa.com/could/article/design-talk-feedback/]し、講演経験 [http://www.yasuhisa.com/could/article/how-we-talk-about-design/] も何度かしています。デザイン学校へ行った方であれば批評の経験はしていると思いますが、なかなか機会がないのが現実。ビジネスとの関わりが密接になればなるほど、デザインについてデザイナー以外と話す機会が増えていきます。様々なデザインの手法を学んだとしても、デザインについて会話するスキルがなければ意図・目的を伝えることができません。 調査に基づいて論理的に対話ができれば理想的ですが、そう簡単にいかないのが批評の難しいところ。私たちは論理的に考えようとしますが、感情的に物事を捉える生き物です。どうしても「好き」「つまらない」といったリアクションを即座にしてしまいがちですが、「好き ＝ 良い・正しい」とは言い切れません。つまり、自分の好みではないものでも、プ
デザイン 認知の理解で変わるプレゼンスライドのデザイン 見やすいだけでは足りないスライドデザイン プレゼンテーションのスライドは読みやすく、できれば見た目も良くしたいと考える方は少なくないと思います。私もデザイナーの端くれですから、見た目の良いスライドを作ろうとしますが、読みやすい・見やすいのと、伝わることが完全にイコールとは言えません。読みやすい・見やすいプレゼンは、そのときは良かったと思えるものでも、思い出してもらえない場合があります。 SlideShare [http://www.slideshare.net/] や Speaker Deck [https://speakerdeck.com/] でスライドの共有がしやすくなったことで、スライドを見たら分かるようにすること、共有しやすいコンテンツに仕上げることを意識する方が増えました。しかし、スライドを読めば分かるようにしてしまうと登壇者がわざわざ話す必要性がなくなりますし、来場した方にその場でしか味わえない価値が提供できない場合があります。時間とお金をつかって来場している方に何かを残せないままでは、SlideShare でたくさん共有されたとしても、プレゼンテーションとしては
コンテンツ コンテンツに関わる5つ課題と発見の共有 人とコンテンツとの関係 コンテンツは既にあるから、デザインができる。 あとで流し込めば良いから、コンテンツ制作は先送りができる。 こうした考えが、自己主張ファーストなコンテンツ [http://www.yasuhisa.com/could/article/me-first-content/] になっていたり、後付けのマルチデバイス対応に繋がります。現存のコンテンツが十分利用可能だったとしても、一度立ち止まってコンテンツに関わる様々な課題の発見に時間を削ぐようにします。以下の 5 つの課題の洗い出しは、大幅なリニューアルから、ランディングページまで様々な規模のプロジェクトで必要になります。 * 訪問者（読者）が求めていること * 配信側が求めていること * 配信側が実際必要になるアクション * いつ、何を配信するか * どのチャンネルでコミュニケーションをとるか 例えば CMS の選択や、そこでのカスタマイズも、どのようなコンテンツが保管・管理がされて、どのように配信されるかをあらかじめ知っておくと大きく変わります。利用者のことを見るだけでなく、配信側（企業・団体）のニ
