週刊Webテク通信

2009年2月第2週号 1位は,JavaScriptを使ったイメージギャラリー17個/気になるネタは,浜崎あゆみの新作「NEXT LEVEL」をUSBメモリで発売

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

ネットで見かけた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は,動画や別ページなど画像以外のものを別ウィンドウ感覚で表示するのにも使えて便利です。

図1 スクリーンショットでどんなギャラリーか想像できます

図1 スクリーンショットでどんなギャラリーか想像できます

2.50 Excellent Icon Design Tutorialshttp://sixrevisions.com/graphics-design/50-excellent-icon-design-tutorials/

アイコンデザインのチュートリアルを多数紹介しています。

アイコンといっても大きなサイズでディテールまで描き込んだ,Mac OS Xのアイコン風のものがほとんどです。なので,アイコンデザインというより,ベクターイラストのチュートリアル集といったほうがいい気がしますね。ドット絵アイコンのチュートリアルも一つだけありますが。

使われているツールはほとんどPhotoshopかIllustratorです。英語を読むのが面倒でも,スクリーンショットを追って行けばなんとかなるかもしれません。動画のチュートリアルがあるものは,言葉は分からなくても大丈夫でしょう。

画像を作るためのチュートリアル以外に,アイコンデザインに関するノウハウやTipsの記事も紹介されています。

図2 アイコンデザインのチュートリアル集

図2 アイコンデザインのチュートリアル集

3.真似からはじめるウェブデザインhttp://www.designwalker.com/2009/02/clone-webdesign.html

凝った背景画像のサイトを,そういった画像を作成するためのチュートリアルとともに紹介しています。また,有名サイトを真似て作られたWordPressのテーマ(テンプレート)の紹介も。これらにインスピレーションを受けつつ,真似しながらデザイン力を上げていこうという切り口の記事です。

元ネタはWebsite Backgrounds: 70+ Impressive Trends, How Tos & Best Practices | Noupe15 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というのもあって,こちらも便利そうです。

図3 WYSIWYGエディタのまとめ記事

図3 WYSIWYGエディタのまとめ記事

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

先週のほかの記事としては,デザインの参考やインスピレーションの元になりそうなショーケースが目に付いたので,ピックアップして紹介します。

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

Lovely Charts | Free online diagramming applicationhttp://www.lovelycharts.com/

豊富な種類のチャート図を作れるWebサービスです。サイトマップやワイヤーフレーム作成に役立ちそうです。しかし,残念ながら今のところ日本語の入力はできないようです。

親しみやすいデザインのサイトマップやチャートが作成できるオンラインサービス -Lovely Charts | コリスでは,Lovely Chartsで作れる各種チャート画像のサンプルが紹介されています。

さくさく動きますし,かなり完成度は高いようですね。作成したチャートはJPEGかPNGで保存できます。

無料で使えるツールですが,有料のプレミア会員になるとバージョン管理やコラボレーション機能が使えるようです。ほかのユーザーとチャートを共有してコメントを付け合ったりできるようなので,サイトマップやワイヤーフレームのやりとりにも便利そうです。日本語が通るようになるのを期待しましょう。

図4 フリーのチャート図作成サービス

図4 フリーのチャート図作成サービス

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

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

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

コメント

コメントの記入