アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年5月第1週号 1位は,jQuery&Ajaxのレッスンベスト9/気になるネタは,マクドナルドのサイト,ドロンボー一味に乗っ取られる

週刊Webテク通信

2009年5月第1週号 1位は,jQuery&Ajaxのレッスンベスト9/気になるネタは,マクドナルドのサイト,ドロンボー一味に乗っ取られる

ネットで見かけた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を使っているので,実装にはそれらの知識も必要となるでしょう。

図1 作者はインドのエンジニア/プログラマー/デザイナーの方です

図1 作者はインドのエンジニア/プログラマー/デザイナーの方です

2. 48 Excellent Examples Of Blog Post Footer Designs | Spyre Studioshttp://spyrestudios.com/blog-post-footer-designs/

ブログ記事(Blog Post)のフッターデザインのショーケースです。

ブログのページ全体のフッターではなく,ブログ記事のフッターというのがポイントで,記事とコメントエリアとの間に入れる要素についての考察とサンプル集になっています。

ブログ記事が終わった後の読者への道しるべということで,ソーシャルブックマークやソーシャルニュースへの投稿,他の記事への誘導を入れるのに適した場所とのことです。

いろんなブログ記事フッターを調査した結果としては,以下の項目がよく入れられているそうです。

  • 最近の記事
  • RSSへのリンク
  • ソーシャルメディアへのアイコンリンク
  • 広告
  • 日付
  • カテゴリーとタグ
  • 作者紹介

このリストは,自分のブログ記事フッターに入れる項目のチェックリストとしても使えそうですね。

図2 ブログのフッターではなく,ブログ記事のフッター集

図2 ブログのフッターではなく,ブログ記事のフッター集

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種類紹介しています。

いわゆるアコーディオンのような画面の領域を節約したいというものだけでなく,暗く表示されている領域がロールオーバーで明るくなるものや,スクロールして画面に表示されてから画像を読み込ませる遅延ロードを実現するものも紹介されています。

図3 コードのスニペットを集めたサイトです

図3 コードのスニペットを集めたサイトです

4. アクセス解析だけでは分からない,サイト上でのユーザー動向を追うツール8+2種 - リアルアクセス解析http://d.hatena.ne.jp/ryuka01/20090503/p1

ユーザーがどこをクリックしたか,どこまでスクロールしたか,などのユーザー動向を解析できるツールを多数紹介しています。クリックした場所や頻度を温度分布図のように表示する,ヒートマップを作成するのが定番のようです。

無料のもの,制限付きで無料のものも結構あります。ただし,無料のものは海外製のものが多く,無料かつ日本語対応のものはClickHeatというツールだけのようです。

図4 それぞれのツールに作者の評価が星マークで付けられています

図4 それぞれのツールに作者の評価が星マークで付けられています

5. Web Designer Help ? Over 40 Beautiful Portfolioshttp://www.webdesignerhelp.co.uk/index.php/2009/05/over-40-beautiful-portfolios/

ポートフォリオサイトのデザインショーケースです。クリエイターの作品集サイトは自由なデザインが試せる場所なので,実験的なものやオリジナリティの高いサイトが多いですね。

複数の作品を見せるのに,スライダーやLightbox風効果を使ったものが目立ちます。FlashよりもAjaxを使うのが主流のようですね。

図5 ステキなポートフォリオサイトがいろいろ

図5 ステキなポートフォリオサイトがいろいろ

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

そのほか先週の記事から,便利そうなWebサービスを紹介します。

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

ご都合.com | みんなの「都合のよい日」がすぐわかる,無償&登録不要の共有カレンダーhttp://www.gotsugo.com/

ミーティングや会議,飲み会などの集まりで,みんなの「都合のよい日」を調べたいときに便利な共有カレンダーです。

無料で使え,ユーザー登録も不要というお手軽さがよさそうです。ケータイ対応じゃないのが残念なところですね。

作ったカレンダーは個別のURLが設定され,パスワードによるアクセス制限をかけることもできます。不要になったカレンダーは簡単に削除できるようですが,3ヶ月で自動で消えるというのもいいですね。

図6 シンプルなTOPページです

図6 シンプルなTOPページです

今週の気になるWebネタ

マクドナルドのサイト,ドロンボー一味に乗っ取られる - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0905/08/news071.html

ハッピーセットのおまけが「ヤッターマン・シール」ということで,マクドナルドのサイトにヤッターマンのキャラクターたちが登場しています。

ドロンボー一味がマクドナルドのサイトをジャックして,それを「ヤッターマンがいる限り,マックに悪は栄えない」とヤッターマンが阻止しようとするという設定が面白いですね。

ヤッターマンやヤッターマンのメカは何も活躍せずに,ユーザーがドロンボー一味を見つけてクリックしたらおしまいという単純な内容なんですが,子供たちは喜びそうです。

ここで唐突ですが,説明しよう。イラストは,ヤッターマン→ツィッターマンだけでなく,マクドナルド→マック→アップル→アップルのツィッター買収のうわさ話にも掛けたネタなのだ。おそまつだったでコロン。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス