第11回　Webデザインの仕事で活用している厳選アプリ・ツール（1）

(X)HTML/CSS関連の記事が続きましたが、今回と次回の記事では私自身も仕事で活用している、なくてはならないアプリケーション・あると便利なツールを、オンラインツール・デスクトップアプリケーション問わずご紹介します。

今までいろいろなアプリケーション・ツールを試してきている中で、長く使っていて本当に便利だと感じたものかつ、仕事で実際に活用しているもののみを厳選しています。ぜひチェックしてみてください。

なお今回は、テキストエディタ・ブラウザなどの基本的なツールを中心に紹介していきます。

テキストエディタ

簡単な文書を書いたり、一時的なメモをするために気軽に立ち上げられるツールでもあり、HTMLやCSS・各種CMSのテンプレートなどを書くための必須ツールでもあります。

高価なオーサリングソフトを使わなくても、小規模なサイトのHTML/CSSであればこれだけで十分と思えるほどです。

skEdit（Mac）: FTPだけでなくSFTPでもサーバに直接アクセスできるエディタです（エディタだけでサーバにアップロードされているファイルを直接さわることができるため、FTPクライアントを別途必要としなくなります。ただし、サーバでバージョン管理をきちんと行っている環境であることが望ましいです⁠）⁠。タグ補完機能も優れています（HTML・CSS・JS・その他プログラミング言語やMovableTypeのテンプレートのタグも補完してくれます⁠）⁠。そのほか、さまざまなスニペットがあり、コーディング作業を効率化できます。環境設定で文字コード・改行コード・スペース/タブの利用などが設定できます。
mi（Mac）: skEditが環境設定で文字コード・改行コードを設定できるのに対して、個別のファイルごとに文字コード・改行コードを簡単に指定できるところが優れています。UTF-8のBOM検知や、保存時にBOMの有無を選択できる機能など、設定できる内容が豊富です。
秀丸エディタ（Windows）: 私自身全ての機能を使いこなせていませんが、長く多くの人に使われているエディタというだけあって機能が豊富なだけでなく軽快な動作で使いやすいです。

ブラウザ

ブラウザはWebデザイナーの仕事をする以上、あらゆる環境で動作チェック・レンダリングチェックを行わなければならないので必須です。

Firefox（Windows/Mac）: バージョン3になってより快適になりました。なんといっても、さまざまな機能を追加できるアドオンが豊富です。ただし、バージョン3では動作しないアドオンもあるため、プロファイルを分けて複数バージョンのFirefoxを共存させています。開発・デザイン用としてはメインブラウザになっています。
IE tester（Windows）: IE5.5/IE6/IE7/IE8 beta1の動作確認を一つのソフトでできるアプリケーションです。少々重たく感じられますが、一つのアプリケーションでこれだけのバージョンをカバーできるので重宝します。
Opera（Windows/Mac）: コピーしたURLを「貼り付けて移動」できるところがとても便利です。レンダリングも速いです。head要素内に含むlinkナビゲーションを表示することもできるところも良いですし、WiiやSmart Phoneのブラウザとしても使われているところも注目すべきところです。
Safari（Windows/Mac）: Macに最初から入っているブラウザなので、動作確認として必須環境なのはもちろんですが、ブラウザとしても速くて快適です。Firefoxのバージョンがあがり、Mac版Firefoxでも十分満足なのですが、SafariではMac OS X標準・ヒラギノファミリのフォントでボールド表示する際に、W6（ウエイトが太いフォント）でレンダリングされることで見た目の美しさの満足度が高まるため、プライベートではSafariがメインになっています。ただし、WindowsのSafariで閲覧すると、デフォルトでアンチエイリアスのかかったMSゴシックで表示されてしまうため違和感を覚えます。

ブラウザの古いバージョンを入手したい場合は、OLD Appsのようなアーカイブサイトを利用するのも一つの方法といえます。
※古いバージョンはセキュリティホールを含むものも多くあるものと思います。自己責任の範囲内でご利用ください。

ブラウザのブックマークレットから起動するツール

Mouseover DOM Inspector: Firefox以外のブラウザでもDOM解析を簡単に行うことができるツールです。このツールを起動してウェブページの任意の場所にマウスカーソルをあてると、あてた場所の要素名・幅・高さ・座標・親要素の名前・子要素の名前が一覧表示されます。特にCSSでボックスの幅と高さを知りたい場面などで重宝します。

Firefoxアドオン

アドオンは紹介しきれないほどたくさんの便利なものがありますが、ここでは「仕事で使っている」ものに絞り込んでみました。

Firebug: 閲覧中のHTML/CSS/JavaScriptを解析・リアルタイム編集できます。CSSで継承されている値・上書きされている値なども一目瞭然です。デバッグに欠かせないツールだと思います。
Web Developer（英語版／日本語ローカライズ版）: Firebugとは違った角度で必要な機能があるため、Firebugと併用しています。Cookieの制御・フォームの入力内容の制御・CSSごとの読み込み選択・バリデータの起動などを行えます。
Pearl Crescent Page Saver Basic: 閲覧中のページのスクリーンショットを撮ることができるツールです。ページ全体のスクリーンショットを撮ったり、現在のウインドウの内容を撮ることができます。デザインのモックを作る際に、下地としてスクリーンショットを活用することがあるためこのツールはよく活躍します。
S3 Firefox Organizer（S3Fox）: Amazon S3にアップロードするためのツールです。単独のソフトとしてありそうな機能がアドオンとして提供されています。ブラウザを開きながら、隅にFTPクライアントが立ち上がっているようなイメージで使えます。
YSlow: 前回の記事でも紹介しましたが、サイトのパフォーマンスをチェックするツールです。このツールを使うためにはFirebugのインストールが必須です。
Live HTTP Headers: 文字通りHTTPヘッダを見ることができるツールです。ウェブサーバとブラウザのやりとりがリアルタイムでわかります。

アクセシビリティチェック

富士通アクセシビリティ・アシスタンス: ウェブサイトのアクセシビリティを診断するWebInspector（Windows/Mac⁠）⁠、背景色と文字色の見やすさを判定するColorSelector（Windows/Mac⁠）⁠、色覚特性に応じて見え方をシミュレート表示するColorDoctor（Windows）の3つのツールで構成されています。

バージョン管理・その他業務用ツール

Google Docs[Docs]（オンラインWebアプリ）: DocsのおかげでWordを使う場面が極端に減りました。単なるワープロツールとしても十分ですが、やはりオンラインツールの魅力は、作成した文書をすぐに他の人にみてもらうことができるところです。社内のちょっとしたアイデア（思いつき）共有にも活用しています。また、ラベル（フォルダ）による分類もできるので数多くある文書の整理にも使えます。
このgihyo.jpの連載記事の草稿も、Google Docsを使って書き、編集の方にチェックしてもらうというワークフローに切り替えました。
Google Docs[Spreadsheets]（オンラインWebアプリ）: Docsと同様に、Excelを使う場面が極端に減りました。Spreadsheetでサイト構成・ページ一覧表を作っておくと、制作者とクライアントとの進捗状況のやりとりが円滑にすすみます（たとえばチェックをお願いしたい項目のセルを色でぬりつぶし、完了したら色を外してもらう、などという使い方⁠）⁠。
また、Spreadsheetは単なる表計算ツールの域を超え、アンケートフォームを作る機能があります。Spreadsheetで作ったフォームを自分のサイトやブログなどに貼り付けて、入力してもらった結果はSpreadsheetに蓄積される仕組みになっており、つまりアンケートデータベースとして機能させることができます。また、Docs同様に共有機能・ラベル分類もできます。
Subversion（Windows/Mac/Linux）: バージョン管理システムです。hogehoge.html.oldや080606hogehoge.htmlのように、ファイルに日付を付けられるため、"どれが古くて、どれが新しいのか"というような混乱は一切なくなります。htmlやcss・各種プログラムソースコードであれば、削除された行・追加された行の差分を見ることもできますし、もし自分以外の人が同じファイルに変更を加えた場合には、変更後の新しいバージョンを反映して作業を行うことができます。私はコマンドライン入力でコミットなどを行っていますが、こちらで紹介されているようなSubversionクライアントもあります。
初心者の視点でみると導入の敷居が高く、コマンドライン入力が難解なイメージを与えるのではないかと思いますが、導入してしまえば大変便利なものです（導入方法はここでは割愛します。ちなみに、どちらかというとデザイナーよりプログラマのほうがSubversionに詳しい方が多いようです⁠）⁠。
Trac（Webアプリ）（本家／日本語化）: Subversionとセットで使ってこそ便利さを感じることができる、優れたプロジェクト管理ツールです。導入の敷居こそ高いものの、少し使い方を覚えてしまえば、なくてはならないツールになります。Tracを利用することで、Subversionでのバージョン管理されたソースコード一式が、ブラウザ経由で閲覧できるようになります。異なるバージョン同士を比較して差分をハイライト表示することもできます。
それだけではありません。チケットと呼ばれるバグトラッキングシステムを、タスク管理ツールとして活用することで膨大なタスクに優先順位をつけ、他の人との共同作業も円滑に進めることができます。

このように、ブラウザやWebアプリだけで、あらゆることが可能になってきているのがわかります。特にオンラインツールは、インターネットにさえ繋がれば、場所やマシンにこだわることなく作業ができるところが魅力的です。

忙しいと言われる業界だからこそ、時間や場所を有効活用したいもの。便利なツールを見つけたら可能な限り試してみて、自分の目で確かめてみると、自分なりの良い仕事術が見えてくるかもしれません。

今回は主にテキスト関係・ブラウザ周辺のツールを主にご紹介しましたが、次回はグラフィックを扱うために必要なものをご紹介し、それぞれのツールの現場での活用方法などに触れたいと思います。

こちらで紹介していないもので、他により良いツールがありましたらコメントやトラックバックでお知らせください。記事の参考にさせていただきます。