ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年7月25日～7月31日の間に見つけた記事のベスト5です。

1. Website Footers: Modern Trends, Tips, Best Examples | Moto CMS Templatestemplates.motocms.com/blog/inspiration/website-footers-trends-tips-best-examples/

フッタデザインのトレンド、テクニックとショーケースをまとめた記事です。

以下のカテゴリに分けてフッタデザインを紹介しています。

• 情報を提供する大きなフッタ
• 独創的なグラフィックを使ったフッタ
• サイトマップが入ったフッタ
• 問い合わせフォーム、ニュースレターの購読フォームなどが入ったフッタ
• ソーシャルメディアボタンの入ったフッタ

また、クリエイティブでかわいいフッタデザインを紹介した「12 Creative and Cute Website Footer Designs」という記事もありました。

2. Designer's Ultimate Resource Collection | MediaLoothttp://medialoot.com/blog/designers-ultimate-resource-collection/

デザイナーのためのいろいろな素材コレクションです。無料のものと有料のものが半々くらいのラインナップとなっています。

• アイコンセット
• ユーザーインターフェイス
• Photoshopファイル
• Webテンプレート
• テクスチャ＆パターン

に分けて掲載されています。このMediaLootというサイトでは、まだまだ多くの素材を提供しています。その中から人気のある素材を集めて紹介した、宣伝用の記事ということですね。

3. 40+ Web Sites with Ribbon Style in Their Design | Designing Mallhttp://www.designingmall.com/2011/07/web-sites-with-ribbon-style/

リボンの要素を使ったWebデザインのギャラリーです。リボンを使ったデザインは、サイトのテイストによらず使えてアイキャッチ効果が高いところから、アメリカのサイトでは以前から流行っています。

リボンに立体感とテクスチャが加わると、Webデザインのトレンド的要素が詰まっている印象になりますね。

4. 20 Impressive Illustrator & Photoshop Icon Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers!http://tutorials-share.com/2011/07/20-impressive-illustrator-photoshop-icon-tutorials/

IllustratorとPhotoshopによる、アイコン作成のチュートリアルを20個紹介しています。

5. 35 Inspiring Examples Of Texture In Web Design | SpyreStudioshttp://spyrestudios.com/35-inspiring-examples-of-texture-in-web-design/

テクスチャをうまく使ったWebデザインのギャラリーです。

キャプチャ画像ではよくわからないものも多いですが、微細なテクスチャが効果的に使われているサイトが多いですね。

そのほか、先週の記事の中から、インスピレーションの素となりそうなギャラリーページを2つ紹介します。

• 25 Mind Blowing 3D Typography Designs
  印象的な3Dタイポグラフィが多数紹介されています
• 30 Awesome and beautiful infographic designs | Nerd Treasure
  すばらしいインフォグラフィックが多数紹介されています

先週の気になるWebサービス

Screenfly by QuirkTools ? Test Your Website at Different Screen Resolutionshttp://quirktools.com/screenfly/

Screenflyは、様々な画面サイズでサイトの見た目をチェックできるWebサービスです。

任意のURLのページを指定したピクセル数のフレームで開くだけですが、画面サイズによってCSSを切り替えているページのチェックに役立ちそうです。画面は90度回転させることも可能です。

デスクトップ、タブレット、モバイル、テレビの4つのカテゴリで、代表的なスクリーンサイズが登録されているので、そこから選ぶだけでサイズを切り替えられます。

iPhone向けのサイズを選択するとiPhone用ページが表示されるようなので、ユーザーエージェントの切り替えも行われているのでしょう。