web制作者のための2008年1月BESTまとめ43＋暇つぶしゲーム2

ツール

Allan Jardine | Design


webデザインの確認ができるブックマークレット。
4つの機能がついていて、簡単にデザインの確認ができるということで話題を呼んでいましたね。
レビュー記事はこちらで。



HanovSolutions.com


特定の写真から、特定の領域を消し去るツール。
例えばいらないものが移ってしまった場合、その部分を黒く塗りつぶすと、周りの画像から自動的にその空間を予測し、作り上げてくれると言う代物。
すごすぎ！



FREE PDF Printer


印刷可能なソフトであれば、なんでもPDFにする事ができるフリーソフト。
広告もない、スパイウェアもない、商用利用も可能という無敵ライセンスが特徴です。
レビューや、インストール方法はGIGAZINEで。日本語対応しています。

デザイン

PNG Icons & Icon Packs Download | IconsPedia


ほんとかっこいいアイコンばかりある素材まとめサイト。
トップのrandomicon（ランダムアイコン）はアクセスするたびに、違うのが表示されるので、なかなか面白いですよ。
注意点は、各アイコンのライセンス。作者によって違うため、確認が必要です。



ウェブデザイン・ギャラリーサイトまとめ


webサイトを作るときに参考になるwebデザインのインスピレーション。



everyday icons Playground


個人利用内で使えるアイコンとか色々ありますが量はそんなにありません。
ただ、配布だけをみるのでは無く、サイト全体の遊びを勉強するのにも使えます。



100 Excellent Free WordPress Themes | Developer's Toolbox | Smashing Magazine


クールで刺激的なwordpressテンプレート100選。



Free Wordpress themes


無料のワードプレステーマダウンロードサイト。1000以上ありますが、特徴は色や内容のイメージカテゴリから検索できるというのがポイントでしょうか。（食べ物、街等）



Geek Trends: 15 Footers with great usability by Pop Upon Magazine


フッターが素敵なサイト15個。
あまり力を入れないで作ってますけど、こういうの見るとちゃんとしないとダメなんだなぁとか感じますね。上の画像は、上記まとめで紹介されているサイトです。



20 Websites With Unique Layouts | Vandelay Website Design


ユニークなデザインのwebサイト20選。
ユーザビリティを壊さずにどうやってユニークさを表現しようかと悩んだらここへ。
どちらにしても新しい挑戦は、ユーザビリティを壊す可能性は高いのですが・・・。



閃光、爆発などの光や風などを表現できるPhotoshopのブラシ


フォトショップのブラシ集。
結構お世話になれる良質なまとめエントリでした。
画像をクリックすると、ブラシの詳細が出るのがすごい手が込んでて素敵です。



Adobe Photoshop Tutorials - Best Of


フォトショップチュートリアルの総まとめ。
フォントからパーツから人の加工からなにから全部揃っちゃってます。



Emma Alvarez Site: Top Best 55 Photoshop Tutorials For Professional Photographers


フォトショップの加工方法55個。
残念ながら見れないものも結構ありますが、勉強になりますね。



PSDTuts - Photoshop Tutorials and Links - Creating A Cool 3D Web Design Effect


photoshopのチュートリアル。
上の画像のように、ちょっと浮いた感じの3Dメニューの作り方。



リアル・グラデーションの作法 | Nitram+Nunca


デザインにおけるグラデーションとは何かということについて、わかりやすく解説されています。



テキストを反射させる方法


日本語解説のフォトショップ反射テクニック。
私は面倒なので反射用グラデーションをあらかじめ作って、反射用アクションの登録してますが、人それぞれのやり方を見せてもらうのも勉強になりますね。



Soïa & Kyo


FLASHによる美しいデザインのインスピレーション。
手書き風とモデルをマッチさせてます。
また、ページ送り方法もズームというユニークな方法を取り入れています。見てみる価値高い。



Welcome to » Old Book Illustrations: pictures scanned from old books


ちょっと昔風のイラスト素材サイト。



35 hochwertige Freefonts


ちょっと特徴のある使いやすそうなフリーフォント35個。
日本語対応はしていません。

Ajax・JavaScript

ie7-js - Google Code


IEの動作をW3C標準仕様へ準拠させるためのライブラリ。
IE5やIE6で透過PNGを表示させる事もできる。こちらのレビュー記事が参考になります。



Shadowbox.js Media Viewer


動画、FLASHなどにもlightboxのような効果、演出をつけることができるJavaScript。
レビュー記事はこちらで。



Google マップ API - Google Code


GoogleマップAPIのドキュメントが日本語対応した月でしたね。
ドキュメントページに話題が集まりました。



「音出注意」next.yahoo » Blog Archive » Easylistener


JavaScriptベースの1行追加するだけで使えるMP3プレーヤー。
詳細はこちらで見れます。
ブログパーツなんかにも使われているみたいですね。



Lightview


画像を拡大するポップアップを出したりするjsライブラリ。prototype.js必須です。
Lightviewのレビュー、わかりやすいカスタマイズ属性名を記してある記事はこちらで。



Ajaxライブラリまとめ
Ajaxライブラリをめちゃくちゃまとめられています。
お疲れ様でしたって言いたいほどすごいエントリです。

webサービス

AXE WAKE-UP SERVICE INC.


プロモーションサービスとして立ち上げたサイト。
webサービスの中でも伝説的サービス。
電話番号を入力すると、かわいいおねぇさんが電話で起こしてくれると言うとんでもないネタサービスです。
試した人いるんだろうか・・・。



HairMixer.com: See a new hairstyle on your photo in seconds!


二枚の写真の顔部分を入れ替えることができるwebサービス。
レビューエントリーはこちら。



知らないと損する便利なＧｏｏｇｌｅ検索Ｔｉｐｓトップ１０


第一位の、『顔検索』とかすごい機能があるんだなぁと感動しました。

CSS関連

タグクラウドのサンプル作ってみた


CSSのタグクラウドサンプルのダウンロードとお勉強ができます。



Eric's Archived Thoughts: Resetting Again
CSSの初期化。


CSSで罫線を角丸で表示する（１）：FirefoxとSafariのCSS
FirefoxとSafariのCSSを4ページに渡り解説されています。


101CSS技術の続き＋CSS関連エントリおまけ

FLASH

Movie Clip Tweening prototypes - download


かっこいい動作のFLASHライブラリ。
flaファイルをダウンロードできます。詳細やサンプルはコリスさんに。



Flash Doodle


ゲーム、とは違いますが、これ1つで15分くらいは時間潰せます。
棒の色によって性質が異なり、黒が泡になります。
泡出しすぎると、PCに過剰なトラフィックをかけることになりますのでご注意を。

読み物

より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ
webサイトの構成ユーザビリティについて。
スクロールさせるためのテクニック。


Googleウェブマスターツール完全マニュアル
Googleウェブマスターツールの完全攻略エントリです。
SEO担当者の方必見ですね。


Ajaxアプリケーション開発における7つの大罪
その名の通り。
Ajaxアプリケーション開発前の必読エントリ。


たった3行加えるだけで、ページの読み込み時間を劇的に改善させる『class.compressor.php』
読み物に入るかどうか悩みましたがここに。
PHPによってページの読み込み時間をすばやくするというもの。ダウンロードは上記サイトへ。
ちなみに、コメントも読んでおく事。


ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
海外記事の和文。フォームの設計を良くする12の基礎として読んだほうがいいかも。
海外元記事が既に無くなっているというのは気にしない。


JavaScriptの動作を軽くするための工夫
JavaScriptによってwebページの動作を重くする原因を知り、それらを回避するための方法などが書かれています。


リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS Goodies
チェックボックスを綺麗に並べるテクニック実践術。


なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか？
主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏のユーザビリティ向上の秘訣と考え方。


やる夫がＷＥＢデザイナーになるようです
やる夫で見るweb制作現場の実態。

web制作者のための（あんまり関係ない）息抜きゲーム

魔球ロワイヤル


めちゃくちゃ脱力系の見た目にも関わらず、かなり作りこまれている伝説のFLASHゲーム。
魔球を作るためには選手登録が必要。打つだけなら不要。
魔球を作ると、それをブログパーツとして発行でき、魔球を打つための挑戦状を公開できる。
どの魔球もありえない動きをしているけど、何度かやれば打てない球はありませんでした。打つと変な快感を得られます。
また、ホームランが飛距離130ｍとかで出ますが、クリーンヒットで500ｍとかでました。面白すぎ。



設置防衛ゲーム


進行してくる敵を撃破するためにユニットを設置して『見守る』ゲーム。
操作は触れば直感でわかります。
特殊なのがMANAゲージが75以上のときPOISONが使えるというのと、画面の移動が『スペースキー』を押しながらドラッグと言う点くらいです。
あとは、なぜか忍者がつよいという特徴をもっています・・・。

トップの画像について

Photographer

TeeRish

License

Creative Commons (by-nc)

Tool for photo selecting

Gigazinize Tools - Image