CSS Nite in KOBE, Vol.37 Adobe Creative Cloud 使い倒しテクニック集中講座に参加してきました

Adobe Creative Cloud（以下AdobeCC）はどんどんアップデートされていき、今までの当たり前の制作方法がより簡単に、よりミス無く出来るようになっています。今回のCSS Nite in KOBEでは、そんなAdobeCCの便利な使い倒しテクニックを大量に学んできました。

今回の登壇者

今回の登壇者は株式会社スイッチの鷹野雅弘(たかのまさひろ)さん。鷹野さんはCSS Niteを運営していたり、DTP-transit（最近こちらにお引越ししたようです）という制作者向けの情報サイトも運営している方です。
一昨年のCSS Nite in KOBEでもIllustratorの効率の良いデータ作りに関する内容で登壇されていました。

Webrandum

【前編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOB...

https://webrandum.net/cssnite-kobe-26

CSS Nite in KOBE, Vol.26のIllustratorの小技・凄技・時短技！「Sync & Liveで取り回す Illustrator でのデータ作り」に参加してきました。僕はまだillustratorを使い始めて1年半も経っていないのですが、おそらく長年使っている方でも知らない機能や効率化の方法を学ぶ事ができました。今回の登壇者今回の登壇者は株式会社スイッチの鷹野雅弘(たかのまさひろ)さん。鷹野さんはCSS Niteを運営していたり、DTP-transitという制作者向けの情報サイトも運用している方です。スイッチは1996年から続くDTPやWebの制作中心の会社で...

Webrandum

【後編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOB...

https://webrandum.net/cssnite-kobe-26-2

この記事は前編の【前編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOBE, Vol.26の続きになります。さて早速ですが後編は鷹野さんから紹介のあったIllustratorの小技からスタートです。不透明度を素早く調整Illustratorで不透明度を変えるときにわざわざ透明パネルを出さなくても、ショートカットで数字のキーを透明度に当てておくと素早く変更ができます。例えば1を押すと透明度が10%、5を押すと透明度が50%、みたいな感じです。ただ0に関しては透明度0%にしたい状況はあまり無いので、100%に設定してお...

全体を通しての感想

全体を通して感じたのが「キャッチアップを怠ると非常に損をする」という事です。

仕事が忙しくてキャッチアップを怠っていると、制作が楽になる機能が出ても気が付かず、いつまでも面倒な作業をやる羽目に。すると仕事が更に忙しくなってまたキャッチアップが出来なくなるという負のスパイラルにハマってしまいます。

キャッチアップにはある程度の余裕が必要です。
しかし、その余裕を作り出すためには最新の情報をキャッチアップして何らかの情報を得て今の制作を楽にするしかありません（もしくは、余裕のある会社に移るとか…）。

もし今制作が忙しいという人ほど、一度手を止めて自分の制作について見つめ直してみては如何でしょうか？

セミナー内容

自分のメモも兼ねてですので、ざっくりになってしまいますが、どんな内容だったか記録しておきます。

基本

そもそもAdobeCCの機能についていく前に、そもそもの基本的な考え方として、以下のような内容をお話されました。

フォント管理をきちんとする
キーボードショートカットを拡張する（Keyboard Maestro）
制作環境は一貫性のある（且つ理論的な）ものに統一すべき

Keyboard Maestroについては自分も何度か記事にしましたし、noteにてマクロの作成方法についての記事を書いていますので、そちらを参考にしてみてください。

そして、制作環境は一貫性のあるものにしておくべきです。
例えば、デザインツールの「長方形ツール」のショートカットキーに関しても、下記のようにアプリケーションによって全然違います（SketchはAdobe製品ではありませんが、他のデザインツールとして参考までに）。

Illustrator	M
Photoshop	U
XD	R
Sketch	R

これをこのまま覚えようとすると結構大変です。統一して「長方形ツールの時はこれ！」と覚えた方が楽ですよね。また、ショートカットキーを統一する際はXDを基準に考える方が良いとの事です（自分も長方形はRに統一しています）。

XDがAdobe製品の中で新しい
Rectangle（長方形）の頭文字なので覚えやすい

また、ショートカットキーを付ける時にも、適当に付けるのではなく、似たような機能の際は修飾キーを合わせて付けたり等が大切です。

Illustrator

フォントの選択は「お気に入り」や「最近使用したフォント」でソートすると素早く選択できる
オブジェクトの合体や型抜きをする場合は「シェイプ形成ツール」を使用
- ただし、シェイプ形成ツールを使用する場合は後から元に戻す事ができない
- 直しに強いデータ作りという意味では、パスファインダーパネルの「複合シェイプ」を使用した方が良い
アピアランスとグラフィックスタイルで、後から修正できる装飾文字作りが可能
アイコンフォントを使う時はAlfredを使用

[2019年1月16日追記]
鷹野さんよりご指摘をいただきました。
オブジェクトの合体や型抜きをする場合は、シェイプ形成ツールを使うと楽ですが、後から直したりしたい場合は「複合シェイプ」を使用した方が良いとの事です。

複合シェイプとは、パスファインダーの仮適用機能のようなもので、[パスファインダー]パネルのボタンをOptionキーを押しながらクリックする事で適用できます。詳しい挙動の違いはこちらの記事をご覧ください。

DTP Transit

IllustratorとXDでのパスファインダー（合体）の挙動の違い | DTP Transit

https://dtptransit.design/illustrator/pathfinder-ai-xd.html

IllustratorとXDでは、どのオブジェクトの属性を保持するのかの挙動が異なります。Illustratorの［シェイプ形成ツール］を使えば、ドラッグの開始時のオブジェクトの属性を保持できます。

ざっくりまとめると上記のようになります。
やはり、この中でもアピアランスとグラフィックスタイルが群を抜いて便利です。

このブログで使う説明用の画像にも、アピアランスを使ったテキストがたまに登場したりしています。

テキストを入力すると、後ろの長方形も自動でテキストに合わせて広がってくれるので、説明用の画像を作るときに非常に重宝しています。

Photoshop

非破壊な制作を意識しよう（後から元に戻せる）
- 調整レイヤーを使用する
- スマートオブジェクトに変換する（よく使うのでショートカットキーを設定する）
マスクには「選択とマスク」と「ベクトルマスク」の2種類がある
コンテンツに応じる（鷹野さんはよくコンじると仰ってます）で、写真の引き伸ばしは一瞬
コピースタンプツール → スポット修正ブラシツールを使おう

コンじるのおかげで面倒な写真の引き伸ばしや、角度補正を行った時に出来る余白を埋める作業が非常に楽になりました。また、XDの登場によって、Web制作はXDに任せてPhotoshopはレタッチや写真の扱いにどんどん特化していっている印象を受けました。

また、昔は元のデータを変えないように画像を複製してから、複製した画像に対してレタッチなり補正をかけていましたが、今はスマートオブジェクトに変換してから補正をする事で非破壊な制作が可能です。

XD

リピートグリッドがあるのはAdobeXDだけ
最近はレスポンシブ対応やアニメーションにも強くなってきている
プラグインが作れるようになって更に便利になった

最後はAdobeXDです。
やはりIllustratorやPhotoshopを使った後にXDを触ると「動作軽快だなー」と思います。そんなXDも気がつけばバージョン14.0（2019年1月現在）です。

最近はアニメーションを作成出来たり、レスポンシブの対応（アートボードのサイズを変えた時の各オブジェクトの挙動を設定できる）が追加されたりと、かなり色んな事ができるようになっています。
綺麗に動くアニメーションを見ると、クライアントさんから「もうこれで出来てんじゃん！」と言われそうで心配ですが、非常に簡単にアニメーションが作れます。

他にもプラグインが作れるようになって、かゆいところに手が届く便利な機能を世界中の方が制作して配布してくれています。