2011年7月第4週号　1位は、レスポンシブWebデザインのテクニックやツールなど、気になるネタは、Mac OS X Lionの特に目立った変更点

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

デバイスやウィンドウサイズなどによって複数のCSSを切り替えるレイアウトパターンをレスポンシブ（Responsive）レイアウトと呼びます。この、レスポンシブレイアウトのテクニックやツール、デザイン戦略についてまとめた記事です。

ウィンドウサイズに合わせて、相対的に画像や動画をリサイズするテクニックなどの記事へのリンクが掲載されています。

CSS3のメディアクエリを使うと、ウィンドウサイズによって別のCSSを適用することができるのですが、非対応の古いブラウザでも同様のことを行うJavaScriptや、メディアクエリのバグを直す方法なども紹介されています。

複数ウィンドウサイズでWebページをプレビューできる確認用サービスも便利そうです。

メニューデザインのテンプレートとして使えるPhotoshopファイルが多数紹介されています。

一部の素材には、Photoshopファイルだけでなく、CSSやJavaScriptファイルも用意されていました。

jQuery MasonryというjQueryプラグインを使うと、新聞や雑誌のようにカラムを隙間なく並べたレイアウトを自動で作ることができます。この機能を使った実例を、多数紹介したショーケースです。

フッタデザインのギャラリーです。

フッタに多くの情報を入れるサイトが増えていますが、情報は押さえつつも遊び心のあるフッターを見るとうれしくなりますね。

Facebookページのデザインギャラリーです。どんなFacebookアプリケーションを使っているかも参考になりそうです。

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

Twitterブログ: ＃日本語ハッシュタグ
Twitterでハッシュタグに日本語が使えるようになりました。「⁠#」は全角でもいいそうです。
Google to Businesses: Don't Create Google+ Profiles Yet
Google+にビジネス用のアカウントはまだ作らないでとのこと。準備はしているようです。
hon.jp DayWatch - Apple社、Mac向け最新OS「Mac OS X Lion」にEPUB電子書籍作成スクリプトを標準搭載
Mac OS X Lionには「Text to EPUB file」というAutomator用スクリプトが用意されているそうです。

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

Brief.lyは、複数のURLをまとめて人に知らせることができるサービスです。

URLとキャプションを1行に1ページずつ記述して、ハサミマークのボタンを押すと、短縮URLが生成されます。この短縮URLから、複数ページをタブで切り替えられるBrief.ly上のページにアクセスできます。

ちょっと分かりにくいですが、最初に表示される目次ページのウィンドウアイコンをクリックすると、複数ページをブラウザのタブで開くことも可能です。

同じようなサービスで「Bridges | BridgeURL」というサービスもあります。こちらは複数ページをページめくりのように順番に見ていくインターフェイスになっています。

Mac OS X Lionがついにリリースされました。ソーシャルメディアなどを見ていると、さっそくインストールしている人も多いようです。

わたしはLionのリリース日に引っ越しをしたこともあり、まだ手をだしていません。なので、実際に使ってみての感想は書けないのですが、やっとでいろいろ情報収集しているところです。

iOSのいいところをMac OSにも採用しようということから、トラックパッドを使うことが前提となっている機能が多いようですね。そのうちiMacに標準で付くのがMagic MouseではなくMagic Trackpadになったりするんでしょうか。

いくらiOSと操作感が近くなっても、画面を直接触るiPhone／iPadとトラックパッドでは、操作感が違うはずです。近くなった分、ちょっとの違いがより気になるんじゃないかとも思ってしまいます。意外とすんなり使い分けられるのかもしれませんが。