出演者・セッション
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コードレシピ集』(技術評論社)がある。