gihyo.jpサイトのロゴ

週刊Webテク通信

2009年11月第1週号1位は、今どきのCSSレイアウトの特徴、気になるネタは、日本版Twitter、「つぶやき」から「ツイート」に

2009-11-05

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

1. Modern CSS Layouts: The Essential Characteristics | Smashing Magazinehttp://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/

今どきのCSSレイアウトについて5つの重要な特徴を紹介しています。

  1. プログレッシブエンハンスメント

    どんなブラウザでも内容を理解できるような適切なマークアップをし、最新のブラウザ向けに高度な表現やユーザビリティを追加するという手法です。

    古いブラウザに合わせて表現を制約したりハックを多用するのでなく、最新のブラウザでは新たな技術の恩恵を得ながら、古いブラウザでも確実にコンテンツを見ることができるようにしようという考え方ですね。

  2. さまざまなユーザーに適応させる

    ブラウザ、PC／スマートフォンのようなデバイスの種類、画面解像度、フォントサイズなどが違うさまざまな環境に適応した表示をしようということです。画面サイズによって自動でカラム数が変更されるレイアウトが例にあげられています。

  3. モジュラー

    コンテンツを部分ごとにモジュラー化して扱うことで、ほかのページや外部サイトで再利用できるようにするべきとのことです。

  4. 効率的に

    サイト制作の効率化とともに、サーバーとブラウザからも効率的に扱われるようにすることが必要とのことです。

    CSS3を利用してコーディングを効率化することが案内されています。サーバーのための効率化としては、CSSスプライトとCSSを圧縮するテクニックが紹介されています。

  5. リッチなタイポグラフィ

    CSS3の新機能と「@font-face」プロパティによるWeb Fontsの利用により、簡単にタイポグラフィを充実させることができるようになっているとのことです。英語圏では見出しなどの文字を画像にせずにテキストのまま使っているケースが増えていますね。

図1　今どきのCSSレイアウトの重要な特徴
図1　今どきのCSSレイアウトの重要な特徴

2. Blog Headers: 20 Great Examples and Best Practices | Webdesigner Depothttp://www.webdesignerdepot.com/2009/10/blog-headers-20-great-examples-and-best-practices/

ブログのヘッダに関する考察と優れた多数の実例を紹介しています。

ヘッダをデザインするときに考えるべきこととして、以下の項目があげられています。

  • 正しいターゲットユーザーをひきつける雰囲気は何か
  • このブログは何かを第一印象で伝える方法
  • ほかのブログとの違いを第一印象で伝える方法
  • リンク、RSS購読などをどう目立たせるか

ヘッダつながりで、キレイで大きなヘッダのWebサイトを集めた、「⁠Big Header - The Power of beautiful web design - Showcase of the best 20 | AEXT.NET」という記事もありました。

図2　ブログヘッダの優れたサンプルと実践方法の考察
図2　ブログヘッダの優れたサンプルと実践方法の考察

3. 100+ Clean, Simple and Minimalist Website Designs | Inspirationhttp://www.hongkiat.com/blog/clean-simple-minimalist-website-design/

クリーンでシンプルでミニマルなWebサイトのデザインギャラリーです。

写真や装飾用の画像は極力抑えつつも、それなりに複雑な段組をしているサイトが多いですね。

クリーンつながりで「Clean and Well designed Web Sites | Design Shard」というサイトデザインのギャラリー記事もありました。

図3　100以上のクリーンでシンプルでミニマルなWebデザイン
図3　100以上のクリーンでシンプルでミニマルなWebデザイン

4. 26 awesome Firefox add-ons for web workershttp://www.designer-daily.com/26-awesome-firefox-add-ons-for-web-workers-4734

Web制作者のためのすばらしいFirefoxアドオンをまとめた記事です。カテゴリ分けして紹介されています。

「22 Firefox Extensions (Addons) for Web Development | TutZone」という同様の趣旨の記事もありました。

定番モノは両方の記事で紹介されていますね。

図4　Web制作者のための26個のFirefoxアドオン
図4　Web制作者のための26個のFirefoxアドオン

5. 40 Quality Photoshop UI Design Tutorials - Psdtuts+http://psd.tutsplus.com/articles/web/40-quality-photoshop-ui-design-tutorials/

Photoshopによるインターフェイスデザインのチュートリアルのリンク集です。

サイトのインターフェイスのパーツもありますが、アプリケーションのインターフェイス風のものが目立ちます。

アメリカのサイト向けなちょっとコテコテのデザインが多いですね。

図5　40の上質なUIデザインのPhotoshopチュートリアル
図5　40の上質なUIデザインのPhotoshopチュートリアル

そのほか先週の記事から、日本語によるお役立ち記事を紹介します。

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

Notable | Easiest way for teams to provide feedback on websites.http://www.notableapp.com/

Webページの修正指示や意見交換に役立ちそうな、コラボレーション用のWebサービスです。

サーバー上でWebページのスクリーンショットを共有して、みんなで注釈やコメントを書き入れていくことができます。

共有したページはスクリーンショットだけでなく、HTML/CSS/JavaScriptのコードや文章だけの表示があり、それらにもコメントが入れられます。コードのデバッグ指示や文章の校正にも使えるわけです。これはいいですね。

コードはパラグラフ単位、文章は一文字単位でコメントを入れることができます。

Firefoxのアドオンを使うと、見ているページのキャプチャとサーバーへのアップが自動で行われます。ローカルのHTMLをキャプチャしても、スクリーンショットだけでなくコードもちゃんと表示されました。

Firefoxのアドオンを使わなくても、Notableのサイト上でURLを入力してページを登録できます。ローカルでキャプチャした画像ファイルの登録や、iPhoneアプリからの画像アップロードも可能です。

デザイン、コード、文章と、Webページの制作途中のやりとりに大活躍しそうですね。無料で使えるプランもあるのでぜひお試しを。

図6　Webサイトのチームワークでのやりとりを便利にするWebサービス
図6　Webサイトのチームワークでのやりとりを便利にするWebサービス

おすすめ記事

記事・ニュース一覧