週刊Webテク通信

2011年3月第4週号　1位は，デザイナーのためのコミュニティサイト10選，気になるネタは，Mozilla，Firefox 4の正式版を公開

Webテク, Webデザイン, Web広告, Google Chrome, CSS, HTML 5, アニメーション, Firefox 4

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

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

1. 10 Essential Community Sites for Designers ? Angel Ceballoshttp://angelceballos.com/post/4127051710/10-essential-community-sites-for-designers

デザイナーのための各種コミュニティサイトを紹介した記事です。

海外のものばかりですが，多くのデザイナーが作品を登録しており，デザインのインスピレーションを得るのに役立つと思います。

最初に紹介されている「Dribbble」は日本でも結構有名なサイトです。iPhone，iPadで閲覧するためのアプリも複数登場しているようです。

図1　デザイナーのためのコミュニティサイト10選

図1　デザイナーのためのコミュニティサイト10選

2. Useful Google Chrome Extensions for Web Designershttp://www.hongkiat.com/blog/google-chrome-extensions-designers/

Webデザイナーに役立つ，Google Chrome拡張機能を紹介しています。

  • 色に関するもの
  • タイポグラフィ関連
  • デベロッパー向けツール
  • 生産性向上のためのもの
  • その他

に分けて，便利な拡張機能が大量に掲載されています。

デベロッパー向けツールとして紹介されているものが特に興味深いですね。定番の「Web Developer」「⁠Firebug Lite」のほかにも，試してみたい拡張機能がいろいろありました。

図2　WebデザイナーのためのGoogle Chrome拡張機能いろいろ

図2　WebデザイナーのためのGoogle Chrome拡張機能いろいろ

3. CSS Typography: Examples and Toolshttp://sixrevisions.com/css/css-typography-03/

CSSによるタイポグラフィの実例とツールをまとめた記事です。基本的に英語向けのものばかりですが，タイポグラフィ関連のツールが多数紹介されています。

「CSS Typography」と題した三部作の最後の記事です。パート1は基礎編，パート2はテクニックについての内容でした。

図3　CSSタイポグラフィの実例とツール

図3　CSSタイポグラフィの実例とツール

4. 10 Fresh & Inspirational HTML5 One-Page Portfolios | Inspired Magazinehttp://www.inspiredm.com/best-html5-portfolios/

HTML5でコーディングされた，1ページ完結ポートフォリオページのデザインギャラリーです。

HTML5を使っているだけあって，最近のトレンドを踏まえたデザインのページが多いようです。テクスチャーをうまく使っていたり，レトロなテイストが入っているものが目につきますね。

図4　HTML5を使った1ページ完結ポートフォリオページのギャラリー

図4　HTML5を使った1ページ完結ポートフォリオページのギャラリー

5. Transparency in Web Design, Inspiration Showcase - DesignModohttp://designmodo.com/transparency-in-web-design-inspiration-showcase/

透明度のあるオブジェクトをうまく使ったWebデザインのショーケースです。

透明度を使っている部分をトリミングして紹介しているので，実際のサイトで全体像も確認するといいでしょう。その際に，透明度の指定をどうやっているのか，画像やソースコードのチェックもしてみたくなりますね。

図5　透明度を使ったWebデザインのショーケース

図5　透明度を使ったWebデザインのショーケース

そのほか，先週の記事の中から，Facebook関連の記事を3つ紹介します。

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

Ceaser - CSS Easing Animation Tool - Matthew Leinhttp://matthewlein.com/ceaser/

「Ceaser」は，CSSによるアニメーションのイージングを設定するためのWebサービスです。

たとえばモノが移動するアニメーションでも，一定速度で移動するのではなく，加速したり減速したりすると表現力が増します。そういった加速・減速をコントロールするのがイージングです。

CSSの「CSS Transitions」では，イージング関数「cubic-bezier()」で加速・減速を設定することができます。この「cubic-bezier()」を簡単に設定するためのツールが「Ceaser」です。あらかじめ用意されたパターンを使うほか，ベジェ曲線をいじってイージングを設定することが可能です。

移動，変形，透明度の中から選んで，イージングの度合いをすぐに確認できるので便利です。

図6　CSSアニメーションの加速度を設定するためのツール

図6　CSSアニメーションの加速度を設定するためのツール

今週の気になるWebネタ

Mozilla，Firefox 4の正式版を公開　“6倍高速”でUIも刷新 - ITmedia エンタープライズhttp://www.itmedia.co.jp/enterprise/articles/1103/23/news019.html

Firefox 4が正式リリースされました。高速化されたことが大きなアピールポイントとなっています。

わたしが注目したのは，タブを固定化する機能です。Google Chromeを使い始めて便利だなと思ったのが，GmailやGoogle カレンダーなどのタブを固定化しておくという使い方でした。Firefoxでも同様のことができるようになったわけです。タブがコンパクトにアイコンだけになって，「⁠他のタブをすべて閉じる」でも閉じられなくなります。

この機能のメニュー名は，Chromeでは「タブを固定」ですが，Firefoxでは「タブをピン留め」となっています。「⁠ピン留め」という言葉に違和感を感じたのですが，英語版では「Pin tab」というメニュー名でした。「⁠タブ」はノートなどのインデックスとして使うタブのメタファーなので，それをピンで留めるというのは確かにイメージしやすいですね。

もしやと思い調べてみたら，Chromeの「タブを固定」も英語版では「Pin tab」でした。一度「Pin tab」という言葉になじんでしまうと，今度は「タブを固定」という表現がいまひとつな印象になってしまいました。

Webテク, Webデザイン, Web広告, Google Chrome, CSS, HTML 5, アニメーション, Firefox 4

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote