週刊Webテク通信

2009年12月第3週号 1位は,CSS3を使うことで,より素晴らしく,より短時間にデザインされた実践的テクニック,気になるネタは,バイドゥ,日本語入力システム「BaiduType」公開

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

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

1. Stronger, Better, Faster Design with CSS3 - Smashing Magazine
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/

CSS3を使うことで,より素晴らしく,より短時間にデザインされた実践的テクニックの紹介記事です。

次の3つのテクニックが紹介されています。

  1. フォームのラベルをフィールド内に薄く表示
  2. ドロップインして表示されるモーダルウィンドウ
  3. 段組と画像のマスクを使った新聞風レイアウト

1,2ではJavaScriptも使われていますが,jQueryなどのライブラリを使えば十数行くらいで書ける単純なものです。JavaScriptは最小限に使い,フェードインやドロップインのような見た目の効果はCSSを使うというのがCSS3時代の主流の考え方になっていくのでしょう。

フェードインやドロップインには,-webkit-transformや-webkit-transitionといったプロパティを使うので,現状ではSafari,Chromeしか対応していないのが残念です。

図1 CSS3の実践的テクニックを3つ紹介

図1 CSS3の実践的テクニックを3つ紹介

2. 24 Clever Website Designs That Combine jQuery and Illustration | Webdesigner Depothttp://www.webdesignerdepot.com/2009/12/24-clever-website-designs-that-combine-jquery-and-illustration/

jQueryとイラストが使われた,リッチで動きのあるWebサイトを多数紹介しています。

なぜ「jQuery&イラスト」というくくりなんだろうと思ったのですが,ひと昔前ならFlashで作られていたようなサイトを集めたということからのようです。

コンテンツがスライドしたり,小窓が開いたり,ページ遷移なしに表示がダイナミックに変わったりといった,まさに昔ならFlashの独壇場だったようなコンテンツばかりです。

図2 jQueryとイラストが使われたすばらしいサイト集

図2 jQueryとイラストが使われたすばらしいサイト集

3. Webデザインにおける"Wow"ファクター | CREAMUhttp://blog.creamu.com/mt/2009/12/webwow.html

おっ!と驚くような要素のあるWebサイトから,仕掛けの部分を紹介した記事です。

サムネイルにカーソルをあわせるとタイトルがスライドして現れるといったような,見せ方の工夫の事例が解説されています。

Webサイトを覚えてもらうための差別化ポイントとしては,内容とデザインのほかに"Wow"と声に出してしまうような要素があるとのことで,この要素のことを"Wow"ファクターと呼んでいるようです。

細部にこだわる姿勢と遊び心が合わさったところから生まれるのが"Wow"ファクターなのかなと感じました。

図3 Webデザインにおける"Wow"ファクターの紹介記事

図3 Webデザインにおける

4. Light Fonts Use in Web Design: Examples and Resourceshttp://desizntech.info/2009/12/light-fonts-use-in-web-design-examples-and-resources/

線の細いフォント(Light Font)を使ったWebデザインについての記事です。

細いフォントがタイトル,ナビゲーション,ボタンなどに使われたWebサイトの事例が紹介されています。おすすめの細いフォントのリストも掲載されています。

図4 Light Fontを使ったWebデザインについて

図4 Light Fontを使ったWebデザインについて

5. 今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI ? 世界のアイデアを日替わりでhttp://www.100shiki.com/archives/2009/12/efef.html

「Easy Front-End Framework」というCSS/HTML/JavaScriptフレームワークの紹介記事です。

CSSで見出しや表組み,フォームなどがスタイリッシュにデザインされているのに加え,JavaScriptによるツールチップやポップアップなどが簡単に使えるように用意されています。

本文エリアを二段,三段,四段と簡単に段組できるようになっているところもいいですね。

ざっくりとモックアップをHTMLで作るとき用のベースとなるテンプレートを自分で用意している人も多いと思いますが,そういったテンプレートの土台として使えそうです。

図5 イマ風Webページ用テンプレートの紹介記事

図5 イマ風Webページ用テンプレートの紹介記事

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

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

Browser Sizehttp://browsersize.googlelabs.com/

Googleの実験的なプロジェクトを公開しているGoogle Labsで,Webデザイナーのための「Browser Size」というサービスが公開されました。

画面解像度やブラウザサイズの違いにより,Webページの見える範囲はユーザーによって違うということは,Webデザイナーなら誰もが意識していることでしょう。じゃあ,ページ上のどこまでだったらどのくらいのユーザーが見られるのかを視覚的に確認しましょうというのが,このBrowser Sizeです。

やっていることは単純で,ここまでが何パーセントという区切りの線を入れた画像を,Webページの上に重ねて表示しているだけです。

このパーセンテージは,google.comにアクセスしたユーザーのブラウザサイズから計算しているようです。なので,日本での状況とは違っていると思われますが,十分参考にはなるでしょう。

そういったデータを持っているところがGoogleの強みなんでしょうね。今後もアップデートされていくことを期待したいです。

図6 Google Labsに登場したBrowser Size

図6 Google Labsに登場したBrowser Size

今週の気になるWebネタ

バイドゥ,日本語入力システム「BaiduType」公開 「ケータイ世代に使いやすく」 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0912/16/news081.html

中国発の検索サイト「Baidu.jp」を運営するバイドゥ(百度)から,独自の日本語入力システム「BaiduType」のベータ版が公開されました。

「Google 日本語入力」と思いっきりかぶってしまっていますが,もちろんパクって開発したわけじゃなく,たまたま同時期のリリースになったようですね。

公開当時はWindows XPにしか対応していませんでしたが,今はWindows Vista/7にも対応しています。

「日本語がもっと楽しくなる。」というキャッチフレーズで,スキンのきせかえができたり顔文字を簡単に入力できたりと,ビジネス向けじゃないアプローチが特徴です。

そもそも日本語入力システムを切り替えられることを知らないようなライトユーザーに訴求することができれば,それなりのユーザー数を獲得できるかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入