週刊Webテク通信

2012年4月第4週号1位は、視差スクロールを使ったWebサイトのショーケース、気になるネタは、新しい「iPad」ウェブデザイン

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

1. 30 great websites with parallax scrolling | Awwwardshttp://www.awwwards.com/20-great-websites-with-parallax-scrolling.html

パララックス(視差)スクロールを使ったWebサイトのショーケースです。複数のオブジェクトを異なる速度でスクロールさせることにより、奥行きを感じさせることをパララックス効果と呼びます。

最近のWebサイトでの使われ方は、単に立体感を与えるというより、複数ページを紙芝居のように重なりを感じさせながら見せていく用途が多いようです。さらにスクロールとともにアニメーションする要素を追加したりと、凝った動きが1ページ完結型で展開できるため、かなり流行しているようです。

Curtain.jsというjQueryプラグインを使うと、重なり合ったページをスクロールによって順番に表示させているような効果を実装することができます。

図1 視差スクロールを使ったWebサイトのショーケース
図1 視差スクロールを使ったWebサイトのショーケース

2. CSS3を使うにあたって知っておきたいIE対策のまとめ|Webparkhttp://weboook.blog22.fc2.com/blog-entry-315.html

CSS3で追加された機能を使う場合の、Internet Explorer対策をまとめた記事です。

以下のようなことについて、解説されています。

  • CSS3セレクタへの対応にはSelectivizr.jsを使う
  • CSS3プロパティへの対応にはCSS3 PIEかcssSandpaperがおすすめ
  • Internet Explorer独自のfilterを使って回転、シャドウ、透明度などを指定する

また、CSS3関連のチュートリアルをまとめた、Best (so far) CSS3 Tutorials, Inspirations & Resources of 2012という記事もありました。

図2 CSS3を使う場合のIE対策について
図2 CSS3を使う場合のIE対策について

3. jQuery NailThumbhttp://www.garralab.com/nailthumb.php

細かい設定ができる、サムネイル画像作成のためのjQueryプラグインです。

指定したサイズのサムネイルを作成できるのですが、そのまま全体を縮小するのかトリミングするのかなどを、柔軟に指定することが可能です。トリミングする場合、基点をどこにするのか8個所(左上、上、右上など)から選べます。

画像に重ねてキャプションなどの文字を入れられますし、ローディング画像を表示されるオプションもあります。

サムネイルは元画像が縮小表示されているだけなので、大きな画像を大量に使うと重たいページになってしまう点は注意が必要だと思います。

図3 サムネイル画像を作成できるjQueryプラグイン
図3 サムネイル画像を作成できるjQueryプラグイン

4. 20 Examples of Responsive Web Design | Urban Riverhttp://www.urbanriver.com/20-examples-of-responsive-web-design.html

レスポンシブWebデザインのギャラリーです。オバマ大統領のサイトもSony USAもレスポンシブWebデザインなんですね。

サムネイル画像が大きいのはいいのですが、小さい画面サイズの場合のサムネイルも載せてほしいと思いました。

図4 レスポンシブWebデザインのギャラリー
図4 レスポンシブWebデザインのギャラリー

5. Creative ‘About’ Pages in Web Designhttp://skyje.com/creative-about-pages/

Aboutページのデザインギャラリーです。クリエイティブな、About me、About usページが取り上げられています。

ところで、この「About」というメニュー名って、うまく日本語に置き換えられないのでいつも悩みます。

「このサイトについて」⁠○○(企業名)について」⁠運営企業について」みたいな言葉を使うことが多いと思うのですが、⁠About」に比べて長くなってしまいます。⁠アバウト」としても意味がよく分からないですし、そこだけ英語で「About」でほかのメニューは日本語だとおかしいですし、悩ましいですね。

図5 Aboutページのデザインギャラリー
図5 Aboutページのデザインギャラリー

そのほか、先週の記事の中から、Webサービスをまとめた記事を2つ紹介します。

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

Free Tools to Search and Identify A Fonthttp://www.graphicmania.net/free-tools-to-search-and-identify-a-font/

今回は、フォントを探すことのできるWebサービスをまとめた記事を紹介します。

WhatTheFontとWhat FontIsは、画像から似たフォントを探してくれるサービスです。

印刷物やポスターなどに使われているフォント(と似たフォント)を見つけることができます。

WhatTheFontには、iPhoneアプリ版もあるので、カメラで撮影してすぐに検索できて便利ですね。

IdentiFontやbowfinprintworksは、複数の問いに答えていくことで、自分のイメージするフォントを探すサービスです。

図6 フォントを探すためのWebサービスいろいろ
図6 フォントを探すためのWebサービスいろいろ

おすすめ記事

記事・ニュース一覧