2010年10月第5週号　1位は、透過画像を使ったCSSスプライト、気になるネタは、角川、電子書籍事業に本格参入

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

透過画像を使ったCSSスプライトの提案です。

CSSスプライトは、サイト上でよく使う矢印やアイコンなどの複数の画像を1枚にまとめたファイルを用意し、CSSを使って必要な部分だけを表示させるテクニックです。HTTPリクエストの数を減らし、レスポンスをよくする効果を狙った有名なテクニックで、GoogleやAmazonでも使われています。

ここで紹介されているのは、CSSスプライトに半透明の画像を使うことで、背景色を変えるだけでボタンなどの色を簡単に変更することができるテクニックです。白地に穴の開いたような画像を使い、穴から下の色が透けて見えるようにしているわけです。

色ごとに画像を用意する必要がないため、メンテナンス性も高くブラウザへの負荷も押さえられます。

白地の透過画像を使うテクニックは、角丸を作る場合などで以前から使われています。GIF画像を使うのが一般的でしたが、PNG画像なら階調表現を使った透過ができるので表現力が増しますね。

CSSスプライトも透過画像のテクニックもどちらも昔ながらのテクニックですが、組み合わせてみると便利だよという提案でした。

CSS3を使ったテキスト装飾のテクニック集です。簡単なコードで実現できるちょっとした効果が7つ紹介されています。

フォントの縁取りはWebkit系ブラウザ以外では適用されないなど、ブラウザ依存の部分があるので注意が必要です。実際に使用する際には、ブラウザによる条件分岐を考えた方がいいでしょう。

Webページのユーザーインターフェイスの素材や、ワイヤーフレーム作成に使えるパーツを入手できるサイトを多数紹介しています。AndroidやiPhoneアプリ作成時に役立つ素材も提供されています。

定番のpsd、aiファイルのほか、Fireworks用のPNGファイルや、Keynoteファイル、PowerPointファイルなどもありました。

Photoshopのブラシ、アクション、スタイルを大量に紹介しています。実際にダウンロードして使うこともできますが、ギャラリーとして眺めているだけでも参考になりそうです。

個人のポートフォリオサイトとデザインスタジオのサイトのギャラリーです。当然デザインにこだわっているサイトばかりで、見応えがあります。

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

［速報］Adobe MAX 2010。HTML5とjQueryに対応したWebアニメーションツール「EDGE」などを発表－ Publickey
jQueryのコードを出力するWebアニメーションツールに期待したいですね。
Adobe AIR 2.5 発表。アプリストア InMarket も登場へ
ウェブアプリを扱う独自ストアAdobe InMarketが発表されました。
Google、ようやくFeedBurnerをアップデート。リアルタイムデータとTwitterに焦点
Google Analyticsのような画面でリアルタイム統計データが見られるそうです。
PayPalがデジタルグッズ/コンテンツ用の小額支払いサービスを開始, Facebookはさっそく導入
デジタルコンテンツ向けの少額支払いサービスで、サイトを去る必要なく2クリックで支払いができるとのこと。

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

Simplebookletは、スライドショーのような電子小冊子を作るためのWebサービスです。

テキスト、画像、動画、音声などを配置した、複数ページの電子小冊子が作成できます。カタログ、パンフレット、ちらしなどに使えるでしょう。

日本語のテキストの入力／表示も問題なさそうです。URLを入力するとそのページのスクリーンショットを挿入できる便利な機能があるのですが、日本語のサイトの場合は文字化けしてしまいました。

作成した電子小冊子は独自のURLで公開されるほか、自分のページに埋め込むことや、HTMLメールとして送信することも可能です。

HTMLのコードを入力することもできるので、iframeやJavaScriptで別サイトのデータを埋め込むことも可能なはずです。電子小冊子の中に別の電子小冊子を埋め込んだサンプルもありました。

FlashではなくHTML＆JavaScriptベースなので、自由度が高くいろいろなことができそうです。その反面、フォントや文字サイズは見る人の環境に依存します。通常のWebページ制作と同様、文字サイズが可変することを前提としたレイアウトを考える必要があるでしょう。

角川グループのデジタルコンテンツを販売するプラットフォーム「Book☆Walker」が発表されました。まずは12月にiPad／iPhone向けアプリが登場するそうです。

2011年7月にグランドオープンを予定しているそうで、電子書籍を中心に関連する映像やグッズを販売するなど幅広い展開を考えているとのこと。

BookとWalkerの間の星マークが気になったのですが、角川グループホールディングスの角川歴彦取締役会長による「電子書籍は、クラウドという雲の上に輝いている星のような存在」という発言がヒントのようですね。

買った電子書籍はクラウドの書棚に収納され、複数の端末と同期して読むことができるそうです。