週刊Webテク通信
2009年2月第2週号 1位は,JavaScriptを使ったイメージギャラリー17個/気になるネタは,浜崎あゆみの新作「NEXT LEVEL」をUSBメモリで発売
2009年2月19日
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年2月9日~2月15日の間に見つけた記事のベスト5です。
1.17 Best Javascript Image Gallerieshttp://valums.com/javascript-image-galleries/
JavaScriptを使ったイメージギャラリーを17個紹介しています。Macのカバーフロー風のものや,その亜流もありますね。JavaScriptで制御しているとはいえ,ちゃんと画像ごとに個別のURLを持つようになっているものもあります。
jQuery,Mootools,PrototypeとJavaScriptライブラリごとに紹介されています。やはりjQueryベースのものが多いですが,凝った動きのものではMootolsも健闘しているようです。
たくさんの画像を並べて見せるもののほかに,スライドショー表示だけのものや,サムネイルから拡大画像をモーダルウィンドウで開くLightBox系のものもいくつか紹介されています。jQueryで動くLightBox系のThickbox,Fancyboxは,動画や別ページなど画像以外のものを別ウィンドウ感覚で表示するのにも使えて便利です。
2.50 Excellent Icon Design Tutorialshttp://sixrevisions.com/graphics-design/50-excellent-icon-design-tutorials/
アイコンデザインのチュートリアルを多数紹介しています。
アイコンといっても大きなサイズでディテールまで描き込んだ,Mac OS Xのアイコン風のものがほとんどです。なので,アイコンデザインというより,ベクターイラストのチュートリアル集といったほうがいい気がしますね。ドット絵アイコンのチュートリアルも一つだけありますが。
使われているツールはほとんどPhotoshopかIllustratorです。英語を読むのが面倒でも,スクリーンショットを追って行けばなんとかなるかもしれません。動画のチュートリアルがあるものは,言葉は分からなくても大丈夫でしょう。
画像を作るためのチュートリアル以外に,アイコンデザインに関するノウハウやTipsの記事も紹介されています。
3.真似からはじめるウェブデザインhttp://www.designwalker.com/2009/02/clone-webdesign.html
凝った背景画像のサイトを,そういった画像を作成するためのチュートリアルとともに紹介しています。また,有名サイトを真似て作られたWordPressのテーマ(テンプレート)の紹介も。これらにインスピレーションを受けつつ,真似しながらデザイン力を上げていこうという切り口の記事です。
元ネタは「Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices | Noupe」と「15 Great Examples of Cloned WordPress Themes - WPZOOM」です。どちらも眺めているだけでも面白いく,参考にもなりそうですね。
4.The Ultimate Collection Of Free Photoshop Patterns | Developer's Toolbox | Smashing Magazinehttp://www.smashingmagazine.com/2009/02/12/the-ultimate-collection-of-free-photoshop-patterns/
フリーのPhotoshop用パターン画像配布ページの膨大なリンク集。タイトルをそのまま訳すと「究極のコレクション」です。変に凝ったものはあまりなくて,シンプルで実用的なものを中心に紹介されています。
Photoshopのブラシ,パターン,シェイプの素材リンク集はいろんなところで紹介されていますが,いざというときに探し始めるとなかなかいいのが見つからなかったりするので,日頃からチェックしておきたいですね。
フリーにもいろいろあるので,使用する際はそれぞれのライセンス形態について確認しておきましょう。
5.ウェブサービス開発で使えるWYSIWYGエディターまとめ- IDEA*IDEA ~ 百式管理人のライフハックブログ ~http://www.ideaxidea.com/archives/2009/02/rich_editors.html
JavaScriptで入力フォームをリッチテキストエディタに変える,いわゆるWYSIWYGエディタをまとめて紹介しています。
TinyMCE,FCKEditorがこの分野ではメジャーなものですが,ほかにもいろいろありますね。CMSで使われるケースが多いと思いますが,簡易HTMLエディタとしても使えるかもしれません。
TinyMCEには,Movable Type上で使えるようにしたプラグインTinyMCE-MTPluginというのもあって,こちらも便利そうです。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
先週のほかの記事としては,デザインの参考やインスピレーションの元になりそうなショーケースが目に付いたので,ピックアップして紹介します。
- 50 Insanely Good Vector-based Web Designs - VECTORTUTS
ベクターベースのスゴいデザインのWebサイトのショーケース。 - 30 Stylish Examples of Doodles in Web Design | Blog.SpoonGraphics
いたずら書きっぽいデザインのWebサイトのショーケース。 - 30 More Portfolio Sites for Your Design Inspiration
ポートフォーリオサイトのショーケース。
先週の気になるWebサービス
Lovely Charts | Free online diagramming applicationhttp://www.lovelycharts.com/
豊富な種類のチャート図を作れるWebサービスです。サイトマップやワイヤーフレーム作成に役立ちそうです。しかし,残念ながら今のところ日本語の入力はできないようです。
「親しみやすいデザインのサイトマップやチャートが作成できるオンラインサービス -Lovely Charts | コリス」では,Lovely Chartsで作れる各種チャート画像のサンプルが紹介されています。
さくさく動きますし,かなり完成度は高いようですね。作成したチャートはJPEGかPNGで保存できます。
無料で使えるツールですが,有料のプレミア会員になるとバージョン管理やコラボレーション機能が使えるようです。ほかのユーザーとチャートを共有してコメントを付け合ったりできるようなので,サイトマップやワイヤーフレームのやりとりにも便利そうです。日本語が通るようになるのを期待しましょう。
今週の気になるWebネタ

浜崎あゆみの新作「NEXT LEVEL」をUSBメモリで発売http://av.watch.impress.co.jp/docs/20090213/avex.htm
浜崎あゆみのニューアルバム「NEXT LEVEL」は,USBメモリ版も発売されるんだとか。ほかにCD2枚組+DVDの初回限定版,CD+DVD,CDと合計4種類で発売されるそうです。
USBメモリは容量2GBで,空き容量は普通に使えるようです。浜崎あゆみのロゴをあしらったデザインも凝っているので,キャラクターグッズとして欲しいファンも多いでしょう。今後USBメモリをキャラクターグッズとして使うのがはやるかもしれません。
昔はCD EXTRAとかいって音楽CDの空き容量にパソコン用のデータを入れるというのもはやりましたが,そのころはMacromedia Directorでオーサリングしたインターフェイスを用意するのが普通でした。今回USBメモリに入っているのはMP3とMPEG-4の素のデータだけというのは,パソコン文化が成熟したとも言える気がします。iTunes+iPodが普及したということも大きいでしょう。
USBメモリでコンパクトになるということで,CD何枚組とかのベスト盤,ボックス盤にはいいかもしれません。まあ,ボックス盤は大きくてかさばるところが存在感があっていいのかもしれませんが。
週刊Webテク通信
- 2009年2月第3週号 1位は,効率的にWebデザイン作業をするための10のTips/気になるネタは,Mozilla,ブラウザ上で動くコードエディタ発表
- 2009年2月第2週号 1位は,JavaScriptを使ったイメージギャラリー17個/気になるネタは,浜崎あゆみの新作「NEXT LEVEL」をUSBメモリで発売
- 2009年2月第1週号 1位は,5つの有名なCSSフレームワーク/気になるネタは,メールアドレスを掲載するときはすぐそばに「広告お断り」の注意書きを
- 2009年1月第5週号 1位はWebタイポグラフィのためのデザインツール50/気になるネタはオフラインGmailを使うための設定方法

