週刊Webテク通信

2009年7月第4週号1位は、Webデザインのプロセスを紹介したムービー/気になるネタは、前半戦2位 ホークス復活の陰に「iPhone 3G」

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

1. Website Design -- Creation In Time Lapse « Bit Rebelshttp://www.bitrebels.com/design/website-design-creation-in-time-lapse/

Webデザインの制作プロセスを紹介したムービーを4つ紹介しています。デザインができていく様子を早回しで見ることができて興味深いです。

プロモーションビデオのようにカッコ良くサイトができていく1つ目のムービーをはじめ、⁠すんなり出来過ぎ」⁠素材を配置しているだけ」といったツッコミもありそうで、チュートリアルとして使えるものではありませんね。

しかし、同業者ならヒントになる箇所が何かしらありそうだと思います。また、YouTubeの関連動画として同様のムービーがほかにも見つかりますので、いろんな制作プロセス動画を見つけるきっかけにもなるでしょう。

図1 Webサイトの制作過程のムービーをYouTubeから紹介
図1 Webサイトの制作過程のムービーをYouTubeから紹介

2. 50 New CSS Techniques For Your Next Web Design | CSS | Smashing Magazinehttp://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/

CSSテクニックの中でもCSS3がらみのものなど、新しいもの中心にまとめてあるリストです。タイトルを訳するなら、⁠次世代のWebデザインのための50のナウなCSSテクニック」とでもいうところでしょうか。

図2 5つのカテゴリに分けて50のテクニックを紹介しています
図2 5つのカテゴリに分けて50のテクニックを紹介しています

3. 20 Sites Full of jQuery Awesomeness - The Designedhttp://thedesigned.com/2009/07/24/20-sites-full-of-jquery-awesomeness/

jQueryを使った効果が印象的なサイトのギャラリーです。Flashを使わなくてもJavaScriptでこれだけできるぞというショーケースとも言えますね。

Flashサイトにありがちなやりすぎ感のあるサイトもありますが、ちょっと気の利いた操作感を実現しているものが多いですね。

これらのサイトを見ていると、⁠Webだから」とか「Flashじゃないから」といった言い訳がどんどん通用しなくなっていくんだろうなと感じました。

図3 jQueryを使ったすごいサイト集です
図3 jQueryを使ったすごいサイト集です

4. Twitterをサイトに組み込むチュートリアル&サンプル集:phpspot開発日誌http://phpspot.org/blog/archives/2009/07/twitter_2.html

Twitterのタイムラインや検索結果を自分のサイトやブログに組み込む方法がまとめてあります。JavaScriptやPHPで簡単に使えるもの中心に紹介されています。

なお、Twitter、リアルタイムで検索のアップデートをするウィジェットをリリースという記事によると、検索結果がリアルタイムで更新される公式のウィジットもあるようです。

なお、公式ウィジット配布ページとして知られるTwitter / あなたのサイトにウィジットを貼りましょう!よりも、Twitter / Widgetsの方が新しいウィジットを案内しています。日本向けページまで手が回ってないのかもしれませんが、新旧ウィジットが同時に公開されているところや配布ページの探しにくさにも、Twitterらしい「ゆるさ」を感じますね。

図4 Twitterをサイトに組み込む方法いろいろ
図4 Twitterをサイトに組み込む方法いろいろ

5. 30 Essential Free Portable Web Design and Development Applications : Speckyboy Design Magazinehttp://speckyboy.com/2009/02/27/30-essential-free-portable-web-design-and-development-applications/

Webデザイナーやデベロッパーに役立つアプリケーションの中から、USBドライブなどで持ち歩ける軽量版のものだけを集めた紹介ページです。

  • Webブラウザ
  • テキスト/HTML/CSSエディタ
  • サーバー
  • FTPクライアント
  • グラフィックソフト
  • ユーティリティ

のポータブル版が紹介されています。Windowsオンリーのものが多いですね。

図5 ポータブル版アプリケーションのリンク集です
図5 ポータブル版アプリケーションのリンク集です

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

そのほか先週の記事から、デザインの参考になりそうなギャラリー・リンク集を紹介します。

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

FriendFeedhttp://friendfeed.com/

先週公開されたブログを書いている人が FriendFeed を始めるべき7つの理由 | Lifehacking.jpという記事が話題になっていたので、いまさら感のある人もいると思いますがFriendFeedを紹介します。

有名なサービスなので情報はいろいろありますし、Lifehacking.jpの記事を読んでもらえればポイントも押さえられると思うので、ざっくりと説明させていただきます。

FriendFeedは、ブログやTwitter、Tumblr、Flickrなどの自分のオンライン活動をまとめてタイムライン表示できる、自分のポータルサイトが作れるサービスです。

また、TwitterやTumblrのように、ほかの人をフォローすることもできます。FriendFeedユーザーでない人をフォローしたい場合、Imaginary Friend(仮想の友達)という機能を使い、その人のRSSなりTwitterアカウントなりを勝手にどんどん登録していけばいいわけです。なので、ストーキングツールなどとも呼ばれているワケですが。

Twitterがブームになると同時にTumblrについても目にすることが多くなった昨今、これらのサービスとの相性もいいFriendFeedもユーザーが増えて盛り上がってくるといいですね。

図6 友達とオンラインで簡単にコンテンツを共有できるサービスです
図6 友達とオンラインで簡単にコンテンツを共有できるサービスです

おすすめ記事

記事・ニュース一覧