週刊Webテク通信

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

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

ネットで見かけた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を生成するためのサービス

今週の気になるWebネタ

Adobe,モバイル向けFlash Playerの提供中止を発表 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1111/10/news025.html

Adobeがモバイル機器向けFlash Playerの提供中止を発表しました。

AndroidとBlackBerry向けに提供しているFlash Playerの開発を中止し,今後はモバイル向けにはHTML5での開発を推奨していくとのこと。やはりAppleがiOSで採用しなかったのが影響しているようです。

この発表に関する一連の報道はアメリカ発の情報が元となっているので,日本ではすっかり普及しているフィーチャーフォン(ガラケー)向けのFlash Liteについては触れられていません。日本の携帯電話向けゲームコンテンツなんかに与える影響の方が大きいように思うのですが,詳しい人にぜひそのへんを記事にしてもらいたいですね。

デスクトップ向けのサイトでもFlash離れは進んでいるようですし,Flashの未来は厳しそうです。わたしは絵を描くのにFlashを使っているので,アプリケーションとしてのFlashには生き残って欲しいと願っています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入