週刊Webテク通信

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

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

1. Transparent CSS Sprites - Smashing Magazinehttp://www.smashingmagazine.com/2010/10/31/transparent-css-sprites/

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

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

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

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

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

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

図1 透過画像を使ったCSSスプライト
図1 透過画像を使ったCSSスプライト

2. [CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集 | コリスhttp://coliss.com/articles/build-websites/operation/css/css3-tutorial-7-super-easy-css-recipes.html

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

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

図2 CSS3を使ったテキスト装飾いろいろ
図2 CSS3を使ったテキスト装飾いろいろ

3. 30 Fresh Web UI, Mobile UI and Wireframe Kits | Speckyboy Design Magazinehttp://speckyboy.com/2010/10/27/30-fresh-web-ui-mobile-ui-and-wireframe-kits/

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

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

図3 Web用のUI素材とワイヤーフレーム用素材
図3 Web用のUI素材とワイヤーフレーム用素材

4. Ultimate Collection of Photoshop Brushes, Actions and Styles - Noupe Design Bloghttp://www.noupe.com/freebie/ultimate-collection-of-photoshop-brushes-actions-and-styles.html

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

図4 Photoshopのブラシ、アクション、スタイル
図4 Photoshopのブラシ、アクション、スタイル

5. Website Design: Personal Portfolios and Design Studios | designrfix.comhttp://designrfix.com/inspiration/website-design-personal-portfolios-design-studios

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

図5 ポートフォリオサイトとデザインスタジオのサイトのギャラリー
図5 ポートフォリオサイトとデザインスタジオのサイトのギャラリー

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

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

simplebooklet.comhttp://simplebooklet.com/

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

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

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

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

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

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

図6 電子小冊子を作るためのWebサービスSimplebooklet
図6 電子小冊子を作るためのWebサービスSimplebooklet
図7 Simplebookletで素材を追加する画面
図7 Simplebookletで素材を追加する画面

おすすめ記事

記事・ニュース一覧