WEBサイト作成に役立つツールまとめ

WEBサイトを構築する時、(個人的に)時々必要になるお役立ちツールを
ブックマークを漁ってかき集めてきまとめてみました。

すべてフリーで使用できます。

WEBフォント

Google Fonts

無料で使えるWEBフォントの決定版といったらGoogle Fonts。
使い方もとっても簡単なので誰でもすぐに可愛い英字フォントを導入できます。

アイコンフォント

Font Awesome Icons

本来なら画像でしか表示させられなかったアイコンが
WEBフォントとして使えます!

コードをコピーして使うだけ。ですが、表示されなかったら
<head>内に以下の一文を入れてみてね。

HTML文法チェック

コーディングされる方なら必ずチェックしているHTML文法。
WEBサイトのURLを入力するだけなので超カンタンです。(確認するだけならw)

正しい記述が何よりですが、体感的にSEOにはあまり響いていない感じ。

Another HTML-lint 5

HTML5の文法をチェックします。

Another HTML-lint gateway

HTML4.01、XHTMLの文法をチェックします。

CSS Validation Service

CSSの記述をチェックします。

アイコン変換ツール

Favicon Converter

「.png」→「.ico」というように画像の形式を変換します。
ファビコンを設定する時に必要なアイコン変換ツールです。

PNG画像圧縮ツール

TinyPNG

自サイトに関してはそれなりのサーバーを使っていれば
そんなに容量を気にすることもないですが、
まぁデータも体重も重いよりは軽い方がいい!ってことで。

別サービスでアップロード容量の制限がある時なんかは便利ですよね。

ソースコードの表示

ソースを「そのまま表示する為のHTMLソース」に変換

<こういう半角のカッコとか>、
WordPressユーザーさんでソースコードの表示を多用される方は
プラグインの使用がおすすめです。

このツールはほんのちょっとした時に使えます。

検索エンジン順位チェック

RANKING CHECKER

URLとキーワードを入力してチェックしてね~。
この類のツールは他にもたくさんあります。

キーワード抽出ツール

トレンドキーワード抽出ツール

記事を書く時やタイトルを決める時にキーワードの需要がチェックできます。
SEOを意識している方なら必須です。

アンケート作成

クリエイティブサーベイ

綺麗で高機能なアンケートページが作れます。

アクセス解析

WEBサイトを運営しているならアクセス解析の導入は必須!

Google Analytics

アクセス解析の決定版。(やっぱりGoogle~)

Ace Analyzer

Google Analyticsが難しいと感じる方は
ちょっとだけ広告が載りますが同等の解析精度で使いやすいので
メインサイトに入れておくと良いかなと思います。

ページランクチェック

Google PageRank Checker

そこまで必死になって意識しなくとも、
1年に一度くらい(!)はチェックしておきたいページランク。

というのもサイトができて1~2年はほとんどがゼロのまんまなのです(笑)

空きドメイン検索

お名前.com

空きドメイン検索はどこでもできますが、
mayuはお名前.comユーザーなのでブックマークしてます。

日本語ドメイン変換

日本語JPドメイン名のPunycode変換・逆変換

日本語ドメインでWEBサイトを作りたい場合はここでチェックです。
実は無料レンタルブログなんかでも日本語ドメイン使えるケース多いです。

カラーコード

原色大辞典

#fffとか#333みたいな単純なやつはすぐに覚えられても
複雑なやつはカラーコード表無しでは無理!

カラーピッカーも用意してくれていますが
複雑過ぎると環境によってピッタリの色が表示されない可能性あり。
この場合は近い色が勝手に表示されます。

ブランドイメージのカラーコード

BrandColors

FacebookやらTwitterやらのロゴの色を使いたいけど
カラーコードが分かんない・・・って時にとっても使えます。

海外製なのでアメブロは無かった(笑)
ちなみにアメブロは #4dac26 ですよ~。

ページ表示速度チェック

Latest Performance Report

URLを入力するだけでサイトの表示パフォーマンスをチェックできます。

海外サイトなので結果がちょっと分かりにくいですが、
とりあえずAに近づくほど読み込みが速いということです。
※「Page Speed Grade」はGoogle、
 「YSlow Grade」はYahoo!による計測サービスの評価です

テーブル作成ツール

Table Tag Generator

直観的にテーブルのHTMLタグが作成できます。

何がいいかっていうと「結合」が簡単にできる点!
自分で打ち込んでいると結合したい時はどこにどのタグを入れるのか・・・
というのが分からなくなるのでこのツールは便利です。

ソーシャルボタン設置

忍者おまとめボタン

とにかくトリセツ嫌いで簡単にソーシャルボタンを設置したいという方に
おすすめのソーシャルボタン設置ツールです。

それよりもちょっとこだわりたいっていう方はこちらのページを見てみてね。
コピペで使える固定ソーシャルボタンBOX

あとがき!

ざっと挙げてみましたが結構色々ありますね~(*_*)

あると助かるお便利ツールということで常に使うわけじゃないですが、
何かの時に参考になったらいいなと思います。

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!

wpnavi

WordPressで作られたサイトかどうかを確認する方法

Webサイトを色々見ているとWordPressで作られたかサイトなのかどうかって 気になったりしま...

記事を読む

1

フロントページを固定ページに設定しつつ、最新の投稿ページも使いたい!

WordPressはフロントページを「最新の投稿」か「固定ページ」、 どちらかを選べるようになって...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower