Web制作に役立つ総合情報サイト 7コ＋α

Webサイト制作に役立つ情報サイトをご紹介

今回は、Webサイト制作に関する情報を、広範に提供していらっしゃるサイトをご紹介いたします。

「広範に〜」というのは、ひとつのジャンルに偏りがなく、「いろいろな情報」を提供しているサイトということです。

例えば、CSS（マークアップなど）に特化しているのではなく、プログラミングや、CMS、デザインなど情報が多岐にわたっているサイトです。

すでにみなさんには、おなじみのサイトばかりかもしれませんが、良かったらご覧くださいませ。

• Web制作に役立つ総合情報サイト 7コ
• Web制作に役立つ総合情報サイト（おまけ）
• 次回予告
• 関連記事
• この記事へのコメント

▲ページの先頭に戻る

Web制作に役立つ総合情報サイト 7コ

1：coliss

（1）「coliss」とは？

「coliss（コリス）」さんは、Web制作に役立つ情報を提供する有名なサイトのひとつです。

とくに海外のWeb制作情報を翻訳、紹介する記事が多く、非常に多岐にわたる情報を提供していらっしゃいます。

（2）おすすめの記事

例えば、CSSについては、おもしろいテクニックや、ブラウザ間の差異をうめるような方法、最近であれば CSS3関連のネタなどですね。

• 『CSS3で何ができるの？という時にみておきたいサイト集』
• 『上級者向け、スタイルシートのテクニック集』
• 『クロスブラウザのためのHTML/CSSのテクニック集』
• 『いろいろな問題を解決する1行のスタイルシート集』

人気のブログツール「WordPress」の情報も、充実しています。（大半は、プラグインの紹介などが多いのかな）

• 『WordPressの設置後、すぐにやっておきたい10の作業』
• 『使用しているWordPressをさらに便利にする7つの方法』
• 『簡単にカスタマイズができるシンプルなWordPressのテーマ -Empty Canvas』

Photoshopのチュートリアル（加工の手順）や、ブラシの情報も日々更新されます。

• 『美しい光を描くためのPhotoshopのチュートリアル集』
• 『グラデーションをマスターするためのPhotoshopのチュートリアル集』
• 『テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 2』

フリーフォントの情報もね、整理しきれないくらい紹介されています。（海外のものが多いですけどね）

• 『商用サイトでも無料で利用できる日本語のフリーフォント集』
• 『可読性が高い、使いやすそうなフリーフォント集』
• 『汚した感じがかっこいい、グランジ風のフリーフォント集』
• 『プロユースレベルの高品質なフリーのフォント集』

さらに、フリーのWeb素材も、これでもかってくらい紹介されています。（驚くくらい高品質です）

• 『商用・非商用で使用できるフリーの写真素材サイト集』
• 『商用・個人サイトで利用可能なロイヤリティフリーの写真素材サイト集』
• 『イメージアップに効果的なロイヤリティフリーの写真素材30選 -stock.xchng』

コリスさんは、必ずRSS登録しておきたいサイトのひとつです。

▲ページの先頭に戻る

2：phpspot開発日誌

（1）「phpspot開発日誌」とは？

「phpspot開発日誌」は、KJさんが運営しているこれまた有名な情報サイトです。

（2）おすすめの記事

phpspotさんも、多岐にわたる情報を提供していらっしゃいます。コリスさんと同様に海外の情報を翻訳したり、紹介する記事が多いようです。

あえて、コリスさんとの違いをあげるなら、少しプログラミングよりの情報が多いことでしょうか。

まずもって、CSSの情報は、定番ですな。

• 『IE共通の9つのCSSバグをそれぞれ解決する方法』
• 『CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集』
• 『これは驚きの、CSSだけで作れる吹き出しボックス』
• 『これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20』

昨年から定着してきた感のある jQueryのプラグインなどを紹介する記事も散見することができます。今年（2010年）は、JavaScript系の話がさらに増えそうですね。

• 『画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」』
• 『ページ内に雪を降らせられるjQueryプラグイン「jSnow」』
• 『サイトにTwitterの機能を組み込むためのjQueryプラグイン集』

Photoshopに関する情報も、手堅く掲載されています。（比率としては、少な目かもしれません）

• 『200を超える非常に美しいPhotoshopのパターン集』
• 『高度な画像編集が一瞬でできてしまうPhotoshopアクション集』

あるいは、ちょっと変わったフォントを紹介してくれたりもします。

いいですね萌え系、かわいらしい。そういえば、あまり最近は「萌え、萌え」言う人もいなくなってしまいましたね。なにしろ、萌えてばかりもいられないというところでしょうか。

• 『萌え系フォントのまとめ』
• 『美しいフリーフォント45セット』
• 『女性の書いたようなやわらかい萌えフォント「あんずもじ」』

アイコンや、写真素材などの情報も、もちろん充実しています。

• 『フリーの写真素材が入手出来る30サイト』
• 『2009年に発見した秀作アイコンのまとめ』

たまに、コリスさんとネタがかぶることもあるので、相互に比較されることも多いように思います。どちらも優劣つけがたいサイトだと思うのですが、どうなのかしら。

みなさんそれぞれに、どちらかをご贔屓（ひいき）にしているとか・・・コリス派、phpspot派などに分かれていたりするのでしょうか。（んなこたぁない）

（3）執筆、著作物

以下、KJさんが執筆したPHP本です。（共著：田中ナルミさん）

• 『PHPによるWebアプリケーションスーパーサンプル活用編 第2版』

▲ページの先頭に戻る

3：かちびと.net

（1）「かちびと.net」とは？

「かちびと.net」は、高橋洋平（シロ）さんが運営しているすてきな情報ブログです。

前身のSEOブログから大きくモデルチェンジし、いまや名実ともに、誰もが知っているような有名なサイトのひとつとなりました。

（2）おすすめの記事

かちびとさんと言うと、やはりWordPressの印象が非常に強いですね。管理画面の操作マニュアルも、無料で配布しておられます。すばらしい。

• 『著作権放棄のWP2.9の管理画面の操作マニュアルを無料配布します』（WordPress2.8）
• 『WordPressでWebサイトを構築するまでの手順リスト』
• 『WordPress使いが覚えておくと便利な7つ道具』
• 『日本語で読めるプラグインを使わないWordPressカスタマイズ方法まとめ』
• 『全てのWordPress使いが導入を検討すべき１５のプラグイン』

それから、今どきのWeb制作に役立つツールの紹介とか・・・。

• 『【全部無料】 Web制作に役立つオンラインサービスやツール300+』
• 『国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス』
• 『サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ』

Twitter系のツールのまとめも、いいタイミングでした。さすがです。

• 『Twitter関連ツール・まとめ』
• 『日本国内でリリースされた14のTwitter系ツール』

そして、フリーフォントの情報だとか。

• 『フリーの細字フォントいろいろ』
• 『フリーのグランジ風フォントいろいろ』
• 『キッズ向け、ママさん向けサイトに使えそうなフリーのフォントいろいろ』

Web素材なども、しっかりまとめられています。（何しろ、まとめるのがうまいのだよ、この人ってばさ）

• 『商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009』
• 『国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ』
• 『シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ』

ちょっと個人的なお話で恐縮ですが、次の記事も情報収集・整理をする上で参考になりました。（こういう経験からつむぎ出される情報は、本当に貴重）

• 『効率よく欲しい情報を手に入れてアウトプットできるWebマーケッターになる5つの条件』

かちびとさんは、以前、記事『ネットで口コミを伝染させる特別な人々』でもご紹介させていただいているのですが、やはりインフルエンサーとしての能力の高さは、ずば抜けている感じがします。

さらに今後の活躍が、楽しみです。

▲ページの先頭に戻る

4：ホームページを作る人のネタ帳

（1）「ホームページを作る人のネタ帳」とは？

「ホームページを作る人のネタ帳」は、Yamadaさんが運営している超有名な情報ブログです。

お世話になった人も、とても多いのではないでしょうか。

（2）おすすめの記事

ネタ帳さんは、Web制作に関する情報はもちろんですが、ブログの作成法（作成していく上での考え方）についても、役立つ情報を提供していらっしゃいます。

ネタ帳さんが、記事『ブログを成功させる攻略まとめ2009』としてまとめておられるので、そちらをご覧いただくと良いと思いますが、少しご紹介しておきます。とくに、次の4つはおすすめですよ。

• 『アクセス数を生む為の、サイトやブログ、記事を作る前に考えるべきキューブの法則』
• 『初心者が簡単にプロっぽく記事の内容を仕上げるテクニック』
• 『WEBで自分が伝えたい事をきっちり相手に伝える為の7のコツ』
• 『口コミされるブログの作り方』

それから、Web制作に役立つ無料のツールのご紹介であるとか。

• 『『無料＋ブラウザ』で全部やってしまおう。 webジェネレーターとサービス50個まとめ』
• 『有料ソフトとデザイン作業を無力化させる30のブックマークまとめ』

やはり、フリーフォントの紹介もございます。（もちのロンでござる）

• 『フリーで使えるいい感じの手書き風フォント特集（日本語も）』
• 『フリーで使えるオシャレなフォント500種類』

そして、Web素材ね。こうしてみると、いろいろな意味で、先駆者といえる存在といえそうです。影響を受けた人も、多いのではないかしら。

• 『商用無料で使える写真素材サイトまとめ2009 年度初版』
• 『ハイクオリティ無料アイコンまとめ100パック2009年最新版』
• 『新しくてクオリティの高すぎるアイコン集』

お忙しいためか、以前よりは、更新頻度が下がってきているみたいですが、今なお役立つ情報サイトのひとつであります。

▲ページの先頭に戻る

5：to-R

（1）「to-R」とは？

「to-R」は、かの有名な西畑一馬さんが運営している情報サイトです。

（2）おすすめの記事

to-Rさんも、Movable Type、SEOなど、多岐にわたる情報がつまっていますが、とくにJavaScript系の印象が強いように思います。

例えば、jQueryのお話であるとか・・・。

• 『jQuery基礎文法最速マスター』
• 『8のjQueryのすごいTIPS』
• 『jQueryを良くする25のTIPS』
• 『jQueryのコードを良くする5つのTIPS』

自作のJavaScriptのツールも公開しておられます。かっこいい。

• 『ブロックレベル要素の高さを揃えるheightLine.js』
• 『IE6以下をWeb標準に準拠させるライブラリ『IE7.js』』
• 『アルファ画像を扱うalphafilter.jsライブラリ』
• 『FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」』

お仕事だけでなく、CSSNiteや、執筆活動などでもお忙しそうです。

（3）執筆、著作物

以下、西畑一馬さんが執筆した本です。（『現場のプロから学ぶXHTML + CSS』は共著）

• 『Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) 』
• 『現場のプロから学ぶXHTML+CSS』

▲ページの先頭に戻る

6：バシャログ。

（1）「バシャログ。」とは？

「バシャログ。」は、横浜の株式会社シーブレインさんが運営している情報サイトです。

これほどいろいろな情報を、分かりやすく公開しているWeb制作会社さんは珍しいですよね。それだけ、技術力に自信があるということでしょうか。

（2）おすすめの記事

印象としては、次のようなCSSの小技をご紹介する記事が多いような気がいたします。

• 『覚えておいて損はない CSS の定番テクニック BEST 5』
• 『ページ送りナビゲーションには display:inline-block が超便利』
• 『[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー』
• 『HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2』
• 『CSSで実装するちょっと凝ったパンくずリスト』

そして、jQuery。行楽のおともに、jQuery。あの娘も、この娘もjQuery、そんなあなたにjQuery。

• 『[jQuery] フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す』
• 『デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々』

また、Fireworksのネタを提供しているサイトさんは、とても珍しいですよね。Fireworksは、俺の嫁。大好きです。松坂は大輔です。

• 『すこしズルしてリアルなアイコンを作る方法』
• 『【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法』
• 『Fireworksでボタン画像を作る8つのステップ』

あとは、MovableTypeの役立つ情報なども、ちらほら。プラグインの情報とか、ありがたいよね。

• 『MovableTypeで企業サイトを構築する際に、つかえるプラグインまとめ その2』
• 『Amazon風の一覧ページを Movable Type で実装するときに覚えておきたいループ処理』

それから、PHP入門などもございます。プログラミングに興味のある方は、ご覧になってみてはいかがでしょうか。

• 『10日で覚えるPHPのキソ（超基礎編）』

▲ページの先頭に戻る

7：Webクリエイターボックス

（1）「Webクリエイターボックス」とは？

「Webクリエイターボックス」は、Manaさんが運営している情報サイトです。

いま一番の注目サイトではないかしら。とても切り口がうまいんですよね、これがまた。

（2）おすすめの記事

サイトの公開は、2009年11月頃（？）みたい（訂正：2010年1月）なので、他のサイトさんと比べてしまうとまだ情報量は少ないのですが、1つ1つの破壊力がものすごい。

一番最初に見た記事が、これかな。

• 『ミュシャ(Mucha)から学ぶ優美なデザイン』

ミュシャ(Mucha)が好きであるとか、あるいはクリムト（Klimt）が好きというような人は多いと思うのですが、こういう形でWebデザインへの応用をうたう題材として取り上げるというのは、おもしろいですよね。

それから、手堅くWordPressのネタなどもあり〜の。

• 『プラグインを使わずWordPressに6の機能をつける』
• 『Wordpress オリジナルテーマの作り方』

Webクリエイターならではの情報もございます。クライアント（顧客）さんからのムチャぶりについては、「あー、あるある」と思った人も多いのではないかしら。

• 『クライアントからのムチャぶり迷言集』
• 『Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方』

さらに、マーケティングのネタもあります。こういう話、大好き。

• 『少女のレモネードスタンドから学ぶ9つのマーケティング術』

これって、前年末バカ売れした本『フリー（FREE）』とも通じるところがあるような気がします。（積ん読になっちゃって、まだ読んでないけどさ）

時代は変わるのだね。（Like a rolling stone）

▲ページの先頭に戻る

Web制作に役立つ総合情報サイト（おまけ）

今回はお時間の都合もあってご紹介できませんでしたが、他にもWeb制作に役立つ情報サイトさんは、たくさんございます。要チェックやで。

• 『WWW WATCH』
• 『TRANS [hatena]』
• 『mBlog』
• 『blog.wonder-boys.net』
• 『Web屋のネタ帳』

また、今回は、例えばデザインや、CSS、CMSなど、あるジャンルに特化したサイトさんは除外いたしました。

「なぜ、あのサイトを紹介しないのか！喝（かーつ）！」などと思っているあなたの気持ちは、分かっています。いつかまた別の機会に、ちゃんとご紹介させていただきたいと思います。

▲ページの先頭に戻る

次回予告

次回は、どうしようかしら。とりあえず、小ネタをいくつかアップしようとは思っています。（FC2ブログで−区切り線−を挿入する方法）

▲ページの先頭に戻る

関連記事

リンク集を、ご紹介します。

1：リンク集

• FC2ブログの作成に役立つサイト（まとめ）
• SEO対策に役立つサイト
• SEO対策に役立つ情報サイト 厳選14＋α
• Web制作に役立つ総合情報サイト 7コ＋α（この記事です）

▲ページの先頭に戻る

作成日：2010/03/13 更新日：2010/03/28