TVアニメ公式サイト作ってるうぇっぶでざいなーのサイト制作環境2015年まとめ
実はお仕事はアニメの公式サイトを作っております。
毎年作業環境をメモしておいたら後から見返した時面白いかも、と思ったのでメモしておこうと思います。
テクニカルな情報は何もありません。ただのメモです。
最近作ったサイト
とりあえず10月アニメだけ並べてみます。
1クールごとにだいたい1〜3作品だけど10月作品だけなぜか多いです。ありがたやありがたや。
- TVアニメ「進撃!巨人中学校」公式サイト
- TVアニメ『俺がお嬢様学校に「庶民サンプル」としてゲッツされた件』公式サイト
- TVアニメ「ワンパンマン」公式サイト
- 「牙狼-紅蓮ノ月-」GAROアニメシリーズ第2弾!
- アニメ「ゆるゆり」スペシャルサイト
前置き:サイト制作の規模とか
だいたい一人で作る
TVアニメの公式サイトは実際に稼働している期間が短く(放送前〜パッケージ販売開始までで9ヶ月〜12ヶ月くらいが多い)、規模も小さいことから少人数で作ることが多いです。弊社も基本的には一人で作りますが、スケジュールや用途に応じてデザインを他の方にお願いすることもあります。
環境やライブラリは気に入ったら変更しちゃう
一人で作り、長期間維持することもほとんどないので、環境は結構気軽に変更してしまいます。
CSSなら今までCompassを使っていたのをBourbonに変えたり、Lightbox系ならColorboxを使っていたのをMagnificPopupにころっと変えたりします。
世間の流行にはあんまり左右されない
ぶっちゃけ普通にHTML書くだけなので、世間で流行の Node.jsや React、AngularJSを使うことはまずありません。個人的趣味で FuelPHP使ってアイカツカード管理作ったり、GoogleAppsScriptでAPI作って Ingressのポータル申請管理システム作ったりしますが、仕事でそういうことは一切やりません。
そんなわけでこの記事にテクニカルな情報を求めても何も得られないと思います。
制作環境:アプリケーション
OSX El Capitan
10月頃からMacに乗り換えました。
MS-DOS3.3cからずっとMicrosoftだったのですが、昨今の開発環境はMac(Linux)主導なものが多く、ついに乗り換えてしまいました。
PhotoshopCC、IllustratorCC
Photoshopでの画像切り出しは今までスライス機能を使っていたのですが、画像アセットの存在を知ってから切り出し効率が笑ってしまうほど便利になりました。
Brackets
これまで色々なHTMLエディタを試したのですが「へてむるクリエイター」以上の物が見付けられず10年以上使い続けていました。それがAdobe Bracketsに出会ってからあっさりと乗り換えてしまいました。
導入が簡単で、便利なプラグインの存在があり、プラグイン自体も自分で作れることに惚れ込みました。
- Emmet
- HTML Wrapper
- Quick Insert
上記3つは、これがないと作業が出来ないと思える程の便利プラグインです。
ちなみに「Quick Insert」は僕自身が自作したプラグインです。
https://github.com/sygnas/Brackets-quick-insert
しかし僕以外は使ってない気がします。自分のために作ったので問題ありませんがw
SublimeText
CSS、JavaScript、PHPの編集に使っています。
Bracketsは便利なのですがマルチウィンドウが出来ないのが難点です。その点SublimeTextはタブの切り離しや結合が簡単に行えるのでサブのエディタとして便利に使っています。
Gulp
SASSコンパイル、画像最適化、JavaScript文法チェック、差分抽出に使っています。
ちなみにWindowsで制作していた頃はSASSコンパイルに「Koala」、画像最適化に「OPTPiX PRO」を使っていました。
SourceTree / Bitbucket
バックアップ・バージョン管理に使っています。無料でプライベートリポジトリが使えるのがいいですね。
Suitcase Fusion 6
作業内容によって使用するフォントを切り替えるのに使っています。 フォントをDropboxに置いておいたり、GoogleFontsから呼び出せるのが便利です。
YummyFTP
ショートカットキーが好みだったので。
Adobe EdgeInspectCC
スマホの動作確認に。
arRsync
作業データのローカルバックアップ。
ライブラリとかフレームワークとか色々
Bourbon
CSSフレームワークというとBootstrapが有名ですが、あれは「便利な設定がたくさん用意されてる」ものなので、逆に言うと「使わないものがたくさんある」わけです。Bourbonは全部自分で組み上げていく必要があるので自分色に染めやすくて好きです。
あとアニメーションに強いです。
qiita.com www.monster-dive.com
Responsify
レスポンシブ対応ページで画像を背景に敷くと「画面を小さくしたら顔が隠れちゃった!」とかいうことがよくあります。このスクリプトを使うと「絶対に表示させておきたいエリア」が指定できるので大変重宝します。
最近久保ユリカ公式サイトで使いました。
jQuery SygResizePos
こちらもレスポンシブ関係。公開されたものではなく自分用に作りました。
「背景画像をリサイズしたらボタンが顔の位置にきちゃった!」という問題を解消するものです。基準サイズとなるエレメントと、それに応じて可変させるプロパティを指定できます。
牙狼〜紅蓮ノ月〜で使ってます。
GoogleFonts
欧文のWebフォントはここがあればだいたいなんとかなります。ワンパンマンでもOswaldとか使ってます。
源真ゴシック
AdobeとGoogleが開発したフォント「源ノ角ゴシック」をベースに改良したフォトです。必要な文字だけ取り出したサブセットでWebフォントを作って使っています。
ワンパンマンで超絶重宝しました。
あおぞら明朝
IPA明朝をベースにウェイトのバリエーションを作ったフォントです。機械的に太らせているので実用的なのはRegular〜Boldがギリギリという感じではありますが。
牙狼〜紅蓮ノ月〜で大変重宝しています。
あんまり難しいことはやってない
というわけで特にひねりもなく有名なものを使ってる感じです。