03// 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. //05
 

武蔵野日記帳

トレインビジョンの再現や、作り方の紹介、鉄道音の収録をしています...

トレインビジョン再現の裏話 【フォント編】 

2014/3/12 23:10 この記事は元々「TOQビジョン再現の裏話」というタイトルでしたが、「TOQビジョンは東急車の左画面の広告映像を放映するものだ」とのご意見を頂いたため、タイトルを変更しております。

昨日投稿した「【自動放送】飯能→元町・中華街【相直運転】」について、コメント上で色々とご質問を頂いたので、ブログ側で「裏話」としてまとめて書いておこうかなと思います。

※多くの方から「どうやって作ったのか」という質問を受けましたので、具体的な作り方を以下の記事で紹介しております。フォント等のことではなく、作り方が気になる方は、以下の記事を参考にしてください。

トレインビジョン再現方法(作り方) 【画像編】
→少し難しいかもしれません…。

トレインビジョン再現方法(作り方) 【映像編】
→既に画像は製作済みという方にお勧めです。





使用したフォントについて

作成するにあたって、事前にこのフォント集を購入しておきました。
IMG_9673-2.jpg
「ほぼ同等」になりますが、HelveticaやFrutigerといった欲しかったフォントが入っていて、しかも3000円程度と、非常に安価です。買って損はないと思います。
※管理人はフォントには詳しくないので、具体的なところを聞かれてもあまり答えられませんが…。。


ちなみに「Helvetica」はトレインビジョンの英語表示の他、駅名標の英語表記など、鉄道業界の至るところで使用されているフォントです。
このフォントとほぼ同等とされる「Swiss721」が、このフォント集に収録されています。

Windows標準(?)のArialというフォントと非常に似ているのですが、微妙に違ったりします。
font1.png
この違い、気付きますでしょうか。。


そして、Futuraというフォントは、東急電鉄等の番線案内表示で使われる他、太字が東京メトロ、都営地下鉄の駅ナンバリングで使用されています。
font2.png

最後に、Frutigerというフォントは、JR線の番線案内表示で使われているフォントですね。長い間探していましたが、ようやく発見しました(笑)画像は「ほぼ同等」とされる「Humanist777」です。
font3.png
これの太字が、東急電鉄の駅ナンバリングのものと思われます。
東急電鉄で使用されている駅ナンバリングのフォントは「Myriad」とのことです。rpさんに教えていただきました!


今後こうしたフォントを使いたい方は、上記のフォント集を購入してみては如何でしょうか?
日本語フォントは「さ」の3画目、「き」の4画目が離れているので、おそらくモリサワ「新ゴ」と思われますが、今回は「メイリオ」で代用させていただきました。
日本語フォントは「TBUDフォント」ではないかとのご指摘をいただきました!


では、使用したソフトと、ちょっとした作り方のようなものを。
当方はAviUtlという動画編集ソフトを使用して作りました。
AviUtl…無料の動画編集ソフト DLはこちら
※フリーソフトとしては非常に高機能ですが、慣れるまで時間がかかるのと、少し扱いづらいところがあります。
display1.jpg
このデータは複数のパーツを重ねて表示して出来上がっています。右の画面の青いものが、それぞれ画像、文字パーツなんですが、ものすごく気持ち悪いことになっています(笑)
文字の切り替わりは、「各辺を伸縮させる」エフェクトを使用しました。このエフェクトの開発者さつき氏と、AviUtlの開発者KENくん氏には、この場を借りて深くお礼申し上げます。

パーツたち
display2.jpg
文字は編集ソフト側で表示させているので、パーツにはありません。
要望が多ければ再検討しますが、基本的にこのパーツの公開…はしない予定(申し訳ありません!)です。でも実際、作るのはそんなに難しくないです。副都心線内のメトロロゴ(種別の下にうっすらと入っています)は結構大変でしたが、それでも1時間かかってないので、是非作ってみてください!ちなみに、Paint.NETだけで作れますよ!
Paint.NET…無料の画像編集ソフト DLはこちら





●おまけ●
東横線内特急の小手指行、「次は菊名」の次駅放送です。
この英語放送は「This train will merge and continue traveling as the Limited Express on the Toyoko Line to Kotesashi.」となっていて「東横線直通 小手指行」と訳されるのではないかと問題視されています。







うまく再生できない場合はコチラ



閲覧ありがとうございました!長文、乱文失礼します
関連記事
mixiチェック
ブログランキング・にほんブログ村へ←ランキングに参加しています。

カテゴリ: トレインビジョン

page top

コメント

No title

はじめまして
僕もこのようなTOQビジョンを再現したいんですけど、
どうすればいいんですか?
具体的な作り方を順番に教えていただけませんか?
お願いします!

kana #OhX/IMBs | URL
2013/04/03 11:56 [edit]

No title

追加
必要な画像を保存して作成すればいいんですか?

kana #OhX/IMBs | URL
2013/04/03 12:29 [edit]

No title

僕実際にTOQビジョンの特急保谷行きが作りたいんです。

kana #OhX/IMBs | URL
2013/04/03 14:47 [edit]

No title

追加文

あとどういうふうに作成するのか最初から順番により詳しく教えて下さい
お願いします

kana #OhX/IMBs | URL
2013/04/03 18:00 [edit]

No title

>>Kanaさん
お返事遅くなりました。申し訳ありません。

「百聞は一見にしかず」とも言いますが、言葉で説明すると、どうしても分かりにくいんですよね…。1年後くらいに、ニコ生などで実際にご説明できたらな、とは思っているのですが…

とりあえず、まずはアニメーションをしない編成のものを再現し、切替りで使う全ての画像を作ってみてはいかがですか?管理人も最初は全ての画像を作り、それを交互に表示させていましたので…。

MusashinoDream #n4waDJkM | URL
2013/04/07 22:41 [edit]

No title

駅名表示が切り替わるときのあの表示って
どのプラグインで適応できますか?

かいとん #- | URL
2013/04/13 16:41 [edit]

No title

>>かいとんさん
コメントありがとうございます。
AviUtl、さつき氏のプラグインを使用します。導入方法・使用方法を説明すると長くなりそうですので、以下URLを参考に導入して頂ければと思います。
http://dic.nicovideo.jp/u/2787743#script
もし導入できないようでしたら、再度コメントください。
※以下、2013年6月3日書き換え
内容に一部誤りがありました!訂正させていただきました。


なお「各辺を伸縮させる」エフェクトの値は、以下のようにすると良いです。
駅名が現れるとき…左辺・右辺中心:-50%、上辺・下辺中心:­100%、左辺・右辺:0%→100%(直線移動)、上辺・下辺­:100%(移動無し)、オブジェクト表示時間0.5秒
駅名が消えるとき…左辺・右辺中心:50%、上辺・下辺中心:1­00%、左辺・右辺:100%→0%(直線移動)、上辺・下辺:­100%(移動無し)、オブジェクト表示時間0.5秒
この2つのオブジェクトの間には、通常表示のオブジェクトを挟ん­であげてください。そうすると、現れる→居座る→消える の流れができます。※○辺中心は「設定」ボタン内で設定できます­。

MusashinoDream #n4waDJkM | URL
2013/04/13 23:57 [edit]

はじめまして。
さつき氏のプラグインの導入法がいまいちよくわかりません。
できれば教えてください、お願いします

Keikyu600 #- | URL
2013/05/30 16:42 [edit]

>>Keikyu600さん
はじめまして。コメントありがとうございます。

「AviUtl」と「拡張編集プラグイン」はインストール出来ていますか?
今日は時間がないので、お返事いただいたあと、詳しくご説明しようと思います。
上記2つがインストール出来ている場合は、こちらの説明は割愛します。なお、出来ていない場合でも、簡易的な説明になってしまうことをご承知おきください。

返信、お待ちしています。

MusashinoDream #n4waDJkM | URL
2013/06/03 03:11 [edit]

Aviutlと拡張編集プラグインはインストールできてます。

Kekyu600 #- | URL
2013/06/03 17:45 [edit]

>>Kekyu600さん
お返事ありがとうございます。

http://dic.nicovideo.jp/u/2787743#script
上記リンクから「スクリプト一式」をダウンロードしてください。
※6月4日現在、「スクリプト一式」の最新版は[script_20130310.zip]のようです。

ダウンロードしたファイルを解凍し、拡張編集をインストールしたフォルダ(基本的にはAviUtlの実行ファイルのあるフォルダ)に Script という名前でフォルダを作成してください。
この Script という名前のフォルダに、さきほど解凍したフォルダ内の.anmファイルや.objファイルを入れてください。

これでAviUtlを起動すると、スクリプトが追加されます。
なお、「各辺を伸縮させる」エフェクトは、アニメーション効果の中にあります。

無事にインストールできることを祈っております。

MusashinoDream #n4waDJkM | URL
2013/06/04 00:39 [edit]

無事に導入できました!!! 本当にありがとうございます!!!

これで私もなにかのLCDの再現をしてみようと思います。

Kekyu600 #- | URL
2013/06/04 17:05 [edit]

>>Kekyu600さん
無事にインストールできたようで何よりです。

お互い頑張って行きましょう。

MusashinoDream #n4waDJkM | URL
2013/06/04 18:18 [edit]

質問なのですがLCD作成で使ったパーツはPaint.NETで全て作成したのですか?

もし違うツールを使っているならできれば教えて欲しいです。
あとできれば作り方のコツみたいのもお願いします。

質問ばかりですいません。

Express223 #- | URL
2013/06/08 20:38 [edit]

>>Express223さん
はじめまして。コメントありがとうございます。

この再現動画で使用している画像は、全てPaint.NETで作成しています。
ですが、Gimpというフリーソフトを入れておくと良いかもしれません。自分の場合、Paint.NETで作れないような画像はGimpを使って製作していますが、まぁトレインビジョンの再現でしたら、Gimpを使う必要もないと思います。

なお、Illustratorの代用として、Inkscapeを入れてみるのもお勧めです。ただ、こちらはベクター画像なので、トレインビジョン再現動画で使うのには不向きですね。


製作のコツもいろいろあり、その全てをお伝えしたいのですが、いかんせん文字じゃ説明しずらいんですよね…。
今回は頑張って3点ほど紹介してみます。分かりにくかったらご愛嬌ということで…

①各パーツの背景は透明に
作成する画像の背景は透明にします。Ctrl+Aで全て選択した後、Deleteで内部が削除され、透明になります。

②「真っ白」は使わない
RGB(255,255,255)を使うと、急に「レプリカ」感がでます。極力使わないようにすると、それだけで実物感がでます。

③"影"はプラグイン導入で補う!
以下のプラグインを導入するとよいです。
http://akabeko.me/blog/2009/11/paint-net-%E3%81%AB%E3%82%88%E3%82%8B%E5%BD%B1%E4%BB%98%E3%81%91/
トレインビジョンでは、実に様々なところで"影"が使用されています。ですが、Paint.NETでは、影についての機能がほとんどありません。このプラグインを導入することで、影を自在に操ることが出来ます。


長文、乱文 失礼しました。参考になれば幸いです。

MusashinoDream #n4waDJkM | URL
2013/06/09 00:08 [edit]

ありがとうございます!!。
参考にします

Express223 #- | URL
2013/06/09 06:25 [edit]

なんとなくトレインビジョンで検索してやってきました。
こんなに動画が作られているとは知らなくて、見ていて面白かったです。

モリサワの新ゴは10000円で買える「Pack For Vista」という
7書体パック内に3ウエイトが入っていて非常にお得に入手できます。
OpenTypeではなくTrueTypeフォントという違いがありますが、
ほとんどの人には問題ないかと思います。
他の方の動画で新ゴが使われているものは大抵これのようです。

M+FONTSというフリーフォントも、かなの形状が若干独特ですが
7つの太さがあるモダンゴシックで品質も高いので、
手持ちでいいフォントがない方にはかなり有用と思ってます。

この動画はメイリオなんですね。編集がとても秀逸なせいか
あんまりメイリオ臭というかWindows臭がしなくて、
それらしく見えるのでびっくりしました。

ppp #mQop/nM. | URL
2013/07/31 02:38 [edit]

>>pppさん
返信遅くなりました。
動画の視聴ならびにコメントありがとうございます。

そんなバリュープランもあったのですね。学生なので「Student Pack」でライセンス購入しようかと思っていましたが「Pack for Vista」の方がお得ですね。ありがとうございます。

M+は、かつて他の方にご指摘をいただいてから、プライベートでパンフレット製作やWEBサイトデザインをする際に使っています。Windows標準フォントですと、1番細いウェイトでもメイリオぐらいの太さになってしまうので、M+はかなり重宝しています。

この動画はメイリオですが、以降の動画(の一部)では、実物同様の「TBUDゴシック」を使用しています。30,000円で2ウェイト購入しました。なので、より実物感が出てるんじゃないかなーと思っています。特に埼京線の快速の動画は、かなり細部までこだわって製作しましたので、お勧めです。

今後も温かく見守っていただけたら幸いです。

MusashinoDream #n4waDJkM | URL
2013/08/04 03:10 [edit]

お久しぶりです
今改めてTOQビジョンを作ろうとしてるんですが、やっぱりやり方がむずいです。
あのお願いなんですが、快速急行の画像の作り方だけ教えてくれませんか?
これをヒントにしたいので……

よろしくお願いします

kana #sheKOnpw | URL
2013/08/11 18:54 [edit]

>>kanaさん
ご無沙汰しております。

こちらの記事はどうでしょうか?
http://musashinonikkityo.blog6.fc2.com/blog-entry-891.html
埼京線のトレインビジョンではありますが、途中まで製作経過を載せています。
途中までなので、ちょっと不親切かも…とは思っているのですが、これより先の説明は難しいというか、どちらかというと感覚で作っているので…。

現在私はトレインビジョン再現活動を休止しているのですが、活動再開後、こうしたデータを配布することも検討しています。ですので、もし可能でしたら、活動再開までしばらくの間待っていただければと思います。

MusashinoDream #n4waDJkM | URL
2013/08/13 01:20 [edit]

Twitterではお世話になっています。
TBUDゴシックはモリサワパスポートに搭載されています。
学生ならアカデミック版で4年で24000円ぐらいです。
学生ならばまだ手の届きやすい価格なのではないでしょうか。

Oshiage'SKYTREE' #- | URL
2014/05/01 07:48 [edit]

>>Oshiage'SKYTREE'さん
お世話になっております。ご無沙汰です。
モリサワパスポートのアカデミック版も良いですが、ライセンスが4年間なのが少し面倒かな、と思いまして。なのでフォントは、単体で永久ライセンスのものを購入しています。
ですが今後アカデミック版のモリパスも購入したいなと思っています。

P.S.個人的にはAdobeのアカデミック版を購入したいです(笑)

MusashinoDream #n4waDJkM | URL
2014/05/02 23:35 [edit]

page top

コメントの投稿

Secret

page top

トラックバック

トラックバックURL
→http://musashinonikkityo.blog6.fc2.com/tb.php/863-ce7ab21e
この記事にトラックバックする(FC2ブログユーザー)

page top

武蔵野日記帳へようこそ!

Twitter

WEBサイト「武蔵野の部屋」

リンク

最新記事

最新コメント

カテゴリ

検索