チェックしておきたい！Web制作に役立つツールとサイト28選

Webサイト制作はWebマーケティングの基本です。Webサイト制作では、ツールを利用することで効率化できる作業が多くあります。

今回は、ブックマークしておきたいWeb制作に役立つWebサイト・ツールを目的別・場面別でまとめました。 

Web制作時に必要な素材やパーツを揃えるのに役立つツール、Webサイト

1.amCharts

amChartsは、無料でFlashによるパイチャートや円グラフを作成できるツールです。Flashに関する知識がなくても使えるのが特徴です。

amChartsはグラフ化したいデータなどを設定ファイルに書いていく作業だけで簡単に見た目の優れたグラフを作成できます。

グラフの種類やデザインを調整でき、制作するWebサイトに合ったデザインのグラフを手軽に作りたい場合に役立ちます。

2.白地図ぬりぬり

白地図ぬりぬりは、オリジナル地図画像を無料で作成できるツールです。

無料版の場合、白地図の編集・公開・共有・ダウンロードが可能です。また、作成した地図画像は、PC・タブレット・スマホで閲覧できます。

Web制作で、オリジナルの地図画像を使いたい場合に役立ちます。

3. Color Palette Generator

Color Palette Generatorは、画像のURLを指定する操作で、画像に使用している色の値がわかるツールです。

Webサイトのデザインに合った色を選びたい時に便利です。

4. Ajaxload 

Ajaxloadは、無料でローディング画像を作成できるツールです。

インジケーターを39種類の中から選択できる以外に、背景色や前景色を自由に選択でき、ローディング画像の挿入を考えている場合に役立ちます。

5. Stripe Generator

Stripe Generatorは、簡単にストライプ柄の画像を作成できるツールです。

線の太さ・間隔・色などを細かく設定できます。またでき上がったデータをダウンロードでき、背景をストライプ柄にしたい場合に役立ちます。

6. Search the Free-Stock-Photosphere

Search the Free-Stock-Photosphereは、検索したキーワードに対応した無料の画像がWebサイト別で表示し、ダウンロードできるWebサイトです。

探している画像のイメージを英語で検索することで、クオリティが高い画像が表示されます。

コストを抑えつつ、クオリティの高い画像を選びたい場合に便利です。

7. templatesbox.com

templatesbox.comは、200種類以上に及ぶ無料の画像素材を検索できるWebサイトです。

ロゴマーク・バナー・ニュースレター・ホームページのテンプレートなど、用途に応じたテンプレートを検索でき、コストを抑えつつ手早くWeb制作の素材を探せます。

8. POP*POP的アイコン配布サイトまとめ

POP*POP的アイコン配布サイトまとめは、Webサイトに設置するアイコンを入手できるツールをまとめているWebサイトです。

ボタンの形をしたアイコンや、矢印の形をしたアイコンなどを大きさ・形・色・ファイル形式別に絞り込め、サイトの雰囲気や用途に適したアイコンを探したい場合に便利です。

POP*POP的アイコン配布サイトまとめ

9. bittbox 

bittboxは、質の高いベクトル画像を無料でダウンロードできるWebサイトです。

Web制作の際、クオリティが高いベクトル画像を素早く入手できます。

10. ウェブサイトサムネイルAPI

WebサイトのURLを入力することで、サムネイル画像を自動作成できるツールです。

タグ付きでサムネイル画像が作成され、Webサイトのサムネイル画像を素早く入手できます。

Web制作におけるデザインを考えるのに役立つWebサイト

11. WEBデザインの見本帳

WEBデザインの見本帳は、キーワード以外に印象、ジャンルなどからWebサイトの見本を探せるWebサイトです。

実際のWebサイトを表示しており、製作するWebサイトと同様のジャンルなどを参考したい際に役立ちます。

12. ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集

ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集は、Webサイトの配色をまとめたWebサイトです。

実際のWebサイトを例に黄色や赤、緑などユーザに与える印象を分かりやすく説明しており、製作するWebサイトの配色を決めたいときに便利です。

ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集

Web制作におけるサイトの構造チェックに役立つツール

13. Design

Designは、Webサイトの横幅・縦幅を測定する際に便利な、グリット・定規・ルーラーを表示する機能を使用できるブックマークレットです。

グリッドは、左寄せ・中央寄せ・右寄せなど、自由に配置できます。

14.Viewport Resizer

Viewport Resizerは、レスポンシブデザインで制作したWebサイトの確認に役立つツールです。

表示しているページをPC・スマホ・タブレットなど、各端末の画面サイズに変更しながら確認できます。また、画面をカスタマイズして表示できます。

レスポンシブ対応のWebサイトをチェックする際に便利なツールです。

15. Whatfont Tool

Whatfont Toolは、Webサイトのサイズ・フォントの種類・カラーなどをチェックできるツールです。

フォントをクリックする操作のみで、フォントに関する情報を表示され、手軽にフォントをチェックしたい場合に便利です。

またこのツールは、日本語フォントにも対応しています。

16. Wirify

Wirifyは、閲覧しているWebサイトのレイアウトをワイヤーフレーム化できるブックマークレットです。

閲覧しながらWebサイトのレイアウトをチェックしたい場合に便利です。

17. MIN

MINは、をWebサイト内の背景や文字色などのページ構造を削除してチェックできるブックマークレットです。

グリッドやレイアウトのバランスや要素などを、手軽にチェックしたい場合に便利です。

18.とくりっばー

とくりっばーは、HTMLタグの閉じ忘れをチェックできるツールです。

HTMLタグの閉じ忘れによる「表示崩れ」の原因を素早く把握できます。

19. trustworks

trustworksは、Webサイト内にある画像のalt属性をチェックできるツールです。

各ページで使用されている画像のalt属性を一覧表示され、alt属性の記載ミスや記載漏れのチェックに役立ちます。

20. XRAY

XRAYは、Webサイト内の要素の幅や高さなどをチェックできるツールです。

Webサイトの各部分の要素の幅や高さなどをすぐ調べたい場合に便利です。

21. MRI

MRIは、指定したセレクタをハイライトで表示するツールです。

「article」「.box」「#header」など、指定したセレクタを手早くチェックしたい場合に役立ちます。

22. Paro2day

Paro2dayは、Webサイトで表示されているテキスト・画像を編集できるツールです。

Webページ内のテキストの折り返し部分のチェックや、ページ内の画像の印象をチェックする場合でのシミュレーションに役立ちます。

Web制作におけるサイトやページの解析に役立つツール

23.Web担当者Forum版 ページ速度分析ツール

Web担当者Forum版 ページ速度分析ツールは、ページの読み込み速度を測定できるブックマークレットです。

Webサイトの表示の際、どの箇所の表示速度が遅いかを細かくチェックしたい場合に便利です。

24. Get URL Info

Webサイト内の情報を一括で取得・解析できるツールです。

title・description・キーワード・短縮URLなどのページ情報を取得・解析できます。また、ページランク・サーバー情報・はてブのコメントも一括で把握でき、手軽にWebサイトの情報をチェックしたい場合に便利です。

Web制作知識の勉強に役立つWebサイト

25. Ajaxを勉強しよう

Ajaxを勉強しようは、Ajaxを学びたい場合に利用できる学習用Webサイトです。

Ajaxの基礎からプログラム作り、データ解析などを丁寧に解説しており、Ajaxに興味のある人や早急に知識をつけたい場合に役立ちます。

26.「左上の魔術師」理論

「左上の魔術師」理論は、Web制作をする際に、基礎となるデザイン知識を丁寧に解説したWebサイトです。

Web制作の際に必要な、Webサイトの構造の説明やユーザの目線の動きなど、Web制作を始めて間も無い場合に役立つ内容を体系的にまとめています。

27. AJAXやCSSを駆使したタブインターフェース18種類

このWebサイトは、AJAXやCSSを使用してタブを作成できるツールをまとめて紹介しています。

作成の簡単さに加え、タブのデザインや細かなカスタマイズに対応しているツールがピックアップされており、Web制作でタブを設置する際に役立ちます。

28. 公開APIを利用したサンプルサイトを作っていくよ

公開されたWebサービスのAPIを活用し、サンプルサイトを作成していくWebサイトです。

Google・Twitter・Flickerなどの有名なサービスのAPIを活用して進められるため、APIを活用したサイト作りに興味のある場合に便利です。

まとめ

今回は、Web制作に役立つWebサイト、ツールを紹介しました。今回紹介したWebサイトやツールをブックマークし、効率的にWebサイト制作を行ないましょう。