週刊Webテク通信

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

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

1. Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazinehttp://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

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

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

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

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

図1 レスポンシブWebデザインのテクニックやツールなど
図1 レスポンシブWebデザインのテクニックやツールなど

2. 36 Best Menu Designs Template | The Design Workhttp://www.thedesignwork.com/36-best-menu-designs-template/

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

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

図2 メニューデザインのテンプレートいろいろ
図2 メニューデザインのテンプレートいろいろ

3. 25 Powerful Examples of Masonry jQuery Web Designhttp://smashinghub.com/25-powerful-examples-of-masonry-jquery-web-design.htm

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

図3 レンガ状にカラムを並べたレイアウトの実例集
図3 レンガ状にカラムを並べたレイアウトの実例集

4. Nice Collection of Footer Designs That Will Make You Say WOW | Modny73http://www.modny73.com/inspiration/nice-collection-of-footer-designs-that-will-make-you-say-wow/

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

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

図4 フッタデザインのギャラリー
図4 フッタデザインのギャラリー

5. 35 Facebook Fan Page Custom Designs | Flash Userhttp://www.flashuser.net/inspiration/35-facebook-fan-page-custom-designs.html

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

図5 Facebookページのデザインギャラリー
図5 Facebookページのデザインギャラリー

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

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

Brief.lyhttp://brief.ly/

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

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

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

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

図6 複数URLをまとめて共有できるサービス
図6 複数URLをまとめて共有できるサービス

おすすめ記事

記事・ニュース一覧