2006-12

12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。

その24 waysから一つご紹介。

» 24 ways: Cheating Color

フォントの色と大きさと背景色についてのTipsです。

わかりやすく例を出していきましょう。

架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。

■ 薄い背景に明るいフォントの場合

さて、下に2つのロゴがあります。

左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしています。しかし、テキストの色が薄すぎるように思えませんか？

そこで右のロゴをご覧ください。社名とテキストの色が同じように見えると思います。しかし、実際にはここでテキストの色は社名より濃いものを使っています。

↑ 左は両方「#6699CC」。右は社名に「#6699CC」とテキストに少し濃い「#4477BB」を使っています。

このように背景が薄い色でフォントが薄い色の場合は、小さいフォントは濃い色にする必要があります。

■ 薄い背景と濃いフォントの場合

次に濃いフォントの場合はどうでしょう。下記の左のロゴのテキストの色は社名と比べて濃すぎるように思いませんか？

そこで右のロゴのテキストは社名よりも薄い色を使ってみました。社名と同じ色のように見えないでしょうか。

↑ 左が「#330000」。右は社名に「#330000」とテキストにそれより薄い「#550000」を使っています。

このようにフォントが濃い場合は、上記の薄い場合と反対に小さいフォントに薄い色を使う必要があります。

■ 濃い背景の場合

さて、今まで薄い背景の場合を見ました。では濃い背景の場合はどうでしょう。

下記のフォントは「薄い背景に明るいフォントの場合」で使ったものと同じものの背景を濃くしたものです。

ご覧の通り、上記では右のロゴの方が統一感がありましたが、今回の右のロゴはテキストの色が濃すぎるようです。

↑ 左の方が社名とテキストの色が同じように見えます。

ここからわかるように濃い背景の場合は、社名とテキストの色を変えない方が良いことがわかりました。

このようにRGB値が同じでも背景やフォントの大きさ、組み合わせる色が異なればその色が持つ印象も変わってきます。ある要素が変わればまた違う色の組み合わせが必要となってくるのです。

» 24 ways: Cheating Color （24 waysでは他にも役立つTipsがたくさんあります。よろしければどうぞ！）

色を決める際はマニュアルを鵜呑みにせず、実際に自分の目と頭で確かめるほうが大切なのかも知れませんね。

GiftTaggingのタグクラウドが綺麗です。タグクラウドって便利そうだけどあんなに文字が並んでもねぇ・・・という方は参考にされてはいかがでしょうか。

↑ タグを本当の「タグ」で表現してみました。

↑ タグづけの表示にも、タグのアイコンが。

タグクラウドはまだ出てきたばかり。どんな表現手法が良いか、貪欲に試行錯誤していきたいですね。「タグ」を直感的に「タグ」とわからせるこうした手法もいいのではないでしょうか。

ちなみに元ネタはこちら。37signalsのこのブログでは「Screens aroud town」というコーナーがあって、参考になります。Simple*Simpleでも今後とりあげていきたいと思います。

» [Screens around town] Feedburner, YouTube, and Gifttagging get clever

以前、このブログでいつでもブックマークしてもらえるインターフェースというエントリーを書きましたが、今回はそのコメントフォーム版です。

画面をスクロールしても、コメントフォームが常に右に表示されるようになっています。ちなみにFirefoxでは動きましたが、IEではだめでした。

言葉でいってもわかりにくいので動画でどうぞ。

エントリーを読み返しながらコメントできるのは、便利ですよね。ショッピングカートがついてくるようなECサイトも、すでにあるんでしょうか。調べてみたいと思います。

これ、ちょっと便利。画像の特定部分がクリッカブルになっている「イメージマップ」を簡単に作れます。ツールがちょっと手元にないなぁ、なんてときに便利。

↑ 作業はこんな感じで。画像のURLを指定し、画像上でダブルクリックして線引きを開始。そのあとクリックして領域指定、ダブルクリックで終了。

↑ 作業結果はリアルタイムでコードに反映されていきます。<img>タグの中身や、リンク先は手作業で変更。

最近「イメージマップ」がはやっているかどうかが微妙ですが（なんかユーザビリティ/アクセシビリティ的に問題ありそう）、知っておいて損はないですな。よろしければどうぞ。

» HTML-Image map Creator WYSIWYG

精妙なディティールを紹介していくのが、simple*simpleのコンセプトなわけですが、今回はまさにそれです。

bottle talkのロゴにご注目。

↑ よく見ると「t」がボトルになっている！

小ネタではありましたが、simple*simpleではこれからも小粋なロゴを紹介していこうと思っていますので、よろしくお願いします。

Google創業から8年が経ちましたが、トップページも少しずつ変わってきました。シンプルなサービスが人気ですが、Googleは最初から今のようにシンプルだったのでしょうか？

その変遷がこちらにまとめてありましたので、simple*simple的視点からちょっとご紹介。

まず、97年から98年の初期にかけて。

↑ 見覚えのない（懐かしい？）ロゴ。「!」マークつきです。tableの背景色を使って色分けがされています。この頃はまだURLがgoogle.stanford.eduだったようで。

つぎに、98年。

↑ 色使いも増え、企業情報やGoogleのロゴのページへのリンクなども。このロゴは、創業者のサーゲイ氏がGIMPで書いたものらしいです。

そして、99年。

↑ ロゴと検索窓のシンプルなカタチになりました。でも“search the web using Google”という説明書きは残していますね。

2000年です。

↑ おなじみのCatullフォントのロゴに。言語選択のプルダウンメニューがつきました。BETAが消えています。

2001年。

↑ 9.11の後、Googleチームからの哀悼や、報道や支援情報へのリンクを載せていました。インデックス数が表示されています。

2002年になると？

↑ 検索窓の上にはイメージ検索などのタブが、左には検索オプションなどへのリンクが配置され、現在のカタチに近づいてきました。インデックス数はフッターに移っています。

少しとんで、2004年。

↑ 再びシンプル化。検索窓上のタブをなくし、リンク表示だけに。

最後に、残りわずかとなりましたが、2006年。

↑ インデックス数の表示がなくなり、gmailのアドレスやパーソナライズドホームの表示が。ログインすることで、いろんなサービスが使えるようになりましたね。

と、かけ足でふり返ってみましたが、いかがでしたか。「ブラウザのツールバーで検索するから、トップページは見てないよ」なんて声も聞いたりしますが。

↑ 今日のロゴはハッピーホリデー仕様でした。

ちなみに現在、google.stanford.eduはスタンフォード大学のサイト内検索ページになっているようです。

Yahooの変遷に関してもこちらにあったりするようですので、気になる方はぜひどうぞ。

こうして長い目でサイトのデザインを見ていくのもいいですね。また気付いたらご紹介していきますね。

なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。

Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。

» Web 2.0 how-to design guide

15の項目でまとめられていますね。

1. Simplicity（とにかくシンプルに！）
2. Central layout（真ん中に寄せるレイアウトで）
3. Fewer columns（段組は少なめに）
4. Separate top section（トップ部分は分けて目立たせよう！）
5. Solid areas of screen real-estate（レイアウトにはメリハリをつけて）
6. Simple nav（ナビゲーションはシンプルに！）
7. Bold logos（ロゴは大きめに！）
8. Bigger text（フォントも大きめに）
9. Bold text introductions（キャッチコピーは大胆に！）
10. Strong colours（鮮やかな色）
11. Rich surfaces（立体的に見せる）
12. Gradients（グラデーション）
13. Reflections（反射）
14. Cute icons（アイコンはかわいいものを）
15. Star flashes（星型のバッジを使おう！）

それぞれの項目は画像などの事例つきで詳しく説明されていますね。なかなか参考になります。

で、最後まで読んだときに「あぁ、このサイトも確かにそうだな・・・」と気付きました。綺麗なサイトですものね。そう思ったので衝動的にエントリー。

あなたのサイトもこのリストにあわせてチェックしてみては。

■ 関連記事

• Web 2.0のデザインパターン
• 勝手ながら『Web 2.1のデザインパターン』を考えてみた

The Moving Picture Companyのサイトのヘッダーにはちょっとしたものがついています。

↑ このように世界時計がついていて、くるくると世界中の都市の時間を教えてくれます。

この会社、本社はロンドンですが、X-MEN等のハリウッド映画の演出効果を作っていたり、SONYの液晶テレビBRAVIAのユニークなコマーシャルを手がけていたりすることで有名です。

このようにサイトにも世界時計があると「うちのクライアントは世界だから」とアピールすることができますね（でもない？）。

ちょっとした工夫でも企業姿勢をアピールすることができますね。他にどんな「ちょっとしたこと」が考えられますかね。

最近以下のようなYouTubeコンテンツを見かけるようになりました。

注目すべきはタイトル。視聴数の多いYouTubeの動画のタイトルに直接宣伝したいURLを入れています。

よく映像を編集して映像の最後にURLを出したりする手法もありますが、こちらのほうがお手軽ですね・・・。最後まで動画を見てくれるかもわかりませんし。

言われてみればそれだけですが、こういう当たり前っぽいけれど誰もやらなかったことをはじめる発想ってすごいですよね。

サイボウズラボの秋元さんがブログで紹介していたマイクからの声に反応するFLASHゲームをレビュー。

» マイクを使ったネットマーケティング -　秋元@サイボウズラボ・プログラマー・ブログ

このThe Hi-Def Chamber、マイクから一定の高さの音を拾って3秒間その高さをキープするとグラスとかが割れるという代物。

» Welcome to High Def Chamber

せっかくなので動画でレビューしてみました。

秋元さんもおっしゃってる通り、準備に手間がかかる割りに・・・という感じでしたが、音声入力でウェブを操作する感覚が新しかったです。音声を単純に録音するPodcastingなどはよくありますが、こうした音声操作系は可能性を感じさせますね。

wiiリモコンもかなり大胆な操作を要求することですし、マイクを使った操作というのも将来的にはありうるのかもしれませんね。