週刊Webテク通信

2011年3月第4週号 1位は,デザイナーのためのコミュニティサイト10選,気になるネタは,Mozilla,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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入