11月11日、Adobe主催のイベント「Adobe Live – Best of Max」にいってきました。

本イベントは10月に米国で開催された「Adobe Max 2015」で発表されたCreative Cloud最新情報の発表とデモ、そしてCCファミリーを活用した制作Tipsやワークフローについて、現場のプロが講演するセッションで構成されていました。

新製品や新機能に関する内容は、10月のイベント後にレポートされたものをみてもらえればとおもいますが、今回の記事では参加した各セッションのレポートをします。

午前:基調講演とゲスト講演

白Aによるパフォーマンスをオープニングに、Adobeの方々による基調講演、製品紹介とデモからはじまりました。

基調講演トピックの主なトピックは、次のようなものでした。

  • Typekitを通してモリサワの日本語フォント20書体の提供
  • CreativeSyncテクノロジーによるアプリケーション間連携
  • 高機能なiOS向けアプリケーション

今回の発表ではCreativeSyncテクノロジーを通したワークフロー連携が肝であると感じました。このあたりは、後半参加したWeb制作系セッションで説明します。

その他新製品デモなどもありましたが、その中で特に気になったものは、話題にもなったプロトタイピングアプリ、Project Commetです。来年上半期には、という話があり、これがリリースされればCCファミリーを使ったワークフロー、その連携は非常に強くなると感じました。

ゲスト講演は、OK GOのI Won’t Let You Downをはじめとして、話題になったCM、プロモーションの実績がある原野氏による講演で、彼が考えるクリエイティブワークのための十か条についての話でした。同じクリエイティブワークといっても普段私が関わるものとは違う、広告的なクリエイティブワークから生まれた言葉であるとは感じつつも、どれもうなづけるものばかりでした。

  1. ノンフィクションとノンバーバルの時代。
  2. いかに違うかではなく、いかに同じか。
  3. 隣り合って座る。
  4. ただしく尊敬する。(ユーザーをバカにしない)
  5. アイデアは自分の人生からしか生まれない。
  6. いい砂場をつくろう。
  7. アイデアを寝て待つしかない。
  8. 捨てること。
  9. クリエティブは、リスク。
  10. なぜ?

午後:Web系セッション

午後はWeb/DTP/Photo/Videoの4トラックに分かれてのセッションとなり、私は今回すべてWeb系セッションに参加しました。

新しいWeb制作フロー with Creative Cloud 2015

Adobeの轟さんからは、先ほどにも書いたCreativeSyncテクノロジーを使った制作ワークフローについての具体的な話が聞けました。

ディレクターからデザイナーへの指示出し、というケースではディレクターがいかにして具体的な指示を出すかというのがポイントです。指示が具体的であるほどズレがない、手戻りがすくないということで、Adobe Comp(iOSアプリ)をつかったデモがありました。このAdobe Compがなかなか面白いツールで、タッチデバイス向けにジェスチャによるオブジェクトの配置、レイアウトの機能がよくできていて、ペンで手書きをするよりも具体的に、しかしペンと同等の作業コストで簡単なワイヤーフレーム、指示書がつくれます。これであれば移動中なども使えますが、打ち合わせ中にその場でアイデアを絵に落としこむことも容易にできそうです。

またこのiOSアプリ上でも、Typekitからフォントを選択してつかえる、つまりモリサワフォントも使えます。その他iOS向けにすでに公開されている写真加工アプリなどもよくできていて、iOS端末でそこそこのことが可能になっています。

もうひとつ感心したのは、Adobeが提供するフォトストックサービス、Adobe Stockです。Adobe Stockでは、Adobeアカウントでログインしている状態であれば、購入しなくとも、透かし入りでお試しという形でPhotoshop上で使うことができ、そしてその写真が欲しければ、Photoshop内のCreative Cloudライブラリ(CCライブラリ)パネルからライセンス購入までできてしまうという流れがよく出来てるなぁと感心しました。
※なお透かし入りの状態で加工をしてたとしても、購入後も加工したものはそのまま残ります。
で、もちろんこれらの写真データというのはCCライブラリで共有していろんなアプリケーション、また他のユーザーと共有できるので、デザイナーとコーダーとの連携もスムーズにいくという話が見えてきました。

デザイナーからコーダーへの連携もよくできていて、PSDデータからDreamweaver向けにコード化(CSSとしてコピー)といった機能で容易にコードに落としこむことも可能になります。Extract機能でPSD上の画像データなどの抽出できるので、PSDでスライス→フォルダに保存→Dreamweaverで開く、のではなく、PSDから直接Dreamweaverで開く、ということもできます。

自分のこの数年の環境というのは、PhotoshopやSketchとコードエディタはそれぞれ独立しているわけですが、CCとしてすべてのツールが使える環境になっているのであれば、プラットフォームとしてのCreative Cloudに完全にのってしまうほうが開発効率は大きく向上するかもしれない、と思わせてくれるセッションでした。

コーダーに嫌われないWebデザインデータの作り方とクラウド共有のススメ

adobe-kitamura

デザインを主として仕事されている北村さんからは、Webデザインの現場でのあるある話をベースに、Illustrator,Photoshopの機能を活用した話されていました。
感覚的に、悪い言い方をすれば場当たり的にデザインをすると、その時の見た目だけで考えたサイズ感で使い勝手の悪いサイズになったり、同じ色に見えるのに微妙にコードが違うということが発生します。「Webは汎用性と規則性」という考えの元、再利用される要素はライブラリ、色、スタイルはスウォッチで管理することで同じものは同じものとして扱えます。
私が活用してこなかった機能として、Illustratorの合成フォントはデザイナーにしってほしい機能のひとつです。英数字はHelvetica、日本語はヒラギノ、というのはよくある例ですが、CSSであればfont-familyプロパティの指定に応じてそのようになります。aiデータ上でも合成フォント機能を使えば、英数字はHelvetica、日本語はヒラギノとなるテキストボックスをつくることができます。

レスポンシブサイト制作に効くデザインTipsあれこれ

adobe-kurono2

黒野さんからはレスポンシブWebデザインに有効なテクニックとPhotoshopのtipsなどについて。
はじめのポイントは、レスポンシブWebデザインの基本のひとつである流動的なグリッドをつかうためにグリッドのガイドを使うこと。グリッドのカラムの数と幅、ガターの幅も計算して引けるので自分で幅を計算する必要はありません。もうひとつはPhotoshopにも追加されたアートボードを使って、ターゲットになるスクリーンサイズごとのキャンバスを作ります。このときのグリッドのルール、またはブレークポイントの基準はBootstrapのルールを採用していました。

デモの中では、モジュール単位で形が変わること意識してデザインをすること、またそれらをライブラリにして配置するときには、リンクを解除して配置する必要がかあることなども話していました。(このtipsとして、Optionキーを押しながらドラッグアンドドロップで配置すればリンクが解除されるらしい)

そしてマルチデバイス対応のデザインで重要なのは、実際の端末で見てみる、体感してみることだと考えていますが、今はAdobe人生のPreviewアプリで可能です。これである程度のアテをつけたらコーディングへ…というところで、今回の試みとして面白かったのは、作成したデータをCCで共有、それを次のDreamwraverセッションに繋ぐという流れでした。このデータももちろんCCのライブラリにいれて共有。というわけで続きは次のセッションへ。

デザイナーにも使って欲しい。DreamweaverでのBootstrapサイト制作

adobe-matsuda

松田さんのセッションではDreamweaverのCC2015からネイティブサポートされているBootstrapをつかった実装テクニックをデモをしながら進めていくセッションでした。先ほど書いた通り、対象となるデザインは黒野さんのセッションときのデータです。

本題に入る前に、松田さんからは今レスポンシブWebデザインが求められている、という話がありました。特にクライアントワークにおける発注側の視点で、発注しているサイトはほぼレスポンシブ対応であるというアンケート結果があること、会場でも制作に関わっている人が多かったのが印象的でした。その背景には、基本的にワンソース・マルチユースであることによるメンテナンスコストを下げられる(実際そうでもないこともありますが。)、SEOの観点でモバイルフレンドリーであることが検索エンジンからの評価をあげることへの期待などがあるのでしょう。
あとはiOSだけでも多くのスクリーンサイズのバリエーションがある今、レスポンシブを意識せずに制作をするというのは現実的ではないといえます。

そしてDreamweaverもレスポンシブWebデザインに対応するための色々と進化・変化をしています。正直Dreamweaverからは数年離れていたので、今回のデモでなかなか強力なツールになっているのだなと感じました。Bootstrapといえば、つい先日にBootstrap Studioというものも出ましたが、CCファミリーに契約してDreamweaverがあるなら十分これで機能を果たせるでしょう。(もちろん両者の特長があるでしょうが)

どこから何をやるにしてもBootstrapのコンポーネントへのアクセス、適用するクラスの変更ができるなど、ここまでやるのか、という感じです。事実Bootstrapは他のフレームワークと比べても多くの開発者が関わり、安定しているフレームワークとはいえるので、下手に自力でグリッドの設計やコンポーネントの設計するよりは安心できるでしょう。

デモではPSDのデータと連携し、PSD上のオブジェクトからそのままCSSのコードをひっぱってくるなどの鮮やかワークフローもありましたが、逆にDreamweaverでそのままブラウザ上でのデザイン、HTMLプロトタイピングができそうだなと考えました。またDreamweaverからもAdobe Previewでのデバイス検証ができるので、ここで検証と改善のサイクルが回しやすくなっています。

このセッションの締めとしては、Bootstrapの良い点というのは、それがUI設計、ビジュアルデザイン、実装の「共通ルール」となるという話でした。それが品質を保つことや、実装・検証コストを下げることにもなるということかと思いますが、実際こうしたフレームワークはUI設計、ビジュアルデザインから考慮されていることが非常に重要だと日々感じています。この点は、Bootstrapではなく、チームごとのフレームワークがあったとしても同じことと言えます。

Web・UIデザイナーが知っておくべき、これからのデザインワークフロー

最後はデザインエージェンシーであるGoodpatchの奥藤さんからは、クライアントワークでの実際のやりとりを例に、これからのデザインワークフローとしてあるべき思考とプロセスについての話でした。

彼女の経験から、元々Webデザイナーとして仕事をしていたときは、自分ひとりの頭の中で考えて進めることが多かったが、今の仕事になってからはひとりで考えることをやめたことで、より良いワークフローが見えたということです。その具体的なアクションとして、デザイナーが成果物を出すまでの紆余曲折をプロトタイプという形で共有するということでした。

まずは手書きレベルで未完成でもいいから、早くつくれる手段でエンジニアとコミュニケーション、そこから形が見えてくればもう少し具体的な絵に、そしてProttのようなプロトタイピングツールでプロトタイプをつくるという流れが重要です。

プロトタイプができれば、クライアント、制作者、ユーザーそれぞれにレビューをしてもらいます。セッションでは奥藤さんが関わったプロジェクト「VOCE」のモバイルアプリでの実例を元に、ロゴ入りのヘッダーの表現についての三者三様のフィードバックを受けて改善していった流れを説明してくれました。

最初は背景をピンク色にしたヘッダーで、同じピンクであってもそれぞれで印象が異なり、これだ!というものにはなりません。次は文字と背景の色を変えてみたりするも、これも見る人によってズレがあり、ピンくるものではない。最終的には、飛躍したアイデアとして、ロゴ入りヘッダーをそもそも外してしまう、というものでレビューしたところ、写真映えもするし、しっくりくると三者からも好評価で採用されたとのことです。

この工程がすべてひとりのデザイナーの頭の中だけで進めていても、おそらくはこの例のような飛躍したアイデアを一発で出すというのは難しいでしょう。ステークホルダー全員が「正しい」という認識も、「誤っている」という認識も共有することが大事で、そのためにプロトタイプと検証をどんどんおこなっていくことがポイントであるということでした。
ちなみにユーザーへのレビューも頻繁におこなっていることについては奥野さんに直接聞いたところ、今回のプロジェクトでは身近に同じような属性の友人などがいるので、彼女たちにレビューしてもらったり、あとは専門のサービスをつかう、というような話をきけました。

こうした「共有」というのは私自身ももっているテーマで「未完成でもいいから頻繁にレビューをする」ことの重要さは普段の業務でも実感しています。それは今回の話にあるように、自分の思い込みと、相手の認識とのズレを確認するというのもあるのですが、相手に向けて自分が口に出して説明しているときに閃きがあるということも多々あります。制作環境は今回のイベントで紹介されたようなツールなどで効率化されていきますが、人対人の頻繁なコミュニケーションが重要ですね。

ツクルバでもチームとしてはデザイナー、エンジニアでの距離は近く、またすぐとなりにセールスチームもいるのでアイデアやプロトタイプで意見をもらえる環境です。一番お客様に近いところ彼らの視点には色々と気付きがあり、日々学ぶことも多いです。

まとめ

CreativeSyncテクノロジーが大きなテーマだった本イベントですが、それに上手くのっかれば、シームレスなコミュニケーション、ワークフローの実現につながり、少し離れていたAdobeプロダクトも使ってみたいなとおもえる内容でした。

今の一番の期待は、プロトタイピングツールのProject Commetですね。来年上半期には…という話があったので、楽しみにしています。

Adobeさん、登壇者、参加者のみなさんおつかれさまでした。


ツクルバでは、新しいメンバーを募集中!
興味のある方、ぜひお気軽にご応募下さい!