学べる・買える・出会える。SB C&Sのマーケティングツール総合サイト。

  • 契約パートナー数 
  • 掲載ツール数 製品

知る・学ぶ

今更聞けない、デジタルマーケティングの基礎知識から、最新のアドテクまで、あなたに役立つ情報をご紹介します。

構築ツール

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

  • 2016年02月19日
  • サイト構築/CMS
  • サイト構築/CMS

web_catch.jpg

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

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

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

1.amCharts

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

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

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

amCharts

2.白地図ぬりぬり

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

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

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

白地図ぬりぬり

3. Color Palette Generator

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

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

Color Palette Generator

4. Ajaxload

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

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

Ajaxload

5. Stripe Generator

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

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

Stripe Generator

6. Search the Free-Stock-Photosphere

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

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

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

Search the Free-Stock-Photosphere

7. templatesbox.com

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

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

templatesbox.com

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

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

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

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

9. bittbox

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

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

bittbox

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

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

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

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

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

11. WEBデザインの見本帳

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

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

WEBデザインの見本帳

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

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

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

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

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

13. Design

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

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

Design

14.Viewport Resizer

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

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

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

Viewport Resizer

15. Whatfont Tool

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

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

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

Whatfont Tool

16. Wirify

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

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

Wirify

17. MIN

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

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

MIN

18.とくりっばー

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

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

とくりっばー

19. trustworks

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

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

trustworks

20. XRAY

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

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

XRAY

21. MRI

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

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

MRI

22. Paro2day

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

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

Paro2day

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

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

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

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

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

24. Get URL Info

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

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

Get URL Info

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

25. Ajaxを勉強しよう

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

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

Ajaxを勉強しよう

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

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

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

「左上の魔術師」理論

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

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

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

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

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

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

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

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

まとめ

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

Marketing Bankの最新情報を受け取る方法

Marketing Bankは毎日の売り上げにきっと繋がるマーケティング情報を発信中です。
会員登録してメールマガジンを受け取るか、RSS・Facebookとお好みの方法をお選びください。

MarketingBankで丸ごと解決!

メルマガ会員登録(無料)をして、
デジタルマーケティングを学ぼう!

メルマガ会員登録

Marketing Bankをフォロー



お問い合わせ・ご相談

SB C&Sがあなたのビジネスをサポートします。
どんなことでもご相談ください。

お客様から多く寄せられるご質問はこちら
メールでのお問い合わせはこちら

TO PAGE TOP