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

2018年05月29日（公開: 2017年05月18日）

デザイン

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