出演者・セッション

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コードレシピ集』(技術評論社)がある。


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

CSS Nite in Kobe, vol.45 協賛

CSS Nite 全国共通協賛

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

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