週刊Webテク通信

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

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

ネットで見かけた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をまとめて共有できるサービス

今週の気になるWebネタ

Lionの特に目立った変更点 | Macの手書き説明書http://veadardiary.blog29.fc2.com/blog-entry-3368.html

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

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入