週刊Webテク通信

2010年8月第1週号1位は、CSS3を使った実験的なサンプル、気になるネタは、Appleのマジックトラックパッドはマウス時代の終焉を告げる

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

1. 10 Interesting CSS3 Experiments and Demoshttp://sixrevisions.com/css/css3-demos-experiments/

CSS3を使った実験的なサンプルをいろいろと紹介した記事です。CSS3ベースで作ったFlash顔負けのアニメーションやゲームなどが紹介されています。

残念ながら、Safari/Chromeでしか見られないデモが多いようです。

同じバナー広告をFlashとCSS3とで作ったものが紹介されているのですが、CSS3のアニメーションでも遜色ないですね。

とはいえ、文字のサイズを大きくしてみると、やはり表示が崩れてしまいましたが…。日本語の場合、Webフォントを使うにしても、使えるフォントが少ないことも悩ましいところです。

CSS3のいろいろなテクニックに関しては、12 Useful CSS3 Tutorials And Techniques For Web Designersという記事も参考になるでしょう。

図1 CSS3を使った実験的なサンプル10種
図1 CSS3を使った実験的なサンプル10種

2. HTML5についてのおさらい - W3G Blog Studieshttp://w3g.jp/blog/studies/html5report

HTML5のマークアップのための解説記事です。丁寧かつ簡潔にまとめられています。これから始めてみたいという人にピッタリの内容ですね。

なお、このサイトの左メニューの挙動がなかなか面白いです。

日本語のHTML5の記事としては、HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログというのもありました。こちらは非常に現実路線のようで、新要素は使わないことを推奨しています。

図2 HTML5についての解説記事
図2 HTML5についての解説記事

3. 50 Useful Tools and Resources For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2010/07/26/50-useful-tools-and-resources-for-web-designers/

Webデザインに役立つツールと情報源を大量にまとめた記事です。

タイポグラフィ、ブックマークレット、CSS/HTML/JavaScriptツール、オンラインツール/Webサービス、リファレンス/ガイド、ユーザビリティ/ユーザーエクスペリエンス、その他に関するものが紹介されています。

図3 Webデザイナーに役立つツールと情報源
図3 Webデザイナーに役立つツールと情報源

4. 50 Inspiring Examples of Texture in Web Design | Inspirationhttp://webdesignledger.com/inspiration/50-inspiring-examples-of-texture-in-web-design

テクスチャーが使われているWebデザインのギャラリーです。それほど強力に主張しない控えめなテクスチャーが最近のはやりですね。

図4 テクスチャーが使われたWebデザインいろいろ
図4 テクスチャーが使われたWebデザインいろいろ

5. Webサイト制作でよく出てくるコンテンツ内容とそれによく使うディレクトリ・ファイル名の一覧 - btmup Bloghttp://blog.btmup.com/web-general/contents-directory-file-name-list.html

ディレクトリ名やファイル名によく使われる英単語をまとめています。

この記事の作者が医療・病院関係のサイトに関わることが多いということで、そういった業界のサイトで使われる項目が充実しています。

いざ制作に入って忙しいときにディレクトリ名/ファイル名を決めるといった余計な作業に手間取らないように、こういうリストをあらかじめ用意しておくという姿勢は見習いたいですね。

図5 よく使うディレクトリ・ファイル名の一覧
図5 よく使うディレクトリ・ファイル名の一覧

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

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

touration.comhttp://touration.com/

自分のサイトに「ツアー」機能を付けるためのWebサービスです。

ページの一部をハイライトして、そこに説明文のフキダシを付けることができます。そうやって付けていった説明を順番に見ていくツアー機能を、自分のサイトに追加することができます。

左下の「Who is using touration?」で、実際にツアー機能を利用しているサイトが紹介されています。

ツアーを作成していく手順はユーザー登録しなくても試せるようになっています。

Webページの変更箇所や注意点を関係者に説明するなど、開発途中のサイトに使うという手もありそうです。

図6 サイトに「ツアー」機能を付けることができるサービス
図6 サイトに「ツアー」機能を付けることができるサービス

おすすめ記事

記事・ニュース一覧