「デキるWebデザイナー」に近づけた？ Adobe MAX Japan2016 セッション反省会
くれまとさくらのWebデザイナーは今日も行く
はじめに
こんにちは、くれまです。
私とさくらさんは、2016年9月2日に東京ビックサイトで開催された「Adobe MAX Japan2016」のセッション、「デキるWebデザイナーを目指せ！本当に現場で使えるCC活用テクニック」に登壇しました。今回は、当日の模様を振り返る記事をお届けします！
セッションを未見の方は、Adobe MAX Japan 2016 ビデオアーカイブからご覧になれますので、ぜひどうぞ。
私たちのセッションスライドは、こちら。
//www.slideshare.net/slideshow/embed_code/key/H4NCY9bbVKq6XP
そして、デモファイル一式もダウンロード用にご用意しております！
ということで、ここからは、大反省会です！
セッション内容をふり返ろう。
さくら：さて、セッションの内容をもう一度整理してみましょうか。
くれま：当日のセッションでは、Webデザインのプロセスから特に気になる4つの工程をピックアップし、それぞれの工程で「デキるポイント」に基づいたテクニックをご紹介しました。簡単に見ていきましょう！
（１）アイディア出し/モック制作
デキるポイント → その場でイメージを具体化して共有しよう！
紹介テクニック
・ Camp CCとStockを使ったラフ作成とIllustratorへの共有
・ XDを使ったモック作成
さくら：ジェスチャで素早く静的なラフカンプが作れるCamp CCに対して、画面遷移を絡めたモックを手軽に作れるXDという対比をお見せしました。
くれま：お客様と抽象的なイメージや感情を共有するのは難しいのですが、こうやって実際の形により近い状態をお見せすることで、誤解が生じにくくなります。
さくら：どちらのアプリも、とても直感的に操作できるのがいいですよね。直感的に操作ができるということは、素早く作りやすい、ということなので、最初のこの工程では大事なポイントです。
くれま：XDはまだまだ発展途上でこれからが楽しみなアプリですが、UI,UXを考えると、今後は欠かせないツールになりそう。
さくら：「操作感や体験」を共有するのって今までの静止画（カンプ）では難しかったんですが、最近はワークフローの中でも重要視されてますし、今後はこういったアプリの活用シーンが増えそうですね。
（２）デザイン作業前の準備
デキるポイント → 初期設定でミスを防ごう！ 柔軟なアプリの選択も大事。
紹介テクニック
・ Illustrator,Photoshopのオススメポイントと初期設定のポイント
・ Photoshopの新規ガイドレイアウト、複数のアートボード作成
・ Illustratorの段組設定機能でグリッド作成
くれま：別途配布したチートシートで補足しましたが、初期設定だけで1時間しゃべれますよねぇ。
さくら：ですねw セッションでは、IllustratorでもPhotoshopでも正確な初期設定ができるよ、という点を見ていただいたので、あとは周りの方が望むアプリでスムーズに作業に入れるといいですね。
くれま：Webデザインの場合は、オブジェクトの大きさや位置を数値で管理する作業をぜひ意識していただきたいです。私がご紹介したIllustratorでは「変形パネル」で正確な数値管理ができるのが魅力です。
さくら：こちらの「イラレでWebデザインってほんとにできるの？」で披露していただいたテクニックを一部ご紹介したんですよね。
くれま：まず、アートボードを基準にぴったり整列するというのがポイントです。マウス操作に頼って数値に小数点が出てきてしまうとコーディングのときに困るので。それから、「段組設定」を活用して、正確なオブジェクトやガイドを作成しよう、というお話をしました。
さくら：オブジェクトの位置移動や変形が自由自在なアプリだからこそ、オブジェクトを数値で正確に管理できる「変形パネル」の機能はありがたいです。
（３）カンプ作り込み
デキるポイント → 新機能を活用して手早く直しに強いデータを作ろう！
紹介テクニック
・ Photoshop（コンテンツに応じた切り抜き、複数アートボードとスマートオブジェクト連動による修正）
・ Photoshopのデバイスプレビューと、PreviewCCでのデザイン実機確認、Illustratorへの転用裏技。
・ Illustrator（ライブシェイプ、ダイナミックシンボル、CaptureCCとの連携）
くれま：Preview CCはいいアプリなので、ぜひIllustratorとも連携して欲しいなぁという思いを込めながら、裏技をご紹介しました。
さくら：いわゆる「裏技」を紹介できるのは、外部の人間のメリットかもしれませんねw。もっといろいろなネタを仕込みたかったです、ここも1時間しゃべれる……。
くれま：Photoshopのアートボードを使ったバナー制作のテクニックはリアリティーがありましたね。
さくら：スマートオブジェクトの機能はもう活用してらっしゃる方も多いと思うんですが、その特性を応用したデモをお見せしました。昨年書いた「スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう」この記事で基本的なことを触れていますが、今ではWeb制作のスタンダードな技術ですので、ぜひ活用していただきたいです！
くれま：Illustratorでは、CaptureCCとの連携をお見せしました。イラストとCaptureCCの相性は抜群です。私も実際ああいった形でお仕事を最近したので、ぜひご紹介したかったんです。
さくら：あの某ファンシーなお仕事ですよね。見せていただいて、おお！なるほど！と思いました。このなるほど！感を当日共有できたのでしたら嬉しいです。
（４）アセット書き出し
デキるポイント → コーディング担当者にわかりやすいデータ作成をしよう！
紹介テクニック
・ Photoshopの画像書き出し
・ Illustratorのアセット書き出しと注意点
くれま：Illustratorのアセットは将来性があるので、注意点も含めて熱く語っちゃいました！
さくら：注意点って、クリッピングマスクなどで余白が生じてしまう、というあれですね。（詳しくはこちらの「【2016年6月のアプデ内容を検証！】ついにAiに「アセット書き出し」機能が搭載！ Psはフォント周りの機能がブラッシュアップ」を参照。）あれだけ語ったら、きっと改善してくれるのでは…..？ w
くれま：期待しておきましょうw
さくら：私は新機能もそうなんですけど、前提として、「人として、レイヤー整理はきちんとやりましょう！」ということを一番お伝えしたかったです。
くれま：そうそう、「人として」ねw これ、タイムラインを後で拝見したら、ちょっと突っ込まれてましたけど、要するに他人と協業するときの「気遣い」なんですよねー。「後工程はお客様！」と思ってお仕事をするのが、一番です。
さくら：バタバタと仕事をすると、協業する人への気遣いを忘れてしまいがちですものね。心に刻みます！
ほんとはもっとネタを入れたかった！
くれま：この写真は、さくらさんの事務所で、ふたりで構成を考えた時のホワイトボードですね。
さくら：本当は、もっと紹介したい機能が沢山あったんですけど、時間の関係で泣く泣く削りましたね……。
くれま：Creative Cloud Librariesでの素材連携とかねー。本当はもっと詳細にお見せしたかったんですけど。
さくら：Illustratorで作ったロゴを、PhotoshopやComp CCで連携して使うところとか、もっと細かくデモしたかったですね。
くれま：そこらへんは、今後の連載でひとつずつ切り出してお見せするとしますか。
さくら：ですね！ 「デキるデザイナー」続編を、ぜひ連載で進めていきましょう！ 皆さま、今後もどうぞお見逃しなく！
Adobe Max Japanの雰囲気は、どうだった？
さくら：東京ビッグサイトはたまに仕事で行くんですけど、照明やステージの構成など、いつものビッグサイトと全然違った雰囲気で驚きました。
くれま：音楽フェスや文化祭みたいで、テンションあがりました！ Capture CCを使って、缶バッジも作ってもらっちゃいましたけど、そういうブースが沢山出ていたのも、お祭りっぽかったですよね。
さくら：私たちはリハーサルで一度行ってるんですけど、テンションがあがってる自分と、設営の大変さを感じた自分がいて、お客さんに対してはもちろん、関わってくださるスタッフさん全員のために頑張ろう！って、くれまさんと前日に誓ったんですよね。
くれま：「えいえいおー！」みたいなねw そして前日に妙にテンションが上がりすぎて、久保さんや森さんに「明日頑張りましょう！！！」みたいなメッセージを送りつけるという……。
さくら：ご準備でお忙しい中、ちょっとご迷惑でしたよねw 失礼しました！
ふたりでセッション、どうだった？
さくら：それにしても、今回は大役をいただき、緊張しましたね。
くれま：そうですね、あんなに沢山の方に聞いてもらえるなんて幸せですね！
さくら：私たちのセッション会場、400人のブースでしたっけ？
くれま：ストリーミングも入れると、非常に多くの方にご覧いただけたようで、感謝に堪えません。
さくら：結構ご迷惑もおかけしたと思うんですけれど、プレゼンテーション的に、くれまさんにも改善点を見てもらって、私はすごく勉強になりました。
くれま：時間に余裕がなかったですよね。だいぶ削りましたが、それでもかなり駆け足で紹介する形になってしまって。本番でも少し時間をオーバーしてしまったのは、大反省でした……。
さくら：でも、1時間弱、みなさんが集中して聞いてくださってとても嬉しかったです。あ、そうだ、セミナーでQRコードを示した時に何度か、（QRコードのリンク先である）弊社のサーバーがアクセス過多で一瞬ダウンしてしまったらしくて、すみませんでした。
くれま：これは予想できなかったんですよね……。
さくら：今後に活かしたいと思います。
まとめ
くれまのまとめ
今回のセッションは、初心者やCC未利用の方をメインターゲットにしていたので、慣れない小芝居等も取り入れ、ちょっと面白風味強めで構成してみましたが、いかがでしたでしょうか？ 機会があれば、個別の機能を詳細に学ぶワークショップをやってみたいなと思っています。現状、それに一番近い内容なのは、原宿のロクナナワークショップで開講している「黒野明子のPhotoshop & Illustratorによる効率的Webデザイン講座」ですので、ご興味があれば、ぜひチェックしてみてください！
さくらのまとめ
Adobe Max Japan、たくさんの方に見ていただけて、とても嬉しかったです。私は昨年（2015年）のBest of Maxの日に会社を登記したので、そういった意味でも思い入れのあるイベントなんですけれど、1年後にこうした機会をいただけるとは思っていなかったので、とても光栄でした。試行錯誤した部分もありましたが、終わってみれば、いつものこの連載のやり取りに近い温度でお話できたのではないかなと思っています。またみなさんにお目にかかる日がありましたら、「くれまとさくら」をどうぞよろしくお願いします！