週刊Webテク通信

2012年4月第3週号 1位は,レスポンシブWebデザインのチュートリアル記事のまとめ,気になるネタは,Facebook,Instagramを買収 10億ドルで

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

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

1. 15 Detailed Responsive Web Design Tutorials | Design Woop | The Web Design and Development Bloghttp://designwoop.com/2012/03/15-detailed-responsive-web-design-tutorials/

レスポンシブWebデザインのチュートリアル記事を多数紹介しています。

レスポンシブWebデザインを提唱したEthan Marcotteによると,

  • 流動的なグリッド(fluid grid)
  • 流動的な画像(fluid images)
  • CSS3のメディアクエリ(media queries)

の3つの要素がポイントとのことで,これらを学ぶのに役立つ記事がまとめられています。

レスポンシブWebデザインのデザインギャラリーとして,以下のまとめも参考になると思います。

図1 レスポンシブWebデザインのチュートリアル記事のまとめ

図1 レスポンシブWebデザインのチュートリアル記事のまとめ

2. 38 Useful and Effective jQuery Plugins for Responsive Web Design | Design Inspirationhttp://designbeep.com/2012/03/28/38-useful-and-effective-jquery-plugins-for-responsive-web-design/

レスポンシブWebデザインのためのjQueryプラグインを各種紹介した記事です。

レスポンシブなサイトの場合,流動的な横幅に合わせて画像や動画のサイズを可変させる必要があります。CSSだけで指定できるケースも多いのですが,JavaScriptライブラリをうまく使うと効率的に作業が進められると思います。

この記事では,横幅が可変する画像スライダー,横幅に合わせてサイズが可変するビデオ,横幅によって変化するメニューなどを実現するためのjQueryプラグインが掲載されています。

Pinterestのように,横幅に合わせてブロックをレンガ状に配置する,定番プラグインのjQuery Masonryも紹介されていますね。

図2 レスポンシブWebデザインのためのjQueryプラグイン

図2 レスポンシブWebデザインのためのjQueryプラグイン

3. Top 25 Google Chrome Extension for Bloggershttp://smashinghub.com/top-25-google-chrome-extension-for-bloggers.htm

ブロガーに役立つChrome拡張機能を多数紹介しています。

ソーシャルメディアでシェアするためのものや,エディタ,スクリーンショット撮影,各種ストックフォトサービスをまとめて検索するものなど,多彩な拡張機能が紹介されています。

Twitterなどのテキスト入力ボックスに,ドラッグ&ドロップで画像を追加できる「drag2up」という拡張機能が便利そうです。画像自体のアップロード先は,Flickr,Picasa,TwitrPixなどに設定できるようです。

図3 ブロガーに役立つChrome拡張機能

図3 ブロガーに役立つChrome拡張機能

4. Land-of-web ? All about web design ≫ 30 Warm Yellow Website Designshttp://www.land-of-web.com/inspiration/web-design/30-warm-yellow-website-designs.html

黄色ベースのWebデザインのギャラリーです。

黄色はポジティブで活気のある,幸せや良いことを連想させる色ですが,すべてを破壊してしまう色でもあるので気をつけるべきとのことです。

図4 黄色ベースのWebデザインのギャラリー

図4 黄色ベースのWebデザインのギャラリー

5. 8 Useful iPad Apps for Designershttp://www.graphicmania.net/8-useful-ipad-apps-for-designers/

デザイナーのためのiPadアプリと題して画像編集アプリなどを紹介しています。

新しいiPadのRetinaディスプレイにより,画像編集やお絵かき系のアプリがますます流行るような予感がしますね。

図5 デザイナーのためのiPadアプリ

図5 デザイナーのためのiPadアプリ

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

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

Pinvolve - Pinterest for Pageshttp://apps.facebook.com/pinvolve/

Pinvolveは,Facebookページの画像をPinterest風に表示するFacebookアプリです。

Facebookページにカスタムタブが1つ追加され,独自ページとしてPinterestのようなレイアウトが開きます。

画像だけでなく,コメントもPinterestのように表示されたりと,なかなか凝っています。

画像にロールオーバーすると,⁠Pin it」ボタンが出るので,PinterestへのPinも簡単にできるようになりますね。

Facebookページもタイムライン表示になって,独自タブへのリンクが分かりにくくなりましたが,直接リンクすることはできます。Pinvolveによるページをギャラリーページにして,そのURLを広めるというのもいいかもしれません。

有料版にアップグレードすると,Pinterestの自分のボードを埋め込むこともできるようです。

Pinterestの見た目を真似ただけのものではなく,FacebookとPinterestをいかに連携させていくかといったことを狙ったサービスのようです。

図6 Facebookページの画像をPinterest風に表示するFacebookアプリ

図6 Facebookページの画像をPinterest風に表示するFacebookアプリ

今週の気になるWebネタ

Facebook,Instagramを買収 10億ドルで - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1204/10/news019.html

FacebookのInstagram買収のニュースは,10億ドルというその買収額が話題となりました。Instagramは従業員数がわずか13人の会社ということで,ひとり1億ドルくらいの価値ということですね。

わたしはテレビでこのニュースを知ったのですが,テレビや新聞でも大きく取り上げられていました。しかし,やはり一般の人向けのニュースだけあって,Instagramの紹介のされ方には違和感を感じました。わたしが見たニュースでは,Instagramは画像編集ソフトを開発している会社という扱いでした。それだけ聞くと,Photoshopのようなソフトを開発している会社かと思われそうですよね。

Instagramはサービスとしてそのまま残るそうで,TwitterによるPosterous買収のときのような,サービス存続を不安視する声もないようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入