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

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

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

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

1. Web Load Speed Test

Web Load Speed Testは全国6箇所(シドニー・シンガポール・アムステルダム・ニューヨーク・ロサンゼルス・シアトル)からアクセスしてページを読み込むまでの時間を測定してくれる便利なツールです。
ページの読み込み速度はUXの観点からもSEOの面からも速いほうがいいとされています。
もしどこからの接続も遅いようであれば、ページ速度改善に関して何らかのアクションを起こしたほうがいいでしょう。

2. Burst

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

3. Tippy.js

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

4. Free Flowchart Kit

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

5. Material Design Color Tool

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

6. Semantic UI

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

7. FreePhotos.cc

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

8. Google Invisible reCAPTCHA

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

9. Shoutem

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

10. Moon

Moonは非常に軽量なUIライブラリです。
容量はたったの5KBで、Vue.jsに非常に近い文法で(なおかつVue.js以上に簡単に)直感的にコンポーネントを作成することができます。

11. Wayback Machine Downloader

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

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

12. 1000+ Vector Icon Set

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

13. thumbor

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

14. Penguin

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

15. CSSPepper

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

16. Anymap

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

17. Foundation Building Blocks

Foundation Building Blocksは、CSSフレームワークで有名なZURB社のFoundationシリーズから登場した、UIコンポーネントのライブラリです。
すでにさまざまなコンポーネントが配信されているので、コピー＆ペーストするだけで美しいUIパーツを導入することができます。

まとめ

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