週刊Webテク通信

2009年4月第2週号1位は、Webサイトを公開する前にチェックする15の項目/気になるネタは、「テレビ版Yahoo!JAPAN」開始

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

1. 15 Essential Checks Before Launching Your Website | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2009/04/07/15-essential-checks-before-launching-your-website/

Webサイトを公開する前にチェックする項目と、チェックに役立つツールの紹介記事です。

15のチェック項目の内容に関しては、サイトを公開するまえにチェックすべき15の項目 | エンタープライズ | マイコミジャーナルに翻訳してまとめてあるのがとても参考になります。

元記事の方には、実際のコードの記述例や、便利なツールへのリンクが用意されています。

また、末尾で紹介されているThe Ultimate Website Launch Checklist2009年2月第3週号で紹介しました)Quick Usability Check List⁠ユーザビリティのチェックリスト)も参考になるでしょう。

2. Perfect multi-column CSS liquid layouts - iPhone compatiblehttp://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

完璧なマルチカラムのCSSリキッドレイアウトだそうで、パーフェクトと謳っているのが気になります。CSSハックもJavaScriptも画像も使わずに、⁠Full length column background colours」を実現しているのがポイントですね。

原文からそのまま「Full length column background colours」ということばを引用しましたが、カラム(段組の段)の背景色が、段組み全体の高さいっぱいまで適用されるという意味です。

段組レイアウトのとき、フロートされたカラムに背景色を付けてもテキストや画像などがあるところまでしか背景色がつきません。そのため、段組全体を囲む要素に背景画像を指定する方法が一般的です。また、Javascriptを使うという対策もあります。さらに、フロートをクリアする際のCSSハックも定番テクニックとなっています。

ところがここで公開されている方法では、それらテクニックを全く使っていないということなのです。

ソースを見てみたところ、段組全体を囲む背景色用の領域を用意して、背景色を付けたいカラムと同じ幅で背景色を指定しているようです。種を明かせばなーんだというような方法ですが、シンプルで良くできた解決法ですね。

図1 デモページは7種類公開されています
図1 デモページは7種類公開されています

3. 1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場 | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/04/10/005/index.html

CSSスプライトのためのツールとして最近登場したSprite Creator 1.0と、昔からあるCSS Sprite Generatorとを紹介した記事です。

CSS Sprite Generatorは、アップロードされた複数画像を1枚にまとめた画像を生成し、それぞれの画像を表示するためのCSSを作ってくれるというサービスです。

一方、新登場のSprite Creatorは、1枚の画像から特定部分を選択ツールで選ぶと、その部分を表示するためのCSSが生成されるというものです。場合によって使い分ければよさそうですね。

前回「今週の気になるWebネタ」で、Googleマップの人型アイコンにCSSスプライトが使われていることに触れたので、ちょうどタイムリーだと思い紹介しました。

図2 CSSスプライトに関する関連記事もいろいろ紹介されています
図2 CSSスプライトに関する関連記事もいろいろ紹介されています

4. 50 Stylish Navigation Menus for Design Inspirationhttp://sixrevisions.com/design-showcase-inspiration/50-stylish-navigation-menus-for-design-inspiration/

スタイリッシュなナビゲーションメニューのデザインショーケースです。

前回ドロップダウンメニューや、メガメニューと呼ばれる大きな領域のサブメニューが開くドロップダウンが流行っているようだと書きましたが、やはりその傾向がうかがえますね。

ここで紹介されているホワイトハウスのサイトなんて、かなりのメガメニューっぷりですよ。

図3 ロールオーバー時の変化が分かるようにキャプチャーされています
図3 ロールオーバー時の変化が分かるようにキャプチャーされています

5. 35 Awesome User Interface Design Tutorials | Pro Blog Designhttp://www.problogdesign.com/resources/35-awesome-user-interface-design-tutorials/

ユーザーインターフェイスデザインのチュートリアルが多数紹介されています。

理論やテクニカルな話ではなく、純粋にビジュアルデザインに関するチュートリアルですね。

ほとんどのチュートリアルでは、パーツではなくサイト全体をデザインする内容になっています。

図4 Photoshopで作られているものがほとんどです
図4 Photoshopで作られているものがほとんどです

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から、これを読めば話題のTwitterに関しての理解が深まるという記事を3つ紹介します。

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

File2.wshttp://file2.ws/

どんなファイルでもWebサイトとして公開できるというサービスです。サイト名は「File to Web Site」という意味ですね。

ユーザー登録などが不要というお手軽さと、豊富なフォーマットに対応したプレビュー機能がウリのようです。画像だけでなく、動画や音声ファイル、PDFやワード書類などもプレビュー表示できます。

複数ファイルを同時にアップロードすることはできませんが、Zipなどでまとめて圧縮してからアップすると、サーバー側で個々のファイルのプレビューを生成してくれます(結構時間がかかるようですが⁠⁠。ちょっとした画像ギャラリーならこれで作れちゃいますね。

お手軽な分、アップしたファイルを消す方法や、パスワードなどでアクセス制限する機能はありません。

アップしたファイル名を元に「http://file2.ws/○○」といったURLが割り当てられるのですが、このURLあるかなと思ってありがちなフレーズを入れてみる遊びもありかも。

なお、wsというドメインは、オセアニアのサモア独立国(旧西サモア)のものだそうです。

図5 ファイルを選ぶだけのシンプルなインターフェイスです
図5 ファイルを選ぶだけのシンプルなインターフェイスです

おすすめ記事

記事・ニュース一覧