WEBCRE8.jp > まとめる > 私がweb制作でよく使うサイト47+α 作業ごとリスト

私がweb制作でよく使うサイト47+α 作業ごとリスト

この記事は約10分ぐらいで読めます

web制作の作業の中で頻繁にお世話になるサイトやサービスってありますよね。若干自分の為でもあるんですけど、webcre8が制作中頻繁に開くサイトのリストを作ってみました。

web制作でお世話になっている便利サイト

今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。

webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。

これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ

素材サイト

まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこういったサイトのものしか使ってないです。

とりあえずフリーの写真を使いたいってときは上から順番に検索して行きます。大抵の場合はクオリティを求めるごとに下にさがっていく(パブリックドメイン→国外→国内)感じですｗ何が何でもキレイな写真を探したいってときだけ後半の国内素材サイトを探し尽くします。

あ、パブリックドメインの素材サイトは当ブログの以下の記事でもまとめてます。

[webコンテンツ]パブリックドメインで使える音楽・画像・テキスト等まとめ

Wikimedia Commonsまずここで「public domain ○○○(英語)」で検索。適当な画像はこれで
PublicDomainPictures.netここもパブリックドメイン
morgueFileフリー写真の海外のだと一番使いやすい
123RFキレイな画像を400px程度までのものならフリーで使える。ブログやバナー用に
写真素材足成定番のフリー写真素材サイト
PAKUTASO人物写真と、写真ありきのものを作るとき眺めに行ったり
モデルピース人物写真。いつの間にか男性や複数人写真が追加された
ソザイングこちらも久しぶり見ると料理写真が充実してます。
PHOTO STOCKER鮮やかな自然の写真が多いイメージ
Free.Stockerフッタに具体的なタグがあるので何があるのか一通り見ておくと探すのラク

利用者側の視点で言わせてもらうと個人的には人物ならモデルピース、ぱくたそという様に素材サイトさんの方もウリと言うか、特に重点的に集めるジャンルとかを決めておく(さらに打ち出しておく)とキャラが立って良いのではないかと思ってます。毎回色んなサイトを見ちゃう人もいるでしょうからね…。

あと使う側の人へのアドバイスと言うか、webcre8はこうしてますって話しですけど。
写真点数が少ないサイト(1000前後とか)では、キーワードを絞って探しに行ったところでドンピシャのものはさすがに見つかりにくいです。なのでそう言うサイトは予め暇なときにどんな写真があるのかとさらっと見ておくと、いざ写真を使って何か作りたいとき「確かあんな写真があったような…」と記憶をたどったり、写真の記憶の方からインスピレーションが湧かせることも出来ていいのではと思います。同じ写真素材サイトでも点数の多いサイトと少ないサイトで使い方を変えるとよいのではないかなって感じです。

webデザインに役立つサイト

デザインのときにちょこちょこ使うサイト。アイコンとかはわりと自分で作っちゃう方なのであんまりチェックするサイトはありません。参考としてIconsPediaやGoogle画像検索を使う程度。

もしアイコンを自作する場合は当ブログの以下の記事が参考になると思いますんで見てみてくださいｗ

[デザイン]アイコンを作りたい人へ。作るべきキーワードを集めました

flipping typicalインストールフォントの一覧サービス。最近はPs上でしか見なくなったな…
WEB色見本原色大辞典色選び系はこれのみ。Kularもいいけど色は自分で選ばないともったいない！ｗ
絵フォントイラストフォントWinに標準インストールされている4つのDingbat(絵フォント)を一覧できる。チープな表現をしたいとき未だに使う
iromiru画像からカラーコード抽出。Ps立ちあげてないときに
はてなブックマーク – glat_design のブックマーク – サイト(webギャラリー)

ちょっとした計算に役立つツールとかを公開してるサイトは自分でも作りたいなーとか思ってて、@take_it02さんのweb計。や@mach3ssさんのCoDogueとかがあります。こういうのこれからサービスを作っていく練習によさそうだなと思ってるんですがまだなかなか優先順位が上がりませんｗ

最後のはてなブックマークのリンクはwebcre8が「サイト(webギャラリー)」と言うタグを付けているサイト達です。最近業務的にあんまり見てないので「よく使う」でもないなーというのと、36とちょっと数が多すぎたのでこの形で紹介させて頂きました。それぞれの用途にあったギャラリーをチェックしてみてください★

あと、デザインで素材を使うとき必須なライセンス関係の資料、リンク集として当ブログの記事を置いておきます。

[ライセンス]結局何を使っていいの？利用者視点でのよくわかる著作権！
[ライセンス]どれにする？制作者視点での目的別ライセンスの選び方

コーディングに役立つサイト

定番のリファレンスからちょっとしたお役立ちツールまで。私が良く使う、なので偏っているのはご容赦を…ｗ

XHTMLの書き方と留意点昔からかなりお世話になってました。XHTMLの詳しい説明
HTML5.JPHTML5ならここ。個人的に好きなサイトベスト5入りかも
とほほのスタイルシート入門とほほさんにもお世話になってますｗ CSS3まで網羅
jQuery 日本語リファレンス残念ながらwebcre8がjQueryを使いだした1.4のころから更新止まってます…
skuare.netjQueryプラグインを探している人には必ず勧めているサイト。サンプルもあって便利！
WordPress Codex 日本語版困ったらCodex。WordPress分からないことだらけです…
WordPressスニペットこっちはこれからお世話になりそうなのでチェック。逆引き的な使い方
FindMeByIPHTML5、CSS3の各機能のサポート状況の表。見た中では一番網羅してる感じ(英語だけど)
HTML5 Please同じくCSS3、HTML5の対応表。未対応のものの対応の仕方まで書かれている(英語だけど)
Grad3CSS3のグラデーションとかその辺のコードを生成するジェネレータ。ベンダプレフィックスとか選べたり
文字数チェッカーバナーやリスティング、ブログタイトルやDescriptionの文字数に
Web制作小物ツールダミーテキストやHTMLエンティティ化等。こういうセットは自分で作りたいなー
HTML4 で使える文字実体参照数字実体参照もあるので状況問わず使えるはず
jsdo.itまだ殆ど使ってな(ry これから使います！
jsFiddleアカウント作らないでいいからついこっちを使っちゃう。CSSやJSの実験が出来ます
Web developer’s toolkitサイトマップ作成やCSS、JSファイルのミニファイが出来る
WhatTheFont! ? MyFontsこの画像に使われてるフォントなんだっけってときに似てるフォントを見つけて来てくれるサービス
Placehold.it地味に便利な代替画像を生成出来るサービス。書き方を覚えたらサイトに訪れることはほとんどないけどｗオススメなので！

ドメイン、アップロード周りで役立つサイト

ドメイン登録(VALUE DOMAIN)トップレベルドメインの選択肢が多い
whois情報検索ドメインの登録者情報等の確認
Domainrドメインハック(del.icio.usみたいな変なドメイン)したい人用
.htaccess Editor超便利。欲しい.htaccessをさっくり作れる
sitemap.xml Editorこっちも名前の通り。便利
GTmetrixサイトのパフォーマンスのチェック

SEO関係で役立つサイト

SEOはそんなに詳しくないですけどもっと色んなサイトがあるでしょうねー。

SEOチェキ!豊富な機能を揃えたSEOツール
Google トレンドあるキーワードがwebでどの程度話題になっているかをチェックするツール。キーワード選びに
Google Insights for Searchもっと詳しい、というか大局的なやつ。どの情報をきっかけに流行ったかとかも調べられる
Google PageRank Checker一応。たまに見ます

この辺とアドワーズのキーワードツールなんかを使ってます。

その他たまに使う制作関係のサービス

Support Details相手(お客さんとか)のIPやブラウザを聞きだすのに超ラク
顔文字ツクールたまに顔文字作ったりします
namechkとりたいアカウントが他のwebサービスでとられてないかチェックできる
QRコード作成GIF、JPG、PNGでQRコード作成
用紙サイズ一覧.com名刺や写真のサイズ等が確認できます

終わりに

こんなもんですかね。だーっと書いたので忘れてるのもあるかも。webcre8はなるべくwebサービスに頼りたいのでソフトを使ってやってる便利機能なんかも同等のwebツール、サービスがあったら探したいですね。ジェネレータなんかも元々あんまり使わないのでそんなに吟味してないんですよね…。なのでこっちの方が便利なのに…とかあったら嬉しいです。

もし普通に「えっこれ使ってないのハズカチー」とかあったら@webcre8へのリプかブログコメントで教えてもらえると嬉しいです★あと…これのプログラマ版とか、SEOとかその辺を詳しい人が誰か書いてくれたらここで紹介させて欲しいなーとか(ﾁﾗｯﾁﾗｯ

この記事を書きかけている間にWebparkさんの私がウェブサイト作成時にお世話になっているサイトをご紹介｜Webparkと言う記事を見かけたのですが、なるほどこうしてみると同じような機能であっても見ているサイトは全然違うんですねー。参考にしてこのリストもブラッシュアップして行きたいですね★