週刊Webテク通信

2011年11月第2週号1位は、CSSのみでテキストにグラデーションやリフレクトをかけるテクニック、気になるネタは、Adobe、モバイル向けFlash Playerの提供中止を発表

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

1. CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ(くだくらげのBLOG)http://d.hatena.ne.jp/kudakurage/20111113/1321170623

CSSだけでテキストにグラデーションをかけるテクニックの紹介です。

「CSS3なら簡単にグラデーションをかけられるんでしょ?」と思った人もいるかもしれませんが、CSS3でグラデーションを設定できるのは領域の背景色だけです。なので、単純にテキストカラーにグラデーションを設定することはできません(わたしも最初これを誤解していました⁠⁠。

このテクニックでは、⁠:before」⁠:after」擬似クラスでテキストの上に同じテキストを違う色で重ね、さらにグラデーションマスクを適用することでグラデーションを表現しています。

この記事ではiPhoneしかターゲットにしていないようですが、Chromeでも表示できました。

この記事からリンクしている関連記事「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました」もためになりました。

図1 CSSのみでテキストにグラデーションをかけるテクニック
図1 CSSのみでテキストにグラデーションをかけるテクニック

2. Wireframing & Prototyping with Adobe Fireworks ? Resources and Tutorialshttp://speckyboy.com/2011/11/07/wireframing-prototyping-with-adobe-fireworks-resources-and-tutorials/

Adobe Fireworksでワイヤーフレームやプロトタイプを作るときに役立つ情報やチュートリアルをまとめた記事です。

この記事の冒頭には、⁠一度Fireworksでワイヤーフレームを作り始めたら、もう後戻りできないことを保証する(ほかのツールには戻れないだろうという意味⁠⁠」とあります。

チュートリアルやテクニックの記事、ビデオチュートリアル、テンプレートやUI素材などが紹介されています。

図2 Fireworksでワイヤーフレームを作るためのチュートリアルやテクニック
図2 Fireworksでワイヤーフレームを作るためのチュートリアルやテクニック

3. A/Bテストの生事例 蔵出し14パターン一気紹介 (ポイント解説付き) | Web担当者Forumhttp://web-tan.forum.impressrd.jp/e/2011/11/07/11397

実際にサイト上で行ったA/Bテストの例を、結果とともに14個紹介しています。

色や形、レイアウトといった見た目のデザイン的なところでなく、キャッチコピーやラベルのようなテキスト要素を変更して大きな効果が得られることも少なくないとのことです。

掲載されている作例でも、ボタンのラベル文字を変更するなど、ちょっとしたテキストの変更で効果を出しているケースがいくつか紹介されています。

図3 実際にサイト上で行ったA/Bテストの事例集
図3 実際にサイト上で行ったA/Bテストの事例集

4. An Extensive Guide To Web Form Usability - Smashing UX Designhttp://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

フォームのユーザビリティに関する手引きです。

ユーザーとそのサイト(の運営組織)との「関係性」「会話⁠⁠、および「外観」という三つの側面からユーザービリティへの取り組みを解説しています。

図4 フォームのユーザビリティに関する手引き
図4 フォームのユーザビリティに関する手引き

5. Black in Web Design: 50 Beautiful Exampleshttp://www.uxde.net/2011/11/01/black-in-web-design-50-beautiful-examples/

黒色ベースのWebデザインのショーケースです。

ブラックはデザイナーにも見る者にも強い感情を喚起する強力な色だとのことです。

図5 黒色ベースのWebデザインのショーケース
図5 黒色ベースのWebデザインのショーケース

そのほか、先週の記事の中から、Google+関連の記事を紹介します。

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

Google+ ページをサイトにリンク - Google+ Platform ? Google Developershttps://developers.google.com/+/plugins/badge/config?hl=ja

Google+上に、企業、ブランド用のページ「Google+ ページ」が作れるようになりました。

長い間待たされた割には、機能はほとんど個人アカウントと同じですし、複数人で管理できないので企業ページとしては運用が難しいとも言われています。

そんなGoogle+ ページの特長の一つが、Google+ ページと自社サイトとをお互いにリンクさせられることです。

このリンクを行うために必要な「Google+ badge」を生成するためのサービスが、⁠Google+ ページをサイトにリンク」です。

ここで生成したコードを自社ページに組み込むことで、Google+ ページと自社サイトとをリンクさせることができます。

さらにGoogle+ ページのプロフィールから自社サイトへリンクすることで、⁠Google+ ダイレクト コネクト」の対象となるそうです。

「Google+ ダイレクト コネクト」が使用できるサイトになると、Googleで検索する際に「+企業名」と入力すると該当する「Google+ ページ」の候補が表示されるようになります。

図6 Google+ badgeを生成するためのサービス
図6 Google+ badgeを生成するためのサービス

おすすめ記事

記事・ニュース一覧