WebデザイナーやWebクリエイターが知っていると幸せになれるかも知れないWebサービスやWebサイトのまとめ100+

Web制作において知っていると得するかも知れないWebサービスやWebサイトをずらずら書いていきます。

一度アウトプットをしておこうという意味合いで記事書いていきます。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

あ、ちなみに順不同です。

1. DeviantART


DeviantART
DeviantART(デヴィアントアート)はアートコミュニティーサイトで、写真・画像・イラスト・アイコンなどの数多くの作品が日々UPされています。
壁紙やアイコンセット、Photoshopのブラシなどを探して、このサイトに飛んだことがある方も多いのではないでしょうか。

2. Iconfinder


Iconfinder
フリーのアイコンなどを検索できるサイト。
検索は英語で打たないといけませんが、結構いろいろなアイコンがあるのでブロガーさんにもお勧め。
ライセンスは各々違います。

3. FindIcons


FindIcons
上に同じです。

4. htaccessEditor


htaccessEditor
最近知ったツールですが、htaccessの知識に乏しい方でも割りと簡単にhtaccessを作成できます。

5. Web計。


Web計。
白銀比や黄金比をサクサクっと計算してくれます。
画像の比率計算も可能ですよ:)

6. Addthis


Addthis
このブログにも使用しているAddthis。
TwitterボタンやFaceBookボタン、Google+ボタン、はてなブックマークボタンなど、各ソーシャルメディアやブックマークに対してシェアするボタンを設置できます。

7. iCloud


iCloud
iCoudのWebサイト。
AppleIDでログインしてデータを確認したり、iPhoneやMacを探したりメッセージを通知したりとWebブラウザから可能です:)

8. Instapaper


Instapaper
「後で読む」サービス。
iPhoneやPCで使用しています。
ブックマークレットやTwitterアプリなど後で読むサイトをサクサクっと登録。
Read It Laterを卒業してInstapaperに乗り換えました。

9. JPEGmini


JPEGmini
JPEG画像の品質をほとんど損なわずにファイルサイズを圧縮するJPEGmini。
どんなアルゴリズムなんでしょうねー、素晴らしい。

10. PunyPNG


PunyPNG
同じく画像を最適化してくれるサービスですが、こちらはJEPG,GIF,PNGに対応。
ファイルサイズは150KBのモノまでアップロード可能で同時に15ファイルまでいけます。

11. 100face


100face
僕の大先輩が立ち上げているWebサービス。
顔写真にHTML5エフェクトでアーティスティックな画像を作成します。
iPhoneアプリもあるので、画像を作成してTwitterのアカウントとかに使用してみてはどうでしょう(僕も使っています)。

12. Scratcho!スクラッチョ!


Scratcho!スクラッチョ!
手軽に好きな画像と組み合わせてスクラッチを作成できるサービス。
作成したスクラッチは、iPhoneからも遊べます。

13. ザ・インタビューズ


ザ・インタビューズ
最早この業界で知らない人は居ないかな?と思うくらい有名になった「ザ・インタビューズ」。
元々は匿名で身近な知り合いなどにインタビューできるっていうものだったみたいですが、今は有名人企画もしてるっぽいです。
気になるあの人にインタビューしてみては?

14. SlideShare


SlideShare
パワーポイントやPDFをアップロードしてシェア可能。
ブログへの埋め込みも可能です。

15. How Secure Is My Password?


How Secure Is My Password?
あなたの使用しているパスワードがどのくらいの期間でクラッキングされてしまうか表示するツール。
アルゴリズムもいろいろあるでしょうから、参考程度に…がいいとは思いますが、警告が出る場合はパスワードの変更を考えてみては?
hoge…なんて当然即クラック対象ですねw

16. SafePasswd


SafePasswd
上のサービスで「危険!すぐクラックされちゃうよ!」と言われてしまった方はこのサービスで、覚えやすく強度の高いパスワードを自動で生成してくれるようなので、使用してみてはどうでしょうか。

17. Croppy(クロッピィ)


Croppy(クロッピィ)
Webサイトからお気に入りのパーツを切り取って配色パターンも作成してくれるCroppy(クロッピィ)。
ちょっと注目しているサービスの一つです。

18. jsFiddle


jsFiddle
jsFiddle(ジェイエスフィドル)はブラウザ上でHTML、JavaScript、CSSを記述してそのまま実行できます。
シェア、ブログの貼り付けも可能でコードスニペットはEvornoteをやめてjsFiddleなどに保存するようにしてます。

19. Mobify


Mobify
Webサイトをスマートフォン用に最適化してくれます。
ずっとスペルをModifyと打っててMobifyなので引っかからなかったという…。

20. HTML5 Validator


HTML5 Validator
Bookmarklet
HTML5の構文をチェックするツールです。

21. Pixlr Photo Editor


Pixlr Photo Editor
Webブラウザ上で画像編集が出来るPhotoshopライクな画像編集ツールです。
レイヤー機能やレイヤースタイル機能などもあります。

22. IE6 No More


IE6 No More
今更な気もしますがIE6など古いブラウザでWebサイトを閲覧した時に、あなたが使用しているブラウザは古いバージョンのものなのでアップデートしてね!的なメッセージを表示することが出来ます。
コードはこちらからコピーできますよ:)

23. Inbook


Inbook
本を検索して好きな台詞を共有しちゃおうっていうサービスです。

24. Responsivepx


Responsivepx
github(ソースコード)
CSS3 Media QueryでレスポンシブデザインのWebサイトを構築する場合の確認ツール。
ソースコードも公開されておりローカル環境も構築可能。

25. Simple Media Queries Tester


Simple Media Queries Tester
同じくCSS3 Media QueryでレスポンシブデザインのWebサイトを構築する場合の確認ツール。
キャプチャはWebデザインレシピさんで検証させて頂きました結果ですー!

26. Repper


Repper
繋ぎ目のないシームレスなパターン画像を好きな画像を使って作成。

27. Cacoo(カクー)


Cacoo(カクー)
Web上でワイヤーフレーム等を作成、共有なども出来ます。

28. Closure Compiler Service


Closure Compiler Service
JavaScriptコードの軽量化、整形、エラー検出など。

29. BaseCamp


BaseCamp
プロジェクト管理ツールです。iPadやiPhoneで使っても良い感じ。

30. Backlog


Backlog
同じくプロジェクト管理ツールです。僕はまだ使ったことないんですが、無料プランではファイル共有とバージョン管理でSubVersionが使えるみたい。
無料プランの容量は100MBで10ユーザまでとのこと。以下の記事が参考になります。
どこでもプロジェクト管理『バックログ』の開発現場に来てみたよ! (via:IDEA*IDEA)

31. loads.in


loads.in
Webページの表示速度の測定。ちょっと重いのが難点。

32. CSS Prism


CSS Prism
CSSからカラーコードを抽出。地味に便利だと思うのですが、需要無いですかね?(個人的にお気に入り)。

33. Color of Book


Color of Book
雑誌を検索してその雑誌のカラースキームを抽出してくれます。

34. Adobe Kuler


Adobe Kuler
Adobe製のカラースキーム作成ツールです。

35. Web font tool


Web font tool
Google Web Fontで配布されてるフォントの一覧を確認。
「Get font」を選択すると埋め込み用のコードを取得できます。

36. simplelib with jQuery


simplelib with jQuery
良く使うjQueryプラグインをまとめてパッケージとしてダウンロードできるやつ。

37. HTMLエンコードフォーム


HTMLエンコードフォーム
HTMLタグの「<」、「>」、「&」、「"」、半角スペースなどをサクッと文字実体参照にエンコードしてくれます。
デコードも出来ますよ。

38. 9search


9search
9searchは商用利用可、クレジット表記・バックリンク不要のフリー素材を紹介するサイトです。
PhotoshopやIllustrator、Fireworks形式のファイルもあります。

39. CSS3 PIE


CSS3 PIE
角丸、ボックスシャドウ、グラデーションをIEにも簡単に対応させちゃいます。

40. Ajaxload


Ajaxload
Ajaxのローディング画像を作成します。
色と形を選んで透過するかしないかの設定も可能。

41. 漢字が使える日本語フォント 無料ダウンロード 46種類


漢字が使える日本語フォント 無料ダウンロード 46種類
ライセンスは各々確認宜しくお願いします。

42. CSSMania


CSSMania
CSSのギャラリーサイト。

43. 960 Grid System


960 Grid System
CSSでグリッドレイアウトを簡単に組めるCSSグリッドシステム。
WEBデザインレシピさんのレイアウト作りを簡単にしてくれるCSSグリッドシステムという記事が参考になります。

44. Xmarks


Xmarks
これを知らない方は勿体ないのです、超お勧め。
IE,Firefox,Chrome,Safariでブックマークを同期してます。
各アドオンや拡張機能が出てます。

45. jQuery


jQuery
Webをしててこれを知らない人は居ないだろうっていうくらい鉄板です。
プラグインも豊富なJSライブラリ。

46. jQuery Mobile


jQuery Mobile
タブレット端末やスマートフォンでWebアプリケーションを作るためのフレームワークです。

47. フォントhack.jp


フォントhack.jp
fonthack.jpでは多数の日本語フォントの表示確認ができます。複数フォントを同時に試せるのが便利ですね。

48. Google Web Fonts


Google Web Fonts
通常のGoogle Web Fontsのページ。

49. Brusheezy!


Brusheezy!
Photoshopのブラシ、テクスチャ、パターンをダウンロードできるサイトです。ライセンスは各々確認で。

50. Vecteezy!


Vecteezy!
Illustratorのai、epsファイルをダウンロードできるサイトです。ライセンスは各々確認で。

51. HTML5実力テスト


HTML5実力テスト
JavaScriptコースとHTML/CSSコースがあるので是非挑戦してみてください。

52. Kern Type


Kern Type
文字詰めの間隔を正しく直せるかのテスト。

53. Shape Type


Shape Type
ベジエ曲線で文字の形を調整するテスト。

54. FM 100 Hue Test


FM 100 Hue Test
ボックスをドラッグして横並びにグラデーションを作成する色相感覚のテスト。

55. Google ホリデーロゴ


Google ホリデーロゴ
歴代のGoogleのロゴをご覧になれます。

56. HTML5花火大会


HTML5花火大会
季節外れですけどw
2011年6月17日から募集され、2011年7月7日に開催されたものです。

57. Bootstrap


Bootstrap
Twitter謹製のCSSフレームワークです。バージョンアップで中々良くなってきた感じです。

58. Wink toolkit


Wink toolkit
スマートフォン向けのJSフレームワークです。

スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ(via:かちびと.net)

59. Mashup Awards 7 (#MA7)


Mashup Awards 7 (#MA7)
もう応募締切過ぎちゃいましたけど、複数のWeb APIを利用してマッシュアップを行うWebアプリ開発コンテスト「Mashup Awards 7 (#MA7)」のサイト。
応募作品が公開されているので見てみてはどうでしょうか。

60. PetRibbon


PetRibbon
まだリリースされてないみたいですけど、迷子のペットを探すためのサービスみたいです。

61. ATND


ATND
イベント開催支援ツールです。
イベントを登録したり参加したり。iPhoneアプリ勉強会とかここから参加しました。

62. クラウドロゴ


クラウドロゴ
ベクター形式のロゴ無料ダウンロードサイトです。無料で改変もOKとのこと、素晴らしい…。
勿論依頼してロゴを作成してもらうことも可能みたいです(ロゴ制作おまかせプラン:¥4,980)。

63. CS-Cartフリー版


CS-Cartフリー版
ECサイトを構築する為のパッケージソフトです。

CS-CARTフリー版11/11遂にリリース!クレカ決済が基本料無料や導入方法など使ってみたレビュー(via:susi-paku web)

64. WordPress


WordPress
ブログ・Webサイトなどが構築が可能なCMSです。

65. XOOPS CUDE


XOOPS CUDE
コミュニティサイト・Webサイトなどが構築が可能なCMSです。

66. OpenPNE


OpenPNE
SNSサイトを構築するためのCMSです。

67. Stripe Generetor


Stripe Generetor
手軽に使えるストライプ画像を作成するジェネレーター。
Photoshopのパターンに設定するとPhotoshopで簡単にストライプ模様がつけられます。

チュートリアル:photoshopで手軽にストライプ模様をつける方法(via:ホームページを作る人のネタ帳)

68. BonBon Buttons


BonBon Buttons
CSS3を使って可愛いボタンが作れるBon Bon Buttons。

69. Skeleton


Skeleton
HTML5 + CSS3 MediaQueriesでのタブレット端末・スマートフォン向けCSSフレームワーク。

70. Modernizr


Modernizr
使ったことはないけれどいたるところで耳にするModernizr。
HTML+CSS3の対応してない機能をチェックしたり利用できたり?するようにするみたいですね、使ったことないのでなんとも言えず…。
クロスブラウザ対応させる為のJSライブラリっぽいですね。

71. 1000PSD.COM


1000PSD.COM
Web制作に使えるPSDがダウンロードできるサイト。
商用利用も無料みたいです。

ウェブ制作にすぐに使えるPSD素材がダウンロードできるサイト -1000PSD.COM(via:コリス)

72. JQuery CSS Emoticons Plugin


JQuery CSS Emoticons Plugin
jQuery+CSSで画像を使わず記号を絵文字に変換するjQueryプラグインです。

73. Jay Cut


Jay Cut
無料でビデオ編集が出来てしまうオンラインツール。

74. Color Scheme Designer 3


Color Scheme Designer 3
カラースキームを作成するジェネレーター。
多分有名ですね。

75. smart4me


smart4me
スマートフォン向けサイトを超簡単に作成してくれる、らしい。

76. NameChecklist


NameChecklist
指定した名前でドメインやソーシャルメディアのアカウントが取得可能かチェックしてくれるツールです。

77. Lancers


Lancers
ロゴ作成・システム開発・ホームページ制作などお仕事依頼・検索。

78. SOHOビレッジ


SOHOビレッジ
フリーランサー支援サイト。お仕事の依頼・検索。

79. みんなのビジネスオンライン


みんなのビジネスオンライン
みんビズみんビズって良く聞きますよねー。
Googleが始めた法人向けサービスなんですが、一応内部的には「Jimdo」が取り入れられています。

誰でも簡単作成
無料で一年間
業種別の最適デザイン
独自ドメイン

っていうのを謳っているようです。

【WEB制作】どうなのこれ?Googleが始めた法人向けWEBサイト運用サービス『みんビズ』を利用してみた(via:susi-paku web)

80. Jimdo


Jimdo
ホームページを超簡単にサクサクっと作成できます。
無料プランもありますよ。

無料で簡単にホームページ作成・公開ができるサービス「Jimdo」が中々良かったのでご紹介

81. ブクログのパブー


ブクログのパブー
電子書籍がつくれて販売もできるサイト。

電子書籍作成・販売プラットフォーム「ブクログのパブー」を試してみた。(via:linker)

82. Google検索エンジン最適化(SEO)


Google検索エンジン最適化(SEO)
PDFも一緒にどうぞ。

83. WixMobile


WixMobile
smart4meと一緒でスマートフォン向けのサイトを手軽に作成できるサービスです。

84. Recurse


Recurse
スクリーンショットをアップロードして、お客さんが部分部分を指摘してコメントを残せるサービスです。

85. データ便


データ便
大きいファイルサイズのファイルを送りたいけどメールで直接ファイルを添付するのはちょっと…っていう時に使うサービスです。
300MBまで無料で転送してくれます。

86. 連絡in


連絡in
30分間だけ有効なメールアドレスを発行してくれます。捨てアド用。

87. DISQUS


DISQUS
当ブログにもDISQUSのコメントシステムを導入しました。

88. Fireworksマニア


Fireworksマニア
数少ないFireworksチュートリアルサイト。
来月本も出版されるようです。

Fireworks本の表紙が決まりました☆(via:VIVID COLORS DESIGN -ビビッドカラーズデザイン-)

89. Free CSS Templates


Free CSS Templates
フリーのCSSテンプレート集です。
商用利用も可能なようですが、フッターのクレジット表記は消さないように注意。

90. Free Flash Templates


Free Flash Templates
フリーのFlashテンプレート集です。
商用利用も可能なようですが、フッターのクレジット表記は消さないように注意。

91. Pingdom Tools


Pingdom Tools
こちらもサイトの表示速度検証ツールみたいですね。ページサイズとかも表示してくれるみたい。

92. HootSuite(フートスイート)


HootSuite(フートスイート)
Twitterクライアントとしても使用出来ますが、それだけではなくFacebookなどの他のソーシャルメディアのカラムの追加やトラッキングなども可能です。

93. Crowy(クロウィ)


Crowy(クロウィ)
同じくTwitterやFacebookなどのTLやフィードのカラムを追加して統合管理できるやつ。
最近使ってます。

94. Twitter Developer


Twitter Developers
Twitterのデベロッパーサイト。Twitterアプリ作成の際とかにアプリ登録必要。

95. iPhone Settings Short-cut App


iPhone Settings Short-cut App
iPhoneのWifiなどの設定のショートカットをホーム画面に設定するためのWebアプリ(※iPhoneのSafariからアクセスしてください)
中々良さげだったので使ってみました。

96. jQuery Mobile日本語リファレンス


jQuery Mobile日本語リファレンス
JQMの日本語のリファレンスです。

97. icotile(アイコタイル)


icotile(アイコタイル) | Twitter Friends and Lists Manager
TwitterのリストをiTunesみたいな間隔でどラックランドドロップで設定するサービス。

98. Buffer


Buffer
Twitterの予約投稿を可能にするサービス。

99. はてなブックマーク


はてなブックマーク
人気エントリなどがご覧になれます:)

100. WordCamp Tokyo 2011


WordCamp Tokyo 2011
WordCampご存知ですか?
いろいろな所で開催されてます、僕は11月27日のWord Camp Tokyo2011に参加してカンファレンスと懇親会参加します:)

101. Audiogalaxy


Audiogalaxy
ちょっと脱線しますけどPCにヘルパーを入れてそのマシンを立ち上げておくとiPhoneや別のマシンで音楽が聞けるってやつです。
便利すぎて泣けます。

102. Kraken


Kraken | Online Image Optimization Tool
JPEGとPNGをまとめて最適化。

103. Twitlistmanager


Twitlistmanager
Twitterのリストに一括追加するサービス。

104. Titanium Mobile


Titanium Mobile
JSでiPhoneのネイティブアプリが作成可能です。やったことないけど興味ありです。

初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件(via:Inifinite loop)

105. Sencha Touch


Sencha Touch
iPhone・AndroidでWebアプリを開発するためのHTML5対応JavaScriptフレームワーク。

106. Siimpler


Siimpler
HTML5ベースのスターターキットがダウンロードできるサイト。Reset CSS、Normalize.css、jQuery、Box-sizing、IE7 Stylesheet、IE8 Stylesheetなどをチェックして含めることが可能。

  

共有やブックマークなど