vtuber.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <div id="block-vtuber">
  2. <section class="row sec sec01">
  3. <div class="container">
  4. <div class="row">
  5. <div class="col-md-6">
  6. <div class="txt-block">
  7. <h2>What is VTuber?<br>VTuber 101</h2>
  8. <p>全名為「Virtual YouTuber」簡稱為「Vtuber」,其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作,藉此讓動畫人物如真正的人一樣生動且真實。</p>
  9. </div>
  10. </div>
  11. <div class="col-md-6" style="position: relative;">
  12. <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
  13. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  14. </div>
  15. </div>
  16. </div>
  17. </section>
  18. <section class="row sec sec02">
  19. <div class="container">
  20. <div class="row">
  21. <div class="col-md-6">
  22. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  23. </div>
  24. <div class="col-md-6">
  25. <div class="txt-block">
  26. <h2>Top Vtuber</h2>
  27. <div class="owl-carousel project">
  28. <ul class="item rankblock">
  29. <li><span>No1.</span> Gawr Gura / がうる・ぐら</li>
  30. <li><span>No2.</span> Inugami Korone / 戌神ころね</li>
  31. <li><span>No3.</span> Usada Pekora / 兎田ぺこら</li>
  32. </ul>
  33. <ul class="item rankblock">
  34. <li><span>No4.</span> Mori Calliope / もりかりおぺ</li>
  35. <li><span>No5.</span> Shirakami Fubuki / 白上フブキ</li>
  36. <li><span>No6.</span> Houshou Marine / 宝鐘マリン</li>
  37. </ul>
  38. <ul class="item rankblock">
  39. <li><span>No7.</span> Kiryu Coco / 桐生ココ</li>
  40. <li><span>No8.</span> Watson Amelia / ワトソン・アメリア</li>
  41. <li><span>No9.</span> Minato Aqua / 湊あくあ</li>
  42. </ul>
  43. <ul class="item rankblock">
  44. <li><span>No10.</span> Uruha Rushi / 羽るしあ</li>
  45. </ul>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </section>
  52. <section class="row sec sec03">
  53. <div class="container">
  54. <h2>各國 VTuber</h2>
  55. <div class="row">
  56. <div class="col-md-12">
  57. <div class="v-tabs">
  58. <ul class="v-tabs-nav">
  59. <li><a href="#tab-1">日本</a></li>
  60. <li><a href="#tab-2">歐美</a></li>
  61. <li><a href="#tab-3">印尼</a></li>
  62. <li><a href="#tab-4">台灣</a></li>
  63. </ul>
  64. <div class="v-tabs-stage">
  65. <div id="tab-1">
  66. <div class="row">
  67. <div class="col-md-7">
  68. <div class="txt-block">
  69. <h2>Kizuna AI キズナアイ</h2>
  70. <p>絆愛(日語:キズナアイ;英語:Kizuna AI)是一個日本虛擬偶像、影音部落客,經營有YouTube頻道「A.I.Channel」和「A.I.Games」,也是公認的第一個虛擬YouTuber,頻道訂閱數超過400多萬。</p>
  71. </div>
  72. </div>
  73. <div class="col-md-5">
  74. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//6IjFyOQUPf8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  75. </div>
  76. </div>
  77. </div>
  78. <div id="tab-2">
  79. <div class="owl-carousel homepage">
  80. <div class="row item">
  81. <div class="col-md-7">
  82. <div class="txt-block">
  83. <h2>Ami Yamato</h2>
  84. <p>Ami Yamato是一位來自日本居住在倫敦的女性,影片以Vlog的形式呈現,紀錄她生活的點滴,影片中還經常有真人坐在她的旁邊並進行合作,或是與影星於電視劇中對談,充分融入現實的生活情景中。</p>
  85. </div>
  86. </div>
  87. <div class="col-md-5">
  88. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9tYxBQbkmCM?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  89. </div>
  90. </div>
  91. <div class="row item">
  92. <div class="col-md-7">
  93. <div class="txt-block">
  94. <h2>Miquela</h2>
  95. <p>來自洛杉磯,現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統,Lil Miquela總是跟上最新趨勢的時髦穿搭,齊瀏海、雀斑與雙包包頭的個性造型,吸引了超過百萬的全球追蹤者關注,自2016年在Instagram出道以來,已在全球累積超過160萬追蹤者。</p>
  96. </div>
  97. </div>
  98. <div class="col-md-5">
  99. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//rQkvFXDi8Ic?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div id="tab-3">
  105. <div class="row">
  106. <div class="col-md-7">
  107. <div class="txt-block">
  108. <h2>Hololive Vtuber 練習生</h2>
  109. <p>日本 Vtuber 公司 HoloLive,往全球開始拓展,HoloLive印尼第一期生相當成功,一期生有Airani Iofifteen, AyundaRisu, MoonaHoshinova ,因此也推出了二期生,在二期生當中,PavoliaReine, AnyaMelfissa 及 Kureiji Ollie,其中Kureiji Ollie已達74萬訂閱。</p>
  110. </div>
  111. </div>
  112. <div class="col-md-5">
  113. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  114. </div>
  115. </div>
  116. </div>
  117. <div id="tab-4">
  118. <div class="row">
  119. <div class="col-md-7">
  120. <div class="txt-block">
  121. <h2>台灣熱議 VTuber</h2>
  122. <p>台日混血的杏仁咪嚕,是Yahoo TV所屬的虛擬網紅,遊戲實況、翻唱及直播為主。璐洛洛、粉絲被稱為滷肉肉。設定為DPC研究團隊,開啟的Vtuber培育計畫所誕生的人造人,鳥羽樂奈、整體為貓頭鷹的形象,基調為綠色,米白色的頭髮帶有一點黃色挑染,香草奈若、整體為蠑螈帽子的形象,粉紅色的頭髮,會學國動、學甚麼像甚麼。悠白、設定為來自天空的雲之少女,整體為短髮,頭部帶著雲朵同心圓的金屬家徽,由於外觀因素常被戲稱為蚊香。</p>
  123. </div>
  124. </div>
  125. <div class="col-md-5">
  126. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </section>
  136. <section class="row sec sec04">
  137. <div class="container">
  138. <h2>特殊類型 VTuber</h2>
  139. <div class="row">
  140. <div class="col-md-12">
  141. <div class="d-tabs">
  142. <ul class="d-tabs-nav">
  143. <li><a href="#tab2-1">企業</a></li>
  144. <li><a href="#tab2-2">非人像</a></li>
  145. </ul>
  146. <div class="d-tabs-stage">
  147. <div id="tab2-1">
  148. <div class="row">
  149. <div class="col-md-7">
  150. <div class="txt-block">
  151. <h2>企業形象VTuber</h2>
  152. <p>各企業也紛紛推出VTuber,Netflix推出N子黑野明擔任宣傳大使,可以說英日兩種語言,並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯,樂敦製藥與三得利也皆推出VTuber,茨城縣則由VTuber擔任形象大使。</p>
  153. </div>
  154. </div>
  155. <div class="col-md-5">
  156. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//QIbinFBjJxA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  157. </div>
  158. </div>
  159. </div>
  160. <div id="tab2-2">
  161. <div class="row">
  162. <div class="col-md-7">
  163. <div class="txt-block">
  164. <h2>非人像玩偶VTuber</h2>
  165. <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty,在2018年正式出道,當起了 VTuber,由於 Hello Kitty本身的高人氣,一開台即吸引了上萬人訂閱,目前已有將近三十萬人訂閱。除此之外,花生君是另一特別 VTuber,是個外型特殊的花生,醜中帶可愛的外型,也吸引了十二萬訂閱數。</p>
  166. </div>
  167. </div>
  168. <div class="col-md-5">
  169. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </section>
  179. <section class="row sec sec06">
  180. <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec06-left">
  181. <img src="https://i.imgur.com/2932J5G.png" alt="" width="250px" class="sec06-right">
  182. <div class="container">
  183. <h2 class="grow_title">How to Promote Your VTuber Channel</h2>
  184. <p class="grow_txt">ChoozMo support Virtual YouTuber/Influencer digital marketing and fan growth strategy.<br>
  185. We have a powerful video marketing SEO solution for you.<br>Our ChoozMo AIGV, the new software
  186. service. It is driven by deep learning and other unique technology and<br>we can even custom virtual
  187. presenter to say anything! Any language!</p>
  188. <span class="grow_call">Optimize your VTuber Channel</span>
  189. <a class="grow_btn" href="https://docs.google.com/forms/d/e/1FAIpQLSfmkiBSQn5SZtZ3Wulq2O7D-XtYcf_9mlu35lrJp9Tq-mIa9Q/viewform">Grow Fans Now ! </a>
  190. <div class="sec06-icons">
  191. <img src="/img/Icon awesome-play.png" alt="" width="15">
  192. <img src="/img/Group 946.png" alt="" width="15">
  193. <img src="/img/Group 947.png" alt="" width="20">
  194. </div>
  195. </div>
  196. </section>
  197. <section class="row sec sec05">
  198. <div class="container">
  199. <h2>VTuber製作軟體</h2>
  200. <div class="row">
  201. <div class="col-md-12">
  202. <div class="m-tabs">
  203. <ul class="m-tabs-nav">
  204. <li><a href="#tab3-1">免費</a></li>
  205. <li><a href="#tab3-2">付費</a></li>
  206. </ul>
  207. <div class="m-tabs-stage">
  208. <div id="tab3-1">
  209. <div class="row">
  210. <div class="col-md-7">
  211. <div class="txt-block">
  212. <h2>VTuber免費製作軟體</h2>
  213. <p>現在Vtuber越來越多樣化,想要當Vtuber首先要有工具,這邊介紹3款免費製作VTuber的軟體,VTube Studio、它具有創新功能,例如將道具固定到你的模型以及更多功能,也可以與觀眾一起玩樂。wakaru是個簡單易用的Vtuber工具,你只有要webcam,或是利用手機鏡頭, 配合OBS使用,馬上就可以成為Vtuber!VTuber Maker 、是一款,專注於極簡即用的VTuber直播軟體,僅僅只需要一個攝像頭,就能免費、簡單使用的3D工具。這些工具幫助你、跨出Vtuber的第一步。</p>
  214. </div>
  215. </div>
  216. <div class="col-md-5">
  217. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//6JVBDIM7zac?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  218. </div>
  219. </div>
  220. </div>
  221. <div id="tab3-2">
  222. <div class="row">
  223. <div class="col-md-7">
  224. <div class="txt-block">
  225. <h2>VTuber付費製作軟體</h2>
  226. <p>付費的工具,讓你的角色更精緻。FaceRig、支持數字動作表情,語音調整,也可以訂自特殊角色。SUVA、支持數字觸發表情,如果沒有硬體、僅能追蹤頭部與眼睛。VDRAW 是一個可將你在電腦上所做的任何工作表達為虛擬角色活動,不僅可以做插畫,還可以做遊戲、3D建模、編程、DTM等。</p>
  227. </div>
  228. </div>
  229. <div class="col-md-5">
  230. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//47lmIQebSck?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </section>
  240. </div>