ウェブサイト作成に役立つ35のwebサービス

ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。

フォント関係

wordmark.it

wordmark.it

パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。

日本語フォント252種類を表示確認できます!フォントを探すならfonthack.jp。

日本語フォント252種類を表示確認できます!フォントを探すならfonthack.jp。

日本語フォントの表示が確認できます。現在252種類あります。

PXtoEM.com: PX to EM conversion made simple.

PXtoEM.com: PX to EM conversion made simple.

ベースのサイズ(px)を決めると、em, pt, %の値が表示されます。

カラー関連

ウェブ配色ツール Ver2.0

ウェブ配色ツール Ver2.0

配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。

Color Scheme Designer 3

Color Scheme Designer 3

カラーパレットジェネレーターです。海外サイトですが非常に使いやすいです。サイトを作った場合のサンプルページを見ることもできます。

0to255

0to255

色を選ぶとグラデーションが表示されます。

カラーコード変換ツール

カラーコード変換ツール

カラーコードの10進法と16進法を相互変換してくれます。地味ですがよく使っています。

CSS、JavaScript関連

CSS Sprite Generator | Project Fondue

CSS Sprite Generator | Project Fondue

CSS Spriteのための画像を作成するサイトです。このブログでも使用しましたがとても簡単です。

Compress javascript and css

conmpressor.png

CSSやJavaScriptを圧縮してくれるサイトです。「powerful compress」で改行や空白をすべて消去します。圧縮したら編集のときに困るという場合は、次のサイトで元通りに戻せます。

ProCSSor - Advanced CSS Prettifier

ProCSSor - Advanced CSS Prettifier

CSSを見やすくきれいにしてくれます。圧縮したCSSも元通りになります。

dean.edwards.name

dean.edwards.name

JavaScriptの圧縮や難読化をしてくれます。

CSS3.0 Maker

CSS3.0 Maker

テキストまわりから、角丸やシャドウ、回転など色々作れます。

CSS3関連のジェネレータを集めていますので「CSS3プロパティの勉強になるジェネレータ16個もご参考に。

画像関連

BgPatterns ― Background Patterns Maker

BgPatterns ― Background Patterns Maker

こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。このブログでも使ってます。

ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個もご参考に。

bgMaker

bgMaker

背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。

Seamless Pattern Background Designs

Seamless Pattern Background Designs

様々な背景用パターン画像が作れます。サンプルが膨大で色やサイズも自由に変更できます。

favicon.cc

favicon.cc

よくあるタイプですが、描いた絵を動かしたりもできるので便利です。作ったファビコンはこのサイトのファビコンにリアルタイムに反映されるので確認しやすいです。あとアニメーションも作れます。

web計。

web計。

私はあまり徹底できていないのですが、画像の黄金比や白銀比を計算してくれます。

Pixlr

Photo editor online - Pixlr.com edit image

オンラインで画像編集ができます。日本語化されていて使いやすいです。「Open photo editor」でエディターが開きます。

オンラインで画像の編集ができる12のサイトもご参考に

resizeimage.org - Resize images with ease

resizeimage.org - Resize images with ease

画像サイズを簡単に変更できるサイトです。

スクリーンショット - 無料バナー作成工房

スクリーンショット

簡単にスクリーンショットが撮れます。幅は自由に決められて、長さは最後まで撮ってくれます。編集もできます。

PunyPNG - PNG Compression and Image Optimization - Gracepoint After Five

PunyPNG - PNG Compression and Image Optimization - Gracepoint After Five

png形式の画像を圧縮してくれます。サイズは減っているものの見た目にはわかりません。

表示確認など

ブラウザの互換性をチェックする、クロスプラットフォームブラウザテスト - Browsershots

Browsershots

様々なブラウザの様々なバージョンでの表示を確認できます。ほんとすごい量です。時間がかなりかかるので時間に余裕があるときにどうぞ。

resizeMyBrowser

resizeMyBrowser

現在使用しているブラウザのサイズを変更できます。ユーザーのブラウザサイズは様々ですので、確認しておきたいです。

Simple Media Queries Tester

Simple Media Queries Tester

複数の解像度で表示確認ができます。1度に複数というのが便利ですね。

iPad Peek

iPad Peek

iPadでの表示が簡単に確認できます。iPhoneは持っているけど、iPadは持っていないので一応確認しておきたいです。

表示速度の確認

WebWait - Benchmark Your Website

speed-webwait.png

対象のページを複数回読み込んで平均値を出してくれます。

Which loads faster?

speed-which-loads.png

2つのサイトを同時に読み込んでどちらが速いか比べることができます。

Pingdom Tools

読み込み順のほかに、読み込み時間、ファイルサイズ、ファイルの種類などに並べ替えることもできます。過去のデータも保存できるので便利です。

Page Speed Online

speed-pagespeed.png

Googleが提供しているPage Speedのオンライン版です。URLを入力するだけで、そのサイトの点数やおこなうべき高速化の手段を教えてくれます。

その他

エンコードマニアックス - 各種エンコードやハッシュを一発作成

エンコードマニアックス

その名のとおり、様々なコードにまとめて変換してくれます。

HTML特殊文字変換ツール

HTML特殊文字変換ツール

コードをブログに載せるときは、特殊文字を変換しないといけないので使っています。他にもありますが、昔から使っているのでこちらをご紹介。

Another HTML-lint gateway

Another HTML-lint gateway

HTMLの構文をチェックしてくれます。ソーシャルメディアのボタンなんかを付けているとエラーだらけになったりしますので参考程度に使ってます。

W3C CSS 検証サービス

W3C CSS 検証サービス

正しいCSSがチェックしてくれるW3Cのサービスです。CSS3にも対応していますがベンダープレフィックスはエラーになってしまいます。

W3C Link Checker

W3C Link Checker

リンク切れがないかチェックしてくれるサービスです。

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

xml形式のサイトマップを作成してくれます。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
とても参考になります!
【2011/09/05 14:45】 | 山口 #- | [edit]
ありがとうございます。
ほんと励みになります~
またお立ち寄りください。
【2011/09/05 20:15】 | 管理人 #E2ywrYdA | [edit]
とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。
【2011/10/10 17:18】 | 履歴書の作成 #- | [edit]
ありがとうごいます。
またいつでも来てくださいね~
【2011/10/11 07:53】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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