週刊Webテク通信

2009年7月第3週号1位は、画面キャプチャーを撮るツール/気になるネタは、広瀬香美、冬の女王からTwitterの女王へ!?

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

1. Screen Capture Tools: 40+ Free Tools and Techniques | Toolshttp://www.hongkiat.com/blog/screen-capture-tools-40-free-tools-and-techniques/

画面キャプチャーを撮るフリーのツールのまとめ記事です。デスクトップやアプリケーション画面を撮るだけでなく、Webページのキャプチャーツールも紹介されています。

  • クロスプラットフォームのツール
  • Windows用
  • Mac用
  • Linux用
  • Webサービス
  • Firefoxアドオン
  • その他関連記事

と分けて紹介されていて、それぞれのツールに簡単な解説が載っています。

Websnapshot、Paparazzi!、Screengrab!といった、Webページ全体をキャプチャーできるツールは、Webデザイナーにとっても利用する機会は多いのではないでしょうか。これらのツールを使うと、縦に長いページでも一気にキャプチャーを撮ることができます。スクロールしてはキャプチャーを撮る作業を繰り返して後でつなげていた人は、ぜひチェックしてみてください。

ちなみにこの「週刊Webテク通信」で掲載しているWebページのキャプチャーは、Mac用ソフトのPaparazzi!を使っています。

図1 フリーの画面キャプチャーツールのリストです
図1 フリーの画面キャプチャーツールのリストです

2. Animating Design Elements: 7 Unique & Creative Practices | Noupehttp://www.noupe.com/design/animating-design-elements.html

アニメーションするデザイン要素にスポットをあてたデザインのショーケースです。

以下の項目に分けて、その効果が使われているサイトを紹介しています。

  1. ロールオーバーでアニメーションするメニュー
  2. アクションによりスクロールするコンテンツ
  3. アラートなどが動的に出てくるフォーム
  4. コンテンツがアニメーションして切り替わるタブメニュー
  5. ロールオーバー時のアニメーション効果
  6. 動きをつけて見せるイメージギャラリー
  7. アニメーションして開閉する領域

アニメーションといっても派手なものではなく、スライドするとか、じわっと表示されるなど単純なものです。すごい効果で驚かせるというより、変化に気付かせるためのアニメーションですね。

図2 ロールオーバーやクリックでアニメーションするWebデザインの紹介です
図2 ロールオーバーやクリックでアニメーションするWebデザインの紹介です

3. 50+ Beautifully Designed Left-Bar in Twitter Profile Backgrounds | 2experts Design - Web Design and Graphic Design Bloghttp://www.2expertsdesign.com/2009/05/11/50-beautifully-designed-left-bar-in-twitter-profile-backgrounds/

ステキな背景画像でカスタマイズされた、Twitterのユーザー画面のデザインショーケースです。やはりデザイナーやクリエイターはTwitterページのデザインでも自己主張しないといけないなと考えさせられます。

背景画像のサイズやファイル形式などに関する記事Twitterの背景画像を自作する方法・・・ - IDEA*IDEA ~ 百式管理人のライフハックブログ ~もご参考に。

図3 ステキなデザインのTwitter背景画像がもりだくさんです
図3 ステキなデザインのTwitter背景画像がもりだくさんです

4. 12 Designer tutorial sites | TheLanceLifehttp://www.thelancelife.com/inspiration/12-designer-tutorial-sites/

デザイナー向けチュートリアルサイトのリストです。この手のものでは膨大なサイトが紹介されているケースも多いですが、このリストは厳選されているところがいいですね。

Photoshop、Illustratorのチュートリアルが中心で、Webデザイナーだけでなくグラフィックデザイナーにも役立つことでしょう。

図4 チュートリアルサイトのリンク集です
図4 チュートリアルサイトのリンク集です

5. LBOI Design Blog ? 27 Promising New Design Blogs And Websites of 2009http://www.littleboxofideas.com/blog/inspirations/27-promising-new-design-blogs-and-websites-of-2009

最近オープンした前途有望なデザイン系ブログ&サイトの紹介です。このエントリーの作者自身が今年このブログを始めたようで、自分のブログを1番に紹介しているところが日本人とは違った感性でほほえましいですね。

図5 最近オープンしたデザイン系ブログ&サイトのリストです
図5 最近オープンしたデザイン系ブログ&サイトのリストです

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

そのほか先週の記事から、いろいろなまとめ記事を紹介します。

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

TwitPaint - Twitterでお絵かきしようhttp://twitpaint.com/

[drawTwit(どろつい)]-Twitterでらくがきhttp://drawtwit.com/

Twitter上にお絵描きを投稿できるサービスが、同時期に日本から2つ登場しました。

どちらもTwitterのアカウントでログインでき、ブラウザ上で絵を描いてTwitterに投稿することができます。Twitterの140文字にならって140筆(140ストローク)という制限がついているのも共通ですね。

もちろん、TwitPicのように画像はストックされ、お絵描き共有サービスとして利用できます。

TwitPaintは、フォロワーが絵に加筆することができる機能があります。一方、drawTwitは絵に対するコメントとして小さな絵が描けます。

TwitPaintは、iPhoneやAndroid上でも絵が描けるようです。iPhone&Twitterの組み合わせで使っている人は多いので、うれしいユーザーも多いのではないでしょうか。

drawTwitはイラストコミュニケーションサービス「pixiv(ピクシブ⁠⁠」で有名なピクシブ株式会社が運営しているんですね。

図6 先行して公開されたTwitPaint
図6 先行して公開されたTwitPaint
図7 ピクシブがリリースしたdrawTwit
図7 ピクシブがリリースしたdrawTwit

おすすめ記事

記事・ニュース一覧