週刊Webテク通信

2012年1月第2週号1位は、jQueryプラグイン&チュートリアルの2011年度トップ50、気になるネタは、2011年のテクノロジー界、11大ニュース

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

1. Top 50 JavaScript,jQuery Plugins and Tutorials From 2011http://smashinghub.com/top-50-jquery-plugins-and-tutorials-from-2011.htm

jQueryプラグインやチュートリアルの2011年度トップ50を紹介した記事です。

  • jQueryプラグインとチュートリアル
  • JavaScriptとアニメーションGIFによるローディングアニメーション
  • モバイルデバイス向けJavaScript
  • 大胆な変化をもたらすもの
  • JavaScriptによる実験的なもの
  • カラーピッカー
  • ゲーム

といったジャンルに分けて紹介しています。

20+ Popular and Free jQuery Content and Image Sliders from 2011 | Design Inspirationという、2011年のjQueryによるスライダーをまとめた記事もありました。

図1 jQueryプラグインとチュートリアルの2011年トップ50
図1 jQueryプラグインとチュートリアルの2011年トップ50

2. 10 online tools to simplify HTML5 coding | Web Builder Zonehttp://css.dzone.com/articles/10-online-tools-simplify-html5

HTML5のコーディングを行う際の手助けとなるツールを10個紹介しています。

新たにHTML5のサイトを作る際に便利なテンプレートを生成するツールや、チートシート、デモとコード例がまとめられたサイトなどが紹介されています。

図2 HTML5コーディングを手助けするオンラインツール10選
図2 HTML5コーディングを手助けするオンラインツール10選

3. Showcase Of Call To Action Buttons In Web Designhttp://designresourcebox.com/showcase-of-call-to-action-buttons-in-web-design/

Webサイト上で行動をうながすボタンのデザインショーケースです。

シンプルで大きなボタンが最近のトレンドですね。緑のボタンが多いのも相変わらずです。

図3 ボタンデザインのショーケース
図3 ボタンデザインのショーケース

4. 20 Inspiring Examples of Colorful Web Designs | Inspirationhttp://webdesignledger.com/inspiration/20-inspiring-examples-of-colorful-web-designs

カラフルなWebデザインの実例を20サイト紹介した記事です。カラフルといっても派手なものではなく、明度や彩度を押さえた色使いのサイトが多いようですね。

図4 カラフルなWebデザインのショーケース
図4 カラフルなWebデザインのショーケース

5. Funny Yet Creative Facebook Timeline Design : Little Box of Designhttp://littleboxofdesign.com/?p=2028

クリエイティブで面白いFacebookタイムラインのデザインショーケースです。前回も同じような記事を取り上げましたし、両方に掲載されているページもあります。今後は日本人の作品も増えていくことでしょう。

図5 面白いFacebookタイムラインのショーケース
図5 面白いFacebookタイムラインのショーケース

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

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

Croplyhttp://croply.com/

Croplyは画像を切り抜くためのWebサービスです。Photoshopの切り抜きツールと同じようなことが、オンラインで簡単にできるようになっています。

アップロードした画像を、ピクセル数で指定したサイズで切り抜くことが可能です。快適に操作でき、リアルタイムでプレビューが表示されるのも便利です。切り抜いた画像はJPEGかPNGとして保存できます。

「http://croply.com/300x300」のように、URLの末尾に縦横のピクセル数を指定できるようになっています。いつも同じサイズで切り抜く必要がある場合、サイズを含んだURLをブックマークしておくと便利なのでしょう。

CMSやブログシステムをクライアントに使ってもらう場合の、画像のサイズ調整ツールとして使ってもらうのに適していると思いました。

図6 画像を切り抜くためのWebサービス
図6 画像を切り抜くためのWebサービス

おすすめ記事

記事・ニュース一覧