週刊Webテク通信

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

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

ネットで見かけた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サービスいろいろ

今週の気になるWebネタ

新しい「iPad」とウェブデザイン--「Retina Display」がウェブサイトにもたらす影響 - CNET Japanhttp://japan.cnet.com/news/commentary/35016345/

新しいiPadがWebデザインに与える影響についてまとめた記事が興味深いです。特に印象に残ったのが「テキストをテキストに変える(Turn text into text)⁠という項目。Retinaディスプレイによりテキストは高精細に見える一方,文字を画像にしたものは粗く見えてしまうので,テキストとして使った方がいいということです。

別途Retina対応の高解像度の画像を用意し,JavaScriptなどで切り替える方法もありますが,文字部分はテキストとして扱う方がいいですよね。メンテナンス性やSEO対策,レスポンシブ対応などを考えても,文字をテキストとして扱うメリットが大きいので,それが主流となることは間違いないでしょう。

日本語Webフォントサービスがようやくスタートラインに立った段階なので,英語圏と日本では状況が違うかもしれませんが,やはり文字を画像にするのは極力やめたほうがよさそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入