WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

まとめる。

webとwebデザインに関しての、WEBCRE8.jpによる
情報まとめのカテゴリです。

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

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

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

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

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

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

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

素材サイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • XHTMLの書き方と留意点昔からかなりお世話になってました。XHTMLの詳しい説明
  • HTML5.JPHTML5ならここ。個人的に好きなサイトベスト5入りかも
  • とほほのスタイルシート入門とほほさんにもお世話になってますw 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地味に便利な代替画像を生成出来るサービス。書き方を覚えたらサイトに訪れることはほとんどないけどw オススメなので!

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

SEO関係で役立つサイト

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

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

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

終わりに

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

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

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

追記

やっぱり忘れてた。シルエット素材をよく使わせてもらっているサイトを2つ挙げます。

  • シルエットデザイン他にもドットアイコンとか作ってる人たち。あとガラケー用のフラッシュ制作とかでお世話になりましたw
  • all-silhouettes.comこの手の海外素材サイトで商用可クレジット表記義務なしはかなり珍しいような。重宝

追記2

ページのパフォーマンスを改善するためのツールを追加しました。

  • PageSpeed InsightsGoogleのパフォーマンス改善点を指摘してくれるサービス。GTmetrixと違って日本語対応
  • WebWait指定のサイトを5回表示した平均表示スピードを計測してくれるサイト。これもGTmetrixよりいいかも