Webデザイナーなら知っておきたい便利なツール＆リソース14選

スニペットからWebフォントまで、Webデザイナーにとって毎日の仕事を後押しする強力なツールが、日々配信されています。
しかも、ありがたいことに、こうしたツールの多くは無料であることが多いので、知っているか知らないかだけで生産性に大きな差が生まれることもあります。

今回は、Webデザイナーはもちろん、Web担当者であればぜひとも知っておきたい便利なツールやリソースを集めました。
フリー素材、JavaScriptライブラリ、Webサービスなど、ジャンルはさまざまですが、多かれ少なかれきっとあなたの役に立つはずです。

Webデザイナーなら知っておきたい便利なツール＆リソース

1. Burst

BurstはEコマースプラットフォームshopifyによって提供されている無料のストックフォトサービスです。
メールアドレスを登録しておけば新着画像を毎週紹介してくれます。
ショッピングとは関係ない画像も多く配信されているので、ブログ記事のアイキャッチ画像などに最適です。

2. Tippy.js

Tippy.jsはJavaScript製の軽量なツールチップライブラリです。
ツールチップといえばjQueryのプラグインで多く配信されていましたが、TippyではjQuery以上の簡易さでツールチップを導入することができます。

3. Free Flowchart Kit

Free Flowchart Kitはフローチャートを簡単につくれるようにUIパーツを集めたSketch用のパーツ集です。
分岐した矢印やYES/NOなどのボタンなど、フローチャートを作るのに便利なパーツが揃っています。

4. Material Design Color Tool

Material Design Color ToolはGoogleのマテリアルデザインのホームページで配信されている、マテリアルデザインカラーをプレビューできるツールです。
マテリアルデザインでは、Primary Color(メインカラー)とSecondary Color(サブカラー)を選んでいきますが、2つの色をピックアップしてどんなふうに見えるかを簡単に確認することができます。

5. Semantic UI

Semantic UIはその名の通りセマンティックな(文書構造上意味の通った)コードでマークアップができるようにするためのライブラリです。
コードの可読性が悪いのであれば、ぜひ導入を検討してほしいライブラリです。

6. FreePhotos.cc

FreePhotos.ccはクリエイティブ・コモンズライセンスのストックフォトを集めたコレクションサービスです。
PexelsやUnsplashなど、有名なフリーフォトストックサイトを横断して画像を検索することもできます。

7. Google Invisible reCAPTCHA

Google Invisible reCAPTCHAは、たった1回のクリックで閲覧しているのがボットなのか人間なのかを見極めるリキャプチャツールを提供しています。
これまでのリキャプチャツールでは人間であることを証明するために文字や数字を入力する必要がありましたが、こちらはチェックボックスにチェックをするだけでロボットか人間かを判断することができます。

8. Shoutem

Shoutemは、非常に簡単にクロスプラットフォームのネイティブアプリを作れるオンラインサービスです。
バラエティ豊かなテンプレートから自分の作りたいイメージに近いものを選んで、コンパイルなしにAndroidやiOSアプリを作ることができます。

9. Wayback Machine Downloader

Wayback Machine Downloaderは古いバージョンにまでさかのぼってWebページをまるごとダウンロードできる便利なオンラインツールです。
誤って最新バージョンを上書きしてしまっても、たったの2クリックでタイムマシンを使うかのように前のファイルをダウンロードすることができます。

参考：
過去公開されていたページがもう1度見れる！Wayback Machineとは？

10. 1000+ Vector Icon Set

1000+ Vector Icon Setは1000以上の細線のリニアアイコンをまとめたフリーのアイコンセットです。
PSDファイルで提供されているので、PhotoshopやIllustratorで活用することができます。

11. thumbor

thumborはオープンソースのスマートなオンデマンドイメージングサービスです。
あなたのホームページ上の画像をすべてリサイズしたいときに、クロップをはじめとした変形作業を簡単に行うことができます。

12. Penguin

Penguinは何百ものアイコンやSVGを数秒で他の色に着色したり、SVGアイコンをPNGに数クリックでエクスポートする機能を持ったツールです。
現在はMac用のソフトとして配布されています。

13. CSSPepper

CSSPeeperはウェブサイト上のパーツの大きさや色などを簡単に測定することができるGoogle ChromeエクステンションのWebサイトインスペクターです。
サイトで使われている色を一覧で表示したり、サイト内で使われている画像を一括してダウンロードする機能もあります。

14. Anymap

Anymapはインタラクティブな地図やグラフなどを簡単に作成することができるJavaScriptとHTML5をベースとしたライブラリです。
このツールをつかえば、天気予報データや地域ごとの生産量などをホームページ上でプレゼンするときに役立ちます。

まとめ

日々たくさんのツールが世界中でリリースされていますが、こうしたツールを活用することで少しでも生産性があがれば作業時間も節約することができます。
使いやすそうなツールが１つでもあれば、ぜひこの記事をお気に入りに追加しておきましょう。