CSS Nite in Kobe, vol.45 開催概要

タイトル

Adobe XDの自動アニメーションで作るプロトタイプと
現場で活用できるマイクロインタラクションの作り方

開催日時・会場

2019年8月24日(土)13:15〜17:45
起業プラザひょうご セミナールーム(三宮)


内容


本年 2月にCSS Nite 大阪版で企画された「UI/UX マイクロインタラクション」
申込み開始後数日で満席になりキャンセル待ちが多数という状態に。急遽 4月に再演版が企画されましたが、それでも参加できなかった人が多くいらっしゃいました。
ということで、神戸版では今話題のAdobe XDを加え、進化した内容で開催します。

Adobe XDの自動アニメーション機能を使うと、いとも簡単にマイクロインタラクションのプロトタイプが制作できます。第一部は、XDのアニメーション機能にフォーカスした機能紹介と、使いどころ、メリット・デメリットなどを解説します。

XDで簡単に「動き」を作ることができたとしても、それはあくまでもプロトタイプ。そのまま本番に使えるわけではありません。

第二部では「現場で活用できるマイクロインタラクションの作り方」と題し、デザインとHTMLコーディングの両方の側面から、マイクロインタラクションの考え方・作り方を解説します。また、XD以外のツールでのモーション制作方法も紹介します。


タイムテーブル

12:45〜開場・受付開始
13:15〜オープニング
13:25〜Adobe XDの自動アニメーションで作るプロトタイプ:松下 絵梨(90分)
14:55〜休憩(15分)
15:10〜現場で活用できるマイクロインタラクションの作り方:池田 泰延(100分)
16:50〜休憩(15分)
17:05〜質問タイム&おふたりまとめトーク(30分)
17:35〜エンディング・次回お知らせ
17:45終了
18:00〜19:30懇親会

出演者・セッション

Adobe XDの自動アニメーションで作るプロトタイプ

Adobe XDは、ワイヤーフレーム・デザイン・プロトタイプを効率よく制作し共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXツールです。

今までのデザインカンプでは、画面遷移やモーションのニュアンスは伝えることができず、クライアントやチーム内でコンセンサスを取るのが困難でしたが、XDを用いたプロトタイプはモーションの表現を確認しコミュニケーションをとることができます。

今回は、XDの自動アニメーション機能にフォーカスした内容を中心に、モーション制作の流れや、現場ですぐに使えるテクニックやノウハウを、デモを中心にお伝えします。

松下 絵梨(まつした・えり) ツキアカリ

京都造形芸術大学 非常勤講師
デジタルハリウッド大阪校 主幹講師
コンピュータ専門学校HAL 非常勤講師

大阪の ウェブ/DTPデザイナー ・講師。通信機器メーカーで開発・サポート業務に従事したのち、DTPデザイン・ 広報秘書業務に転身。 デジタルハリウッドでウェブを学び、2010年よりフリーランスとして独立。

ロゴや印刷物のデザイン、ウェブデザイン、ウェブディレクションのほか、最近ではセミナー活動・登壇にも力を入れている。「CSS Nite in Osaka」、「Adobe XD ユーザーグループ大阪」、「ツキアカリ Meet-up」主宰。

現場で活用できるマイクロインタラクションの作り方

マイクロインタラクションとは、ボタンタップ時やページ遷移時などのユーザーのアクションに対し、小気味よい演出を与えることです。マイクロインタラクションをウェブサイトに加えることで、使いやすさの向上につながります。
最近のウェブ制作の現場では、そんなマイクロインタラクションの必要性が高まってきています。

しかし、制作のための手法はあまり知られていません。デザイナーはどうやってモーションを制作するのか、エンジニアはどのようなコードで実現するのか、困ったことのある方も多いのではないでしょうか。

このセッションでは、デザインとHTMLコーディングの両方の側面から、マイクロインタラクションの考え方・作り方を解説します。

池田 泰延 (いけだ・やすのぶ) ICS

株式会社ICS 代表
筑波大学 非常勤講師

和歌山県生まれ。ウェブ制作会社でFlash制作の経験を積んだ後、フリーランスを経て、株式会社ICSを立ち上げる。

フロントエンドのテクニカルディレクターとして、WebGLを駆使したモーショングラフィックスとユーザーインターフェースの開発を主に担当する。

今までに執筆した書籍は13本。 近著に『JavaScriptコードレシピ集』(技術評論社)がある。


参加費とお申し込み

セミナー申込み6,500円 税込(早割:7月31日まで)
7,500円 税込(8月1日以降) ※事前決済のみ。
※空席がある場合のみ、当日参加(会場支払い:8,000円)可能です。
vol.43(7月20日開催)とセット割 10,000円 税込
懇親会申込み1,500円 税込(税込)
※セミナー申込み時に懇親会参加/不参加を選択してください

vol.43とセット割


7月20日開催の vol.43 「ウェブページを高速化してユーザーに価値を届けたい」制作者のためのセミナー&ワークショップにも参加される方は、セット割で(vol.43:7,000円 +vol.45 6,500円 = 13,500円 のところ 3,500円 OFFの) 10,000円でご参加いただけます。セット割のお申込みは vol.43の開催日前日の7月19日(金)までです。

※vol.43/45 両方おなじ人が参加してください。人が入れ替わる場合は、割引適応になりません。


  1. 下記のフォームに必要事項を入力し送信してください。
    (スマホでご覧の方で入力がしずらい方は、直接こちらのフォームに移って入力お願いします。)
  2. 追って、セミナー参加費(+懇親会参加費)請求メールが届きます。
    (もし、申込みから24時間以上経っても届かない場合は、 info@cssnite-kobe.jp 宛にご連絡ください)
  3. 5営業日以内にご指定の方法でお支払いください
    5営業日を過ぎてもお支払いが確認できない場合はキャンセルとさせていただきます。
  4. 入金確認メールが届きます。
  5. 前日(または前々日)にリマインドメールが届きます。注意事項などをご確認ください。
  6. 当日受付にて申込時のお名前をお伝えください。


キャンセルの場合


キャンセルの場合は、こちらのキャンセル申し出フォームに必要事項を入力し送信してください。

キャンセルの場合は、開催日の4日前(8月20日中)までにご連絡いただければ返金いたします。PayPalでお支払いの場合はPayPalを通じて返金処理をします。銀行振込でお支払いの場合は、振込手数料+返金手数料 500円を引いた額の返金とさせていただきます。予めご了承ください。

開催日の3日前(8月21日)から以降のキャンセルに関しては返金はありません。どなかた代わりに参加いただくようお願いいたします。
欠席の場合も、当日の資料やスライド、動画などを配信するフォローアップメールは送信いたします。(※キャンセルで返金した場合は、参加者リストから削除されますのでフォローアップメールは送信しません。)


懇親会(アフターパーティ)

CSS Nite in Kobe では、参加したみなさまの交流会的なものを開催します。
セッションのあとは懇親会。懇親会も含めてのCSS Nite in Kobeです☆
登壇者を囲んで本編で聞けなかった突っ込んだ質問などしてみましょう。


交流会会場起業プラザひょうご(※セミナー終了後同じ場所で行います)
時間終演後 18:00~19:30
参加費1,500円(税込)セミナー終了後同じ場所で、ピザやスナックとドリンクで登壇者を囲んでの交流会
※会場の規定で、アルコール類の飲み物の提供はありません。お茶やソフトドリンクのみですのであらかじめご了承ください。
※参加申込みの方には、セミナー受付時に領収書をお渡しします。
※セミナー申込み時に懇親会参加の選択をしてください
定員36名

協賛のお願い】イベントの主旨にご賛同いただき、CSS Nite in Kobe に協賛いただける企業・団体を募集しています。

CSS Nite in Kobe, vol.45 協賛

CSS Nite 全国共通協賛

CSS Nite 制作会社年間協賛企業

CSS Niteに年間協賛 制作会社の紹介(順不同)
※表示はゴールドスポンサー