ダダめも

思いついたことをまとめる

TVアニメ公式サイト作ってるうぇっぶでざいなーのサイト制作環境2015年まとめ

実はお仕事はアニメの公式サイトを作っております。
毎年作業環境をメモしておいたら後から見返した時面白いかも、と思ったのでメモしておこうと思います。

テクニカルな情報は何もありません。ただのメモです。

最近作ったサイト

とりあえず10月アニメだけ並べてみます。
1クールごとにだいたい1〜3作品だけど10月作品だけなぜか多いです。ありがたやありがたや。

前置き:サイト制作の規模とか

だいたい一人で作る

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だったのですが、昨今の開発環境はMacLinux)主導なものが多く、ついに乗り換えてしまいました。

PhotoshopCC、IllustratorCC

Photoshopでの画像切り出しは今までスライス機能を使っていたのですが、画像アセットの存在を知ってから切り出し効率が笑ってしまうほど便利になりました。

www.dtp-transit.jp

Brackets

これまで色々なHTMLエディタを試したのですが「へてむるクリエイター」以上の物が見付けられず10年以上使い続けていました。それがAdobe Bracketsに出会ってからあっさりと乗り換えてしまいました。

導入が簡単で、便利なプラグインの存在があり、プラグイン自体も自分で作れることに惚れ込みました。

  • Emmet
  • HTML Wrapper
  • Quick Insert

上記3つは、これがないと作業が出来ないと思える程の便利プラグインです。

ちなみに「Quick Insert」は僕自身が自作したプラグインです。
https://github.com/sygnas/Brackets-quick-insert

しかし僕以外は使ってない気がします。自分のために作ったので問題ありませんがw

SublimeText

CSSJavaScriptPHPの編集に使っています。

Bracketsは便利なのですがマルチウィンドウが出来ないのが難点です。その点SublimeTextはタブの切り離しや結合が簡単に行えるのでサブのエディタとして便利に使っています。

Gulp

SASSコンパイル、画像最適化、JavaScript文法チェック、差分抽出に使っています。

qiita.com

ちなみにWindowsで制作していた頃はSASSコンパイルに「Koala」、画像最適化に「OPTPiX PRO」を使っていました。

SourceTree / Bitbucket

バックアップ・バージョン管理に使っています。無料でプライベートリポジトリが使えるのがいいですね。

webbingstudio.com

Suitcase Fusion 6

作業内容によって使用するフォントを切り替えるのに使っています。 フォントをDropboxに置いておいたり、GoogleFontsから呼び出せるのが便利です。

YummyFTP

ショートカットキーが好みだったので。

Adobe EdgeInspectCC

スマホの動作確認に。

arRsync

作業データのローカルバックアップ。

ライブラリとかフレームワークとか色々

Bourbon

CSSフレームワークというとBootstrapが有名ですが、あれは「便利な設定がたくさん用意されてる」ものなので、逆に言うと「使わないものがたくさんある」わけです。Bourbonは全部自分で組み上げていく必要があるので自分色に染めやすくて好きです。

あとアニメーションに強いです。

qiita.com www.monster-dive.com

Responsify

レスポンシブ対応ページで画像を背景に敷くと「画面を小さくしたら顔が隠れちゃった!」とかいうことがよくあります。このスクリプトを使うと「絶対に表示させておきたいエリア」が指定できるので大変重宝します。

最近久保ユリカ公式サイトで使いました。

ResponsifyJS – A jquery plugin that makes images truly responsive, without sacrificing anyone's face.

jQuery SygResizePos

こちらもレスポンシブ関係。公開されたものではなく自分用に作りました。

「背景画像をリサイズしたらボタンが顔の位置にきちゃった!」という問題を解消するものです。基準サイズとなるエレメントと、それに応じて可変させるプロパティを指定できます。

牙狼〜紅蓮ノ月〜で使ってます。

GoogleFonts

欧文のWebフォントはここがあればだいたいなんとかなります。ワンパンマンでもOswaldとか使ってます。

源真ゴシック

AdobeGoogleが開発したフォント「源ノ角ゴシック」をベースに改良したフォトです。必要な文字だけ取り出したサブセットでWebフォントを作って使っています。

ワンパンマンで超絶重宝しました。

jikasei.me qiita.com

あおぞら明朝

IPA明朝をベースにウェイトのバリエーションを作ったフォントです。機械的に太らせているので実用的なのはRegular〜Boldがギリギリという感じではありますが。

牙狼〜紅蓮ノ月〜で大変重宝しています。

blueskis.wktk.so

あんまり難しいことはやってない

というわけで特にひねりもなく有名なものを使ってる感じです。