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

しがないフリーのUIデザイナーの独り言

デザイナー向けバージョン管理APP「Abstract」の使用初感レポート

f:id:hiromisatoh:20170712050427p:plain

 

デザインのバージョン管理ツール(デザインファイルのGitHubのようなもの)の Abstract を導入してみましたので、最初の使用感をレポートしようと思います。

バージョン管理は複数人で運用していく事を前提としているものが多いと思いますが、一人で使うぶんにも十分メリットがあります。

アップデートログが残るので、どういった改善を施したかという経過が自分自身でも見ていくことが出来ますし、GitHubみたいなものなので元にも戻したり出来ます。

Sketchの素晴らしさに魅了され始めている私としては、前のめり気味でやってみました!

 

昨今の最先端なUIデザインツール系は、まあ大概オール英語なので(もっと英語覚えなきゃ…と思う今日この頃)

委託先でお世話になっている英語力抜群のお方(S様いつもありがとうございます!)の手助けと、STANDARDさんが書いていた下記記事を参考にトライ!

http://www.standardinc.jp/reflection/article/abstractapp/

 

ちょっとした注意ポイント

Abstractはプロジェクト毎に限定したメンバーを招集できる(あるいは招集しない)プライベートモードと、普通にデフォルトでプロジェクトを作成した段階で全員が自動追加されているプロジェクトの作り方とがあります。Abstractの現時点のUIでは「Make project private」にチェックを入れた場合の、プロジェクト毎へのメンバーの招待がやや分かりづらかったので、その部分に重点をおいて画像で解説します。

プライベートモードでは、Sketchファイルを同期したいメンバーをここで追加しておかないと、メンバーとプロジェクト同期できませんので気を付けましょう。

「Make project private」にチェックを入れなければ、全員メンバーが自動的に追加されプロジェクトも同期される状態になります。

Slackと連携している場合、ブランチ切ったりマージしたりする毎に自動botも飛びます。

 

①プロジェクト一覧画面

ここの右上にある「NEW PROJECT」ボタンを押下してプロジェクトを作成します。

 

f:id:hiromisatoh:20170712051104p:plain

 

②プロジェクト作成画面

ここでプロジェクトを作成します。

「private」にチェックを入れると他メンバーからは見られないプロジェクトが作成されます。

そのプラーベートなプロジェクトに人を招待したい場合、下記の動作に進みます。

 

f:id:hiromisatoh:20170712051132p:plain

 

③メンバーの追加の仕方

プロジェクトの右上にあるオプションボタンのようなものを押下して「Manage People」を選択します。

 

f:id:hiromisatoh:20170712051209p:plain

 

④メンバーを選択

ここでメンバーをADDしてプロジェクト同期したい相手を選択します。

 

f:id:hiromisatoh:20170712051236p:plain

f:id:hiromisatoh:20170712051247p:plain

f:id:hiromisatoh:20170712051306p:plain

f:id:hiromisatoh:20170712055655p:plain

 

あとは、その作成したプロジェクトにSketchファイルをADDしてマスターからブランチを切って、またマスターにマージして…と運用していく感じです。

コンフリクトした場合もちゃんと知らせてくれて、該当箇所を抽出して表示してくれるので大変親切です。

(どっちにマージするのか?と該当箇所を抽出し画像付きで訊いてきてくれます)

 

ただし、Abstractを使って運用していく場合、Sketchファイル内が整理されていないと大変なことになるので、そこは注意ですね。

なので、最初のデザインの案出しなどには全く向いていませんが、ある程度プロジェクトが進行し、デザインのトーン&マナーやコンポーネントデザインが整いつつあり、運用フェーズに乗りかかったタイミングで使用していくのがベターなのかなと感じています。

 

Abstractの利点まとめ

  • デザインのバージョンのログが残る(現時点ではSketchファイルのみ対応、将来的にAdobeにも対応?)
  • 中長期的にデザイン改善を繰り返していくプロジェクトに向いている
  • デザイナーもエンジニア視点でプロジェクト管理できる
  • Slackと連携している(自動botでお知らせしてくれる)※プライベートモードでは発動されません

以上となります。

 

最初にTips的な記事は書かないと言っておいてノウハウ記事を書いている矛盾…。

少しでも有益な記事を…!と思い覚えているうちにメモを残しておきたいと記事にしました。

 

それでは。

 

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は欠かせないですし。
用途によっていいとこ取りをしながら業務に生かしていこうと思います。

 

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

自分の事のように思う

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

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


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

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

 

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

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

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

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

 

デザイナーとして気を付けている事

まずスタートのご挨拶

フリーランスとして独立してそろそろ半年になります。
UI/UXデザイナーとしてフリーランスで仕事をしています。
アプリやウェブのデザイナーです。
運良く新規事業などに関わらせて頂いており、
必死で仕事をこなす毎日です。
(もう歳なのでなかなか大変です)
世の中のデザイナーブログはTips的な内容が多くを占めて
いるようですが、私のブログはもっと、気持ちの部分や
マインドセット的な話の展開ができればと思い始めました。

これまで、デザイン事務所、家電メーカー、IT通信企業など
多くの会社を渡り歩き、今年2月からフリーになりました。
プレイヤーとしてこれ以上いけるのか自分でも謎ですが
とりあえずチャレンジしていくのみです。
前職では会社員としてディレクターも兼務でやってましたが
自分の手で作る事が好きなので、そっちに特化したくなり、
結局辞めました。

この過程は、別の機会で触れるかもしれませんが
今日は違う話をしようと思います。

私は元々自分から何か発信することが苦手だったのですが
独立を機に、SNSを始めたり、発信していく事や
他者と繋がっていく事にもシフトしていくべきだと感じ、
こうして自分の仕事についてのチラシの裏的なものでも
記していこうと思い、始めてみようと思い立ちました。

今回は、デザイナーとして仕事の依頼を受ける上で
自分が最も気を付けている事、それなりにキャリアを
重ねてきたからこそ見えてきた依頼主との信頼関係の結び方
などに重点を置いて話してみようと思います。

 

依頼主の表情に注視する重要性

人は、初めて見るものを前にした瞬間
その表情や目は嘘をつきません。
私はその瞬間を見るのが大好きなのです。
唯一、本当の他人の表情に遭遇できるようで
ワクワクするのです。
それがポジティブなものであっても
その逆のネガティブなものであっても。

何が言いたいかというと
デザインを最初に見せたその瞬間その表情に
全てが現れる、そこでそれをすぐさまキャッチしにいき
汲んでより深めていく(場合によっては軌道修正していく)
という作業が我々デザイナーに課せられている使命だと
思っています。

依頼を受けて打ち合わせをしてこちらがデザインカンプを
作ってプレゼンしますが、その時に相手のリアクションを
見て相手の意図や思いを汲み取る事が真に重要なのです。

UXデザインや前後のストーリーを考慮するという意味でも
動きに対してなどの相手の反応に注視するという点は
蔑ろに出来ない上に大きな導きが見える瞬間でもあります。

当たり前ですが、この部分を見誤ると
その後のアウトプットに響きますから
相手との信頼関係を築いていくことが遠のいてしまいます。

 

相手ファーストの精神で自分のデザインも磨かれる

依頼主に余程の悪意がある場合は別かもしれませんが
(私はそういうクライアントにあたった事はないですが)
これまでの体験として
見せてはじめてそこでようやく相手のテンションも上がり
具体的な落とし所を客先の人がイメージしやすくなったり
更にいいアイデアが生まれたりといった場面に
何度も遭遇しました。
この瞬間に、確実に次のステップへ進んでいるのです。
前進です、最高です、相手も、自分も。

もちろん、その逆もあって、客先や仲間の助言や気付きで
こちらがようやく閃いて何とかいい方向に持って行けた?
…のか?何かすんません!でも良かった!
みたいな経験も多くしています。
周囲の人に助けられてもいるのです。

結局は人と人との信頼関係に尽きる。。。

つまり、デザインに限らずですし物凄く当たり前的な
散々語り尽くされてる内容ですが
プロジェクトを円滑に進め更に高品質なものを目指すには
何だかんだ言って結局のところ、コミュニケーションが
非常に重要になってくるなあと感じています。

昨今、業務上でもチャットツールやトークアプリを用いて
仕事進めるのが当たり前になっていますが、場面や内容に
よって、やはり相手の目を見て話す局面の重要性は
絶対にあるなと思っています。
そして結局それが一番てっとり早かったりもします。

まあ、それ以前に、十分な品質のアウトプットを出せる
ということが大前提ですが、その上でという話です。

相手の希望を完全に咀嚼し飲み込み
希望以上のアウトプットを提供する

これは簡単なことではないのですが
それを成し遂げるためには結局のところ
相手の気持ちを汲んだ上で自分のことのように大事に思い
その最大限をデザインに落とし込む。
まあ、当たり前の話といえばそうなんですが。
そんな事を改めて実感している今日この頃なのであります。

とはいえ、私は一人でいる事が好きですし
基本的に社交的な人間ではないので
無理してないか?自分…と思う時もありますが
仕事ですからね、メリハリつければ乗り切れるものです。

デザイナーならではの話がしたかったのに
結局、仕事の総合的な別の話になってしまいました。

まあ、いっか。

こんな感じで続けていければと思っておりますので
宜しくお願い致します。