WEBデザイナーのためのベストエントリ51個まとめ『2007年8月』
2007年09月05日 公開
2007年8月にヒットしたエントリやサイトの、WEBデザイナー向けまとめ。
一ヶ月もたてばブックマークも結構色々ノイズが入ってくるもので、ここで整理の意味も込めてまとめておきます。
SEO系や、モバイル系は別エントリに分離しないと、前回重くてアクセスが集中して見れませんと言われる方がいましたので、分離して書こうかと思っています。
アイコン
Hazem Designs The Official site of Hazem Mostafa Graphic/Web Photography artist
FREEiconをクリックで見れるけど重いです。
その全てのアイコンがpngで出来ているため、使い道が多いかも。ライセンスについて見当たらないため、商用はお勧めできませんね。
Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator.
web2.0デザインのバッチを生成するジェネレータ。
非常におしゃれなアイコンを手軽に生成できる優れものだ。
また新しいのが出た。ローディングイメージ作成のお供に『gif generator』
Ajaxのローディングイメージ作成のジェネレータ2本立て。
faviconをオンラインで作れるサイト２０選
faviconを、あくまでもオンラインで生成するサイトのまとめ記事。
Buy Stock Royalty Free Icons For Toolbar and Web
Mac OS X用アイコン。ロイヤリティフリーですね。
無料で使える人気アイコンまとめPART2*ホームページを作る人のネタ帳
私の無料で使えるアイコンまとめのパート２です。
ブログ引退表明サービス
ブログをやめるときに使うバッチまで配っているなんともユニークなアイデアサイト。引退するときの表明をする場として活躍される日がくるのかな？
はてな初心者マークを作った。
はてなの初心者マーク。上のブログ引退表明サービスからインスピレーションを受けたそうです。行動力がすごい。
煩悩是道場 - 自由に使えるアイコン詰め合わせ
さらに上の初心者マークからインスピレーションを受けて作成されたというアイコンたち。かなりユニークです。
デザイン
Free Stock Photos at freerangestock.com - Totally Free Stock Photography and Textures!
Digital Images: Free stock photos at Freerange stock - Lifehacker元ネタ（英語）
無料でダウンロード可能な画像配布サイト。かなりクオリティ高いものもある（ユーザー登録必須）
ANTEPRIMA FW07
Flashのお手本サイト。
読み込みが確かにストレスを感じてしまうのは否めないが、パネル操作感はすばらしい。
ニコニコ動画でのドット絵作成過程映像のまとめ
いわゆるドット絵が書きたい人はこちらから。
影の付け方いろいろ
その名のとおり、一つの画像で、色々な影の付け方を表現しています。
勉強のために一つ。
<InputDraw/>
お絵かきを、フォームで送信してしまうという荒業を導入できる。
非常にユニークな仕掛けを作れそうですね。
60 More Places to Get Design Inspiration - Online and Off
60個ものwebデザインのインスピレーションを受ける。
途中からwebデザインではなくデザインのインスピレーションになるけど参考になりますね。
Top Rated - Free Stock Photos
著作権の放棄された、自由な写真集。
5000点以上の画像が無料で使える。
紙がやぶれた感じを表現するPhotoshopチュートリアルいろいろ
Photoshopチュートリアル。
なんでもない画像が、急におしゃれに見えてくるかもしれないテクニックですね。
Lifeandhealth | Life and Health
動物の書き方大全みたいな感じ。
そこは丸なのか・・・とか色々勉強になりますね。
Creativity Spark From Masters Of Illustration
グラフィックデザイナーまとめエントリ。
デザイナーの作品も羅網され、非常に参考になる。というかやっぱりデザイナってすごいです。
Photoshop Brushes, Adobe Photoshop Brushes Free Download
こちらはPhotoShopブラシ大全サイト。
100個以上収集されています。
角を丸くしてモテる
一応ジェネレータ。シンプルすぎるところが好き。
画像をアップすると角を丸くしてくれて、モテます。
Flash|Ajaxベストサイトセレクション20特集
はてブ数が少なかったために、見逃してしまった人がいるかもしれない。
Flash、Ajaxのどちらの制作者も、これは絶対に一度見ておくべきエントリ。
要チェックです。
Photoshop用ボブ・ブラシを使ってボブの絵画教室みたいな絵を描いてみる
これは見てもらう以外に説明のしようがないけど・・・。
ボブみたいな絵を描きたいという人は必見。
Photoshopぼかしフィルターの効果的な使い方
PhotoShopチュートリアル。
ぼかしフィルターでスピード感などを演出する方法。
[N] オンラインでフォーム作成「FormSpring」
オンライン上でフォームを作ってくれるサイトをレビューしてくれている。
残念な事に見えない画像があるけど、わかりやすい説明に感謝。
あの映画風の画像が簡単につくれるチュートリアル11選 | P O P * P O P
作り方という、知っていればそれだけで武器となるチュートリアル。
自分のサイトに貼れるドロップダウンメニューを作れる『NetworkBar Generator』
100SHIKIさんで紹介されていましたが、非常に簡単らしいです。
私はユーザー登録をおこなっていませんのでわかりませんが、一応メモ。
体を張ったちょっとセクシーな目の錯覚画像いろいろ
ペイントしている女性画像のまとめ。
どこからどこまでペイントなのか・・・もうわけがわからない。
404エラーをデザインする為のインスピレーション
404エラーをどれだけかっこよく見せるかのお勉強に一つ。
ちなみにErrorDocumentを絶対URLで書くのはやめようよで、404エラーの正しい設定方法が記載されていますので参考までに。
スーパー風シールメイカー
本当にそこらへんのスーパーのシールのような画像を生成するジェネレータ。
面白いです。
Worth1000.com
現代の商品をレトロに表現しているデザインのまとめ。
これは本当にすばらしい。一度は絶対見るべきだと個人的に思う。
Ajax JavaScript
Scrollovers - A New Way of Linking
ホバーリンクの作り方。
マウスを乗せるとくるりんと表示が変わる。結構面白いので一度サイトで体験してみると良いかも。
文字を隠すように貼るシールを表現するJavaScript*ホームページを作る人のネタ帳
クイズなどにも使えそうなJSライブラリ。
半透明の角まるツールチップを表示するJavaScript
透明なツールチップ。prototypeを使用しているようですが、ダウンロードに含まれるそうで、使いやすそうですね。
Webの検索ボックスをカッコよくする方法
確かにかっこいい。
これは試してみたい。
Webデザイナーのためのコードスニペット125選『125 Code Snippets for web designers』
レビュー記事。
Ajaxのコメントフォームやチェックボックスを画像を使ってカスタマイズする方法などをまとめているけど、英語が苦手な方はきつかもしれない。私も含めて。
ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 | 100SHIKI.COM
カテゴリーごとにどういったインターフェースデザインが有効かをまとめてくれている。
CSS
Download free CSS templates - Free CSS Templates
フリーで使えるCSSテンプレート。
ステルスデザインが多く使われているので、見ているだけでも参考になるデザイン多数。
JavaScriptを使わないスターレイティングの作り方
星型レイティングの作成方法。JavaScriptを使わないで設置するためのマニュアルがここに。サーバーへの登録方法などが無いのが残念。
モバイル系
チームラボが考えると、ケータイはどうオモロくなる？
つい最近、早稲田と協力してインターネット全体から独自クローラーを使って検索可能な不動産情報検索『いえーい』などをリリースしているチームラボ。
「コミュニケーションという本来の目的を忘れるようなものにしたい。『街を育てたいから○○さんにメール打たなきゃ』というようになったら面白い」（猪子氏）勉強になります。
携帯サイト作成のためにも使えるPHPのライブラリ
携帯サイトを作るというときは参考にしたいライブラリ。
web開発のお勉強
WordPressでAdSenseを使うときに便利なプラグイン ベスト１０
プラグインを利用することで、広告をランダムに表示したり、複数のアドセンスアカウントを利用したり、インライン表示したりできます。
収益を上げるためにも、また複数人数でブログを運営するためにも、覚えておきたいプラグインばかりです。
AptanaでWebページ作成はここまでできる！（1/3）
ドリームウィーバが有料で、Aptanaが無料といわれるくらい有名なweb開発ソフト。
これについてのインストールから、作業方法までレクチャーされている。非常に参考になりますよ。
サイト価値を最大化するためのトップページ設計術～4パターンの訪問者を想定して作る
大体3ヶ月に一回はこれと同じような記事が上がってくる。
何度でも目を通しておいて損は無いトップページの設計術。
離脱率90%は当たり前！？最後の難関『入力フォーム』の離脱を改善する
いわゆるフォーム離脱者をいかにして取り込むかというところに焦点をあわせている。
・せっかく入力フォームにたどり着いても、遷移元のページに戻ってしまう
・プライバシーポリシーのページに遷移し、そのまま入力フォームに戻らない
・ナビゲーションをクリックし、そのまま入力フォームに戻らない
・フォーム入力中に、何らかの理由によってページ離脱してしまう
・フォーム入力完了し送信するも、エラーとなって面倒で離脱してしまう
この5つの回避方法。
既存サイトのデザインのコピーが簡単にできる
既存サイトデザインをコピーするためのエントリ。
良いか悪いかとかの話は別で。
検索条件の入力画面で配慮したいインターフェース例 (ユーザビリティ実践メモ)
検索条件画面を元に、実践して調査した結果のレポート。
チラ見せでマウスオーバーを誘うインターフェース
ちら見せ→マウスオーバーのテクニック。
よく考えてみると、表示できる領域は限られているわけだから、こうしてちょっとだけ見せてマウスオーバーと言うのはなかなかいいアイデアだと思う。
ユーザーがページのどこをクリックしたか解析するツール[to-R]
だいぶ前に紹介はしていましたが、今回は、そのサイトのわかりやすい使い方レビューサイト。
かなり前に試したときにはFC2が外部から画像やCSSを読み込ませるのが一回しか許可しておらず、CSSが適応されていない状態で見れましたが・・・。今はどうなんでしょう。
FLASHのサイトは見やすいし内容が分かりやすいし好感が持てる
FLASHがすばらしい！という記事に対する２ちゃんねるの反応。FLASH作成前の参考までに。
リリースwebサイト
BCCKS / ブックス - Preview版 - BCCKSはカンタンにwebの「本」が作れるサイトです
web文章を、わざわざ本のように見せてログるサイト。
なかなか奇特なサイトかと思ったけど、見てみると普通のweb文章や画像が、ちょっと素敵に見えるのが不思議。