-
Notifications
You must be signed in to change notification settings - Fork 0
/
covidinfo.html
207 lines (193 loc) · 12.2 KB
/
covidinfo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>covidinfo</title>
<link rel="stylesheet" type="text/css" href="css/clipdetail.css">
<link rel="stylesheet" type="text/css" href="css/menu_dark.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300">
<!--BOOT_STRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<!--menu-->
<div id="global-nav">
<div class="inner">
<ul class="global-list">
<li class="global-item"><a href="./#top">Top</a></li>
<li class="global-item"><a href="clips.html">Clips</a></li>
<li class="global-item"><a href="3dcg.html">3DCG</a></li>
<li class="global-item"><a href="games.html">Games</a></li>
<li class="global-item"><a href="webs.html">Websites</a></li>
</ul>
</div>
</div>
</header>
<main>
<div id="works" class="works">
<div class="workSpace">
<div class="mx-auto" style="width: auto;">
<!--01-->
<div class="txttitle">
<p>INFOMATION OF COVID-19</p>
</div>
<!--01video-->
<div class="workelement">
<a>
<div class="vidArea">
<div class="move-wrap">
<iframe width="1152" height="648" src="https://www.youtube.com/embed/h0nkLZdKuP0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</a>
</div>
<!--01frameShots-->
<div class="frameshot">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-xl-4">
<img src="img/covid_thumbnail1.png" class="img-fluid" id="PicOne">
</div>
<div class="col-sm-12 col-md-4 col-xl-4">
<img src="img/covid_thumnbnail2.png" class="img-fluid" id="PicTwo">
</div>
<div class="col-sm-12 col-md-4 col-xl-4">
<img src="img/covid_thunbnail3.png" class="img-fluid" id="PicThree">
</div>
</div>
</div>
</div>
<!--01context-->
<div class="container">
<div class="workcontext">
<a>
<div class="txtArea">
<p class="txttitle">詳細</p>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">コンセプト:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
インフォグラフィックの動画化。
<br>
主に2021年7月時点での情報を視覚的にわかりやすくまとめる。
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">ターゲット:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
2021年7月時点において新型コロナウイルスに対して関心のある人。
<br>
情報を文字のみでなく図やグラフを用いて接種したい人。
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">公開場所:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
大学の課題として制作したため、なし。
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">趣旨:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
大学の課題の一環で制作した。
<br>
主に情報を図やイラストにまとめて提示するインフォグラフィックの概念を動画に落とし込むという試みで行った。
また、モーショングラフィックやキネティックタイポグラフィを併用することで視覚的に楽しさを取り入れ、
試聴する人が苦にならずに情報を取り入れられることを念頭に制作した。
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">こだわり:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
本動画では、動画よりもインフォグラフィックの考えを重要視して制作したため、
絵コンテを制作する際に、シーン毎に情報を効率よく読み取り理解できる配置作りを何よりも大事に制作した。
同時に、動画に落とし込んだ際のメリットとして音や動的な表現等が挙げられるが、
それらをどのタイミングでどういった感じで使用するかというのに注意を払った。
<br>
演出面では、シーンがいくつも存在するためそれらの繋ぎを考えるのに時間を費やした。
特に2番目から3番目のシーンに移動する時などは、地図をドット絵風で統一することにより違和感を削減し、
見てて心地の良い動画作りを心がけた。
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 col-xl-3">
<p class="txtsubtitle">音楽:</p>
</div>
<div class="col-12 col-md-9 col-xl-9">
<p class="txtcontext">
"CREATIVE MINDS" by Benjamin Tissot
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!--ページ遷移ボタン-->
<div id="page_button">
<div class="container">
<div class="row">
<div class="col-12 clearfix">
<div class="float-left test-box">
<a href="hologram.html" class="btn btn-border">BACK</a>
</div>
<div class="float-right test-box">
<a href="logoanime.html" class="btn btn-border">NEXT</a>
</div>
</div>
</div>
</div>
</div>
<div id="about" class="about">
<div class="copyright">
<p>
©︎ 2021 Toshitake Suzuki
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<!--スティッキーヘッダー-->
<script>
var navPos = $( '#global-nav' ).offset().top; // グローバルメニューの位置
var navHeight = $( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
$( window ).on( 'scroll', function() {
if ( $( this ).scrollTop() > navPos ) {
$( 'body' ).css( 'padding-top', navHeight );
$( '#global-nav' ).addClass( 'm_fixed' );
} else {
$( 'body' ).css( 'padding-top', 0 );
$( '#global-nav' ).removeClass( 'm_fixed' );
}
});
</script>
</body>
</html>