よりぶろ

アプリのUIとかについて書いてく予定

Sketch v44 betaで新しくなったResizingを試してみる

f:id:ryo_pan:20170508131224p:plain

思ったよりも早くSketchのv44 betaが公開されました。

Sketch - Beta

主なアップデート内容はResizingの刷新です。設定方法などに若干の癖があるので、自分の勉強も兼ねてメモとして書き残しておきます。
なお、β版で作成・編集したファイルは現バージョンでは開けなくなりますのでご注意ください。

 

Resizingとは

まず始めに、改めてResizingについておさらい。
Resizingは、v39で追加された「グループもしくはシンボル内のレイヤーに対し、親がリサイズされた時の挙動を設定できる」機能です。
もう少し具体的に書くと、例えばグループレイヤー内のあるオブジェクトにResizingの設定を付与することで

  • 親のリサイズされた割合と同じリサイズが掛かるStretch
  • サイズはそのまま、近い辺(上下左右)に位置固定されるPin to corner
  • 親とのマージンを保ったままリサイズされるResize object
  • サイズはそのまま、位置の比率が変動するFloat in place

といった効果を得られます。
これまでは、以上の4つの種類を切り替えることでResizingを使い分けていました。

f:id:ryo_pan:20170508133350p:plain

↑ v43のResizing

 

v44のResizingの変更点

ではv44ではどのように変わったのでしょうか。下記が新しいResizingのUIです。

f:id:ryo_pan:20170508150820p:plain

ひと目見ただけで一新されたことがわかりますね。上記設定からできるのは、

  • 子(選択しているレイヤー)の上下左右どの辺を固定するかどうか(以下、ピンを置く、と呼称)
  • 子のWidth / Heightを保持するかどうか

の2つです。これまでリストで選んでいたものに比べると、少し複雑化したようにも思えますが、使ってみるとこちらのほうが(やや)直感的であることがわかります。
※……やや、と書いたのはまだ自分自身慣れてないため

それでは新しいResizingの挙動を見ていきましょう。まずは何も設定していない状態の動きです。なお、サンプルのルールとして「RectangleとOvalをグループ化し、OvalにResizingの設定をする」ものとしています。

20170508152935

グループ全体が伸び縮みしている、一般的な挙動ですね。次に「右と上にピンを置いた状態」にしてみました。

20170508200310

わかりやすいように上下左右のスペースを可視化しています。グループレイヤーをリサイズしても、Ovalの右と上のスペースに変化がないのが分かると思います。Width・Heightも固定していないので、option + ドラッグの時だけ、比率を保っていますね。
さて、ここまで書いて気付いた方もいらっしゃると思いますが、親に対してのマージンが保っている状態というのは、旧バージョンの「Resize object」と同じなのですね。
そう、新しいResizingは、設定するパターンによって従来4種類だったResizingを使い分ける仕様になっているのです。
というわけで、4種類のパターンを再現してみました。

20170508153629

左から

  • Stretch:指定なし
  • Float in place:子レイヤーのサイズは固定だがピン位置は変動……しかし中心に置いてしまったので動いていない😇
  • Resize object:子レイヤーのピン位置(上図では左右)は固定だがサイズは変動
  • Pin to corner:子レイヤーのサイズ、ピン位置ともに固定

です。
「Fix Width」と「Fix Height」は、それぞれチェックを入れると、Heightは左右どちらかのみ、Heightは上下どちらかのみのピンだけ置けるようになります。逆に言うと、左右にピンを置いている状態ではFix Widthにチェックは入れられません。

最初は戸惑うかもしれませんが
「グループレイヤーをリサイズした時に子レイヤーの位置は上下左右どこが固定 or 変動するか」
「その時、子レイヤーのWidthもしくはHeightは固定 or 変動か」
で考えると、スムーズに設定できるようになると思います。

 

新しくなったアートボードの設定と組み合わせる

さて、実は新しくなったのはResizingだけではありません。アートボードにも新しい変更が加えられています。

  • アートボードの縦横比切り替え
  • アートボードのサイズ切り替え
  • 内包レイヤーをアートボードのリサイズに対応させるかどうかのチェックボックス

の3つです(ちなみに、アートボード作成時のUIもちょこっと変わりました)。 

20170508210655

20170508210921

先ほどのグループレイヤーを、今度はOvalのResizingを解除し、グループに対し同じResizingを設定してみました。

20170508201339

上図のように、アートボードのリサイズに応じて変化しているのがわかります。

アートボードと連動するResizingによって何が起こるかと言うと、グループレイヤー内のResizing・アートボードに対するResizingを掛け合わせることで「アートボードのリサイズに耐え、且つ位置固定のできるコンポーネント」が作れるようになりました。ざっくり↓のイメージ。

20170508211040

この動き、どこかで見たことありませんか?そう、Animaが開発しているAuto Layoutプラグインの挙動とそっくりなのです。

animaapp.github.io

って、最近Launchpadという機能が追加されて、どうやらプラグイン名もそっちに変わったぽいですが。まあとにかく、全ての機能をカバーできているわけではありませんが、これまでプラグインに頼っていたことがSketch単体でできるようになったことは喜ばしいことだと言えます。

 

最後に

というわけで、新しいResizingについての覚え書きでした。ちなみに、旧Resizingを設定している場合、44 betaで開いてもパラメータは引き継がれていました。安心ですね。

さらに余談。先日校了したSketch本ですが、もちろんこのResizingについては未対応です!涙 このあたりソフト系書籍のつらいところですね。。
どうにかしてケアしたのですが、現状あまり良い手段が思いつかないため、いつもよりブログの文章を執筆寄りにしてみました。ひょっとしたらこの記事を使うかもしれません。。

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド

 

ですが、それを差し引いてもいい感じに書けたと思っているので、ぜひぜひお手にとって頂けますと幸いです…!🙇

小さな言葉が大きく刺さる

人間って面白いなーと思っているシチュエーションの1つに、相手は対して意識して言ったわけじゃないかもしれない一言が、自分の中に大きく残って、それが今でも自分の行動に影響を与えているというちぐはぐさがあります。

 

自分でも「なんでこの言葉が今でも強烈に残ってるんだ?」というのがあったりして、まあ深堀れば理由も解明されそうなものですが、そこは敢えて放置しています。

 

あ、ここまでの文脈で悪い方面に捉えている方もいるかもしれませんが、基本ポジティブな方向です。いやネガティブな方向でもこういうことってあるかもだけど、どうせ書くならいいことを書こうかなと。。

 

というわけで特に印象に残ってるフレーズを書き出してみました。「これひょっとして自分が言ったやつかも」と思ったあなたはほくそ笑むか気味悪がって頂ければと思います。

 

「個人的に」を使わない

自分の意見を言うんだから「個人的に」なんて前置きせずに言えばいいのに、的な文脈で書かれてたような気がします。この言葉を目にして以降「個人的に」と書くたびに、消したり使う理由を考えたりしています。

 

料理の写真にフィルターかけるの信じられない

たまーに使っちゃいますが、今でも料理写真撮るとこの言葉を思い浮かべています。

 

お父さんにありがとうって言ったか?

これは5歳頃の記憶ですね。たしか池袋の西武で親に戦隊ものか勇者ものの玩具を買ってもらって、その帰りの電車の中で、反対側の席に座ってたおっちゃんに言われた記憶があります。別に怒られたとかじゃなくて、普通のトーンで言われた。意外と覚えてるものですね。。

 

同僚はあだなで呼ばない。さん付けで呼ぶ

これは社会人になってから。けっこう新鮮な考え方だったので、自分も真似ています。

 

土鍋で炊く米はうまいぞ

学生時代に友人と先生が話しているのを横で聞いてた時に出てきたフレーズ。学生時代自炊してなかったので、そこまで言うなら!と一人暮らし始めた時に土釜買いました。今でもたまに思い出す。

 

 

なんでこんなことを書いたか

って言うと、まあこれらのフレーズは常日頃思い出してたのですが、ふと「これだけいろんな人の何気ない言葉に良い意味で影響受けてるって面白いよなあ。果たして自分は同じようなことができるのだろうか……」と思っていた矢先、どうやらそんな感じのことがあって、おお意外とあるもんなんだなと面白く感じたので書いてみた次第です。

言葉って良いことにも悪いことにも使えるし、何気ない言葉が良い方向に作用すれば悪い方向に作用することもあります。あとは受け手側の気持ちとか体調とか知識量とかに左右されたりとかね。

つまり何が言いたいかって言うと、言葉って予測不可能で面白いよねっていうことでした。

 

雑に終わる。

Sketchの本が出ます!&アンケートご協力のお願い🙏

f:id:ryo_pan:20170315224400p:plain

このたびBNN新社様よりSketchの書籍を発売させて頂く運びとなりました🙌💎

 

まだサイトにも各種ストアにも情報は出ていませんが、絶賛執筆中でございます✏️

うまくいけば(紙の本としては)日本で初めてのSketch本になります💪

 

さて今回、せっかく日本で出すんだしということで、書籍内のミニコラムで「日本でSketchを使っている人はどれくらい存在するのか?みんながよく使うプラグインやサービスは何なのか?そしてSketchを使うのをやめちゃった人はどれくらいいるのか!?」という利用動向を集計して掲載をしたいと考えています。

ぜひ!Sketchをお使いの方!ご協力を!お願いいたします!🙏🙏🙏

goo.gl

無記名アンケートなのでお名前や社名は掲載いたしません。所要時間は長くても7,8分ほどです。

対象者は「Sketchを使っている方、Sketchを使ってたけどやめた方、Sketchをこれから使おうと考えている方」。職種は関係なし。学生の方もお答え頂けます。

なるべく母数を確保したいため、皆様からのご協力&ご共有を切に、切に願っております…!🙇

 

なお、アンケートの最後で「別途インタビューにご協力頂ける方」の募集もしております。Sketchを使っていてどんなところが好きか、嫌いか。あるいはなぜSketchを使わなくなったのかなど、いくつかの質問にお答え頂く形式でのインタビューとなります。Googleフォーム経由を考えているので、関東以外の方も大歓迎です。

アンケートとは違って会社名・個人名・(可能なら)顔写真の掲載をさせて頂きますが、謝礼として献本をさせて頂きます。

募集人数があまり多くはないのですが、こちらもぜひご協力頂けますと幸いです🙇

 

受付は2017年3月30日(木)中となっております。皆様からのご回答、お待ちしております…!

2016年買ってよかったもの〜Osmo Mobile、SIGMAのレンズ、軽量バッグなど〜

2016年も終わりを迎えそうなので、今年のお買い物の中でも特に満足度の高かったものを選んでみました。例によってカメラ系多めです。

続きを読む