週刊Webテク通信

2009年11月第2週号1位は、WebデザインをGoodからGreatに変える6つの方法、気になるネタは、Gmailのフォントが変に

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

1. 6 Ways To Take Your Webdesign From Good To Greathttp://www.myinkblog.com/2009/11/02/6-ways-to-take-your-webdesign-from-good-to-great/

WebデザインをGoodからGreatに変える6つの方法を紹介しています。GoodからGreatへの、ほんのわずかな差に気付くヒントとなる内容です。

  1. グラデーションは微妙に使う
  2. ホワイトスペースを追加する
  3. グリッドに添わせる
  4. 文字をうまく扱う
  5. わかりやすく効果的なナビゲーションを作る
  6. すばらしく役に立つフッタを用意する

1~4は見た目について、5、6は機能面も含んでの内容となっていますね。

図1 Webデザインをグッドからグレートに変える方法
図1 Webデザインをグッドからグレートに変える方法

2. Web Design Trends for 2010 | Web Design Ledgerhttp://webdesignledger.com/tips/web-design-trends-for-2010

2010年のWebデザインの流行となりそうなポイントを14項目紹介しています。

文字の扱いに凝ったものや大きなフッタは、1位で紹介した項目と共通していますね。

大きなロゴ、大きなイメージ、大きなフッタといろんな要素を大きくするのがはやりのようで、モニタサイズが大きくなっているのと関係があるのかもしれません。

2010年に備えて、知っておきたいウェブデザインのトレンド | コリスとして、この記事を翻訳したエントリーもありました。

図1 2010年にはやりそうなWebデザインのトレンド
図2 2010年にはやりそうなWebデザインのトレンド

3. Best Practices for 6 Common User Interface Elements | Webdesigner Depothttp://www.webdesignerdepot.com/2009/11/best-practices-for-6-common-user-interface-elements/

6つのよく使われるユーザーインターフェイス要素に関して、ベストな表現方法を考えた記事です。

  1. 検索ボックスの見た目
  2. コンテンツの折畳み/展開のためのマーク(ボタン)
  3. Ajaxでのローディング中を表す表示
  4. カート、ログイン、登録のリンクやボタンの位置
  5. クレジットカードの入力フォームでの有効期限の日付のフォーマット
  6. 通常テキストとリンクテキストの区別

の6つのインターフェイスについて考察しています。

図3 よく使われるインターフェイスについての考察
図3 よく使われるインターフェイスについての考察

4. とっても使えるoverflowプロパティ。その使い方色々。|CSS HappyLifehttp://css-happylife.com/log/css-template/000751.shtml

CSSの「overflow: hidden」を使ったテクニックを5つ紹介しています。

clearfixの代わりに使ったり、フロートした画像の横のテキストが画像の下に来ないようにしたりと、目からうろこのテクニックがそろっていますね。

IE5対策と印刷用にCSSの調整が必要な場合がありそうという点には注意が必要でしょう。

図4 overflowプロパティの便利な使い方いろいろ
図4 overflowプロパティの便利な使い方いろいろ

5. The Future Of The Web: Where Will We Be In Five Years? - Noupehttp://www.noupe.com/trends/the-future-of-the-web-where-will-we-be-in-five-years.html

Webの未来について、5年後を予想した15の予言です。

1つ目の項目に小額決済(マイクロペイメント)を取り上げているのが意外ですが、たしかにWebの未来を考える上で重要なのは間違いないでしょう。

デザイン面では、モニタの巨大化により横スクロールのコンテンツが増えるのではないかと予想しています。横スクロールのサイトばかりになることはないでしょうが、横スクロールが選ばれるケースも増えていくんでしょうね。

Webが共同作業の場としてより利用されるようになる、リアルタイム性が高まるといった予想は、まさに今のトレンドの延長線上にあることです。モバイルが重要になってくるというのもそうですね。

最後は、Webが情報配信やコンテンツ配布の中心となるだろうと締めています。

図5 5年後のWebはどうなっているかの予言
図5 5年後のWebはどうなっているかの予言

そのほか先週の記事から、Webデザインのギャラリー記事を紹介します。

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

Bookmarks, Images, Files - Gkeeperhttp://www.gkeeper.com/

Gkeeperはオンラインブックマークなのですが、ページに含まれる画像やファイルもブックマークできるのが特徴です。

画像は大/中/小の大きさごとに、ファイルはオーディオ/ビデオ/その他のタイプごとに閲覧できます。画像はAltテキスト、ファイルはアンカーテキストがファイルの名称となり、検索も可能です。日本語での検索もできました。

画像やファイルはGkeeperのサーバーに保存されるわけではなく、URLが保存されているだけのようです。Webで見つけた画像やファイルの保管場所にするという使い方はできませんね。

デザインも含め、まだまだ発展途上のように見受けられますが、発想は面白いサービスだと思います。

Webページ上のあらゆるコンテンツをワンクリックでブックマークできるサイト「Gkeeper.com」*二十歳街道まっしぐらに登録の仕方や使い方が詳しく紹介されています。

図6 画像やファイルもブックマークできるサービスGkeeper
図6 画像やファイルもブックマークできるサービスGkeeper

おすすめ記事

記事・ニュース一覧