ウェブ屋さんとして日々WordPressを触りながら仕事をしてるのですが、そんななかで昨年度よくお世話になった、そしてこれからもお世話になるであろうツールやウェブサービスなどを簡単な説明付きで紹介してみようかと思います。

ツール(Mac専用の物もあります)

Adobe CS(有料:月5000円〜)

定番中の定番ですね。

非常に高価なソフトですが,サブスクリプション(年間契約とかで利用権を買うタイプ)の登場以降だいぶ購入のハードルが下がった気がします。月5000円からで最新のCSアプリケーションが利用できますが,定期的に支払い状況をオンラインでチェックするので,タイミングが悪いとネットに繋がるまで起動すら出来なかったりもします。

自宅ではもともとサブスクリプション版を使ってましたが,そのままCreativeCloudにアップグレードしてCS6を使ってます。でも会社では会社にあるCS3を利用しています。新機能が便利すぎて会社で不便なこともありますが,おおむねCS3でもなんとかなったり。欲を言えばせめてCS4以上は欲しかったんですけど…

主に使用するのはPhotoshopとIllustrator,たまにFireworksってかんじです。以前はDreamweaverも使ってましたが,今はSublime Text2がその役目を担ってます。

Sublime Text2 (有料:$70)

マルチプラットフォームの高性能なエディタ。これなしじゃもう仕事できないくらい依存してます。
これ使い始めてからほとんどDreamweaver起動しなくなりました。
プラグインで自分好みにカスタマイズできるのでとても自分のスタイルに馴染ませやすいです。

シェアウェアでちょっと高めですが、特に機能制限も日数制限もなく試用することができますので、いろいろ使い込んでみて、気に入ったら購入するのがいいかと思います。

Transmit(有料:¥2,950)

Mac用のFTPクライアント。見た目もとても綺麗ですが非常に高機能なうえ動作も軽いのでお気に入りです。
ブックマークごとにお気に入りフォルダの設定ができるため、特定のフォルダを頻繁に更新する場合や、WordPressの場合はテーマフォルダが比較的深い階層にあるためそこまで一気に移動できるのでとても便利です。

サーバーを跨いだファイルコピーやサーバーのフォルダをディスクとしてマウントする機能など、ちょっと変わった機能もついてます。

無料試用期間あり。

ImageOptim(無料)

画像圧縮ツール。画質を落とさずにファイルサイズを小さく出来ます。便利。

ImageAlpha(無料)

こっちも画像圧縮ツール。驚いたことに透過PNGをこいつにくぐらせるとIE6でも透過部分が黒くならないようです。(多少画像が乱れたりするみたいですが)

Evernote(無料〜)

忘れたくない内容は全部Evernote行き。各種アプリの連携機能はもちろん,ウェブクリッパーからメール投稿まで利用して兎に角全部放り込んでいます。ネット環境があればどこからでも読み出せるので便利です。

そろそろプレミアムにしてもいいかもしれないと思い始めてますが,まだギリ転送量が足りてるので悩んでるところ。

Photoshopエクステンションとかスクリプトとか

GuideGuide(無料)

Photoshopでガイドをびしーっと引くためのエクステンション。
上下左右に端から20ピクセルのところにガイドを引くとかはもちろんのこと、カンバスを3分割するガイドを引くとか、50ピクセルごとにガイドを引くみたいなことも数字入れてクリックするだけでやってくれる超便利なツール…なのですが、職場のPhotoshopはCS3で、こいつはCS5以上(古いバージョンだとCS4でも動くらしい)なので、自宅でたまーにしか使えていないのが残念なところ。

Distribute Layer Spacing HorizontalDistribute Layer Spacing Vertical(どっちも無料)

モックアップとか作るときに、ナビゲーションを均等に配置したい時とかに非常に役に立つスクリプトです。
メニューからクリック1つで長さの異なる要素でも均等に配置してくれます。

ウェブサービス

adobe kuler

アドビが提供する配色ツール。作ったパレットはPhotoshopのスウォッチとかで使える形式でダウンロード出来る他、アドビIDがあれば配色を保存したり、kuler上で共有したりできます。

ScriptSrc.net

GoogleがホスティングしてるjQueryとかprototypeの本体スクリプトをクリックひとつでクリップボードにコピーできるサイト。この記事書いている時点でjQuery、jQuery UI、ChromeFrame、swfobject、mootools、YUI、ExtJS、prototype、script.aculo.us、dojoに対応

jsFiddle

オンラインでJavaScriptとかCSSをささっと書いてテストできるサービス。主要なJSフレームワークはデフォルトで用意されてるので一覧から選ぶだけで取り込める。jsdo.itに似てるかも。

自分はブログ上で動作デモを含めたJSのコードを貼るときとかスにペットのカンぺみたいな感じで使ってます。

TinyPNG

ツール編で書いたImageAlphaのウェブサービス番みたいなやつ。枚数がすくない時はこれ使っちゃうことも多いです。

Placehold.jp

国産のダミーイメージ生成サービス。Placehokd.itが日本からだと認証しなくちゃ使えなくなっちゃったので最近はこちらがメイン。といっても直リンクで呼び出すより生成したPNGをダウンロードして使うことが多いのですが。それでも非常に便利で助かってます。

{placekitten}

こちらは海外のダミーイメージ生成サービスなんですが、単色塗りつぶしじゃなくて、サイズに応じて様々な仔猫画像が表示されます。URLの指定方法の違いでモノクロとカラーが選べます。ダミーでコーディングしてる時に癒されたい方はこちら。笑。

日本語 Lorem ipsum

Lorem ipsumとは、英語の有名なダミーテキストです。本当はプロトタイプも本番原稿で作るのがいいのですが、そうでないときはLorem Ipsumのようなダミーテキストを使うのですが、日本語と英語では改行のされ方が違ったりします。なので日本語で適当に文章をいれておくのですが、「ああああああああああ」とかは論外ですので、そういう時に使います。

数クリックするだけで、

するとゴーシュが一五日すぎの狸のゴーシュへ鼠のときへ夜までくっていたます。「それをやり直しと。」「トロメライ、ゴーシュかっか。」楽長もゴーシュがついてとけてきなた。

みたいな適当な文章を作ってくれます。

Dirty Markup

圧縮されたJSやCSSをもう一度人が読みやすい形に整形してくれるサービス。圧縮してあるスクリプトしかないときにそれを編集できるように元に戻したり、あとは圧縮版しか無いスクリプトを解析して勉強したい時なんかにも使えます。

ajaxload.info

ajax読み込みとかで利用する読込中のくるくる画像を生成できるサービス。
デザインと色を選択することで自分好みの読み込み画像を生成できます。

WebWait

指定したサイトを何度か読み込んで、読み込むのにかかった時間の平均を出してくれます。
読み込み速度命!な時とかに。

IcoMoon App

たくさんあるアイコンの中から好きなアイコンを選んでアイコン用ウェブフォントを作ってくれるサービス。
自分が必要なアイコンだけを集められるのでフォントを軽量化出来るだけじゃなく、
リガチャ(合字)にも対応していて、1文字1アイコンじゃなく1単語に1アイコンを割り当てることもできるので使い方によってはかなり便利かも。

※アイコンパックごとにライセンスが異なりますので複数のアイコンパックから選択してフォントを作る場合は注意して下さい。

Pocket(無料)

所謂あとで読むサービスの1つ。以前はRead it Laterというもっと直球な名前だった。読みかけの記事やあとで読み返そっかな?って思ったらとりあえず放り込んで,あとで読み直してこれは残そうと思えばEvernoteに改めてクリップしなおしたりもします。

この手のサービスは広告や記事を読むだけなら不要なヘッダーやフッター,サイトのロゴ画像とかまで隠してしまって記事だけを読むのに集中できるようになっているため,こうすればクリップするときにも不要なものが入らなくなるから便利というメリットもあります。

まぁ不要な部分を消してからEvernoteにクリップするだけならば,EvernoteにもClearlyってのもあるんですけどね。ただ,一度クッションを挟むことで本当にクリップスべきなのか判断できる…というのはポイントかも?

 ブックマークレット

VIEWPORT RESIZER

簡単にレスポンシブの動作テストができるブックマークレット。
ブックマークバーとかに入れておいて、クリックすることで起動します。
画面上部にスマホやタブレットのアイコンが出てくるのでそれを押すことで各デバイスでの見え方をテストできるってわけですね。

因みにこれ、メディアクエリ書くときにでデバイス幅で指定(max-device-widthとか)してる場合は動作しません。対策としては、device-widthじゃなくて、widthを使う(max-widthで指定)ことで回避出来ます。

どうしてもdevice-widthでやりたい場合は、Chromeの場合はデベロッパーツールの右下にある歯車ボタンを押して、「Overrides」から「Device metrics」にチェックを入れればテスト出来ます。
ユーザーエージェントでごにょごにょしてる場合は同様に「UserAgent」にチェックすればUAを偽装してチェックすることもできます。

主にIE6でテストしなくちゃいけないときにお世話になります。

MRI

起動すると出てくる入力エリアにセレクタを入力するとその部分をハイライトしてくれるブックマークレット。

XRAY

こっちは逆に、起動してから特定の要素をクリックすると、その要素の情報を表示してくれるブックマークレット。デベロッパーツールの虫眼鏡みたいな感じ?

Firebug Lite

Firefoxで有名なデバッグツールのFirebugをブックマークレットにしたもの。多少機能制限はありますがだいたいのことはできます。すごい。

よく見るブックマークサイト

WordPress Codex(日本語版)とWordPress Codex(英語版)

WordPressの公式ドキュメント。とりあえずここ読めばどういうタグが使えてそれがどういう動きをするものなのかが分かります。日本語のほうは日本のコミュニティがみんなで翻訳しているので情報が少し遅れて更新されますので、最新版に追加された新機能なんかは英語版を読んで調べなくちゃならないのですが、例文が豊富なのでGoogle翻訳を駆使していけば結構なんとかなったりします。

WordPress私的マニュアル

 本家Codexより若干噛み砕いてある感じで読みやすいのでまずはこっちで調べることが多いです。それでもわからない場合はCodexをみて、そこにもないときはフォーラムや英語版Codexを見るという感じで調べながらいつもテーマをいじったりしてます。

その他検索したりした結果最終的にたどり着くことがおおいサイト

大体こんな感じでしょうか。
他にもよく使うChromeエクステンションとかもいっぱいあるんですが,長くなってきたのでそれはまた改めて記事にします。(ネタをとっておくとも言う)
ではまた。

コメントする