
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パーツを導入することができます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- キャプチャ
- キャプチャとは、出力されたデータを別の機器で取り込み利用可能な状態にすることを言います。例としては、TV映像をパソコンに取り込み、その映像を保存(キャプチャ)し、パソコンで再生可能にすることなどです。ホームページの分野では、ブラウザなどでホームページのデザインを画像として保存することなどを指すこともあります。
- キャプチャ
- キャプチャとは、出力されたデータを別の機器で取り込み利用可能な状態にすることを言います。例としては、TV映像をパソコンに取り込み、その映像を保存(キャプチャ)し、パソコンで再生可能にすることなどです。ホームページの分野では、ブラウザなどでホームページのデザインを画像として保存することなどを指すこともあります。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング