SHINOBLOG

WEBデザイナーを目指す人向けブログ

ソフト・ツール 技術・能力

【おすすめ】WEBデザイナーなら知っておきたい便利ツール集

投稿日:

【おすすめ】WEBデザイナーなら知っておきたい便利ツール集

  • プロはみんなどんなツールを使ってるんだろう?
  • もっと作業効率をあげたい…
  • 知らないだけで、面白いツールってたくさんありそう!

こんにちは、フリーランスWEBデザイナーのSHINOBUです。

WEBデザイナーの仕事は、専門職であり技術職ですので、緻密で手間のかかる作業もたくさんあります。

その中でも、みんなが「面倒だ」「ややこしい」と思いがちなことは、「もっと簡単にできる」ような効率的なツールが開発されていたりするものです。

この記事では、WEBデザイナーなら知っておきたい便利なツールを、制作のフェーズごとにひたすらご紹介していきます。

では、さっそく本題へ!

デザインフェーズのおすすめ便利ツール

素材系

写真AC(無料)

写真AC写真AC
写真素材では有名どころです。ほとんどの人は使っているんじゃないでしょうか。
無料素材サイトの中ではクオリティが高く、使いやすいです。
しかし有料会員でないと、フリーワード検索の利用可能回数が1日あたりで制限されていたり、サイズの大きい写真のダウンロード回数/日も限られたりします。

unsplash(無料)

unsplashunsplash
こちらは当ブログのサムネで使わせていただいています。
個人的には、フリー素材のサイトの中で、一番クオリティが高く使いやすいサイトだと感じています。

BURST(無料)

BURSTBURST
こちらもフリー素材サービスの中では、かなりクオリティが高いサイトです。
カテゴリ分けもわかりやすく使いやすいです。

picjumbo(無料)

picjumbopicjumbo
こちらもクオリティは高いですが、他のサイトに比べ写真の数が少ない印象です。
でも、使えそう。

PIXTA(有料)

PIXTAPIXTA
写真ACと同様、日本の素材サイトとしてかなり有名です。
こちらは有料素材になります。
有料だけあって、やはりクオリティの安定感が違います。
1つのシーンに関しても、いろんなパターンが用意されていたりするので、気に入るものは大抵見つかります。

icooon-mono(無料)

icooon-monoicooon-mono
こちらは写真素材ではなく、アイコンの素材です。
数も豊富で商用可なので、アイコンのベースはほとんどこちらで揃います。

ファイルサイズ圧縮

TinyPNG

TinyPNGTinyPNG
ファイルサイズの大きい写真(例えば1MB以上のものなど)は、WEBサイトであまり使いたくなかったりします。
無料の場合は5MBの画像まで利用可能で、大抵は数百KBまで圧縮してくれます。
1回の圧縮なら、画質も全然落ちることはないので安心して使えます。

SmallPDF

SmallPDFSmallPDF
こちらはPDFデータの圧縮です。
PDFは画像が多く使われていたりするとすぐにファイルサイズが大きくなるので、すごく助かります。

配色関連

Adobe color

Adobe colorAdobe color
Adobeのツールで、配色を検討する際に気軽に使えるサイトです。

Khroma

KhromaKhroma
こちらは配色を考える時や、目の保養の際に、活用できます。
個人的には、配色ツールの中で一番実用的で面白いツールだと思います。
はじめに好みの色を50色選ぶことで、パーソナライズした上で配色パターンを提案してくれます。
勉強にもなるし、使えるし、単純に楽しいおすすめツールです。

Colormind

ColormindColormind
このツールは頻繁に使うものでもなさそうですが、見ていて面白く、配色を判断する目が養われるので、たまに見てみると息抜きになります。

コーディングフェーズのおすすめ便利ツール

CSS系

グラデーション作成

Ultimate CSS Gradient GeneratorUltimate CSS Gradient Generator
面倒臭いグラデーションのCSSコードを自動で生成してくれます。
-moz-や-webkit-といった、主要ブラウザのベンダープレフィックスもしっかりつけてくれます(最近はなくても大丈夫になってきいますが)。

CSSアニメーション作成

Simple CSS SpinnersSimple CSS Spinners
JavaScriptなしのCSSだけで作れるアニメーションのテンプレートを掲載してくれています。
ちょっとしたアニメーションだけど少し凝った動きを作りたい、となった時にはおすすめです。

矢印作成

CSSで作るシンプルな矢印アイコン29個CSSで作るシンプルな矢印アイコン29個
三角形オブジェクトを作成する際、毎回自分でCSSを書くのは意外に面倒。そんな時にコードを自動生成してくれる便利なツールです。

グリッドデザイン計算ツール

Gridpx

GridpxGridpx
こちらは、計算が面倒なタイミングで活躍してくれるツールです。
「サイト幅が1000pxで、オブジェクトの数と間のpxは〇〇だから…」と計算するのは面倒です。
このツールは一発で割り出してくれるのですごく便利です。

Google Map 編集ツール

EZ Map

EZ MapEZ Map
Google Mapを埋め込む際のコードを自動生成してくれます。
さらに、デザインパターンも豊富という素晴らしさ。

差分チェック

difff《デュフフ》

difff《デュフフ》difff《デュフフ》
こちらは、WEB上で差分を確認できる便利ツールです。
WindowsPCの場合はWinMergeという有名ツールがありますが、Macユーザーにとってはこちらのdifff《デュフフ》がすごく重宝します。

文字数計測

【文字数カウント】

【文字数カウント】【文字数カウント】
こちらは文字数を数えてくれるというシンプルなツールです。
単純ですが、意外に使うタイミングがあるのでブックマークしておくと便利です。

その他

様々なファビコンを一括生成。

様々なファビコンを一括生成。様々なファビコンを一括生成。
ファビコンを最適サイズで一括生成してくれるという便利ツールです。
複数作成した中から必要なサイズを選んで使う形になります。

納品・ファイル共有・アップロードの便利ツール

ファイル共有

firestorage

firestoragefirestorage
こちらはファイル共有ツールです。
WEBデザイナーはPhotoshopやIllustratorなどのファイルサイズが大きいデータを頻繁にやり取りするので、共有ツールは必須です。
特にビジネスメールは、添付ファイルの容量に関して、暗黙の了解のような上限値があったりするので、そんな時には生成したURLをコピペして送りましょう。

Basic認証

.htaccess Editor

.htaccess Editor.htaccess Editor
サーバーアップロードで検証や納品をする場合など、公開前にBasic認証をかけてくれと頼まれることはよくあります。
サーバーによってはオプション機能ですぐにできたりしますが、そうでない場合はこういったツールでサクッと対応できます。

まとめ

上記であげたものの他にも、たくさんの効率化ツールや面白いツールがあります。
ぜひご自身の制作をより良いものにするツールを見つけてみてください。




comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

おすすめ記事

プロフィール画像
 
SHINOBU

フリーランスのWEBデザイナー兼フロントエンドエンジニア。イラストレーター。
新卒は某ベンチャー営業職→半年間WEBを勉強→WEB制作会社入社→フリーランス転身。現在はIT大手のクリエイティブチームに所属しながら、プロジェクト単位で複数チームに参加。
4大卒で、デザインの勉強は25歳から。美大でもない、経験もない。そこから2年後フリーランスとしてスタートするまでのこと、そしてフリーになってからの色々なことを記録していきます。