フォト蔵のデザイン周りのことを主に担当しています。
今日は、私が今まで愛用してきたWebデザイン、フロントエンド・コーディングに役立つツールをご紹介します。
（1）フロントエンド・コーダーの必需品 FireFox 拡張機能のWeb Developer
今調べたら日本語版も出ているんですね。最初、ためしにインストールしたときはブラウザの上部が幅とってしまって、なんとなく気に入らなかったんですが、フロントエンドのデザインやコーディングにはこれが本当に便利。
- クッキー、Java、JavaScript、CSSなどを無効にする
- CSSをその場で編集する
- フォームの各属性値を表示する
- 画像を非表示にする
- alt属性のない、あるいはalt属性値が空の画像を枠で囲む
- リンクのパスを表示する
- ブラウザの画面内を拡大あるいは縮小する
- テーブルのセルを表示する
- ブラウザのウィンドウおよび表示領域の幅と高さを表示する
- HTMLおよびCSSの構文をチェックする
- W3C/WCAG 1.0 あるいは米国リハビリテーション法508条でアクセシビリティをチェックする
- Webページのソースコードを表示する
などなど、フロントエンド・エンジニアの一連の作業を数倍楽にしてくれます。
（2）Color Schemer ColorPix
デスクトップ上のどのピクセルからも、カラーコードを取得してくれます。RGBだろうとHEXだろうとCMYKだろうと、ワンショットでコードをコピー。そこから、その色がつかわれている部分のコードを検索してもいいですし、フォトショップに直行してもいいですし。この手のツールはいっぱい出ていて、私はこれのほかにNattywareが出しているpixieも使用しましたが、今のところ、ColorPixの方が気に入っています。
（3）Typetester
コーディングやデザインを私が行う上で役に立ったというよりも、クライアントとフォントやフォントカラーを相談するのに役立ちました。特に英語環境で仕事をしていたころは、基本フォントが日本語よりもはるかに多いですし、フリーランスの小規模プロジェクトのクライアントは、フォントには異常なほどのこだわりを持っているのです。Typetesterを使うことで、クライアントが自分でフォントを調整してどのように見えるか確かめることができるので、フォントだけのためにいくつもサンプルを作ったり、ダメだしを食らったりすることから何度も救われました。ウノウでは、多分使わなくて済みそうです。