週刊Webテク通信

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

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

ネットで見かけた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ページをハイライトさせシェアするサービス

今週の気になるWebネタ

ワコム,ペンタブレット新製品「Intuos5」 指でマルチタッチ可能に - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1203/01/news049.html

ワコムからIntuosシリーズの最新作「Intuos5」が発表されました。一番の特徴は,指を使ったマルチタッチで操作が行えるようになったことです。タブレット上でペンを使って描画などをしつつ,指を使って拡大や回転などの操作ができるということですね。名前に「Intuos5 touch」と入っているものがタッチ対応のモデルです。

一部モデルはワイヤレス化されており,ほかのモデルもオプションの「ワイヤレスキット」でワイヤレス化できるとのことです。ほかに,ファンクションキーの設定内容をパソコンの画面に表示する機能なども搭載されています。

Windows 7はタッチでの操作を考えられたOSのようなので,Windows 7との組み合わせで使うと便利そうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入