ウェブサイト作成に役立つ35のwebサービス
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。
フォント関係
wordmark.it
パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。
日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。
日本語フォントの表示が確認できます。現在252種類あります。
PXtoEM.com: PX to EM conversion made simple.
ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。
カラー関連
ウェブ配色ツール Ver2.0
配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。
Color Scheme Designer 3
カラーパレットジェネレーターです。海外サイトですが非常に使いやすいです。サイトを作った場合のサンプルページを見ることもできます。
0to255
色を選ぶとグラデーションが表示されます。
カラーコード変換ツール
カラーコードの10進法と16進法を相互変換してくれます。地味ですがよく使っています。
CSS、JavaScript関連
CSS Sprite Generator | Project Fondue
CSS Spriteのための画像を作成するサイトです。このブログでも使用しましたがとても簡単です。
Compress javascript and css
CSSやJavaScriptを圧縮してくれるサイトです。「powerful compress」で改行や空白をすべて消去します。圧縮したら編集のときに困るという場合は、次のサイトで元通りに戻せます。
ProCSSor - Advanced CSS Prettifier
CSSを見やすくきれいにしてくれます。圧縮したCSSも元通りになります。
dean.edwards.name
JavaScriptの圧縮や難読化をしてくれます。
CSS3.0 Maker
テキストまわりから、角丸やシャドウ、回転など色々作れます。
CSS3関連のジェネレータを集めていますので「CSS3プロパティの勉強になるジェネレータ16個もご参考に。
画像関連
BgPatterns ― Background Patterns Maker
こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。このブログでも使ってます。
ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個もご参考に。
bgMaker
背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。
Seamless Pattern Background Designs
様々な背景用パターン画像が作れます。サンプルが膨大で色やサイズも自由に変更できます。
favicon.cc
よくあるタイプですが、描いた絵を動かしたりもできるので便利です。作ったファビコンはこのサイトのファビコンにリアルタイムに反映されるので確認しやすいです。あとアニメーションも作れます。
web計。
私はあまり徹底できていないのですが、画像の黄金比や白銀比を計算してくれます。
Pixlr
オンラインで画像編集ができます。日本語化されていて使いやすいです。「Open photo editor」でエディターが開きます。
resizeimage.org - Resize images with ease
画像サイズを簡単に変更できるサイトです。
スクリーンショット - 無料バナー作成工房
簡単にスクリーンショットが撮れます。幅は自由に決められて、長さは最後まで撮ってくれます。編集もできます。
PunyPNG - PNG Compression and Image Optimization - Gracepoint After Five
png形式の画像を圧縮してくれます。サイズは減っているものの見た目にはわかりません。
表示確認など
ブラウザの互換性をチェックする、クロスプラットフォームブラウザテスト - Browsershots
様々なブラウザの様々なバージョンでの表示を確認できます。ほんとすごい量です。時間がかなりかかるので時間に余裕があるときにどうぞ。
resizeMyBrowser
現在使用しているブラウザのサイズを変更できます。ユーザーのブラウザサイズは様々ですので、確認しておきたいです。
Simple Media Queries Tester
複数の解像度で表示確認ができます。1度に複数というのが便利ですね。
iPad Peek
iPadでの表示が簡単に確認できます。iPhoneは持っているけど、iPadは持っていないので一応確認しておきたいです。
表示速度の確認
WebWait - Benchmark Your Website
対象のページを複数回読み込んで平均値を出してくれます。
Which loads faster?
2つのサイトを同時に読み込んでどちらが速いか比べることができます。
Pingdom Tools
読み込み順のほかに、読み込み時間、ファイルサイズ、ファイルの種類などに並べ替えることもできます。過去のデータも保存できるので便利です。
Page Speed Online
Googleが提供しているPage Speedのオンライン版です。URLを入力するだけで、そのサイトの点数やおこなうべき高速化の手段を教えてくれます。
その他
エンコードマニアックス - 各種エンコードやハッシュを一発作成
その名のとおり、様々なコードにまとめて変換してくれます。
HTML特殊文字変換ツール
コードをブログに載せるときは、特殊文字を変換しないといけないので使っています。他にもありますが、昔から使っているのでこちらをご紹介。
Another HTML-lint gateway
HTMLの構文をチェックしてくれます。ソーシャルメディアのボタンなんかを付けているとエラーだらけになったりしますので参考程度に使ってます。
W3C CSS 検証サービス
正しいCSSがチェックしてくれるW3Cのサービスです。CSS3にも対応していますがベンダープレフィックスはエラーになってしまいます。
W3C Link Checker
リンク切れがないかチェックしてくれるサービスです。
サイトマップを作成-自動生成ツール「sitemap.xml Editor」
xml形式のサイトマップを作成してくれます。
