Adobeユーザー歴=嵐の活動年数の私がSketchを試してみた

芸術の秋。静岡県三島市にある佐野美術館で開催中のヒグチユウコ展を観に行きました。人の手による緻密で可愛くも不思議な世界観に圧倒され、気付けば散財してしまいました。しばらくは画集を眺めて過ごすハヤマです、こんにちは。

はじめに

突然ですが、私はグラフィックソフトといえば生粋のAdobeユーザーです。
学生の頃に使用していた教材もPhotoshop/Illustratorでしたし(紙媒体出身)、そう考えると気づけば20年……あ、嵐の活動年数と同じですね。嵐といえば、最近のサブスクリプションやSNS、youtubeの進出による勢いがすごいですね。
話が逸れました。

アームズでのデザインは主にPhotoshopで作成しています。 ある時社内で「Sketchも結構使いやすい」という話題があり、Adobe信者的な自分は正直あまりピンと来ていなかったのですが、
良し悪しを判断するにはまず自分自身が使ってからにしなければと、今回のブログを通して試してみることにしました。

Sketchとは

f:id:arms_hayama:20191118074103p:plain

オランダのBohemian Coding社によって開発されたベクターグラフィックソフトです。
現在はMac版(英語)のみとなります。
UIデザインを作成するのに非常に便利とされ、Webデザインにおいても重宝されているアプリケーションです。
プラグインを使用することで、自分でカスタマイズできるのも特徴のひとつです。

Sketchについて検索した時に気になったのは、AdobeからSketchユーザーに切り替えたWebデザイナーが一定数いるということ。 一体、何がそこまで魅力的なのか。
では、実際に試してみましょう。

まずは体験版をダウンロード

Sketchは有料ソフト($99/年)のため、今回は体験版を使用することにします。

www.sketch.com
体験版のダウンロードは、上記ページから「TRY FOR FREE」ボタンをクリック。

調べ始めたら奥が深いSketch。
今回は、初心者として以下の動画を参考にさせてもらいつつ、ざっくりと操作性を確認することにします。

www.youtube.com

操作の所感

以下、自分がPhotoshopでWebデザインを行う時の操作と比較して感じた諸々をまとめました。

(1)パーツ・シンボル化について

◎ 複数登場するパーツなど、シンボル化すると一括変更できる!

「シンボル」については、他の色々な記事でも高い評価をされている方が多かったと思います。
header/footerのモジュールや同一スタイルのボタンなどをシンボル化することで一部のテキスト修正やスタイルの修正が入った時に一括修正することができるのが良いですね。
photoshopではモジュール要素をスマートオブジェクト配置にして対応していたけれど、こちらの方が手軽に小さなパーツ単位で設定がしやすい印象でした。 さらにOverrides機能を使えば、シンボル内にあるテキストや画像などを置換できるため「スタイルだけ変更」も簡単ですね。この機能は便利だなぁと思いました。

f:id:arms_hayama:20191118114135j:plain

○ Adobeユーザーでも馴染みのあるキー操作も多く、慣れるのは早そう

操作感覚はphotoshopに近いものもあるので覚えやすそうです。あとは英語さえ慣れてしまえば…。

(2)テキスト編集について

◎ 見出し/本文/キャプション、それぞれをアピアランスに登録しておけばテキストスタイルの“揺れ”を防ぐことができる

photoshopでも同様の設定はできますが、こちらのほうがUI的にも見やすい・わかりやすい印象でした。

f:id:arms_hayama:20191118114153j:plain
選択したテキストに登録したスタイルを付与することができる

△ 字詰がもたつく…

ここが今の所、一番もやっとしました(笑)
・トラッキング:Fontsパネルから設定アイコンを経由し「Typography > Text Spacing」から設定を行う※対象フォントのみ
・カーニング:「Character」で値を入力、もしくはショートカットで操作

設定はできるんですけど、自分の慣れもあるのですけど、ここはPhotoshopの方が使いやすいです。(Webのテキストにおいては、そこまで設定をする必要がないからだと思いますが)

(3)画像編集について

× そもそも画像編集ソフトでないことは承知の上だけど

hero画像など「.psb(.psd)」や「.ai」データをリンク配置して、デザイン要素をリアルタイムで更新することがあるのですが、あたりまえだけれどそれらの複数アプリによる連携ができないのが不便だな…という印象。Adobe製品の連携があってこそですもんね。ここがPhotoshopでのレイアウトを離れがたい理由かもしれません。

(4)グリッドガイドについて

◎ グリッドガイドの設定がカンタン!

値を入力するだけですぐに設定できるので、地味に感動しました。

さいごに

今のところの感想ですが
・起動の軽さ、ファイルの軽さ、操作のサクサク感、モジュール編集の機能性はsketch
・繊細なビジュアル重視のデザイン加工画像を多用する場合はPhotoshop
といったところでしょうか。

今回はSketchを簡易的に触ってみての率直な所感となりましたが、 他のアプリケーションでもこんなに使いやすいものがあるとは驚きでした。
ただ、それぞれ良し悪しも異なっていたので、今後用途によって使用するアプリケーションを取捨選択する可能性にも対応できるよう、引き続き知識を深めていきたいと思います。