web制作の効率を高めてくれると思う5つのツール

Pocket
[`evernote` not found]

web制作を行なっている人の多くが納期やら急な対応やらに追われてギリギリ状態であると思います。
(それが楽しくてやってる部分も多いんですが)
「クオリティを保ったまま、楽をしたい」というのは誰もが思う事じゃないでしょうか。
僕も日々制作をする中で、できるだけ楽をしたいと思っています。
今日は、実際に制作を行なう中で使っているツールをご紹介します。

1.リネームツール

もはや手放せません。特定の命名規則に基づいてファイル名を変換してくれるツール。
会社ではwinなので「Flexible Renamer」を使っています。
Flexible Renamerは、とても高性能で「文字列+連番」とか「大文字→小文字」といった変換や「頭から◯文字を削除」といった事もできるので、提供画像が「画像1.JPG」みたいにどうしようもない場合でも一発で変換できてしまいます。

インターフェースが少しマニアックなのが玉に瑕ですけど・・・慣れれば平気です。

2.クリップボード拡張ツール

コーディングをしている時に、よく使う文字列や使いまわす文字列などをクリップボードに入れておきコマンド一つで呼び出せるようになります。これも鉄板です。
win環境では「clibor」を使っています。
cliborは、過去24個の履歴と「定型文」として事前に登録しておいた文字列を呼び出せます。

3.zen-cording

言わずと知れたコーディング補助機能です。それほどゴリゴリとHTMLを書かないのですが、

<ul class="hoge">
     <li class="list01"><a href="#"></a></li>
     <li class="list02"><a href="#"></a></li>
     <li class="list03"><a href="#"></a></li>
     <li class="list04"><a href="#"></a></li>
     <li class="list05"><a href="#"></a></li>
     <li class="list06"><a href="#"></a></li>
     <li class="list07"><a href="#"></a></li>
     <li class="list08"><a href="#"></a></li>
     <li class="list09"><a href="#"></a></li>
</ul>

こんなのを書く時にコピペを多用して書いてもいいんですが、zen-cordingなら
ul.hoge>li.list0$*9>a
とたった一行でかけてしまいます。常にzen-cordingで書くという訳ではありませんが、
上記のようなルーチン的な構造の場合は使うようにしています。

4.css spriteジェネレータ

初めて使ったときはまさに青天の霹靂でした。
web制作をする際には、できるだけspriteにして画像をまとめるようにしています。
以前は、デザインから切り出し→パーツをphotoshopでsprite画像にまとめる→cssを全て自分で書く
という完全手作業で行なっていたんですが(慣れてたので割と早く作れたと思っていますが・・・)
ジェネレータを使えば切り出し以後の処理を自動で行なってくれます。
僕は、Stitches An HTML5 sprite sheet generatorというサービスを使っていますが、生成されたsprite画像とcssをダウンロードして画像は、状況に応じてjpgに変換、cssはクラス名のみ手作業で書き換えて使っています。
正確には全自動ではないのですが、かなり作業効率が上がりましたし、この作業を行なうときの「さてやるぞ」という気合いも不要でsprite画像の処理ができるようになったのはとても大きいです!

5.SNSをオフにする精神力

実はこれが一番大切なのかもしれません。そして、残念ながら僕は持ち合わせておりませんorz

これが全てではありませんが、なるべく効率的に作業を行って、限られた時間を有効に使いたいものですね。皆さんが使ってるツールなどあれば、ぜひ教えてください!

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。