DIST.15 「アニメーションで差を付ける演出とデザイン」に参加してきたメモ

本日のお題

• メインセッション
  • マルチデバイス時代を生き残る演出術
  • インターフェイスとアニメーション
  • 文字とアニメーションの幸せな関係
• LT
  • 実例で学ぶSSアニメーション
  • 細かすぎて気づかないアニメーションクイズ大会
  • アセットのローディング、どうしてます？

実例で学ぶSSアニメーション

• 登壇者

  • デザイナー
  • 竹本 大樹氏

• transformについて

  1. 認知補助
     • ボタンクリックのダイアログ
       • 上から下にアニメーション
       • ボタンに紐付ける
       • ユーザに忘れないようなアニメーション
  2. つなぎ
     • ページを表示〜画像が表示までをアニメーションでつなぐ
       • 読み込みの間ユーザを暇させない
  3. ただの演出
     • 本当にただの演出
     • 印象のため（インパクトや賑やかに）
• CSSアニメーションだけで作っているわけではない
  • JavaScriptでタイミングを制御など

細かすぎて気づかないアニメーションクイズ大会

• 登壇者
  • 株式会社ICS
  • 蔵下 まさゆき氏

アセットのローディング、どうしてます？

• 登壇者

  • 株式会社ピクセルグリッド
  • 小山田 晃弘氏

• スピナー

  • ロードしてるが、いつおわんの？
• Preload.jsとか
• 一つの解決策がzip
  • ファイルヘッダ1つ
  • xhr2でロード進行度も取れる
  • httpでいける
  • ziploader.jsが良いよ！
    • npmで持ってこれる

マルチデバイス時代を生き残る演出術

• 登壇者

  • 株式会社バスキュール
  • 肩パッド/桟 義雄氏

• いい加減な方が、クオリティが上がる

• アニメーションの価値
  • コンテンツの価値 > クオリティ
  • 感情を揺さぶるコンテンツの価値としてのアニメーション
  • それは価値を生み出す演出か？
  • 価値を上げない演出は今すぐポイ
• 80点を簡単に取る
  • クオリティと時間の関係
    • 基礎やれば60点はすぐいく
    • 70点: ease out, expo
    • 80点: 根性
    • 90点: センス、おしゃれ、世界観
    • 100点: 美学の追求
  • 費用対効果
    • 限られた時間内でもっとも効果の上がることする
    • 90点以上の演出は求められてない（過剰）
  • アニメーション
    • アルファ
    • position
    • rotation
    • マスク
  • イージングexpoだけを使う
    • 食べ終わったすき家のカレーの皿
    • expoが鉄板
    • quintはオシャレ属性高め
    • bounceは「ダッサ」とツイートされる
  • とりあえずカッコいいことする
  • 演出よりもAPI
    • APIを叩く量と演出のクオリティは反比例
• 自分がもっとも価値を上げられる場所とは？

インターフェイスとアニメーション

• 登壇者

  • ハイジ・インターフェイス株式会社
  • 千田 泰士氏

• インターフェイスの定義

• アニメーションをインターフェイスに組み込む
  • リッチな表現
  • 多くの情報を伝える
  • 注意を引く
  • ※全てアニメーションに意味と役割をもたせる
• インターフェイス
  • デベロップメント、デザインから
  • アニメーションで枠を広げられる

文字とアニメーションの幸せな関係

• 登壇者

  • dot by dot inc.
  • 衣袋 宏輝氏

• Lyric speaderを作った

• モーション制作
  • リリックビデオ（専門家にまずビデオコンテを作ってもらった）
  • プログラマはそれを組み込む
  • 英語と日本語ではアニメーションを変える
  • 英語はもちろん単語で区切ってアニメーションをする
• イージング
  • 美しさを表現するもの
  • ease in outtttttttみたいなイメージw
  • cwasingだけで印象はだいぶ変わる