web制作者の為の2007年7月に見逃がせないベストエントリ66個ほど
2007年08月16日 公開
2007年7月に話題となったエントリーの私のブックマーク66個のまとめです。
もしかしたら見逃してしまっている記事があるかもしれませんので、興味のある方は暇なときにでもダラ見してみてください。
アイコンサーチエンジン

フリーで使えるアイコンのサーチエンジン。
フリー・ダウンロードのためのアイコンセット

ロイヤリティーフリー。
シンプルなアイコン

ライセンス:CreativeCommonsらしいです。
ボタンアイコンジェネレータ『buttonboost』

ボタンアイコンを生成するwebサービス。
多くのボタンを短時間で生成する。種類も豊富です。
使い方のレビューはこちら
WEB2.0バッチアイコンジェネレータ

WEB2.0なバッチのアイコンを生成します。クオリティ高すぎですが、現在笑えるほど重いです。
国旗アイコン、国旗バッチ

ダウンロードファイルは2種類。
一つは大きな画像のバッチをクリックするとバッチ国旗がダウンロード。
もう一つは、下の文章の中の『zip』と書かれたリンクをクリックです。
PhotoShopブラシ・春を感じるもの

春の涼しい感じを受ける花のPhotoShopブラシ。なかなか素敵なものが作れそうな予感。
クオリティ高過ぎのアイコンサイト

前回も紹介しましたが、随時更新しているようなので、再UP。
liquidicity » 165 Vector Icons, Now in 5 Colours

Freeアイコンが165個。
上質なものが豊富。
ただし、この光時代に、久しぶりに味わったテラ重いページなので、ブラウザが落ちてもいいようにしてから見たほうがいいかもしれない。
窓の杜 - 【NEWS】1枚の画像からウィザード形式で簡単にアイコンを作成「アイコン ウィザード」
一枚の画像からアイコンを生成してくる便利ツール。
フリーで使えるFLASHの無料テンプレートサイト

Flashの勉強にもなるサイト。
テンプレートを使って、スタイリッシュなwebサイトを作成してみませんか?
あなたを刺激する新しい動きを発見するための7つのFLASHサイト*ホームページを作る人のネタ帳

画像が大きくてごめんなさい。前回作った画像をそのまま流用でご紹介。
FLASHの動きの新しいテーマを追いかけた特集です。
13Styles.com - css menu styles, high quality css menus, website navigation menus

ナビゲーションCSSメニューをセットでダウンロードさせてくれます。
いいサイトがあるもんですね。
CSSデザインできるスクロールバー表示JavaScript (fleXcroll) - youmos

CSSでスクロールバーをオシャレにしたい人のためのエントリー。
2カラムサンプル13種|CSS HappyLife
2カラムのブログデザインのための13個をサンプルとして表示してくれている。
勉強になりますね。
CSS Juice » 25 Rounded Corners Techniques with CSS

丸角の作り方の紹介25選。
AdSense広告をCSSでWeb2.0風にするテンプレート29種類 - GoogleMania | グーグルの便利な使い方
味気ないAdSense広告をクールに見せるCSSテンプレートの紹介です。
アドセンスの利用規定の問題が言われていましたが、この後に書かれている記事で、AdSense利用規定はOKだという記事もありますので、大丈夫だと思います。
CSSレイアウト情報を瞬時に確認できるブックマークレット「XRAY」: DesignWorks
私のような出来の悪いウェブ制作者にぴったりだったのでブックマークしておいたエントリー。初心者にもお勧めですね。
12 のレイアウトを切替可能なテンプレート | WWW WATCH
ここの管理人が言うように、まさに1つのテンプレートで12おいしい。
ブラウザだけでプロっぽい高度な写真加工ができる『pikifx』 | P O P * P O P
ほんとすごいですよ。まとめじゃないですが、使い方が掲載されています。
かなり高度な事がブラウザのみで出来ます。
無料で使えるデザイン系ソフトいっぱい - DesignWalker
30を超えるデザイン系ソフトのまとめ。
ウェブ製作に使える無料アイコンサイト17連発! : HotWeb Magazine
無料アイコン配布サイトのまとめ。
ショッピングカートアイコンいろいろ - DesignWalker
作者に連絡しなきゃならないものや、大手サイトのアイコンを配布しているサイトとか、殆どがそのまま使えないかもしれないけど、制作の参考には間違いなくなる。
Wanted: Your 404 Error Pages | Design Showcase
ページが無い場合に表示される404エラーページをスタイリッシュにしているサイトを紹介しています。
エラーが出たときにどうするかと言う問題改善に表示参考になりますね。
無料で使えるデザイン系ソフトいっぱい - DesignWalker
『いっぱい』という表現がなぜか興味を引かれてみたら、本当にいっぱいだった・・・。
TIME誌が選んだ50ベスト・ウェブサイト2007 - DesignWalker
ベスト10位までま、スクリーンショット付きでとめられている。
その先のリンクはRank Our Picks - 50 Best Websites 2007 - TIMEで英語で紹介されています。
木目デザインとモノクロデザイン20サイトとデザインの参考になる45のウェブサイト*ホームページを作る人のネタ帳
ウェブサイト作成のお役に立てればと思います。
Flashできれいな地図を無料で作る「amMap」 - GIGAZINE
やってみたんですが・・・。
あまりうまくいかなかったのと、よくわからなかった・・・。無念。
glossy.js

JavaScriptで、普通の画像をAqua風画像に無理やり変えてしまうスプリクト。
下のDownloadタブの右側にある【+】ボタンでタブを開き、ダウンロードできる。
ドラッグ&ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」 - GIGAZINE
横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
横に気持ちよくスライドするJavaScriptです。
Ajaxでおしゃれな小窓を作る6つのサンプル*ホームページを作る人のネタ帳
オシャレな小窓を手に入れる方法。
ドラッグ&ドロップAjaxの遊べるライブラリ6個*ホームページを作る人のネタ帳
Ajaxで遊んでみようという人のために書いた記事です。
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳

CSSとJavaScriptで表現する飾りつけです。
41のフォント配布サイト - Chocolate(チョコレート)

フォントのまとめ。Freeで使えるものと、有料のものをわけて紹介するスタイルが個人的に好き。
なぜなら有料を紹介しても目立たないけど、無料があればそのエントリー自身が目立ってくるから・・・。
16 Best-Loved Font Bits In Web Design » Inspiration Bit
ウェブで最も愛されているフォント16個です。
ダウンロードフォントではありませんのでご注意を。
wordpressについて30個のブックマークまとめ*ホームページを作る人のネタ帳
WordPressについて私のまとめ。
デザイナー必須!オートトレースソフト「Potrace」:オープンソースを毎日紹介
Potraceはコマンドラインで動作するソフトウェアで、PBM/PGM/PPMまたはBMPファイルを読み込み、EPSやPS、SVG/PDF/GIMPPATHといった形式に変換してくれる。
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
ほんとに、一度は触ってみて、こういうオープンソースの存在を知っておいても損はないですよ。
【特集】業務で使える! 無料Webサイト作成ツール集(1/3) - @IT
CMSではありませんが、無料ツールとして。
ウェブ製作に便利な9のFirefox拡張機能 - GoogleMania | グーグルの便利な使い方
ウェブ制作に便利なプラグインのまとめ。
The Best 80 Photoshop Text Effects on the Web

PhotoShopによるテキストのエフェクトのチュートリアル。
このページ一つあれば、あなたも立派なテキストエフェクター。定期的に更新されている為、常時見ていたいサイトの一つとなるかと思います。
たまにブラシや、プラグインなどのダウンロードもありますね。
AdSenseの達人が教える12のTipsを実践してみた結果 - GoogleMania | グーグルの便利な使い方
AdSenseの収入アップ計画のお供に。
AdSenseでお金を稼ぐための12のヒント*ホームページを作る人のネタ帳
上のTipsとはまた違うものです。
企画屋さんは自分の仕事はデザインだと認識したほうがいいんだと思うよ:DESIGN IT! w/LOVE
アイデアベースの制約の無い企画屋ほどウェブでは手に負えないという事。
ウノウラボ Unoh Labs: PHP標準の機能(だけ)でウェブサイトのサムネイルを作る
正確にはPHPとWindowsの機能を使いますが、勉強になりますね。
人気のAPI/フレームワークを作るための39カ条 - @IT
APIを作るときのコツなど。
デザインのインスピレーションを効率よく得るためのサイト「FAVEUP」 - GIGAZINE
デザイナーの脳を刺激するサイト。
Photoshopで透過デザインのフォルダアイコンを作る方法『How to Make a Folder Icon』 | CREAMU
スタイリッシュなフォルダアイコンを作る方法の個人指導。
Life is beautiful: iPhone風アイコンを使ったUIの試作
FlashによるiPhone風UIチャレンジ。
グレースケールなアイコン配布サイト5選 | *zuzzu.blog*
グレースケールな配色こだわったアイコンまとめ。
HPを作成する際に素人っぽくならないコツを教えて下さい。 シンプルであってもどこか違うなと感じさせるページもあれば、 凝った作りなのに何となく野暮ったく見えるページ.. - 人力検索はてな
タイトル長いけど人力なので。
素人っぽく見える箇所書きは、参考になると思いますよ。
[N] 「デザインに凝ったウェブサイトほど予約率は低かった」
この元ネタは衝撃を受けましたね。
【IT Japan 2007】「デザインに凝ったウェブサイトほど予約率は低かった」,星野リゾート社長が講演:ITpro
でも、ホテル系はデザインに凝ったというより、ユーザビリティをただ無視しているだけではという説もありますが・・・。
Japan.internet.com Webマーケティング - 不安を感じない設計にすると10億円売れるホームページになる
10億円売れるホームページを作る為のコラム。
ショッピングサイト運営者、又は提供する制作者は、この記事を決して見逃してはいけない。
WEB2.0系のロゴ作成講座

WEB2.0系のロゴをフォトショップで作るための知識。
How to turn your photo into movie-like effect using Photoshop? « ebin

PhotoShopで普通の画像を映画風に見せる技の紹介です。
Scroll RSS Icon - スクロールに連動するRSSアイコンの作り方 - youmos
縦にスクロールしても、ずっとついてくるRSSボタンを作る方法が書き記されていました。
Transparent Glass Lettering in Photoshop
輝きのあるクリアな光を表現するPhotoShopの個人指導。
それとは別に、AdSenseの強引な入れ方にも注目したい・・・。
デザイン初心者の方が気をつけると良いポイントあれこれ
まさに私のような人にぴったりのエントリー。
素敵な指摘と翻訳をありがとうございます。
秋元@サイボウズラボ・プログラマー・ブログ: あなたのサイトをWeb2.0にするための12の方法
多少と言うか、かなりネタではあるけど面白い。
スクロールしても消えないドロップシャドウの作り方 | S i M P L E * S i M P L E
インターネットエクスプローラーでは見れないという致命的な部分は否めないですが・・・。
Japan.internet.com Webマーケティング - ユーザビリティを極めても顧客志向にならないワケ
ユーザビリティは疑うことからはじめなさいということでしょうか。
ウェブサイトの色の心理学:phpspot開発日誌
色の勉強になりました。
デザインの心得3か条をデザイナーに聞いてみた*ホームページを作る人のネタ帳
ちょっと前にあった会合で勉強したこと。
こんなところでしょうか。
日々記事を追いかけるのが大変な人のお役立てれば幸いと思います。
もしかしたら見逃してしまっている記事があるかもしれませんので、興味のある方は暇なときにでもダラ見してみてください。
アイコン・ブラシ
アイコンサーチエンジン

フリーで使えるアイコンのサーチエンジン。
フリー・ダウンロードのためのアイコンセット

ロイヤリティーフリー。
シンプルなアイコン

ライセンス:CreativeCommonsらしいです。
ボタンアイコンジェネレータ『buttonboost』

ボタンアイコンを生成するwebサービス。
多くのボタンを短時間で生成する。種類も豊富です。
使い方のレビューはこちら
WEB2.0バッチアイコンジェネレータ

WEB2.0なバッチのアイコンを生成します。クオリティ高すぎですが、現在笑えるほど重いです。
国旗アイコン、国旗バッチ

ダウンロードファイルは2種類。
一つは大きな画像のバッチをクリックするとバッチ国旗がダウンロード。
もう一つは、下の文章の中の『zip』と書かれたリンクをクリックです。
PhotoShopブラシ・春を感じるもの

春の涼しい感じを受ける花のPhotoShopブラシ。なかなか素敵なものが作れそうな予感。
クオリティ高過ぎのアイコンサイト

前回も紹介しましたが、随時更新しているようなので、再UP。
liquidicity » 165 Vector Icons, Now in 5 Colours

Freeアイコンが165個。
上質なものが豊富。
ただし、この光時代に、久しぶりに味わったテラ重いページなので、ブラウザが落ちてもいいようにしてから見たほうがいいかもしれない。
窓の杜 - 【NEWS】1枚の画像からウィザード形式で簡単にアイコンを作成「アイコン ウィザード」
一枚の画像からアイコンを生成してくる便利ツール。
Flash関連
フリーで使えるFLASHの無料テンプレートサイト

Flashの勉強にもなるサイト。
テンプレートを使って、スタイリッシュなwebサイトを作成してみませんか?
あなたを刺激する新しい動きを発見するための7つのFLASHサイト*ホームページを作る人のネタ帳

画像が大きくてごめんなさい。前回作った画像をそのまま流用でご紹介。
FLASHの動きの新しいテーマを追いかけた特集です。
CSS・CSSツール等
13Styles.com - css menu styles, high quality css menus, website navigation menus

ナビゲーションCSSメニューをセットでダウンロードさせてくれます。
いいサイトがあるもんですね。
CSSデザインできるスクロールバー表示JavaScript (fleXcroll) - youmos

CSSでスクロールバーをオシャレにしたい人のためのエントリー。
2カラムサンプル13種|CSS HappyLife
2カラムのブログデザインのための13個をサンプルとして表示してくれている。
勉強になりますね。
CSS Juice » 25 Rounded Corners Techniques with CSS

丸角の作り方の紹介25選。
AdSense広告をCSSでWeb2.0風にするテンプレート29種類 - GoogleMania | グーグルの便利な使い方
味気ないAdSense広告をクールに見せるCSSテンプレートの紹介です。
アドセンスの利用規定の問題が言われていましたが、この後に書かれている記事で、AdSense利用規定はOKだという記事もありますので、大丈夫だと思います。
CSSレイアウト情報を瞬時に確認できるブックマークレット「XRAY」: DesignWorks
私のような出来の悪いウェブ制作者にぴったりだったのでブックマークしておいたエントリー。初心者にもお勧めですね。
12 のレイアウトを切替可能なテンプレート | WWW WATCH
ここの管理人が言うように、まさに1つのテンプレートで12おいしい。
デザイン・デザインツール
ブラウザだけでプロっぽい高度な写真加工ができる『pikifx』 | P O P * P O P
ほんとすごいですよ。まとめじゃないですが、使い方が掲載されています。
かなり高度な事がブラウザのみで出来ます。
無料で使えるデザイン系ソフトいっぱい - DesignWalker
30を超えるデザイン系ソフトのまとめ。
ウェブ製作に使える無料アイコンサイト17連発! : HotWeb Magazine
無料アイコン配布サイトのまとめ。
ショッピングカートアイコンいろいろ - DesignWalker
作者に連絡しなきゃならないものや、大手サイトのアイコンを配布しているサイトとか、殆どがそのまま使えないかもしれないけど、制作の参考には間違いなくなる。
Wanted: Your 404 Error Pages | Design Showcase
ページが無い場合に表示される404エラーページをスタイリッシュにしているサイトを紹介しています。
エラーが出たときにどうするかと言う問題改善に表示参考になりますね。
無料で使えるデザイン系ソフトいっぱい - DesignWalker
『いっぱい』という表現がなぜか興味を引かれてみたら、本当にいっぱいだった・・・。
TIME誌が選んだ50ベスト・ウェブサイト2007 - DesignWalker
ベスト10位までま、スクリーンショット付きでとめられている。
その先のリンクはRank Our Picks - 50 Best Websites 2007 - TIMEで英語で紹介されています。
木目デザインとモノクロデザイン20サイトとデザインの参考になる45のウェブサイト*ホームページを作る人のネタ帳
ウェブサイト作成のお役に立てればと思います。
Flashできれいな地図を無料で作る「amMap」 - GIGAZINE
やってみたんですが・・・。
あまりうまくいかなかったのと、よくわからなかった・・・。無念。
Ajax・JavaScript
glossy.js

JavaScriptで、普通の画像をAqua風画像に無理やり変えてしまうスプリクト。
下のDownloadタブの右側にある【+】ボタンでタブを開き、ダウンロードできる。
ドラッグ&ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」 - GIGAZINE
横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
横に気持ちよくスライドするJavaScriptです。
Ajaxでおしゃれな小窓を作る6つのサンプル*ホームページを作る人のネタ帳
オシャレな小窓を手に入れる方法。
ドラッグ&ドロップAjaxの遊べるライブラリ6個*ホームページを作る人のネタ帳
Ajaxで遊んでみようという人のために書いた記事です。
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳

CSSとJavaScriptで表現する飾りつけです。
フォント
41のフォント配布サイト - Chocolate(チョコレート)

フォントのまとめ。Freeで使えるものと、有料のものをわけて紹介するスタイルが個人的に好き。
なぜなら有料を紹介しても目立たないけど、無料があればそのエントリー自身が目立ってくるから・・・。
16 Best-Loved Font Bits In Web Design » Inspiration Bit
ウェブで最も愛されているフォント16個です。
ダウンロードフォントではありませんのでご注意を。
CMS/オープンソース
wordpressについて30個のブックマークまとめ*ホームページを作る人のネタ帳
WordPressについて私のまとめ。
デザイナー必須!オートトレースソフト「Potrace」:オープンソースを毎日紹介
Potraceはコマンドラインで動作するソフトウェアで、PBM/PGM/PPMまたはBMPファイルを読み込み、EPSやPS、SVG/PDF/GIMPPATHといった形式に変換してくれる。
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
ほんとに、一度は触ってみて、こういうオープンソースの存在を知っておいても損はないですよ。
【特集】業務で使える! 無料Webサイト作成ツール集(1/3) - @IT
CMSではありませんが、無料ツールとして。
Firefox
ウェブ製作に便利な9のFirefox拡張機能 - GoogleMania | グーグルの便利な使い方
ウェブ制作に便利なプラグインのまとめ。
読み物系記事
The Best 80 Photoshop Text Effects on the Web

PhotoShopによるテキストのエフェクトのチュートリアル。
このページ一つあれば、あなたも立派なテキストエフェクター。定期的に更新されている為、常時見ていたいサイトの一つとなるかと思います。
たまにブラシや、プラグインなどのダウンロードもありますね。
AdSenseの達人が教える12のTipsを実践してみた結果 - GoogleMania | グーグルの便利な使い方
AdSenseの収入アップ計画のお供に。
AdSenseでお金を稼ぐための12のヒント*ホームページを作る人のネタ帳
上のTipsとはまた違うものです。
企画屋さんは自分の仕事はデザインだと認識したほうがいいんだと思うよ:DESIGN IT! w/LOVE
アイデアベースの制約の無い企画屋ほどウェブでは手に負えないという事。
ウノウラボ Unoh Labs: PHP標準の機能(だけ)でウェブサイトのサムネイルを作る
正確にはPHPとWindowsの機能を使いますが、勉強になりますね。
人気のAPI/フレームワークを作るための39カ条 - @IT
APIを作るときのコツなど。
デザインのインスピレーションを効率よく得るためのサイト「FAVEUP」 - GIGAZINE
デザイナーの脳を刺激するサイト。
Photoshopで透過デザインのフォルダアイコンを作る方法『How to Make a Folder Icon』 | CREAMU
スタイリッシュなフォルダアイコンを作る方法の個人指導。
Life is beautiful: iPhone風アイコンを使ったUIの試作
FlashによるiPhone風UIチャレンジ。
グレースケールなアイコン配布サイト5選 | *zuzzu.blog*
グレースケールな配色こだわったアイコンまとめ。
HPを作成する際に素人っぽくならないコツを教えて下さい。 シンプルであってもどこか違うなと感じさせるページもあれば、 凝った作りなのに何となく野暮ったく見えるページ.. - 人力検索はてな
タイトル長いけど人力なので。
素人っぽく見える箇所書きは、参考になると思いますよ。
[N] 「デザインに凝ったウェブサイトほど予約率は低かった」
この元ネタは衝撃を受けましたね。
【IT Japan 2007】「デザインに凝ったウェブサイトほど予約率は低かった」,星野リゾート社長が講演:ITpro
でも、ホテル系はデザインに凝ったというより、ユーザビリティをただ無視しているだけではという説もありますが・・・。
Japan.internet.com Webマーケティング - 不安を感じない設計にすると10億円売れるホームページになる
10億円売れるホームページを作る為のコラム。
ショッピングサイト運営者、又は提供する制作者は、この記事を決して見逃してはいけない。
WEB2.0系のロゴ作成講座

WEB2.0系のロゴをフォトショップで作るための知識。
How to turn your photo into movie-like effect using Photoshop? « ebin

PhotoShopで普通の画像を映画風に見せる技の紹介です。
Scroll RSS Icon - スクロールに連動するRSSアイコンの作り方 - youmos
縦にスクロールしても、ずっとついてくるRSSボタンを作る方法が書き記されていました。
Transparent Glass Lettering in Photoshop
輝きのあるクリアな光を表現するPhotoShopの個人指導。
それとは別に、AdSenseの強引な入れ方にも注目したい・・・。
デザイン初心者の方が気をつけると良いポイントあれこれ
まさに私のような人にぴったりのエントリー。
素敵な指摘と翻訳をありがとうございます。
秋元@サイボウズラボ・プログラマー・ブログ: あなたのサイトをWeb2.0にするための12の方法
多少と言うか、かなりネタではあるけど面白い。
スクロールしても消えないドロップシャドウの作り方 | S i M P L E * S i M P L E
インターネットエクスプローラーでは見れないという致命的な部分は否めないですが・・・。
Japan.internet.com Webマーケティング - ユーザビリティを極めても顧客志向にならないワケ
ユーザビリティは疑うことからはじめなさいということでしょうか。
ウェブサイトの色の心理学:phpspot開発日誌
色の勉強になりました。
デザインの心得3か条をデザイナーに聞いてみた*ホームページを作る人のネタ帳
ちょっと前にあった会合で勉強したこと。
こんなところでしょうか。
日々記事を追いかけるのが大変な人のお役立てれば幸いと思います。