週刊Webテク通信

2011年12月第3週号1位は、2012年のWebデザインのトレンド、気になるネタは、Google+ハングアウトのOn Air機能が一般公開へ

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

1. Web Design Trends in 2012 | Tipshttp://webdesignledger.com/tips/web-design-trends-in-2012

2012年のWebデザインのトレンドについて予測した記事です。

  1. レスポンシブWebデザイン
  2. 固定位置のナビゲーション
  3. 円形の要素
  4. 大きなベクターアート(ベクターツールで描かれたイラストなど)
  5. マルチカラムのメニュー
  6. jQuery/CSS3/HTML5
  7. リボンやバナー(垂れ幕⁠⁠、ブックマーク(しおり)のようなグラフィック要素
  8. Webフォントを使ったフォントのカスタマイズ
  9. インフォグラフィックス
  10. 簡素化

といった10の項目について解説してあります。

メニューに関する項目が2つあります。⁠固定位置のナビゲーション」は最近増えているように感じていましたが、⁠マルチカラムのメニュー」はあまり意識したことがありませんでした。どちらにせよ、従来通りのサイドメニューはあまり使われなくなっていくのかもしれませんね。

The Future of Web DesignというWebデザインの未来に関する記事もありました。こちらもレスポンシブWebデザインを中心に解説されていますが、RESS(Responsive Web Design with Server Side Components⁠⁠、COPE(Create Once and Publish Everywhere)といった興味深いキーワードも登場しています。

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

2. Inspiration and Resources for Responsive Web Design | Artfans Designhttp://www.artfans.info/inspiration-and-resources-for-responsive-web-design/

レスポンシブWebデザインに関する参考情報をまとめた記事です。多数の優れた実例紹介と、CSSフレームワークや便利なスクリプト類、学ぶために役立つテクニック記事などへのリンクが紹介されています。

Responsive Web Design Templates and Frameworks - DesignModoというレスポンシブWebデザインのテンプレートとフレームワークをまとめた記事もご一緒に。

図2 レスポンシブWebデザインのまとめ
図2 レスポンシブWebデザインのまとめ

3. 24 Professional Examples of Web and Mobile Wireframe Sketches - DesignModohttp://designmodo.com/web-mobile-wireframe-sketches/

ネットで公開されているワイヤーフレームのスケッチをまとめて紹介した記事です。手描きのワイヤーフレームを見るのって楽しいですよね。グラフィックツールを使って描かれたものもあります。

モバイルアプリ用のワイヤーフレームも紹介されているところが、従来のこの手のまとめとは違うところですね。

図3 ワイヤーフレームのスケッチいろいろ
図3 ワイヤーフレームのスケッチいろいろ

4. Webサイト制作の終わりと始まり : couldhttp://www.yasuhisa.com/could/article/shift5-the-end-of-websites/

「我々が知る世界の終わり(けど大丈夫⁠⁠」という講演のスライドを公開しています。

TumblrやPosterousのような簡単にコンテンツを配信できるツールや、TwitterやFacebookのような人が集まりコンテンツが広まりやすい場所がある今、Webサイトを力を入れて作ることが本当に必要かと感じている人は少なくないと思います。その辺の前提に立ち、でも「Webに関わる仕事の道は広がる」と言っているこの記事には勇気をもらえますね。

図4 ⁠我々が知る世界の終わり(けど大丈夫⁠⁠」講演スライドと解説
図4 「我々が知る世界の終わり(けど大丈夫)」講演スライドと解説

5. 2011 in review: 20 CSS sites that rocked! | Feature | .net magazinehttp://www.netmagazine.com/features/2011-review-20-css-sites-rocked

CSSのテクニックをうまく使っているサイトの2011年年間ベスト20を選んだ記事です。見た目が洗練されており、動きやギミックにセンスが感じられるサイトばかりです。

動きに面白さのあるサイトが多いので、それぞれのサイトを実際に訪れて操作してみてください。

図5 2011年のCSSサイトベスト20
図5 2011年のCSSサイトベスト20

そのほか、先週の記事の中から、いろいろなギャラリーの記事を紹介します。

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

Facebookタイムラインhttps://www.facebook.com/about/timeline

9月に発表されていたものの、なかなかスタートしなかったFacebookのタイムラインが、誰でも使えるようになりました。タイムラインを適用すると、個人プロフィールページが自分の年表のようなページとなります。

縦軸が時間軸となり、スクロールすると過去にさかのぼっていくように、自分の投稿やアクティビティが配置されます。Facebookが自動で「いいね!」やコメントの多い投稿を表示するのですが、表示したくない内容は消すなどカスタマイズすることも可能です。

タイムライン上では過去の出来事を投稿できるようになっており、⁠ライフイベント」という項目からは、就職・転職、入学・転校、結婚、出産、引っ越しなどを記録できるようになっています。

カバー画像として大きな画像を表示できるなど、セルフブランディングにも効果ありそうなタイムライン。Facebookページでも利用できるようにしてほしいと個人的には思っています。

図6 タイムラインの紹介ページ
図6 タイムラインの紹介ページ

おすすめ記事

記事・ニュース一覧