週刊Webテク通信
2009年6月第1週号 1位は,Fixed vs. Fluid vs. Elastic レイアウト/気になるネタは,クロスブラウザテストができる「Adobe BrowserLab」がプレビュー公開
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年6月1日~6月7日の間に見つけた記事のベスト5です。
1. Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You? | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Webページのレイアウトとして現在代表的な3つの手法について,それぞれの長所・短所やどれを採用するかのポイントを解説しています。
取り上げられているのは,Fixed(横幅固定,SolidやFrozenとも呼ばれる),Fluid(横幅可変,Liquid) ,Elastic(横幅伸縮)の3種類です。Fixedは幅をピクセル指定で固定したもの,Fluidはパーセントで指定することでウィンドウサイズにあわせて可変するようにしたものです。そして,Elasticは文字サイズと横幅を両方emで指定することにより,文字サイズにあわせて横幅も可変させるという手法です。
“デザインを完全にコントロールしたければFixedだけど,ユーザビリティを考えるとFluidにチャレンジしてもいいんじゃない? どっちか決めかねてる人にはエラスティックか部分的にエラスティックを取り入れるという手もあるよ(意訳)”といった感じの結論になっており,明確な答えを提示するというより考えるきっかけを与えることが目的の記事なのでしょう。
今やほとんどのブラウザにズーム機能(文字だけでなくレイアウト全体のズーム&縮小)があるので,エラスティックレイアウトは不要だという考えもあります。この記事の最後にある「What Other Designers Say(他のWebデザイナーからの意見)」のコーナーでもそのことに触れている人がいました。
そういった他の人の意見や関連する記事へのリンクも多数紹介されていますので,レイアウト手法について考えるいいきっかけとなる記事だと思います。
2. jQuery Ajax tutorials, jQuery UI examples and more! - The Ultimate jQuery Listhttp://jquerylist.com/
jQueryのプラグインやチュートリアルのリンク集です。
このサイトの面白いところは,全ての紹介を1ページに詰め込んでいることです。カテゴリを選んだ場合,ページ内のアンカーへのリンクとして移動します。
サムネイル画像はスクロールして画面に表示されてから読み込むようになっており,それには「Lazy Load Plugin for jQuery」を使っているようです。ちなみにLazy Load Pluginは「jQuery DOM and Other Plugins」のカテゴリに掲載されています。
3. Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forumhttp://web-tan.forum.impressrd.jp/e/2009/06/02/5769
各種ディレクトリやリソースにサイトを登録したり,メールの署名や名刺にURLを記載したりといった,サイトを立ち上げた後にやっておいたほうがいいことのリストです。
コメント欄にいろいろ意見が寄せられ,随時本文に反映されています。コメント欄の雰囲気が良く,コメントに対するこの記事の作者の対応も参考になりますね。
4. 25 Stylish Examples of Web Formshttp://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/
ステキなデザインのフォームを集めたギャラリーです。テクニックの解説ではなく,単純に見た目のイメージだけの紹介です。
5. 5 Essential Steps to Make Your Site Search & Social Media Friendlyhttp://mashable.com/2009/06/02/social-media-friendly-website/
検索エンジン&ソーシャルメディアに対して友好的なサイトにするための5つのステップを紹介した記事です。SEO(サーチエンジン最適化)に続きこれからはSMO(ソーシャルメディア最適化)対策だというのが一時期話題になりましたが,その両方は互いに影響しているようです。
5つのステップは以下のような感じです。
- Fresh content
コンテンツを頻繁に更新し,いつも新鮮な情報を提供する。 - Social content
ECサイトなら商品の評価をユーザーに付けてもらうなど,ソーシャルな要素を取り入れる。 - Interaction
ユーザー同士が会話できるような場を用意する。 - Easy to share
ソーシャルメディアへの登録が簡単にできるボタンなどを用意する。 - Syndication
RSSフィードなどの更新情報を配信する。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
そのほか先週の記事から,Webサイト制作に役立ついろんなツールの紹介です。
- Googleが社内で使っていたWebサイト高速化ツールを一般公開
Page Speedというツールで,Firebugに組み込まれたFirefoxプラグインとして動作するそうです。 - Slammer
グリッドデザインのために役立つ,画面上にグリッドを表示するMac OS X用ソフトです。 - Twitterを使い始めてから少し楽しさが分かった頃にあると便利な8つのツール - かちびと.net
Twitterを便利に使うためのツールの紹介。 - jQuery TOOLS - The UI library for the Web
jQueryに様々なUIを簡単に追加するためのライブラリ。タブ,ツールチップ,オーバーレイ,Flashエンベッドなどに利用できます。
先週の気になるWebサービス
Smub: Post, Share and Bookmark instantly from your mobile...http://smub.it/
「Smub」は閲覧中のページをソーシャルサービスに簡単に登録するためのWebサービスです。
ブラウザのアドレスバーに表示されているURLの先頭に「smub.it/」と加えてSmubにアクセスすると,見ていたページをメールで送る/Twitterに投稿/Deliciousにブックマークなどが簡単操作で行えます。
このサービスがメインのターゲットにしているのはiPhoneのようです。iPhoneではURLをコピー&ペーストできない(6月18日からアップデートが始まるiPhone OS 3.0で対応するそうですが)ので,確かにこのやり方は便利ですよね。
ユーザー登録しなくてもとりあえず使えるところも好印象です。もちろんユーザー登録すると,いちいちID/パスワードを入れる手間がはぶけます。
個人的にはTumblrにも対応して欲しいと思いますし,はてなブックマークへの登録もできるようになると日本のユーザーは喜ぶでしょうね。
「Smub―iPhoneからソーシャル・サービスに魔法のように簡単にURLを投稿できる」にくわしい解説記事があります。
今週の気になるWebネタ

クロスブラウザテストができる「Adobe BrowserLab」がプレビュー公開 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0906/04/news033.html
Webデザイナーにとって面倒な作業のひとつが各種ブラウザでの表示チェック。チェック作業をサポートするものとして,Windows上で複数のIEを動かすためのツール,オンラインで各種ブラウザのスクリーンショットを撮るサービスなどがあります。
先日,米Adobe Systemsから発表された「Adobe BrowserLab」も,各種ブラウザでの表示チェックのためのオンラインサービスです。Internet Explorer 6/7,Firefox 2/3,Safari 3.xでのレンダリングを確認できるそうですが,将来的には対応するブラウザも増えるのでしょう。
マイクロソフトも「Microsoft Expression Web Super Preview」というブラウザ表示チェックツールを開発中で,現在試用版がダウンロードできます(Download details: Expression Web SuperPreview for Internet Explorer)。こちらはWindows上で動くアプリケーションで,インストールされているブラウザをレンダリングエンジンとして使うようです。インストールされていないブラウザでも,クラウド上でレンダリングするサービスも準備しているそうなので,正式版では多くのブラウザに対応することが期待されます。
BrowserLabはDreamweaver,Web Super PreviewはExpressionと,それぞれの制作ソフトを強化するツールという位置づけだと思われますが,こういったツールが大手から登場したことはうれしい限りです。
もっとも,こんなツールがいらなくなることこそ,Webデザイナーが望んでいることなんでしょうね。
週刊Webテク通信
- 2009年6月第3週号 1位は,リッチでクリエイティブなユーザーインターフェイス/気になるネタは,Opera,Webブラウザ内サーバ機能「Opera Unite」発表
- 2009年6月第2週号 1位は,シングルページWebサイトデザイン/気になるネタは,Amazon Kindle DXレビュー
- 2009年6月第1週号 1位は,Fixed vs. Fluid vs. Elastic レイアウト/気になるネタは,クロスブラウザテストができる「Adobe BrowserLab」がプレビュー公開
- 2009年5月第4週号 1位は,デザインからコーディングまでのチュートリアル/気になるネタは,MSの新検索サービス「Bing」
- 2011年10月第2週号 1位は,テクスチャをWebデザインに使う理由と方法,気になるネタは,新「iPod nano」発売—時計機能「クロックフェイス」が魅力
- 2011年10月第1週号 1位は,レスポンシブWebデザインのショーケース,気になるネタは,アマゾン,タブレット「Kindle Fire」を発表
- 2011年9月第4週号 1位は,仕事に役立つjQueryプラグインの実装方法,気になるネタは,Facebook,タイムラインを発表
- 2011年9月第3週号 1位は,LESS入門とSassとの比較,気になるネタは,GALAPAGOSは撤退しない。来年にも新モデルを発売
- 2011年9月第2週号 1位は,第一印象で目を引くWebデザインについて,気になるネタは,Google+のポリシーでの通称名とはハンドルネームではない

