ACラボ-ウェブ集客情報-

2013-01-15

無料でサイトを作る時に恐るべきほど役立つツール23選

サイト作成イメージ

当サイト・ブログでも実際に利用しているツールを紹介する。

リファレンス

サイトを制作するためには、htmlやcssに関する知識は欠かせない。それらを勉強したり、分からない時に役立つリファレンスを紹介する。

1. ちょっと詳しいHTMLとCSS

まずは、htmlとcssの基本をここで学ぼう。やや古い内容だが、初心者でも分かり易く丁寧に解説してくれている。実際にhtmlとcssを使いながら体験的に学べるのが特徴だ。htmlとcssを同時に学べるのが嬉しい。目次に沿って学習を進めれば、全てが終わる頃には簡単なサイト制作ができるようなる。

2. HTMLクイックリファレンス

htmlとcssで分からない事があった時のリファレンスとして活用できる。また、実際にサイト作りに入った段階で、自分のhtmlの使い方が正しいのかを検証する時にも活用しよう。htmlとcssに関する事が網羅されている。ただ、タグの使用例がやや分かり難いかもしれない。そんな時は、下の「TAG index」が分かり易い。

3. TAG index

こちらも、htmlとcssでのリファレンスだ。上の「HTMLクイックリファレンス」と比べると、目次が分かりにくく、調べたい情報が見つかり難い。他方、タグの使用例は「HTMLクイックリファレンス」よりも分かり易く記載されている。その時々に合わせて、上の「HTMLクイックリファレンス」と使い分けると良い。

テキストエディタ

htmlファイルやcssファイルの作成は、windowsに標準搭載されているメモ帳でも可能だ。しかし、テキストエディタを使った方が、作業をより効率化できる。テキストエディタは1つあれば十分なので、初心者でも使い易いものを1つ紹介する。

4. TeraPad

軽快に動作する無料のテキストエディタだ。行番号やルーラーの表示など、Windowsに標準搭載されているメモ帳にはない多くの機能を備えている。直ぐに取り入れよう。

画像編集ソフト・ジェネレーター

サイトロゴやヘッダ画像など、サイト作りには画像が必要になる。無料の画像編集ソフトとジェネレーターを紹介する。使いこなせるようになれば、プロ並みの画像が作れる。

5. Inkscape

Inkscapeと下の「Gimp」の組合せは、illustrator+photoshopを無料で代替してくれるものとして有名だ。プロの中でも使っている人は多い。感覚的に操作できるので、画像を作りながら使い方を習得していこう。

6. Gimp

上の「Inkscape」と組合せて使えば、多彩な画像を作成できる。ただ、Inkscapeに比べると若干使い方が難しい。難しさを感じる場合には、上の「Inkscape」だけで十分だ。画像編集ソフトは最低でも1つは使いこなせるようになろう。

7. As Button Generator

ウェブ上でボタンアイコンを確認しながら作れるジェネレーター。ストライプやグラデーションの設定が簡単に出来る。上の「Inkscape」でボタンを自作するのも良いが、このジェネレーターを使えば、格好良いボタンを短時間で作成可能だ。

画像・写真素材

画像は一から全部自作する必要はない。既にある素材を上手く加工すれば、効率的に画像を作成できる。そんな時に役立つ無料の素材集を紹介する。

8. Design Warehouse

無料の画像素材集。ホームページ制作会社が運営しているだけあって、デザイン性が高い画像が用意されている。特に、矢印やワンポイント素材など、小物の素材が秀逸だ。

9. materialand

こちらも、無料の画像素材集だ。デザイン性が高い画像が膨大に用意されている。上の「Design Warehouse」と組み合わせて使えば、気に入った素材が見つかるはずだ。

10. 写真素材 足成

無料の写真素材集。全国のアマチュアカメラマンが撮影した写真素材だが、品質は十分。ジャンルもビジネスシーン、人物、風景など幅広くあるので、目的の写真が見つかるはずだ。

デザインテンプレート

htmlやcssを一から組むのも良いが、デザインテンプレートをカスタマイズすれば、効率的にサイトを作る事ができる。カスタマイズし易いテンプレート集を紹介する。

11. TAG index

デザイン性の高いテンプレートが容易されている。そのまま使っても良いがカスタマイズにチャレンジして、独自のデザインサイトに仕上げよう。

CMS

ブログ作成だけでなく、一般的なサイト作成にも力を発揮する無料のCMSを紹介する。ただ、一般的なサイト作成に使うためには、カスタマイズが必要で、html、css、phpなどの幅広い知識だけでなく、CMSそのものの仕様を理解しなければならない。

12. WordPress

MovableTypeも有名だが商用利用は有料ライセンスが必要だ。一方、WordPressは商用利用も無料だ。最近のレンタルサーバーは、WordPressに対応しているところが多く、レンタルサーバーによってはボタン一つでのインストールをサポートしている。ブログツールとしてなら、誰でも簡単に使えるツールだ。

SEO支援ツール

今やサイト運営に欠かせないのがSEOだ。そんなSEOに役立つ必須ツールを紹介する。

13. Google検索エンジンスターターガイド

Googleが公開しているSEOガイドだ。サイト制作に取り掛かる前には必ず目を通しておこう。Google検索エンジンに必要なSEOを理解できる。

14. キーワードツール

このツールはサイト制作に取り掛かる前に使おう。サイトに最適なキーワード探しに役立つ。検索ボリュームが多く、競合性が低いキーワードが見つかれば、検索上位表示とアクセス数確保が狙える。SEOはキーワード探しで決まると言っても過言ではない。サイト制作前には必ずこのツールを使おう。

15. W3Cマークアップ検証サービス

インターネットの世界標準団体である「W3C」が提供するHTML文法チェックサービス。サイトが出来あがったら開設前にHTML文法にミスがないかをチェックしよう。

16. Another HTML-lint gateway

こちらもHTML文法チェックサービス。上の「W3Cマークアップ検証サービス」ではチェックされない部分もあるので、このツールと一緒に使うことで重大なミスを見つけることができる。

17. ウェブマスターツール

サイトを開設したら下の「Google Analytics」と合わせて、必ず利用を開始しよう。もちろん無料だ。検索順位や検索キーワードなとのデータを収集できる。また、検索エンジン向けのサイトマップも送信でき、インデックス数も確認でいる。サイトに問題がある場合には、警告を知らせてくれるのも嬉しい。

18. Google Analytics

訪問数、ユーザー数、訪問時の平均滞在時間、直帰率、新規訪問の割合など様々なデータを提供してくれる。サイトやページの問題点・改善点を探し出すのに活用しよう。

19. sitemap.xml Editor

検索エンジン向けのサイトマップ(XMLサイトマップ)を自動生成してくれる。サイトを作ったら、必ずXMLサイトマップを作り、ウェブマスターツールを使ってGoogleに送信しよう。そうすれば、インデックスの確率が格段に高まる。

20. SEOアクセス解析ツール・バーザス

自分のサイトとGoogle1位のサイトを比較診断してくれるツール。競合サイトとの差を知り、検索順位を上げるために何に取組んでいけば良いかを知る事ができる。

21. 検索順位チェックツールGRC

大きな特徴は、アクセス数と検索順位の日次変化データを取得できる事だ。検索順位の変化を把握するのに大いに役立つ。

サーバー・独自ドメイン

サーバーと独自ドメインは無料というわけにはいかないが、低価格でお勧めのものを紹介する。

22. ロリポップ

超有名で利用者も多いレンタルサーバー。最も安いプランなら月額105円で50GBのサーバーを利用できる。

23. ムームードメイン

超有名な独自ドメイン取得サービス。「.com .net .org .info .biz」なら年額950円で取得できる。上の「ロリポップ」と同じ会社が運営しているので、ロリポップと組み合わせて使えば、サーバーへのドメイン設定も簡単に行える。

まずはツールを使ってみよう

当サイト・ブログでも実際に使っているツールを23個紹介した。これらのツールを使えば無料で、プロ並みのサイトを作れる。まずは、これらのツールを使って頂きたい。

この記事が役に立ったら共有をお願いします

無料ツール
【SEO診断チェックシート】
Google公式ガイドラインに沿った50項目

無料ツール『SEO診断チェックシート』

あなたのWEBサイトに問題がないかチェックしてみませんか?

このSEO診断チェックシートは、こんな人にオススメです。

  • 検索順位がなかなか上がらない
  • ある時から検索順位が下がった
  • アクセス数が伸び悩んでいる

このツールを使えば、Googleが公開している「検索エンジン最適化スターターズガイド」に沿った50項目でサイトを診断できます。

是非、貴社のWEBサイトの診断にご活用下さい。

無料ツールをダウンロード 

集客に強いWEBサイト制作

最新の記事情報の取得はこちら

「いいね!」ボタンを押すと、最新の記事情報がFacebookに届きます。

「フォローする」ボタンを押すと、最新の記事情報がTwitterに届きます。