週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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サービスいろいろ

今週の気になるWebネタ

The Pencil iPad Stand | Geeky Gadgetshttp://www.geeky-gadgets.com/the-pencil-ipad-stand-07-07-2010/

iPad 用にスタイラス自作してみた | WWW WATCHhttp://hyper-text.org/archives/2010/07/ipad_stylus_diy.shtml

鉛筆6本と輪ゴムを使ってiPadスタンドを作ったという記事が「Geeky Gadgets」というサイトに掲載されていました。使う鉛筆の柄によってシンプルにもラブリーにもなりそうですね。

iPad用のスタイラス(タッチペン)を鉛筆ホルダーで作った人の記事も話題になっていました。自作とはいえ見栄えも悪くないようです。作ってみたいな。

これらに共通しているのは,⁠鉛筆」⁠アナログを代表する存在の鉛筆が,iPadとコラボするというのが面白いです。iPadのバッテリが切れても,メモは鉛筆で取れますしね。

iPadスタンドの記事からもリンクされていますが,iPhone用の鉛筆スタンドPencil iPhone Standも作られています。こっちは鉛筆5本ですよ。

タカラトミーアーツからスマートフォン用タッチペンが登場するというニュースもありました。これまでもiPhone用のタッチペンはいくつも販売されていますが,手軽に購入できる国内メーカーのものはなかったと思います。自作が面倒な人は,こっちを試してみるのもいいかもしれません。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入