週刊Webテク通信

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

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

ネットで見かけた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 Well 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シンプルながら親切な作りのジェネレーターです

今週の気になるWebネタ

信頼性でWikipedia対抗 朝日新聞,講談社,小学館など無料辞書サイト - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0904/22/news049.html

朝日新聞社と講談社,小学館,朝日新聞出版,ECナビの5社が,人名や時事用語などを無料で横断検索できる辞書サイト「kotobank」(コトバンク)をオープンしました。

朝日新聞出版の「知恵蔵2009」,講談社の「デジタル版日本人名大辞典」,小学館の「デジタル大辞泉」など44種類の辞書に収録された約43万語を横断検索できるサービスです。

「新s(あらたにす)」に「kotobank(コトバンク)」と朝日新聞の関わるサイトはネーミングが面白いですよね。賛否両論あるかと思いますが,わたしは結構好きなセンスです。ただ,そのネーミングとサイトの内容とがマッチしてない気がするのも突っ込まれやすいポイントかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入