【cloudpack デ部会】動きで魅せろ！！プロトタイプでクライアントを惹きつけるWeb制作実践！〜Adobe Animate、Adobe XD、prott編〜

cloudpackのデザイナー主催の、webデザイン業界にいる皆さんとふんわり交流したり勉強する会

イベントの説明

cloudpackのデザイナー発信のイベント「cloudpack デ部会」、第1回開催！

cloudpack デ部会とは？

cloudpackのデザイナー主催の、webデザイン業界にいる皆さんとふんわり交流したり勉強する会です。

2015年10月にインフラ構築と受託開発を主軸としてきた会社が、新部門として立ち上げたデザインセクションは、デザインで「なんだかわからないけど、なんとなくオールハッピー」を目指し、あわよくばお金儲けを目指して活動をしています。楽しいだけじゃなくてもしかしたらお金になる！かもしれない！そんな勉強会やイベントを企画していきますので、ぜひぜひふんわり参加してください！

イベントの内容

第一回のテーマは、「動きで魅せろ！！プロトタイプでクライアントを惹きつけるWeb制作実践！〜Adobe Animate、Adobe XD、prott編〜」。

パララックス、スクロールエフェクト、スライドショー… Webサイトでの表現が多様化し、非常にインタラクティブで動きのある楽しいデザインがどんどん可能になってきました。

でも、これらの「動き」のデザインをクライアントにどう提案しますか？

文章や口頭ではなかなか伝えることが難しいこれらのデザインを、より魅力的にクライアントに提案するためにはどんなツールが使えるでしょうか。 今回はAdobe Flashの後継であるAdobe Animateを使ったモックアップの制作・提案の流れと、 今注目のプロトタイピングツールであるAdobe XDやProttを使った実装の概要をお伝えします。

講義内容

勉強会 前半

・ノンプログラマー必見！AnimateのトゥイーンといくつかのActionscriptで、簡単なスライドショーやアニメーションの「動くカンプ」を作る方法
・html5 canvasに書き出して、「動くデザインパーツ」をチームで共有する方法
Animateの前身であるFlashを作っていたことのある人にはおなじみの「トゥイーン」「Actionscript」ですが、これを使えば誰でも簡単にWeb上で動くアニメーションを作れます。 そして、これらを活用すれば「javascript？jQuery？なにそれ？」というノンプログラマーやデザイナーでも、コーディングせずともクライアントに動く状態のデザインを提案することができます。 前半では、実際に画面上でAdobe Animateを動かしてみながら、ボタンやスライドショーのアニメーションを作る流れとプレビューする方法、そしてそれらを実装時に便利に活用する方法についてお教えします。

勉強会 後半

・今話題のプロトタイピングツール徹底比較
・どう使う？XD／Prottの実例紹介とそこから見る活用方法
Adobe MAXでも注目されていたAdobe XDなど数々のプロトタイピングツールが登場している昨今ですが、実際の使い方や活用方法についてはまだ検討段階という人も多いのではないでしょうか？ ただワイヤーフレームを作って提案するだけではもったいない！プロトタイピングツールを使った魅せる提案方法とこれからの活用の仕方についてお教えします。

タイムテーブル

受付 19:00
オープニング デ部会について 19:30
勉強会(前半) 19:40
休憩 20:10
勉強会(後半) 20:20
質疑応答 20:50
懇親会 21:00
撤収 21:30

--

cloudpackのデザイナー/ディレクター/フロントエンドエンジニアも参加しますので、もっと深く知りたいこと、こっそり聞いてみたいことなどがあれば、お気軽にお声がけください！

こんな方にぜひ

• 動的なデザインを制作・実装するWebデザイナーやフロントエンジニア
• クライアントにデザイン提案をするWebディレクター

もちろん、デザイナー以外の方も大歓迎です！