WEB業界で働きたい人必見！
現場で役立つツールを一挙ご紹介

by mizunokazuki
in Design · Tech
— 2014/02/24

mizuno_illust
最近、Mac USキーボードを買った24-7水野です。
←こんな顔していますので、是非覚えてやって下さい。

現在所属している24-7が、私にとってWeb業界で働く初めての会社です。入社前はスクールには通わず独学で勉強していました。当時は不明な箇所や業界標準として使用されているツールが分からず、また周りに質問出来る人がいない環境だったので様々なブログ記事やTipsを読み勉強していました。

そこで今回、独学でお困りの方向けに私が使用しているソフトやツールを紹介することで問題解決が出来たり、Web業界に興味を持っている方の参考になれたら幸いです。

デザイン制作

弊社では現在Adobe Creative Cloudに加入しています。
月額5000円でAdobeの各ソフトやツールが使えるので非常にお得だと思います。

私はデザイン制作時に「Illustrator」と「Photoshop」を使用しています。
まずは、Illustratorの好きなショートカットからご紹介します。

Illustratorで好きなショートカット

1.command（Ctrl）+U＝スマートガイド
選択ツールの位置をハイライト文字で表示してくれるので、図形の角や端を合わせる際に非常に重宝します。

2.command（Ctrl）+K＝環境設定
単位を変更したりガイド・スライスの色を変えたりと割りと良く使います。

Photoshopのオススメ拡張機能

1.Distribute Layers Horizontally

Photoshopで異なる文字数のテキストレイヤー等を等間隔分布したい場合、デフォルト機能の「水平方向中央を分布」では等間隔にならないので上記拡張機能を使用しています。（垂直方向の等間隔も出来ます）
詳しくは、PhotoshopCS2以降でオブジェクトを等間隔に分布させる.jsxがあったよ。に記載されています。

2.Layer Guides
miz_img01

デザイン制作をしているとガイドを多用しますが、スナップをONにしてガイドを引いても1pxずれる時があります。
Layer Guidesを使うと、左端・上端・右端・下端・垂直中央・水平中央のいずれかを選択すると一瞬でガイドが作成されます。
詳しくは、Photoshopでレイヤー周りのガイド引きを便利にする機能拡張に記載されています。

テキストエディタ

●Coda2（Mac用テキストエディタ）
miz_img03

コーディングに必要なテキストエディタとして独学時は「Dreamweaver」を使用していましたが、24-7に入社してからは「sublime text 2」を使い、現在は「Coda2」に落ち着きました。有料ですが、動作が軽快な点とCoda2についてのブログ記事が多かったのが決め手となりました。

Coda2では下記2つのプラグインを入れています。
1.Emmet
短い記述で効率的にマークアップが出来るプラグイン。
複数のエディタに対応しています。

例えばul>li*5 の様に記述しcontrol+E or tabキーで展開すると、

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

この様に表示されます。

また、ul>li.item$*5と記述すると、

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

となります。
詳しくはEmmet Documentationに記載されています。

2.CSScomb
CSSのプロパティをソートしてくれます。
人によってCSSプロパティの記述順番が違うと別の人がファイルを編集する時に非常に見づらい為、ソートする事によって管理・運用しやすくなります。

ウェブブラウザ

●Google Chrome
miz_img04

業務上Webサイトの表示確認をするので、ブラウザは複数インストールしています。
メインブラウザとしてGoogle Chromeを使用しており、以下の拡張機能をインストールしています。

1.Image Properties Context Menu（右クリックメニューから選択して画像情報を取得）

Chromeデベロッパーツールでも画像情報の確認は出来ますが、デベロッパーツールを開くとディスプレイ表示範囲が狭くなってしまうことが難点です。確認する画像が数点ある場合は、この機能を使ったほうが楽です。（デベロッパーツールを格納する操作が省ける）

2.MeasureIt（Webページ上の範囲を測る）

クリックしてドラッグするだけで、その範囲のピクセルが分かります。
参考としているデザインのマージンや画像のピクセル数が直ぐ分かるので、デザイン時に使う機会が多いです。

3.window resizer（ブラウザのウィンドウサイズをリサイズ）

ブラウザで表示確認をする際にウィンドウをスマホやタブレットのウィンドウサイズへ、1クリックでリサイズ出来ます。今後は今まで以上にモバイル対応は必須（モバイルファースト）ですので、かなりオススメです。ちなみにプリセット以外に任意の画面サイズを登録出来ます。

4.Check My Link（リンク切れのチェック）

サイトに複数のリンクがある場合、全てのリンクを確認する事はとても非効率です。
このプラグインはクリックするだけで、リンク切れがチェック出来ます。

5.TabMemFree（一定時間使っていないタブの読み込みを停止）

Chromeは軽快に動きますが、その分メモリを多く消費し重くなります。
TabMemFreeはしばらく開いていないタブのメモリを開放してくれるので動作が遅くなるのを回避出来るプラグインです。

6.Colorzilla（Webページのカラー情報を取得）

カラーピッカーを使ってサイトの色（16進数やRGB値）を取得する事が出来ます。

デザインクリップ

●INBOARD
miz_img05
PinterestやEvernoteでデザイン収集する方もいると思いますが、私はデザインの参考専用としてINBOARDを使用しています。
保存の際にタグ付けも出来るので一気に集めて後で整理すると楽です。
詳しくはスクラップブック界の神アプリ！？INBOARDの使い方【画像収集ツール】