WEBデザイナーとして働く時に使いたいおすすめツール&サイトまとめ

便利ツール

普段WEBデザイナーとして働いている時に、よく使っている便利なサイトやツールをまとめました。
(デザイン、コーディング、SEO関連が中心)

これからWEBデザイナーを目指す方、あるいは既にWEBデザイナーとして働いているけどもっと作業効率を上げたいと思っている方の参考になれば幸いです。

今後も気に入ったものは追加していきます。

①デザイン関連

Adobe Photoshop

天下のAdobeソフトなので説明は省きますが、Webページのデザインや、画像合成、バナー作成などに利用。

今は無料のデザインソフトも多くありますが、制作現場では変わらずPhotoshopやIllustratorが現役です。

フリーランスや副業など、使うソフトを好きに選べる環境の方でも、他のデザイナーからデータをもらったり、クライアントに納品する時は大抵Adobeのファイル形式なので、これからWebデザイナーを目指す方は使えるようになっておきましょう。

Web関係に限って言うと、使う頻度はPhotoshop > Illustrator。
Illustratorはアイコンを作りたかったり、SVGのパスを書き出したい時に使っています。

Pinterest

Pinterest
画像引用:「Pinterest

デザインに行き詰まった…。
そんな時にいったん頭の中を整理したり、デザインの引き出しを増やす目的で眺めることが多いサイトです。
アプリもあるので好きな端末で見れます。

ただ、各ユーザーがあらゆる画像を好きに登録できるシステムなので、検索結果は玉石混交です。
狙ったテイストの画像のみを表示させるのは結構難しいので、色々なキーワードを入力してみましょう。

Pocket


画像引用:「Pocket

WEBデザイナーとして働いていると、デザインやコーディングの途中によくネットで調べ物をすると思います。

「あ、この記事気になる!」
「あとでゆっくり読みたい…」
など気になる記事を見つけた時に、とりあえずPocketにポイポイっとしています。
(ネットでスクラップをしている気分)

ブラウザのブックマークだと整理と仕分けが面倒なのと、ずっとブックマークしたいわけでもない時、簡単に追加と削除ができるPocketは重宝しています。

②無料素材関連

Unsplash


画像引用:「Unsplash

「このページになんかいい感じの写真を入れてほしい(ただし有料素材を買うつもりはない)」
と、クライアントや上司に言われた時に必ずチェックする素材サイト。

日本語での検索はできませんが、英単語を適当に入れればなんとかなります。

Instagramに投稿されていそうな、雰囲気のある写真が多くて好きです。

Pixabay


画像引用:「Pixabay

無料素材でなんとかしなきゃいけない時に必ずチェックする素材サイトその2。
こちらは日本語検索も可能な素材サイトです。

「写真」、「ベクター画像」、「イラスト」、「動画」などカテゴリを絞って検索することも可能です。

UnsplashとPixabay、それぞれ検索をかけてイメージに合った素材を見つけ出したいですね。

Adobe Stock


画像引用:「Adobe Stock

日本人が被写体で、かつ一定のクオリティがある素材を無料サイトで見つけるのは困難。
でも有料素材を買う予算はもらえそうにない…。

そんな時に助けてくれるのがAdobe Stockの無償体験。
何度も使える手段ではありませんが、本来有料の素材を最大40枚無料で手に入れることができます。



③コーディング関連

Atom


画像引用:「Atom

Dreamweaverの動作が重く、軽くて使いやすいエディタを探している時に使い始めた無料ソフト。
無料で本当にいいの?と思うくらい高性能のエディタなので、もうDreamweaverは使わなくなりました。

WordPressのプラグインのような「パッケージ」と呼ばれる拡張機能をインストールできるので、自分の使い方に合った機能を好きに追加していくことができます。

また、GitHub社が開発したオープンソースのエディタなので、GitHubと連携してファイルの管理も行えます。

非常に使いやすいエディタなので、まだ使ったことがない方はぜひ使ってみてください。

Diff Checker


画像引用:「Diff Checker

名前の通り、2つのファイルを比較して違う箇所を見つけてくれるサイトです。
プロジェクトに関わる全員できちんとバージョン管理をしていない場合によく使っています。

たとえば、サイトのあるページのHTMLファイルを一部変更して、サーバー内のファイルに上書きする時。

先祖返り(古いデータに戻ってしまうこと)を防ぐため、サーバー内のファイルとアップする予定のファイルをDiff Checkerに放り込んで、意図した部分のみの更新になっているか確認します。

CSS inliner


画像引用:「CSS inliner

headタグ内に書いたCSSを、一括でインラインCSSにしてくれるサイト。

たとえばメジャーなメーラーで崩れないHTMLメールを作成したい時、外部CSSや埋め込みCSSは使わずにインラインCSSでコーディングすると思いますが、一つ一つインラインで書くのはとても面倒です。

なのでheadタグ内にCSSをまとめて書いた後、このサイトでインラインCSSに変換しています。

④SEO関連

Google Analytics

サイト運営に欠かせないツール。
どのページがよく見られているか、どこからのアクセスが多いのか、月間ユーザー数やPV数、コンバージョン率の確認など、無料で多くのことができます。

サイトのデザイン・コーディングのみ関わり、それ以降はノータッチの場合が多くても、コーディングの際にアナリティクスのタグを埋め込んだりするので、どういうツールなのか理解しておいた方がいいです。

自分で好きにいじれる個人サイトがあれば、タグ発行から設置、運営まで1からやってみることをオススメします。

PageSpeed Insights


画像引用:「PageSpeed Insights

Googleが提供する、WEBページの読み込み時間を計測できるサイト。
モバイルの場合とパソコンの場合のそれぞれを、100点満点でスコアを出してくれます。

ただ、同じページ内容でも時間帯によってスコアが上下するので、数点の上下は誤差と考えましょう。
点数を気にし過ぎると、読み込み速度向上のために改良を行ったのに「変わってない…」「むしろ点数ちょっと下がった…」とがっくりしてしまいます。

ページの読み込み時間短縮のために改善できる項目を教えてくれる便利なものとして、新規ページを作る時や既存ページを改善する時に、PageSpeed Insightsでチェックしてみましょう。

TinyPNG


画像引用:「TinyPNG

サイトの読込速度を上げるために一番手っ取り早いのが、画像の圧縮。

Photoshopなどで書き出したJPEG画像やPNG画像をこちらのサイトで圧縮して、画質とのバランスを見ながら軽量化を行っています。

WEBP変換ツール


画像引用:「WEBP変換ツール」-SYNCER

前述で紹介したPageSpeed Insightsで、改善できる項目としてよく出てくる「次世代フォーマットでの画像の配信」。

ようは「PNG や JPEG よりサイズが軽くて画質も悪くない、新しい仕様の画像を使おうよ!」と言うことなのですが、その次世代フォーマットの画像の中で一番対応ブラウザが多いのが、Googleが開発したWebP(ウェッピー)です。

ただ、PhotoshopではまだWebPの書き出しができません。

そのため、Photoshopで書き出したPNGやJPEG画像を、上記のサイトにドラッグ&ドロップして、WebPに変換しています。