gihyo.jpサイトのロゴ

週刊Webテク通信

2009年4月第4週号1位は、Web制作者のためのオンラインプレゼンテーション資料／気になるネタは、朝日新聞、講談社、小学館など無料辞書サイト

2009-04-30

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

1. 15 Interesting online presentations for web developershttp://dreamcss.blogspot.com/2009/04/15-interesting-online-presentations-for.html

Web制作に関するプレゼン資料を多数紹介したまとめ記事です。プレゼンテーション書類の共有サイトSlideShareで公開されているスライドが、ページに埋め込まれています。プログラミング寄りのものも、デザイン寄りのものもありますね。

全部英語ですが、コードの紹介中心のものは英語力はあまり関係ないでしょう。文字ばかりのものもありますが、画像でなんとなく全体像がつかめそうなものもありますね。

13番目に紹介されている「The Principles Of Beautiful Web Design」は書籍の内容をそのまま流用していると思ったら、途中までのお試し版でした。それでも57ページと結構なボリュームがありますし、立ち読み感覚で読んでみるのもいいかもしれません。

図1　このページ内で各種プレゼン書類を見ることができます
図1　このページ内で各種プレゼン書類を見ることができます

2. 10 Usability Nightmares You Should Be Aware Of | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

ユーザビリティにおける悪い例を実例を挙げながら紹介した記事です。

とにかくリンクを明確にして、一般的なルールにそわないインターフェイスは使わないことが安全策のようですね。

ドロップダウンメニューを使うときに気をつける点については、うんうんそうなんだよねと納得。ちなみにわたしは、なるべくドロップダウンは使いたくない派です。ユーザーが細かいマウス操作を必要とすること、メニュー内容の一覧性が悪いこと、プルダウンがコンテンツを隠してしまうことなどをクライアントに話すと、だいたい納得してもらえますね。作るのが面倒だという理由もあったりしますが...。

最後には、それまでの内容とは別にユーザビリティのチェックポイントが8つ掲載されています。「⁠ポップアップウィンドウを開かない⁠」⁠、「⁠リンクは同じウィンドウで開く」というのは特に声を大にして言いたいですよね。まあ、反対派の人にも主張があると思いますが…。

3. IE6が消え去る日、そのあとで使える10のテクニック | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/04/15/044/

IE6をサポートする必要がなくなった場合に使えるテクニックを解説した記事「10 Cool Things We’ll Be Able To Do Once IE6 Is Dead」から概要を紹介しています。

透過PNGが問題なく使えるようになるというのは、やはり大きいですね。min-width／max-widthもけっこう重要かもしれません。

元記事によれば、IE6に対応せずに済むのならば、90%のCSSハックは不要になるとのことです。IE6をサポートしなくていい日まであと12ヶ月くらいと言っているようですが、もちろん日本ではまた状況は違っているでしょうね。

また、IE7が対象外になるまで使えないテクニックについても解説されています。とはいえ、3項目中2つは今までも使われてこなかったCSSの機能なので、それほど重要ではないでしょう。まずはIE6をサポートする必要がなくなる日に期待したいですね。

4. ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalkerhttp://www.designwalker.com/2009/04/wireframe-2.html

ワイヤーフレームのデザインショーケースや作成のためのツールを紹介しています。

ワイヤーフレームとは、ページの構成案を検討するためのシンプルなレイアウトサンプルのことです。ラフレイアウトやプロトタイプと混同されがちですが、それぞれ厳密には違った用語なんですよね。わたしの周りでも、あまり意識して使い分けられていませんが…。

かっこよく書けた手書きのワイヤーフレームにあこがれますが、手書きだと修正に限界があったり面倒だったりしますよね。タブレットを使っている弊害か、紙に手書きのときでも左手はcommand + Zを探してしまうわたしです。

図2　ワイヤーフレーム関連のまとめ記事です
図2　ワイヤーフレーム関連のまとめ記事です

5. Flash Photo Gallery: Make Your Visitors Be All Eyes | Flashmotohttp://www.flashmoto.com/blog/flash-galleries/flash-photo-gallery-make-your-visitors-be-all-eyes/

Flashベースのフォトギャラリーのまとめ記事です。見せ方の参考になるギャラリーサイトと、無料で使えるフォトギャラリー制作のソリューションを紹介しています。

この中からピックアップして紹介している「イメージギャラリー作成の参考になる色々なFlashフォトギャラリとFlashCMS」では、フォトギャラリー制作のソリューションを実際に使ってみたレポートも載っているので、参考になると思います。

なお、この記事はFlashMotoというFlashベースのCMSを開発しているチームによるもので、そのCMSにはFlash Photo Galleryというフォトギャラリーのコンポーネントもあるんだとか。うまいこと宣伝につながっているブログエントリーということのようです。

図3　Flashによるフォトギャラリーを多数紹介しています
図3　Flashによるフォトギャラリーを多数紹介しています

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

そのほか先週の記事から、Webプロデュースに役立ちそうな話題を紹介します。

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

Grid System Generator (v0.94) | Create valid css / xhtml grid systemshttp://www.gridsystemgenerator.com/

グリッドレイアウトのWebページデザインのベースとなるXHTMLとCSSのジェネレーターです。有名なCSSフレームワークの960 Grid Systemがベースとなっています。

全体の横幅、カラム数、左右のマージンの数値を自由に設定することができます。また、使われるケースの多いサイズについてはあらかじめ用意してあるものから選べるようになっていました。

プレビュー表示のときの背景画像となっているカラム部分に色の付いた画像もダウンロードされるので、PhotoshopやFireworksでデザインするときのガイドに使えると思います。

この手のジェネレータは分かる人には分かるという作りのものが少なくないですが、このサイトはドキュメントや関連リンクも充実していて好感が持てます。

図4　シンプルながら親切な作りのジェネレーターです
図4　Fシンプルながら親切な作りのジェネレーターです

おすすめ記事

記事・ニュース一覧