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 パーツを導入することができます。

まとめ

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