週刊Webテク通信

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

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

ネットで見かけた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 ファイルを選ぶだけのシンプルなインターフェイスです

今週の気になるWebネタ

「続きはWebで」もテレビで――「テレビ版Yahoo!JAPAN」開始 - ITmedia +D LifeStylehttp://plusd.itmedia.co.jp/lifestyle/articles/0904/06/news068.html

テレビ版Yahoo! JAPANというのは,Webブラウザ搭載テレビ向けのYahoo!サイトのようです。テレビ向けにコンテンツを絞り,画面サイズもテレビ向けに最適化しているとのこと。

Yahoo! JAPANはiPhone用のページもありますが,リンクをたどっているうちに通常のPC用ページに行き着いてしまいます。そのへんはテレビ版Yahooでも同じでしょうね。

PC用のブラウザでさえたくさんあるのに,iPhoneにテレビのブラウザにとチェックすべきブラウザが増えるのは,制作者サイドにとっては悩ましいところ。ヒットしたためしのない「テレビでインターネット」ですが,地上デジタル放送のためのテレビ買い替えが進むとともに普及していくんでしょうか?

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入