印象的な作りのシングルページウェブサイトを集めた記事。デザイン的に、動き的に、遷移的に色々かっけーです。この手のシングルページサイトって、以前はJSでタブ切り替えだったりボックス要素を切り替えてコンテンツを見せるものが多かったけど、最近じゃJSとアンカーを使ったシュルシュルスクロールが使われる事が多いように思います。こうしたちょっと変わったサイト構成はデザイナー的にやり甲斐のある仕事ですね。

32 Fresh And Impressive Single Page Website Designs Inspiration

最新の使えるjQueryプラグインまとめ記事。特にカテゴリを絞らず、いろんなジャンルのJSが紹介されてます。中でもjQuery.popeye 2.0とかスゴくイイ。これLightbox代わりに使えるなぁ。Modal表示ではなくインラインのまま拡大できるのがナイス。JSを使った動きのある表現のネタ帳としてナイスな記事。

Fresh and Useful jQuery Plugins from 2010

使い勝手の良さそうな各種テクスチャの配布サイトをまとめた記事。ファブリック、ストライプ、石、ウッド、アブストラクト、コンクリート、ライトエフェクト、ペイント、紙、錆など色々揃ってます。テクスチャネタはナンボあっても困る事ないっすからね。デザイナーさんの引き出し拡張に是非これひとつ。

20 Fresh And High Quality Texture For Free Download

1枚のページのみで構成されたウェブサイトの作例集。どのサイトもページそのものは1つしかないけど、その中で多くのコンテンツを見せる工夫がされています。JSで切り替えるもの、Y軸移動によって表情を変えて誌面的にレイアウトしたもの、JSを使ったスムーズなアンカー移動によってコンテンツ切替を行うものなど色々です。情報量が多いのになんでわざわざシングルページにするのか。それはかっこイイからでしょう。ウェブにおけるコンテンツの見せ方を模索した結果とも言えます。どのサイトも見せ方がクールなので、デザイン的にも技術的にも参考になります。

A Showcase of Single Page Websites

CSSで行うレイアウトのネタがまとめられた記事。レイアウト例とそのソースを配布している12サイトをまとめた記事、と言った方が分かりやすいかも。サイト制作時のプロトタイピング（ワイヤーフレーム）の際に必ず出てくる「レイアウトどうすっかなー」という段階において役立ちそうです。わたくしシングルカラムレイアウトが苦手でして、なんつーか横幅いっぱいに使うのって難しくないですか？　サイドバーがあった方がデザインしやすいだなんて、典型的なブログ病と言えるんですが、なんつーか精進しないとイケませんね。

715 Awesomely Simple and Free CSS Layouts

ネタの宝庫deviantArtから、美しくデザインされたウェブサイトを拾ってきた記事。特にカテゴリは絞らず、ただ美しい事に主眼を置いているようです。見てて思うのが、素材がないならないなりにウマい事装飾できてるなぁという印象。デザイナーとしての汎用性の高さには見習うべき点が多いなぁとか思いました。

20 Creative And Beautiful Web Designs From deviantArt

デザインの中でも特にウェブに効果的な、シンプルなピクセルパターンのセット。どれもタイル状にループするものです。ドットやストライプものの、アンチなしの極めてシンプルなテクスチャなので、作ろうと思えば誰でもすぐに作れます。けどこれ系のパターンがまとまって配布されているとなかなか便利です。ダウンロードファイルにはPhotoshop用とFireworks用のパターン定義ファイルが両方入っていて、4ドル払えばもうちょい多めのものも手に入ります。早速常用パターンに決定。いやこれナイスです。

pixel patterns

任意のサイトに対して、HTML5の規格で使われる104の要素がどれだけ使われているかを調べる事のできるサイト。入力欄にサイトURLを入力してInspectボタンを押すだけでオッケー。元素記号表に模した要素一覧の明暗によって、サイト内でタグがどれだけ使われているかが分かります。メディア系は下の方にやや隔離されて表示されます。各タグの上にマウスを持って行くと、実際に何個使われているかも分かるので、div病などの調査にもイイですねこれ。

Periodic Table of the Elements

木の表面テクスチャを100個も集めたまとめ記事。木目、ベニヤ、タイル、網目状などの各種テクスチャが紹介されてます。明るい感じのものからダークな雰囲気のものまで色々あるので、木のテクスチャを探す時はこの記事だけで事足りそうです。この手のまとめ記事は数が多ければ多いほどイイですな。ヴィンテージデザインやグランジデザインを行う際に役に立ちそう。

100 Free High Quality Wooden Texture Packs

WordPress用のテーマが盛りだくさんのまとめ記事。今年バージョンのものばかりなので、コーディング的にも見せ方的にも色々最新な印象。ギャラリー、ブロガー用、eコマース、クリーンな印象、マガジンスタイル、ミニマルスタイル、スマートフォン用、プレオープン用、その他ツール類といった感じでカテゴリ分けされてます。数がかなり多いので見応えあります。ワープレのテーマ制作の素体として、またネタ帳としてナイスな記事。戦争は数だよ兄貴ぃ！的なアレですね。

100 Free High Quality WordPress Themes: 2010 Edition

メディアごとに異なるウィンドウサイズに合わせ、サイトの見せ方を変えるという手法についての考察と、作例紹介の記事。デモサイトではウィンドウサイズ取得をリアルタイムに行う様子を見る事ができます。後半の作例紹介ではただボックス要素を動かすだけでなく、文章の段組にまで配慮されたサイトなどが紹介されてます。最近じゃWin or Macだけじゃないっすからね。スマートフォンやタブレットへの対応も、こうした１歩進んだ手法で対応できると、ちょっとかっけーすね。

CSS3 Media Queries

デニム生地のテクスチャまとめ。薄汚れた感じのジーンズを接写した写真が多くまとめられてます。グランジーなテイストのサイト制作に使えそう。カジュアルな雰囲気を出すのにも向いてます。用途は限られるけど、「デニム生地の質感が今すぐ欲しい！」って経験が実際過去にあったので（まぁ自分のはいてるジーンズ撮りましたが）、そんな時に便利な生地。

30 Lavish Jeans Textures (Flickr Edition)