おためし受講中

Webデザイン実践 触ってもらえる動くページ制作手法〜実演編〜

人は動くものに目を奪われると言う事を前半では学びました。後半は、サイトに着地した瞬間にインタラクションを発動させる上での注意点と技術について学んで行きます。
1.動かすタイミングが大事(ロードされた時は動きが終わっているor動く前にスクロールしてしまった、或いは遷移してしまった)
2.衝撃的な動きは人を惹きつけるが2度目の訪問はない!
3.心地よい動きに会いたくて、また来てしまうビジター
4.動くデザインがすなわちWeb

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:14  (00:13 ~ )
    背景動画のいろんな手法を見てみよう
    01:43  (01:27 ~ )
    背景動画に使われている技術
    02:56  (03:10 ~ )
    液晶のような効果
    01:29  (06:06 ~ )
    色を変える手法
    01:32  (07:35 ~ )
    グリーン色に変える手法
    03:41  (09:07 ~ )
    再生速度を上げる手法
    03:42  (12:48 ~ )
    【後半】質疑応答
    Q:動画の上に一色の塗りつぶしであればbackground-colorでrgba指定で被せるやり方でもできるのでしょうか?
    01:24  (17:04 ~ )
    Q:画像を半透明にする場合、透明度50%に一度設定してから動画素材によって調整するのがよいでしょうか?
    01:27  (18:28 ~ )
    Q:いくつくらいの大きさを用意すればスマホでも綺麗に見えますでしょうか?
    01:30  (19:55 ~ )
    Q:動画の上に文字を載せた部分にしたのは、どうやったんですか?
    08:11  (21:25 ~ )
    Q:エフェクトなどをかけたようなページというのは、やはり動作が遅くなるのでしょうか?
    03:27  (29:36 ~ )
    Q:サイトを一日2000程チェックして良いサイトを見つける手法で、田中先生はどうやって検索してサイトを探しているのでしょうか?
    05:52  (33:03 ~ )
    Q:田中先生が作業しているcodengsampleは提供されますか?
    00:59  (38:55 ~ )
    Q:田中先生がご利用になられている画像圧縮のwebサービスなどあれば教えて下さい。
      (39:54 ~ )