chevron_left

Webデザイン実践
PREMIUM
第7回

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

2015年5月23日 40min
Webデザイン実践 触ってもらえる動くページ制作手法〜サイト例〜 play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 20

授業の概要

サイトに着地した時そのサイトが静止したままであれば、それは紙と変わりありません。
人は動く物に目を奪われます。ファーストビューに動く物を配置しましょう。
すると、人はその動く物を触ろうとします。
そんな人を惹きつける動くデザインの制作手法を学びます。

前半は触ってもらえる優れたWebサイト例を見ていきます。
後半では前半で見てきた、インタラクションの実現方法を学んで行きます。

こんな人にオススメ

インタラクションデザインを習得したい人、DTPデザイナーからWebデザイナーに移行したい人

担当の先生／パーソナリティ

チャプター

play_arrow
自己紹介＆アジェンダ
04:04
play_arrow
動くサイト人気の推移 2010~2013年あたり　カルーセル大人気
02:45
play_arrow
2012年～2014年あたり　パララックス大人気
03:22
play_arrow
仕掛けで驚かせるサイトは、しばらくすると変更されてしまう事が多い
01:16
play_arrow
2013年～(ロード安定してきたのは2014年～) 全面動画大人気
08:06
play_arrow
サイトの動かす手法
04:54
play_arrow
Video + css のサンプルをハンズオンしてみよう！
05:35
play_arrow
Ｑ：YouTubeやニコニコ動画など外部サイトの埋め込みコードを使用して設定する事もできますか？
01:11
play_arrow
Ｑ：スマホとかでも背景動画は有効でしょうか？
00:53
play_arrow
Ｑ：preloadは書いた方がいいですか？サーバーに負荷などかかりますか？
01:00
play_arrow
Ｑ：ブラウザによる見え方の違いはありますか？
00:21
play_arrow
Ｑ：スマホで動画を見た場合、重くなるのでしょうか？
00:20
play_arrow
Ｑ：背景動画でブラウザやバージョンなどによって動画が遅くなったりするものもありますか？