週刊Webテク通信

2011年12月第1週号1位は、2011年のWebデザインのトレンド、気になるネタは、タッチパネルにペタッ:タイピング操作を快適にする「iPad用キーボードパッド」

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

1. Popular Web Design Trends 2011http://www.entheosweb.com/inspiration/web_design_trends_2011/

2011年のWebデザインのトレンドをまとめた記事です。

  1. 手描き
  2. 巨大なデザイン要素 -巨大なフォント/ヘッダー/フッター
  3. パララックス(視差効果)スクロール
  4. モバイル対応
  5. CSS3、HTML5、jQueryの使用
  6. ソーシャルメディアの統合
  7. ミニマリズム
  8. 雑誌形式のデザイン

といった項目が挙がっています。

HTML5やCSS3などの技術の進歩と、スマートフォンやタブレットの台頭によるデバイスの変化との影響を受けて、Webデザインが変わってきていることが感じられる1年でした。

Current Web Design Trends 2011-2012 ≪ WEB DESIGN BLOGというWebデザインのトレンドの記事もありましたが、結構内容は共通しています。

図1 2011年のWebデザインのトレンド
図1 2011年のWebデザインのトレンド

2. 35 Beautiful Examples of Sliders in Web Design - DesignModohttp://designmodo.com/examples-sliders-web-design/

Webページに使われている、すばらしいスライダーのギャラリーです。

単純にスライド表示されるものだけでなく、複数の画像がヨコから現れて揺れるBuro Maisengasseのような面白い動きのものもありました。

図2 スライダーを各種紹介
図2 スライダーを各種紹介

3. 15+ Free Photography website templateshttp://www.ispsd.com/11/free-photography-website-templates/

写真ギャラリーサイト向けのテンプレートを多数紹介しています。

WordPressのテーマが中心で、ほとんどのテンプレートが実際の動作のデモを見ることができるようになていました。

図3 写真ギャラリーサイトのテンプレートいろいろ
図3 写真ギャラリーサイトのテンプレートいろいろ

4. 30+ Valuable Chrome Extension For Web Designers & Developers | Lava360http://www.lava360.com/freebies/30-valuable-chrome-extension-for-web-designers-and-developers/

Webデザイナーと開発者のための、便利なChrome拡張機能をまとめた記事です。

グリッドを表示するもの、アップロードしたアタリの画像を半透明で重ねて表示するもの、表示をグレースケールに変換するものなど、Webデザインに役立ちそうなものが多数紹介されています。

図4 便利なChrome拡張機能を大量に紹介
図4 便利なChrome拡張機能を大量に紹介

5. 15 Inspiring Examples of Icon Usage In Web Design | CgBaranhttp://cgbaran.com/2011/11/15-inspiring-examples-of-icon-usage-in-web-design/

アイコンが効果的に使われているWebデザインのギャラリーです。

手描き風のものなど、個性的なアイコンが印象的なサイトばかりですね。

図5 アイコンが使われているWebデザインのギャラリー
図5 アイコンが使われているWebデザインのギャラリー

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

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

10 Resources for Getting Web Design Feedbackhttp://smashinghub.com/web-design-feedback.htm

今回は、デザインのフィードバックを受けることのできるWebサービスを10個取り上げている記事を紹介します。

Webページの制作者とクライアントとが、変更個所や修正個所をやりとりするためのサービスや、デザイナーが自分の作品にコメントをもらえるコミュニティサイトなどが掲載されています。

サービスによっては、アップロードした画像の特定の個所を囲んで注釈を記入したり、手描きでメモを書く機能が用意されています。

どれも基本的には有料で、日本語化されていないサービスばかりなのですが、使いこなせれば便利そうです。

Webデザインの校正に便利な「Notable」の実際の利用例として、ちょっと古い記事ですが、Case-Study: Deconstructing Popular Websites (Opinion Column) - Smashing Magazineが参考になると思います。各画像の下のリンクから、Notable上のページへとリンクしています。

図6 デザインのフィードバックを受けることのできるWebサービス
図6 デザインのフィードバックを受けることのできるWebサービス

おすすめ記事

記事・ニュース一覧