週刊Webテク通信

2010年10月第4週号1位は、積極的に取り入れたい9つのCSS3(+jQuery)テクニック、気になるネタは、アップルスペシャルイベント「Back to the Mac」いろいろなものが発表

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

1. 積極的に取り入れたい9つのCSS3(+jQuery)テクニックhttp://webdesignrecipes.com/9-css3-and-jquery-techniques/

CSS3を使ったいろいろなテクニックを紹介したチュートリアル記事です。サンプルがどれも実践的で、親切に解説されています。

一部jQueryを使っていますが、基本的には全てCSSだけで実現できる内容です。ブラウザによって、できることには差があります。アニメーション系はFirefox、IE8はダメですね。

海外ブログの記事をただ翻訳しているのではなく、自らサンプルを作って試していることにより、記事の信頼感が増していると思います。取り上げられたテクニックは、どれもサイト制作時に使ってみたくなりそうな、実践的なものばかりです。

図1 CSS3を利用した実践的なテクニックいろいろ
図1 CSS3を利用した実践的なテクニックいろいろ

2. 50 Powerful Time-Savers For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2010/10/19/50-powerful-time-savers-for-designers/

Webデザイナーの時間短縮につながりそうな、便利で役立つツールが大量に掲載されていました。

ほとんどはWebサービスですが、デスクトップアプリケーションやFirefoxのアドオンも紹介されています。

有名なものやマイナーなもの、大がかりなWebサービスやかゆいところに手が届くちょっとしたツールなど、いろいろなものがありますね。生産性を上げ、ワークフローを改善するのに役立つツールを多数見つけられそうです。

図2 Webデザイナーの時間節約ツールいろいろ
図2 Webデザイナーの時間節約ツールいろいろ

3. Showcase of 60 Brilliant Call to Action Usage | TutToasterhttp://www.tuttoaster.com/showcase-of-60-brilliant-call-to-action-usage/

ユーザーの行動を喚起するボタンなどの要素のショーケースです。

思わず押したくなるようなボタンのデザインや、ページの中での目立たせ方など、とても参考になります。

緑色のボタンがかなり多いですね。以前、Firefoxがダウンロードボタンの色によるダウンロード率の違いを調査した結果をもとに、ボタンを緑色に統一したというニュースを思い出しました。

図3 ユーザーに行動喚起をするボタンや要素のショーケース
図3 ユーザーに行動喚起をするボタンや要素のショーケース

4. 10 Fresh jQuery Plugins and Tutorials | Tutorialshttp://webdesignledger.com/tutorials/10-fresh-jquery-plugins-and-tutorials

見た目のエフェクト系のjQueryプラグインやチュートリアルを各種紹介しています。

テキストを一文字ずつ違った色やスタイルにしたいときに便利な Lettering.js や、セレクトメニューをメガメニューにする jQuery MegaSelect List といった、面倒そうなことを楽に実現させてくれるプラグインに特に興味を持ちました。

図4 フレッシュなjQueryプラグインとチュートリアル
図4 フレッシュなjQueryプラグインとチュートリアル

5. 30 Delicious Food and Drink Website Designs | CreativeFanhttp://creativefan.com/30-delicious-food-drink-website-designs/

食品や飲料関連のWebサイトデザインのギャラリーです。レストラン、お酒のメーカー、コーヒーショップ、食品メーカーのサイトが紹介されています。

デザインのテイストがやはり日本とは違い、あまり参考にならないかもしれませんが、見ていて面白いですね。

図5 食品関連のWebサイトのギャラリー
図5 食品関連のWebサイトのギャラリー

そのほか先週の記事から、気になるニュース記事を紹介します。

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

Frame Box - Lightweight online tool for creating mockupshttp://framebox.org/

Frame Box はモックアップ・ワイヤーフレームを作るためのWebサービスです。

シンプルで軽快に動作します。フォントを変更することはできませんが、日本語も表示できました。

JavaScriptベースなので、iPadでも使えるかと思ったのですが、制作することはできませんでした。作られたモックアップを見ることはiPadでも可能です。

セレクトメニュー、ラジオボタン、チェックボックスなど、フォームの部品を動作する状態で試せるのがいいですね。

画像の配置など複雑なことはできませんし、複数ページを連携させることもできませんが、そのおかげでシンプルで軽い操作感を実現しているとも考えられます。

ユーザー登録などなく使えますし、できたモックアップは生成されたURLにアクセスすれば、パスワードなどなく誰でも見たり編集することができます。

外部に漏れてはマズイような内容は入れられないでしょうが、手軽に使えるところが利点だと思います。

図6 モックアップを作るWebサービス Frame Box
図6 モックアップを作るWebサービス Frame Box

おすすめ記事

記事・ニュース一覧