Hatena::Groupmediaforcelabs

ラボ広報担当の備忘録

メディアフォースラボ広報担当の滝川陽一です。技術関連ブックマーク、広報などなど書いていきます。
 | 

2010-06-01

まさに才能の無駄遣い!? 電子の歌姫の音色に彩りを添える「VOCALOID-PV」  ~2010/05/25の社内メールマガジン編集後記から~

| 17:22

 前回アニメ主題歌がオリコンチャート1位を獲得した話をお伝えしましたが、今週はなんとVOCALOIDの楽曲集がランキング1位を獲得したとの事。さすがにどうなっちゃったんですかね、日本(笑)?


初音ミクCD、週間ランキングでも初のオリコン1位に - ITmedia NEWS


 という訳で性懲りも無くVOCALOIDのお話。突然ですが「マッシュアップ」という言葉をご存知ですか?元々は二つ以上の異なる曲を組み合わせて新しい楽曲を作る事を指しますが、最近は広域の意味で、既存のWebサービスを組み合わせて新しいサービスを作ることなんかを指したりもします。Webのおかげでマッシュアップがより行い易くなっている傾向もあるようです。


 VOCALOIDでもこの動きは活発で、楽曲のアレンジやマッシュアップ、以前紹介した「歌ってみた」のように、元々あった楽曲(動画)にユーザー同士が付加価値を加えていく動きが、ニコニコ動画を中心に頻繁に見られます。


 今回紹介するのはVOCALOID楽曲に対して「プロモーションビデオ(PV)」を付けた動画。手書きイラストや3DCG、中には文字(フォント)をアニメーションに仕上げたりと、元々の楽曲に新しい価値を加えています。作曲者自らPVを作成する場合もありますが、殆どは楽曲公開後に別の人が後から映像を付けた動画が大体主流のようです。最近はPV専門の職人も存在するようです。


【初音ミク】*ハロー、プラネット。【アニメーションPV】 by ブラザー VOCALOID/動画 - ニコニコ動画

 


The 9th / 初音ミク 【PV】 by ミートボールP VOCALOID/動画 - ニコニコ動画

 

【初音ミク】バイビーベイビーサヨウナラ【アニメPV】 by エジエレキ VOCALOID/動画 - ニコニコ動画

 


【オリジナル曲PV】WORLD’S END UMBRELLA【初音ミク】 by ハチ VOCALOID/動画 - ニコニコ動画

 


【巡音ルカ】ダブルラリアットに合わせてチャーハンつくるよ!【炒飯】 by とりから 音楽/動画 - ニコニコ動画

 


【初音ミク】Nebula【VOCALOID3DPV】 by tripshots VOCALOID/動画 - ニコニコ動画

 


舎利禮文(しゃりらいもん)【初音ミク×M@STER_fonts Pv】 by az (機能美p) VOCALOID/動画 - ニコニコ動画

 


【第4回MMD杯本選】Chaining Intention【PV】 by @まさたか VOCALOID/動画 - ニコニコ動画

 


【オリジナル曲PV】結ンデ開イテ羅刹ト骸【初音ミク】 by ハチ VOCALOID/動画 - ニコニコ動画

 


【初音ミク】VOiCE【3DPVっぽい何か】 by ニョホホ エンターテイメント/動画 - ニコニコ動画

 


【PV完全版】 初音ミクの消失 -DEAD END- 【MotionGraphics】 by kakeru VOCALOID/動画 - ニコニコ動画

 


【初音ミク】よっこらせっくす【鏡音リン・レン】 by アゴアニキ VOCALOID/動画 - ニコニコ動画

 


 わーっと人気の動画(どれも10万再生以上)の中から、実写顔負けのCG映像から手書きの素朴なイラストから作ったようなものまで、泣ける、笑える、格好良い、気持ち悪い、様々な動画を用意してみました。これらは全て素人の作品なんですが、中にはテレビで紹介されたりと、再生回数が100万回を超えるものもあります。プロ顔負けのハイレベルな作品ばかりですが、普段の仕事や学業の余暇だけでこれだけのものが作れるのは本当に凄いですね。もし興味があるのでしたら、ちょっと暇なときに再生数を頼りに探してみると、意外と面白い掘り出し物があるかもしれませんよ。


 …べ、別に今回は時間が無かったからリンクを大量に貼って誤魔化した、とか、そ、そんなんじゃないですからねっ!!



  

トピック解説「CSS3」

| 17:01

 CSSとは、「Cascading Style Sheets」の略で、Webページのレイアウトを定義する規格を指します。


 スタイルシートは、Webページの色や幅、高さ、線の色や太さ、使用するフォントなどを指定する為に用いられます。Webページを構成する主要素であるHTMLでも同様の指定を行う事が可能ですが、どうしても一要素ずつ個別に指定する必要がある為、デザインの大幅変更などの際に大量に書き換えが必要でした。ところがCSSであれば、Webページの複数個所を一括で指定・変更する事が可能となり、デザインの設定や変更を非常に簡単に行うことができるようになるのです。また、CSSの指定はHTMLとは別ファイルに切り出すことが可能で、別のサイトを開発する際に簡単に転用する事が出来るようになります。


 CSSの仕様は、HTML同様にWorld Wide Web Consortium(W3C)で標準化が行われています。

 CSSの初期版である「CSS1」は1996年に勧告され、フォントや色、背景、テキスト、ボックスのプロパティなどが策定されました。

 続いて1998年にCSS1の上位互換にあたる「CSS2」が勧告されました。この変更で、モニターやTV、紙媒体などの表示媒体によって自動的にスタイルシートを変更できるようになりました。またそれに伴って、音声ブラウザへの対応や印刷媒体への対応も可能となっています。

 最後に2004年に直近のバージョンである「CSS2.1」が勧告されました。こちらはCSS2のマイナーバージョンアップで、あまり使用されていない機能やプロパティが削除された程度の変更にとどまっています。


 現在、HTML5と並んで注目されている「CSS3」は、現行のCSS2.1をメジャーバージョンアップしたもので機能も大幅に強化されています。例えば、枠線に画像の連続を使用する、枠を角丸にするといった、従来であれば複雑なテーブル組みでしか実現できなかったレイアウトが、CSSの指定だけでいとも簡単に実現できるようになります。グラデーションや曲線、テキストのドロップシャドウ(影付き)、画面部品の透過や回転といったことも扱えるようになり、簡単な図形やロゴであればCSSのみで描画できるようになるのも特徴です。Webサイト開発に必要とされる工数が大幅に削減され、一方でデザイン経験の乏しいデベロッパーであっても比較的デザインの領域にタッチし易いと、非常に期待が持たれている技術要素です。


 CSS3の現状ですが、HTML5とは異なり、仕様自体はほぼ固まりつつあるものの、HTML5同様にブラウザ間で対応状況に差がかなりあります。IE8は現時点で全くと言って良いほど対応していませんし、逆にChrome4やFirefox3.6はほぼ全ての機能が対応完了しています。Operaのようにグラデーションの対応がまだだったり、Mobile Safariのように曲線描画が十分では無かったりとまだばらつきがある状況で、CSS3を心配事無く全面的に採用するにはまだもう少し時間が掛かりそうです。


 以下はHTMLとCSS3で描画された図形が紹介されたサイトです。画像でなくてもここまでのことがCSS3のみで実現できますが、複雑な図形であれば相応の工数が必要になる為、画像とどちらを選択するかは、状況に応じて判断する必要があるでしょう。


Rather Splendid | The Personal Weblog of Jaime

[CSS]CSS3で何ができるの? という時にみておきたいサイト集 | コリス

画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

BrunaBruna2012/02/18 08:54To think, I was confused a mnitue ago.

pzhaovsjozjpzhaovsjozj2012/02/19 17:48Awyga3 <a href="http://ecraxiiwbezj.com/">ecraxiiwbezj</a>

yogyrvjfjyogyrvjfj2012/02/19 23:381yef9q , [url=http://btmarjqqevpx.com/]btmarjqqevpx[/url], [link=http://mefoawrqxlrc.com/]mefoawrqxlrc[/link], http://htabvgubtuji.com/

ravqpfsbgkgravqpfsbgkg2012/02/24 03:368X7G7l <a href="http://yqvgekegomob.com/">yqvgekegomob</a>

 |