MacでWEB制作する時のお助けアプリ8

November 18th, 2009 ≫822 views

Macを使用してWEBサイトのデザインをされているデザイナーさんって日本のWEBデザイナーの何割を占めているんだろう。。実は作者もその中の1人、MacオンリーでWEBサイトのデザインをするWEBデザイナーです。
もちろんブラウザチェックでWINDOWSの確認はしますが、WINDOWSですらMacの中のBOOTCAMPでやっているので本当にMac人間な作者です。

さて、今回はMacのみを使って、しかもADOBE系のソフト【Illustrator・Photoshop・Dreamweaver】の代行をしてくれそうな便利アプリをいくつか紹介したいと思います。

GIMP

こちらは言わずとしれた有名なPhotoshopの代行をしてくれるソフトですね。レイヤー構造・フィルタ・テキストなどなどPhotoshopより機能は劣るモノのサイト制作では全く問題のない画像処理・編集ができるソフトです。
≫ http://www.gimp.org/

InkScape

こちらは知名度としてはGIMPよりは知られていない気がします、でもすごいソフトなんです。あのIllustratorのベクターデータの編集ができてしまうんです！これは馬鹿にできないですね、作者も色々と探した事がありますが、ベクターデータを編集できて使いやすいのはInkScape以外は見あたりませんでした。
≫ http://wiki.inkscape.org/

KompoZer

こちらのソフトは意外と耳にする人も多いかもしれません。Adobe Dreamweaverの簡易代行ができてしまうソフトです。ただのテキストエディターと違うところは、コードの色分けはもちろんのこと、CSSをフルサポートしてくれているので、プロパティ・セレクタのど忘れもカバーしてくれそうです、タブの切り替え機能・ライブプレビューなど様々な機能を搭載し、なんとW3CのHTMLマークアップチェックまでできるという優れものです！
≫ http://kompozer.net/

Simple CSS

上記のソフトよりもっと簡易的にスタイルシートのど忘れをカバーしてくれそうなのが、このソフト。0の状態からCSSの構築をサポートして、ちゃんとエクスポートできます。インターフェイス的にもかなりスタイリッシュな作りとなっているので、操作もしやすいです。
≫ http://www.apple.com/downloads……lecss.html

Firebug

これはソフトではなく、Mac版FIREFOXにインストールするアドオンなのですが、結構有名なアドオンですよね。作者はWEBデベロッパーツールを使用していますが、こちらのアドオンもかなり高機能ですね！HTML・CSSのプレビューができ、リアルタイム編集も可能。Javascriptのライブコード閲覧可能。このアドオン一つでWEB制作の細々した作業が一気に片づきそうですね。WORDPRESSのサイトテーマを変更したい場合なども、リアルタイムでどこのCSSなのかを探ってくれたりもするので、作業効率がかなりアップします。

Adobe BrowserLab

こちらは、Macだけではなくブラウザからアクセスして使用できるADOBEのWEBサービスなのですが。驚きました。自分のサイトもしくはクライアントのサイトがWINDOWS・Macの各ブラウザのプレビュー状況を表示してくれる機能を持っています。静止画なのでクリックなどはできませんが、簡易的に今IE6でどういう風に見えているのかを知りたいときなどは、かなり使えるアイテムですね！Adobeのユーザー登録は必要ですが、無料ですぐに登録できます、登録後はすぐにBrowserLabを使用できるようになります。
また、閲覧したいブラウザをセットにしておけば、URLを入力するだけで一括でプレビュー作業を始めてくれます。
緊急の時に重宝しそうですね！
Adobeユーザー登録≫ https://www.adobe.com/cfusion/……s&nl=1
BrowserLab≫ https://browserlab.adobe.com/

Cyberduck

こちらのソフトはもう定番中の定番かもしれませんね、MacでFTP接続したい場合にはこのソフト。ブックマーク機能や簡易接続など、インターフェイスも使いやすく、作者も長年愛用させていただいております。
FTP接続・SFTP接続など接続形式も色々と用意されていて、もちろんファイルのパーミッション等も変えられます。
≫ http://cyberduck.ch/

Colors

このソフトは本当にミニアプリケーションですが、常備しておくといざというときには便利かもしれません。スタイルシートやHTMLの構築中に#7af89bなどのように16進法カラー設定で『あの色の数値いくつだっけ…』っていうときに使えそうです。カラーパレットから色を選択すると16進法表記で表示してくれます。
一見地味なんですけどね、、ちょっとしたときにどうぞ。
≫ http://mattpatenaude.com/

如何でしょうか、オープンソースとは言えこんなにまで開発が進んでいるモノなんですね！洗練されたインターフェイスや機能に作者も驚きました。画像処理・ベクター編集・HTML,CSS編集・アップロード・ブラウザチェックこの5点が上記のアプリケーションで代行でき、WEB制作の一通りの作業がカバーできるというのは非常にうれしいことですね！
是非ご参考ください。