突撃インタビュー「デベロッパーマーケティングの轟さんにCreative Cloudの“コーディングに便利な機能”を教えてもらう（後編）」

千貫りこの突撃インタビュー

デベロッパーマーケティングの轟さんにCreative Cloudの“デザインカンプをWebページにするとき便利な機能”を教えてもらう（後編）

https://blogs.adobe.com/creativestation/web-interview-keisuke_todoroki-1
前半を読む

後編では、前編に引き続きExtractと相性の良いPSDデータを作るコツを教えてもらいました。また、日ごろハードな業務をこなす轟さんのプライベートについても聞いてみました。多忙な轟さんは、どんな風に仕事と趣味のバランスを取っているのでしょうか？

前編の最後の方でPSDデータの作り方についてふれていましたが、もう少し詳しく聞かせていただいてもいいですか？

「シェイプ」はだいぶ浸透していると思うんですが、「スマートオブジェクト」機能も積極的に利用していただきたいですね。Photoshop CCからはIllustratorの「配置」機能のように外部ファイルにリンクをはれるようになったんですが、この機能を知らない方も多いんじゃないでしょうか。

外部リンクすると本体のファイルが軽くなるはもちろん、部品を外出しで管理できるので、メンテナンス性が上がると思います。

そういえば、Extractって「レイヤー効果」も認識してくれるんですか？

はい。

「ドロップシャドウ」や「グラデーションオーバーレイ」など、現時点のCSSがサポートしているシンプルな表現ならExtractでCSSコードにしてくれますよ。Photoshopを使うデザイナーさんから見ると、CSSの表現力はまだ不足していて制約があると思いますが、Filter EffectやBlend Modesなどの新しいCSS表現をアドビが中心になって進めていますのでご期待ください。

ブラウザ上でExtractを使ってPSDファイルを開き、ドロップシャドーを使用しているオブジェクトを選択すると、スタイルパネルのCSSエリアに「box-shadow」が表示されているのがわかる。このままコピーしてエディターにペースト可能

ちなみに、CSSがサポートしていない「カラーオーバーレイ」を使って緑色のシェイプを赤色に変更したとします。これをExtractに送ると、ウィンドウで表示されるシェイプの色は当然ながら赤色なんですが、生成されるCSSのカラーコードは緑色を指してしまうんです。

このようなPhotoshopとCSSの表現力の差は、Extractに限らずコーダーさんが混乱してしまうのでデザイナーさんは注意が必要ですね。

Extractと相性の良い機能としては「レイヤーカンプ」もオススメです。「レイヤーカンプ」、使ったことありますか？

「レイヤーカンプ」……使ったことないです。教えてください！

簡単に言うと“レイヤーの組み合わせを保存できる機能”です。この機能を使うには、まず[ウィンドウ]-[レイヤーカンプ]で「レイヤーカンプ」パネルを表示しておいてくださいね。

たとえば、ボタンのアップ時とダウン時に色を変えたりしますよね。カンプ内に点在するボタンに対してそれぞれのパターンを作成すると思うんですが、いちいちレイヤーの表示・非表示を切り替えて仕上がりを確認するのって面倒じゃないですか。そこで登場するのが「レイヤーカンプ」機能です。

カンプ内にある全てのボタンの“アップ時”のレイヤーを表示した状態で、新規レイヤーカンプを作ります。

「CLASSICAL」ボタンのアップ時のレイヤーの組み合わせをレイヤーカンプ「buttonUp」として登録

さらに、“ダウン時”も同じ要領でレイヤーカンプを作っておきます。こうすれば「レイヤーカンプ」パネルで“アップ時”と“ダウン時”を切り替えることができるんです。

「CLASSICAL」ボタンのダウン時のレイヤーの組み合わせをレイヤーカンプ「buttonDown」として登録 layerComp_extract

レイヤーカンプの切り替えはExtractでもサポートされているので、「レイヤーカンプ」機能を使ってカンプデータを作っておけば、アセット抽出作業などがよりスムーズに進められるのではないでしょうか。

そうそう、Extractのチュートリアルに表示されてるPSDデータも「レイヤーカンプ」機能を使って作られています。
「レイヤーカンプ」機能は、カラーバリエーションをつくるときにも便利だと思います。

最後に、PSDデータそのものに関して言うと、レイヤー構成をしっかり練っておくことなども大切ですよね。コーディングには直接関係ないかもしれないけど。自分以外の人も把握しやすいデータ作り、メンテナンスしやすいデータ作りは、クリエイターさんにとって大きなテーマなんじゃないでしょうか。このあたりは牧下さんの記事が参考になるかと思います。

では、そろそろ轟さんご本人のお話も聞かせてください。「デベロッパーマーケティング」って、具体的にどんなお仕事なのでしょうか？

inStudio

僕は、Webに関わる制作者に向けた、アドビ製品やサービスのマーケティングを担当しています。Webデザイナーだけでなく開発者まで含むんですが、アドビのマーケティングで開発者を対象に活動しているのは自分だけですね。

あとは、翻訳された製品情報のチェックや新機能のプロモーション企画、イベント開催、セミナー講演、米国の開発チームに日本からの要望を伝えたり、といったこともやってます。

ずいぶんと色々やられてるんですね。大変なのはどんなところですか？

関心やスキルの異なる幅広い人たちとコミュニケーションをとらなきゃいけないことでしょうか。

知っていないといけない製品の数もかなり多いので、特に新しいバージョンがリリースされる前はバタバタです（笑）

そして、Webはユーザーの利用環境や制作技術の変化が早いですよね。みなさんの要望を集めるにも情報を発信するにも、時間との闘いです。だから、ブログやSNSを使って、できるだけ多くの情報をスピーディーにお届けできるよう頑張っているところです。

もちろん、セミナーやイベントで講演にもますます力を入れていくつもりですよ！

相当お忙しそうですが、お仕事以外で熱中していることはありますか？

クルマですね！今は、11/30にお台場で開催される「STREET VWs Jamboree」というイベントを楽しみにしているところです（編集注：インタビューは2014年11/25）。当日は古いフォルクスワーゲンが何百台と集まって、改造用のパーツやキーホルダー、ミニカーなんかのお店も出るんですよ。

僕は大のフォルクスワーゲンファンで。ビートルは20年近く乗ってるんです。今のは2代目なんですけどね。初代は日本で手に入れて乗ってたんですが、留学することになって手放しました。ところが留学先のアメリカで別の1968年製のビートルに出会いまして、帰国するときにどうしようか悩んだあげく連れて帰ってきました。

そのビートルのエンジンを、6月頃にふと思い立ってバラしちゃいまして。