週刊Webテク通信

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

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

ネットで見かけた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 サイトに「ツアー」機能を付けることができるサービス

今週の気になるWebネタ

Appleのマジックトラックパッドはマウス時代の終焉を告げるhttp://jp.techcrunch.com/archives/20100727apple-magic-trackpad-mouse/

アップルが新型のiMacやMac Proをリリースしましたが,同時に発売されたMagic Trackpadが一番の話題のようです。

iPhone,iPadと指でスルスルと操作するのが最近のアップルの主流です。ならばマウスもスルスルと操作しようとMagic Mouseというマウスも登場しましたが,狭いマウスの上で複数指で操作するのは人によっては難しいようです。そこで,MacBookのトラックパッドだけが独立したようなMagic Trackpadの登場です。キーボードと並べてピッタリそろうサイズで,余裕の大きさです。

このMagic Trackpadを見たときに,テンキーにもなったらいいのにと思ったのですが,ブログなどで多くの人が同様のことを言っていました。調べてみると,エレコムのタッチパッド機能付きテンキーボードTK-TCT005BK」⁠プリンストンテクノロジーのテンキー機能付きUSBタッチパッドPTP-SP1といったPC向けの周辺機器が見つかりました。どちらもテンキーにもタッチパッドにもなり,複数指でのジェスチャー機能にも対応しています。

ほかにも,SUICAなどの非接触ICカードのリーダーになったり,指紋認証ができたりするタッチパッドが登場するかもしれませんね。アップルはそういった多機能路線とは別の道を歩むのがいいところで,やっぱりMagic Trackpadにはテンキー機能はいらないんじゃないかなと思い直した次第です。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入