ツール

A collection of 17 posts

ツール

Q&A デザインツールの見方・選び方

似たようなツールが多くて一長一短で、「〇〇(What)をするならコレを使う」というよりも、「状況 (Where, Who, How) によって今はコレを使う」といった目線で見ています。 ただ、どんどん新しい (けれども似たような) ツールが出てきている中、それぞれのツールの特徴を見出して、差別化するまでにモヤモヤしています。 ヤスヒサさんは新しいツールや類似のツールを触る時、どういった目線で見ていますか? 匿名 注目は実装目線のデザインツール デザインツールの評価は非常に難しいトピックです。 Sketch、Adobe XD、Figma、InVision Studio などツールが出揃った感がありますが、今でも新しいツールが出て続けています。次世代デザインツールはどこへ向かうのかでも指摘しましたが、今年はデザインと実装(コード)の溝を埋めるためのツールがいくつか出てきたのが印象的です。デザインからコードへ転換するためのワークフローやツールを自社開発するところもありますが、そういったリソースがない組織にとって今後のデザインツールの動向は注目です。 デザインツールでつくられた成果物は厳密に言えば途中成果物であって、完成品とはほど遠いものです。つまり、他の専門家の力を借りなければユーザーが手に取れるプロダクトにはなりません。 Sketch と Figma が少し突出しているように感じるのは、UIの一貫性や画面遷移など実装視点で考慮しておきたい部分を設計できるところだと思います。

ツール

次世代デザインツールはどこへ向かうのか 後編

次世代デザインツールはどこへ向かうのか 前編 次世代デザインツールはどこへ向かうのか 中編 デザインをスケールさせていく デザインツールの現在と未来を考えたとき、デザインシステムの存在は無視できません。今のデザインツールはデザインシステムの作成・運用に最適化するための機能実装がされています。 一貫性のあるデザインの作りやすさ コンポーネント(部品)として捉えた UI の管理 複数人のデザイナーによるプロダクトデザインの運用 コードへの書き出しなどエンジニアとの連携 ひとりのデザイナーに頼るのではなく、組織でデザインを運用していくためにデザインシステムのニーズが高まってきています。欧米ではここ数年でデザイナーとエンジニアの比率が小さくなってきている状況をみても、デザインが個人プレーからチームプレーになってきているのが分かります。 大企業でデザイナーの雇用(又はデザイン会社の買収)が増えていたけど、結果として開発者とデザイナーの比率が大きく変わっているみたいですね。場所によっては10倍違う #design https://t.co/ygQgAewkFU pic.twitter.com/AreCGpSWjq — Yasuhisa🧞‍♂️ (@yhassy) 2017年6月1日 表現力だけでなく、

ツール

次世代デザインツールはどこへ向かうのか 中編

実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうとしているのかもしれません。それくらい、デザインと実装には深い溝があります。 大小様々ですが、今でも増え続けています。 随分洗練されてきたデザインツールですが、今でもデザイナーが作った『絵』を見ながら、ゼロからコードへ転換するといった作業は発生します。PSDなどのデザインデータで作られたデザインは完成品というより、実装のための青写真に近いものです。つまり、実装しないと分からないことがあまりにも多いのにも関わらず、その絵を完成品の一歩手前として承認してしまう現場もあります。 実装のことを考慮していないデザインは主に 3 つの特徴があります。 情報共有不足:実装のための情報が足りなかったり不透明なところがあるため、開発者が空気を読まざる得ない エッジケース:情報が空の場合、エラーが発生したときなど、ある特定の状態が考慮されていない

ツール

Q&A おすすめSketchプラグイン

使用されているSketchのPluginを教えてほしいです! しゅんさん どんなUIデザイナーかで決まります Sketch は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています(2018年1月現在)。 私の仕事でも欠かせないツールではあるものの、プラグインの組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグインを開発して、自分たちのワークフローを最適化しているところもあります。 よって、自分がどういうタイプのデザイナーかを振り返った上でプラグインを吟味することをオススメします。プラグイン次第で Sketch はどうにでも化ける一方、手当たり次第に入れても Sketch の強みが活かせない場合があります。ちなみに私が Sketch を使う目的・条件は以下の 4 点で、これらに最適化させることを目的でプラグインを導入しています。 デザインシステムの設計・

ツール

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

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。 こうしたツールはデザイナーがビジュアルデザインだけを任されている環境、他の専門家の力を借りなくても完成品を作り上げることができる環境であれば機能します。紙媒体のデザインは、印刷という専門知識が必要になるもののデザインツールのなかで完結しますし、よほど特殊なことをしない限り、エンジニアの力を借りなければ印刷ができないということもありません。 Web サイトやアプリデザインは、デザインツールの中で完結することはありませんし、エンジニアをはじめ様々な専門家の力が必要になります。いくらデザインツールで作り込んだとしても、コードに落とし込むまで『

ツール

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

ルールを守ればスライドは改善する 日本各地で登壇の機会をいただいていますが、内容そのものの感想ではなくスライドのデザインについて聞かれることがあります。デザイナーの端くれとしてスライドのデザインには気を使っているので、「どう作っているの?」と聞かれるのは光栄です。スライドのデザインは昔から Keynote で行なっています。貼り付けた動画を使って演出していることもありますが、ほとんど Keynote にある機能を使っています。 デザイナーでなかったとしても、以下のルールに従うことで、一貫性のあるビジュアルとストーリーを構築することができます。 カラーパレットを作る ひとつひとつ好きなように作るのはなく、全体を意識しながらひとつのスライドを作るようにします。スライドごとに色が違うと、統一感が失われるのでひとつのプレゼンとしてのインパクトも小さくなります。そこで、カラーパレットを用意して、その色だけでスライドをデザインするようにしてします。 あるプレゼンで用意したカラーパレット 白と黒を除いて、通常 6 色ほど用意しています。スライドの背景色を明るいもの、暗いもの両方用意する場合は、十分なコントラスト比を保てるように 2 色ほど追加する場合もあります。もちろん、色を絞ったからと言って統一感が出るとは限りません。例えば、赤色を使うときは重要な情報を伝えるとき、黄色は図にワンポイントを加えるときと、色の使い方もある程度決めておくと良いでしょう。 色は適当に選ぶのではなく、色を並べてバランスの良いものを選ぶのが最適です。パレットで用意したすべての色を 1

ツール

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

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

ツール

XD vs Sketch みたいな比較は意味がない理由

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

ツール

今必要とされている時間を作るためのデザイン

集中できる時間が少ない現在 今の仕事で最も難しいのは、集中できる時間を作ること。作るためのツールは充実していますし、一緒に作ることができる優秀な人も周りにいます。いろいろなものに恵まれていたとしても時間を作ることは簡単なことではありません。1 日 24 時間が、突然 32 時間にはならないわけです。 時間は有限であるのはもちろんですが、その貴重な時間を有効に使うのは非常に難しいです。特に集中するのが難しい時代に生きています。誰かが声をかけるくらいなら良いですが、メール、チャット、ソーシャルメディアなど絶え間なく注意を引こうする通知が鳴り続けています。たとえ通知をオフにしたとしても「あれはどうなっているだろう?」と、ついついスマートフォンを開いて画面を再読み込みしたり、スクロールを続けている方は少なくないはずです。 The Telegraph が 2015 年に公開した記事によると、私たちは年間 759時間も時間を無駄にしているそうです。およそ1ヶ月分の時間を、通知などのアラートによって失っている計算になります。ソーシャルメディアを見た後、すぐに仕事に集中することができればそれで良いのですが、人間の脳はそう簡単にスイッチは切り替わらないようです。 カリフォルニア大学アーバイン校が発表した「The Cost of Interrupted Work:

ツール

デザイナーが使っておきたいiPadアプリ5選

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

ツール

デザインツールを振り返って気付いた今後のデザイナーの役割

広がるデザインツールの役割 2016年はデザインツールのあり方が大きく変わった年でした。スマートフォンが主流になってから、平面な画面をひとつひとつ設計するのではなく、利用者の遷移や UI フィードバックを塾考するようになりました。多彩なデザインツールが出てきているのは、デザイナーの作り方だけでなく、役割も少し変わってきているからでしょう。ひとりの職人が閉じ籠って完成品に近いものを作るのではなく、デザインプロセスを共有しながら少しずつ作るというやり方に変わりつつあります。デザインのブラックボックス化を避けるための手段は今も増え続けています。 従来のデザインツールは、ひとりのデザイナーがデザインに集中するための道具であって、途中経過を共有したり、協力して作ることを得意としていませんでした。現在のデザインツールは複数のデザイナーがひとつのプロジェクトに取り組めるような仕組みが用意されていたり、デザイナー以外がデザインプロセスに参加しやすい機能があらかじめ実装されています。 Sketch にしても、ひとりでジックリ作り込むには物足りないところがあるものの、協働しながら作る場合は強力なツールになります。数多くあるプラグインと、連携できるサービスを使えば、開発者とのやりとりがスムーズになったり、ツールを持っていない人とデザインの方向性を吟味することができます。 デザインツールは、デザイナーが考えるイメージを形にできるものであるべきですが、それだけがデザインツールを選ぶ基準ではなくなってきています。特に Web サイトやアプリに言えることですが、デザイナーがデザインを『納品』して終わりということはまずありません。実装しなければ分からないことも多いので、デザインはリリース前まで続くことがあります。また、デザインの運用も考えなければならないことから、『作って終わり』という仕事も少なくなっていきます。 デザインツールに求められている「作る」