とある UI デザイナーの雑記

しがないフリーランスのデザイナーです

SketchのScalable機能に感動する

SketchのResizingは使える

Sketchのシンボル拡大縮小で中のオブジェクトを維持してくれる
Resizing の「Pin to corner」
こりゃ〜いいですね。

いい例が InVision サイトにあったのでメモ。
痒いところに手が届いてる。
些細なことに感動した。

Creating infinitely scalable connection arrows in Sketch https://t.co/MJcRM8Nm99 by @jatodaro pic.twitter.com/SdjNqPXKuh

— InVision (@InVisionApp) 2017年6月5日

 

www.invisionapp.com

 

やはりUIデザインに特化してるSketch

はじめはSketchに選択ツールがなくて焦る

Adobeに慣れていると、Sketchいじりはじめは「あれ!?」選択ツールどこ行った!?
ポインタを矢印のヤツ(Adobeでいうところの選択ツール)にしたいのに、
ツールバーにも、表示設定のカスタマイズ内にもそれらしいものが見当たらないじゃないか!
どーなっているんだ!!
と焦る瞬間に遭遇したりした時もあったのですが、escボタンを押すと幸せになれるんですね。
慣れると快適なんですが…最初は戸惑いました。
Adobe操作中でも何かにつけてescボタンを押してしまう癖さえついてしまいました。


実際に触ってみてUIデザインに特化していると実感

Adobeどっぷりだった私が、業務でSketchでUIデザインするようになって数ヶ月経ちますが、やはりこれだけ浸透してきた理由を実感しています。
以前はアプリデザイン時に、Illustratorのシンボル機能などを用いて、各サイズを書き出す時にはバッチ処理などを用いて書き出していました。
数年前のその当時、現在Adobeにも機能として備わっているアプリアセット書き出しが無く、今思うと結構面倒な事をしていました。
現在は、Sketchの後を追うようにAdobeにもアプリパーツ用のアセット書き出しが出来るようになっていますがこれがなかった数年前はやや苦労しました。

さらにその当時の話をすると、画面デザインといえばPhotoshop一択だと固執する人達も割と周囲に多く居たので(いや、Photoshopは素晴らしいです今でもよく使います)仕事仲間の間ではベクター管理しやすいイラレなどで画面管理することを嫌がる仲間さえいたし
Googleのマテリアルデザインのオープンソーステンプレートなんかでも、もはやイラレベクター)で配布されていたような時代になっていたのに
ベクターで管理したい&画面とパーツを一括管理したい自分としてはその当時は非常にモヤモヤしていた時期でありました。
とはいえ、それらの課題は、Illustratorで事足りますので、とりあえず何ら問題はありませんでしが、そういう時期を経てSketchを実際に操作していってみると、シンボルパーツやコンポーネントの一括管理やモックアップ作成などの点、そして、エンジニアとのやりとりの点で言えば、非常にSketchは優れていると実感しています。


SketchでUIデザインする利点

Sketchのメリットは多くの人が語り尽くしているので
Sketch初心者な私が、普段触ったり人から教えてもらったりして「いい!」と特に感じた部分を4点ほど書き連ねます。

  • UIコンポーネントやパーツの管理がしやすい
  • エンジニアとのやりとりがしやすい
  • アセット一括書き出しが楽
  • 早い軽い安い

画面の拡大縮小にもコンポーネントのシンボルを伸ばしても、中のオブジェクトは等倍で維持されたり、色々素晴らしい。

各アセット用の一括書き出しが楽で、iOS / Android どちらにも対応しています。
ファイル名に @2x とか @3x とかそういうのもちゃんとつけて書き出してくれるので助かります。

たくさんのアートボードを並べても動作が速くてスムーズです。
UIデザインをやってると、全画面やパーツを、ひとつのファイルで管理できることが完成度の向上にもつながるということを実感します。
全体把握にも役立ちます。

さらには、レイアウト指定も簡単に作成できるので、エンジニアとのやりとりもスムーズ!はじめて知った時は感動しました!

そして、Adobeよりは安価なので導入のし易さがあります。
プレゼンテーションやモックアップ確認に役立つプラグインも豊富で、用途によって広がりが出ることでしょう。
しかし、個人的にまだまだ追いきれていません(泣)
プロトタイピングツールの戦国時代と言われて久しいですが、なんか凄いことになってるのは分かります。
Sketchは非常にスピーディーに進化を遂げて来たようですし、今後も期待大です。

とはいえ、Adobeを長年使ってきた私はIllustratorPhotoshopも大好きですのでどっちも使っていきつつSketchも使ってみる。
それに、写真素材の細かい色調整等は、やはりPhotoshopは欠かせないですし。
用途によっていいとこ取りをしながら業務に生かしていこうと思います。

 

デザインの仕事を楽しむ究極の方法

自分の事のように思う

プロジェクトに対して、デザイナーが「自分の事」のように、当事者意識を保ちつつし全ての仕事に取り組めれば理想的ですが、現実は必ずしもそういうものばかりではありません。

各々のデザイナーが持つ、ジャンルの得手不得手もありますし、コンシューマ向けビジネス向け、様々な分野がありますので、関わるモノによってはハードルが高く感じるものもあると思います。


デザインに落とし込む前に

とにかく、使う人の立場を理解する努力をする事も、デザイナー自身が意識するべき所だと思います。仕様の固まり具合にもよりますが、クライアントからしっかりリサーチし、どんな問題点があってどういったプロダクトにしていきたいのか、しっかり話し合うことで、デザイナー自身も、自分の事のように捉えられるキッカケに繋がり、俄然燃えてくることもあります。

 

楽しむ事が良質なアウトプットへの近道

綺麗事言ってるようですが、お客様の為でもあり、自分の為でもあるのです。

作る自分自身が楽しんだ方が、結果的にいいアウトプットに繋がると信じています。
だから、そうなれる方向へ自ら持って行く努力をする。

まあ、そんなに簡単な事ではないけれど。
どうせやるなら、楽しんだ方がいいじゃないですか。
そう思っています、色々大変ですけどね。