週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 3 分

ネットで見かけた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

今週の気になるWebネタ

アップルスペシャルイベント「Back to the Mac」で発表されたもの総まとめ! : ギズモード・ジャパンhttp://www.gizmodo.jp/2010/10/post_7845.html

アップルのスペシャルイベント「Back to the Mac」が行われ,Macがらみのものがいろいろと発表されました。

ソフトは新OSのMac OS X 10.7 LionとiLife '11,FaceTime For Mac,ハードは新MacBook Air,サービスはMac App Storeと,バランスの取れた発表だったと思います。

MacBook Airは日本では11インチが人気のようです。MacBook Airには,再インストール用のバックアップDVDではなくUSBメモリが付いていることも話題になっています。iLife '11はDVDですが,LionはUSBメモリでリリースされたりするんでしょうか。

初代MacBook Airが出たころは,⁠Windowsマシンとして欲しい」⁠Windowsを入れたときのパフォーマンスは?」というような声をよく聞きましたが,今回そういったことを言う人は見かけませんね。

OSも含めてのMacへの魅力を感じている人が増えたんじゃないかと思います。iPhone,iPadの利用者で,Macにも親しみを持つようになる人も多いでしょう。iPhone,iPad人気があってこその,⁠Back to the Mac」ということですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

  • ご紹介ありがとうございます

    こんにちは!
    Webデザインレシピの中のひと、Noriです。
    こんなに大きく紹介して頂いて、とっても嬉しいです!
    アクセスログをたどってきたら...ビックリしました w
    ブログを読んで頂いた事、ご紹介いただいた事、本当にありがとうございました :)

    Commented : #1  Nori (2010/10/29, 19:27)

コメントの記入