週刊Webテク通信

2010年7月第2週号1位は、Web制作に役立つ素敵なツール10選、気になるネタは、鉛筆で作ったiPadスタンド

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

1. Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.nethttp://kachibito.net/software/10-amazing-tools.html

Webサイト制作時に役立つ無料ツールを紹介しています。ツールだけでなく素材集サイトも含まれていました。ローカル環境にDBとCMSを同時にインストールしてくれるBitnamiは便利そうです。

定番のものが多いですし、紹介されているものの類似ツールが他にあったりもしますが、実際に普段使用しているものから10個に厳選したところがいいですね。

いろんな人による、⁠Web制作にこれは外せないツール10選」も見てみたいなと思いました。

図1 Web制作に役立つ素敵なツール10選
図1 Web制作に役立つ素敵なツール10選

2. Complete Toolbox: 55 CSS Menu And Button Coding Tutorialshttp://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/

メニューとボタンをCSSでコーディングするテクニックのレクチャー記事を大量に紹介しています。

ロールオーバーなどの効果もCSSだけで実現したものが多いですが、jQueryと組み合わせたものもありました。CSS3の角丸、グラデーション、シャドウを使ったものも多いですね。

図2 CSSボタンとメニューのコーディングチュートリアル
図2 CSSボタンとメニューのコーディングチュートリアル

3. 10 Awesome CSS3 Techniques You'll Want To Start Using | CreativeFanhttp://creativefan.com/10-awesome-css3-techniques-youll-want-to-start-using/

CSS3のすごいテクニックを紹介しています。角丸、グラデーション、シャドウのオンパレードです。

CSS3でギザギザの星形バッジも作ることができるんですね。CSS3 Starburstsのデモは、SafariかChromeで見るとロールオーバー時にアニメーションして驚きました。

図3 CSS3のすごいテクニックを10個
図3 CSS3のすごいテクニックを10個

4. 30 Photoshop Tutorials To Create Website Layoutshttp://www.bestfreewebresources.com/2010/07/photoshop-tutorials-website-layouts.html

Webページのレイアウトを作るPhotoshopチュートリアル記事をまとめています。作り込まれた凝ったデザインのページが多いですね。

図4 WebレイアウトのPhotoshopチュートリアル集
図4 WebレイアウトのPhotoshopチュートリアル集

5. 50 Examples of Drop-Down Navigation Menus in Web Designshttp://sixrevisions.com/design-showcase-inspiration/50-examples-of-drop-down-navigation-menus-in-web-designs/

ドロップダウンメニューのショーケースです。メインナビゲーションがドロップダウンとなっているものを大量に紹介しています。

ドロップダウンで出てくる領域が大きく、アイコン画像を使ったり大量のリンク先があるような、いわゆる「メガメニュー」が多いですね。

ドロップダウンメニューにはユーザビリティ的に賛否両論あると思いますが、最近は国内のサイトでも増えているように感じます。

図5 ドロップダウンメニューのショーケース
図5 ドロップダウンメニューのショーケース

そのほか先週の記事から、電子書籍関連のニュース記事を紹介します。

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

25 Free Color Tools, Apps and Palette Generators - Speckyboy Design Magazinehttp://speckyboy.com/2010/07/02/25-free-color-tools-apps-and-palette-generators/

今回は、カラースキームやカラーパレットを作るのに役立つWebサービスのリンク集を紹介します。

自分が選んだ色をベースに配色を考えてくれるツールや、写真を元にカラーパレットを作ってくれるツールなど25個のフリーのサービスが案内されています。

この記事をベースに、17個にしぼって紹介したカラースキームを決めるのに役立つ、配色ジェネレータ17個まとめという記事が、ライフハッカー[日本版]に掲載されていました。

図6 配色関連のWebサービスいろいろ
図6 配色関連のWebサービスいろいろ

おすすめ記事

記事・ニュース一覧