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

2017年4月22日、東京で�「UIデザインのための「Sketch」1dayブートキャンプ」が開催されました。セミナーとハンズオンがある全編 Sketch を扱ったイベント。ポッドキャストにも出演してくださったことがある UI デザイナーの山本麻美さん（@linen_beau）と、多数の執筆や登壇をしているデザイナー こもりまさあきさん（@cipher）とご一緒させていただきました。当日の様子は Togetter のほうでまとまっているので、興味がある方はぜひご覧ください。 私は「なぜSketchがUIデザインで力を発揮できるのか」と題して、Sketch のようなツールが出てきている背景と、今後のデザインツールとの付き合い方について話しました。 Sketch に限った話ではありませんが、新しいから使う、流行っているから使うでは、ツールが提供したい価値を十分に引き出せなくなります。Figma

クリエイティブは機械化できる？デザイナーは作ることがすべてではないですし、代わりに作ってくれるツールも年々増えてきます。感性が必要なデザインですから機械化が難しいように見えますが、そんなことはありません。デザインには科学的に説明できるところが少なくありませんし、機械化が進めばよりバラエティに富んだデザインを瞬時に作り上げることができるようになるはずです。 デザインの自動化・機械化という文脈で象徴的な出来事といえば、Adobe Sensei の発表です。Sensei は、人工知能（AI）と機械学習を活用して、写真補正、3Dモデリング、アニメーションなどデザイン作業の効率を劇的に変える技術です。 デザイナーにとってプラスになる技術であることは間違いないですが、デザインツールの中に留まることではないと思います。エンタープライズ向けソリューション Experience Cloud との連携で、CM

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

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

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

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

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

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

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

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

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

明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag

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

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

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

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

大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも

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

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