週刊Webテク通信

2012年3月第1週号1位は、メニューが同じ位置に固定されているWebデザインのギャラリー、気になるネタは、ワコム、ペンタブレット新製品「Intuos5」指でマルチタッチ可能に

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

1. 21 Examples of Fixed Position Menus in Web Design | Inspirationhttp://webdesignledger.com/inspiration/21-examples-of-fixed-position-menus-in-web-design

スクロールしてもメニューが同じ位置に固定されているWebデザインのギャラリーです。FacebookやGoogle+もそうですが、ヘッドメニュー部分が上部に固定されるサイトは最近よく見かけるようになってきました。

これまた最近流行りの、視差スクロールと組み合わせたパターンのものもあります。

図1 位置が固定されたメニューを使ったWebデザインいろいろ
図1 位置が固定されたメニューを使ったWebデザインいろいろ

2. Chico UI, MercadoLibre's Open Source Web Tools.http://chico-ui.com.ar/

フリーのUIコンポーネント集を提供しています。使い方の説明も丁寧で、カスタマイズもやりやすそうです。

「Chico Mesh」としてレイアウトとグリッドを提供し、⁠UI Widgets」としてHTML5&CSS3&jQueryで作られたUIコンポーネントを多数提供しています。

メニュー、タブといったおなじみのものはもちろん、この手のライブラリではあまり見かけない、オートコンプリート、カレンダー、フォームの値チェック、ズーム機能なども用意されています。

図2 フリーのUIコンポーネント集
図2 フリーのUIコンポーネント集

3. Land-of-web ? All about web design ≫ Getting started with Responsive Web Design 100 articles and tutorialshttp://www.land-of-web.com/articles/getting-started-with-responsive-web-design-100-articles-and-tutorials.html

レスポンシブWebデザインに関するノウハウ記事やチュートリアルなどを100個集めたリンク集です。

79個の記事と18個のチュートリアル、その他の情報が5個掲載されています。あれ、100個じゃなくて102個ですね。

図3 レスポンシブWebデザインの関連記事とチュートリアルを大量に紹介
図3 レスポンシブWebデザインの関連記事とチュートリアルを大量に紹介

4. 46+ Outstanding Footer Designs for Inspiration - Bloom Design Blog | Bloom Design Bloghttp://bloomwebdesign.net/myblog/2012/02/28/46-outstanding-footer-designs-for-inspiration/

斬新なフッターデザインのギャラリーです。フッターに入れる機能としても参考になりそうです。

イラストを使った作り込まれたフッターが多いですね。

図4 斬新なフッターデザインのギャラリー
図4 斬新なフッターデザインのギャラリー

5. 80+ Professional Free PSD Files from Dribbble Community | Freebies | instantShifthttp://www.instantshift.com/2012/02/27/80-awesome-freebies-from-dribbble-community/

クオリティの高いUIデザインなどのフリー素材を、デザイナーのコミュニティ「Dribbble」から集めた記事です。

UIデザインはCSS3だけで実現することも最近は多いと思いますが、CSSでデザインする場合にも参考になりそうですし、手間がかけられた美しいデザインは見ていて気持ちがいいですね。

図5 フリーのUIデザインなどのPSDファイルいろいろ
図5 フリーのUIデザインなどのPSDファイルいろいろ

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

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

inFocus.cc | highlight and share your focus on the webhttp://infocus.cc/

「inFocus.cc」は、Webページの特定の部分をハイライトさせ、人に見てもらうことができるサービスです。

ページのURLを入力し「Get Focus!」を押すとページが表示されます。赤い四角形を移動させ、ハイライトさせたいところに位置や大きさを合わせます。URLが生成されているので、そのURLを人に教えれば誰でもアクセスできます。

ページは「inFocus.cc」のフレームの中で表示されます。一部がハイライトされているページもリンクなどは普通に操作できますが、リンク先もフレームの中で展開することとなります。

Webページに何か追加してシェアするこの手のサービスは一時期流行りましたが、定番として利用されているサービスはあまりかもしれません。

図6 Webページをハイライトさせシェアするサービス
図6 Webページをハイライトさせシェアするサービス

おすすめ記事

記事・ニュース一覧