週刊Webテク通信

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

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

ネットで見かけた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サービス

今週の気になるWebネタ

日本版Twitter,「つぶやき」から「ツイート」に 米国版と表記統一 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0910/26/news084.html

Twitter日本語版での投稿コメントの呼び名が「つぶやき」ではなく「ツイート」に変更されました。⁠つぶやき」という言葉のちょっと暗い雰囲気が気になっていたわたしとしては,表記の変更には賛成です。

でも「ツイート」がベストかというとちょっと微妙に感じますし,⁠ツイート⁠やブログでは反対意見の方が多いようですね。

Tweetは名詞と動詞の両方に使えるようなのですが,ツイートの日本版の動詞は「ツイートする」といったところでしょうか。あまりスマートじゃないですね。⁠ツイる」じゃ意味がわからないですし。

「つぶやき」「つぶやく」というのは,コンパクトにまとまっていて,なかなかよかったということでしょう。これからも外部サイトやクライアントでの「つぶやく」ボタンというのは健在な気がします。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入