週刊Webテク通信

2009年6月第1週号 1位は,Fixed vs. Fluid vs. Elastic レイアウト/気になるネタは,クロスブラウザテストができる「Adobe BrowserLab」がプレビュー公開

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

ネットで見かけた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デザイナーからの意見)」のコーナーでもそのことに触れている人がいました。

そういった他の人の意見や関連する記事へのリンクも多数紹介されていますので,レイアウト手法について考えるいいきっかけとなる記事だと思います。

図1 レイアウト手法3つについての詳しい解説です

図1 レイアウト手法3つについての詳しい解説です

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」のカテゴリに掲載されています。

図2 1ページにまとめた巨大なリストというコンセプトのようです

図2 1ページにまとめた巨大なリストというコンセプトのようです

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/

ステキなデザインのフォームを集めたギャラリーです。テクニックの解説ではなく,単純に見た目のイメージだけの紹介です。

図3 シンプルかつ質感のあるフォームが多いですね

図3 シンプルかつ質感のあるフォームが多いですね

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つのステップは以下のような感じです。

  1. Fresh content
    コンテンツを頻繁に更新し,いつも新鮮な情報を提供する。
  2. Social content
    ECサイトなら商品の評価をユーザーに付けてもらうなど,ソーシャルな要素を取り入れる。
  3. Interaction
    ユーザー同士が会話できるような場を用意する。
  4. Easy to share
    ソーシャルメディアへの登録が簡単にできるボタンなどを用意する。
  5. Syndication
    RSSフィードなどの更新情報を配信する。

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

そのほか先週の記事から,Webサイト制作に役立ついろんなツールの紹介です。

先週の気になる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を投稿できるにくわしい解説記事があります。

図4 iPhoneユーザーでなくても便利なソーシャルサービス登録ツールです

図4 iPhoneユーザーでなくても便利なソーシャルサービス登録ツールです

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

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

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

コメント

コメントの記入