週刊Webテク通信
2009年5月第1週号 1位は,jQuery&Ajaxのレッスンベスト9/気になるネタは,マクドナルドのサイト,ドロンボー一味に乗っ取られる
2009年5月14日
Webテク, Webデザイン, Web広告, jQuery, Ajax, Twitter, ブログ, アクセス解析
サービス, 2009, Ajax, ヤッターマン, ドロンボー
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年5月4日~5月10日の間に見つけた記事のベスト5です。
1. 9lessons: jQuery and Ajax best 9lessons.http://9lessons.blogspot.com/2009/05/jquery-and-ajax-best-demos.html
jQuery&Ajaxのレッスンベスト9ということですが,Twitterで使われているインターフェイスを実現することを意識した内容となっています。
この手のもので寄せ集めのリンク集は多いですが,このページに載っているリストは全てこの「9lessons」オリジナルの記事です。サイトタイトルから全部の記事が9つのレッスンを紹介してるのかと思いましたが,そういうわけではないようですね。
Twitterを使っている人にはおなじみの,入力したテキストがすぐにタイムラインに追加されるアクションや,「more」ボタンで次の何件かが表示される動きなどを実現するチュートリアルが紹介されています。
ただのビジュアル上の変化だけでなく,ページ遷移なしにコンテンツを読み込む作業も含めての内容となっています。PHPやMySQLを使っているので,実装にはそれらの知識も必要となるでしょう。
2. 48 Excellent Examples Of Blog Post Footer Designs | Spyre Studioshttp://spyrestudios.com/blog-post-footer-designs/
ブログ記事(Blog Post)のフッターデザインのショーケースです。
ブログのページ全体のフッターではなく,ブログ記事のフッターというのがポイントで,記事とコメントエリアとの間に入れる要素についての考察とサンプル集になっています。
ブログ記事が終わった後の読者への道しるべということで,ソーシャルブックマークやソーシャルニュースへの投稿,他の記事への誘導を入れるのに適した場所とのことです。
いろんなブログ記事フッターを調査した結果としては,以下の項目がよく入れられているそうです。
- 最近の記事
- RSSへのリンク
- ソーシャルメディアへのアイコンリンク
- 広告
- 日付
- カテゴリーとタグ
- 作者紹介
このリストは,自分のブログ記事フッターに入れる項目のチェックリストとしても使えそうですね。
3. 10 Transition Effects: The art of Showing/Hiding Content | DevSnippetshttp://devsnippets.com/article/10-transition-effects-the-art-of-showinghiding-content.html
JavaScriptライブラリを使って,コンテンツの表示/非表示を切り替える方法を10種類紹介しています。
いわゆるアコーディオンのような画面の領域を節約したいというものだけでなく,暗く表示されている領域がロールオーバーで明るくなるものや,スクロールして画面に表示されてから画像を読み込ませる遅延ロードを実現するものも紹介されています。
4. アクセス解析だけでは分からない,サイト上でのユーザー動向を追うツール8+2種 - リアルアクセス解析http://d.hatena.ne.jp/ryuka01/20090503/p1
ユーザーがどこをクリックしたか,どこまでスクロールしたか,などのユーザー動向を解析できるツールを多数紹介しています。クリックした場所や頻度を温度分布図のように表示する,ヒートマップを作成するのが定番のようです。
無料のもの,制限付きで無料のものも結構あります。ただし,無料のものは海外製のものが多く,無料かつ日本語対応のものはClickHeatというツールだけのようです。
5. Web Designer Help ? Over 40 Beautiful Portfolioshttp://www.webdesignerhelp.co.uk/index.php/2009/05/over-40-beautiful-portfolios/
ポートフォリオサイトのデザインショーケースです。クリエイターの作品集サイトは自由なデザインが試せる場所なので,実験的なものやオリジナリティの高いサイトが多いですね。
複数の作品を見せるのに,スライダーやLightbox風効果を使ったものが目立ちます。FlashよりもAjaxを使うのが主流のようですね。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
そのほか先週の記事から,便利そうなWebサービスを紹介します。
- 複数RSSまとめ&タブ化ジェネレーター
複数のRSSフィードをひとつにまとめ,自分のサイトで公開できるWebサービスです。まとめたフィードのセットは5種類まで作れ,タブで切り替えて表示できます。 -
Repper -> create your own patterns!
自分でアップロードした画像を元に,継ぎ目のない繰り返しパターンを作成できます。位置やサイズを変更して,偶然できる画像を楽しむもののようです。 -
ウェブ上であらゆるファイルを変換できるサイト「Convert.Files」が超便利*二十歳街道まっしぐら
対応フォーマットが非常に多いファイル変換サービスの紹介記事です。
先週の気になるWebサービス
ご都合.com | みんなの「都合のよい日」がすぐわかる,無償&登録不要の共有カレンダーhttp://www.gotsugo.com/
ミーティングや会議,飲み会などの集まりで,みんなの「都合のよい日」を調べたいときに便利な共有カレンダーです。
無料で使え,ユーザー登録も不要というお手軽さがよさそうです。ケータイ対応じゃないのが残念なところですね。
作ったカレンダーは個別のURLが設定され,パスワードによるアクセス制限をかけることもできます。不要になったカレンダーは簡単に削除できるようですが,3ヶ月で自動で消えるというのもいいですね。
今週の気になるWebネタ

マクドナルドのサイト,ドロンボー一味に乗っ取られる - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0905/08/news071.html
ハッピーセットのおまけが「ヤッターマン・シール」ということで,マクドナルドのサイトにヤッターマンのキャラクターたちが登場しています。
ドロンボー一味がマクドナルドのサイトをジャックして,それを「ヤッターマンがいる限り,マックに悪は栄えない」とヤッターマンが阻止しようとするという設定が面白いですね。
ヤッターマンやヤッターマンのメカは何も活躍せずに,ユーザーがドロンボー一味を見つけてクリックしたらおしまいという単純な内容なんですが,子供たちは喜びそうです。
ここで唐突ですが,説明しよう。イラストは,ヤッターマン→ツィッターマンだけでなく,マクドナルド→マック→アップル→アップルのツィッター買収のうわさ話にも掛けたネタなのだ。おそまつだったでコロン。
週刊Webテク通信
- 2009年5月第3週号 1位は,Webデザイン業界の専門用語辞典/気になるネタは,ドコモからAndoroid携帯 HT-03A 登場
- 2009年5月第2週号 1位は,今どきのWebデザインで「すべきこと/ダメなこと」/気になるネタは,施設を「ストリートビュー」で公開しませんか? - グーグルが新プログラム
- 2009年5月第1週号 1位は,jQuery&Ajaxのレッスンベスト9/気になるネタは,マクドナルドのサイト,ドロンボー一味に乗っ取られる
- 2009年4月第5週号 1位は,ゼロから作る美しいWebサイトデザイン/気になるネタは,White House 2.0:米政府,公式Twitterをスタート
- 2010年2月第4週号 1位は,すばらしいCSS3のチュートリアル&テクニック集,気になるネタは,Google「リアルタイム検索」が日本語対応
- 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力
- 2009年11月第3週号 1位は,グリッドベースのWebデザインの手引き,気になるネタは,Google マップでトイレ検索!?
- 2009年11月第1週号 1位は,今どきのCSSレイアウトの特徴,気になるネタは,日本版Twitter,「つぶやき」から「ツイート」に
- 2009年8月第2週号 1位は,優れたブログデザインの重要なポイント10項目/気になるネタは,いよいよReTweetがTwitterの正式機能に


