WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

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だけで印象はだいぶ変わる