:: Love & Design ::

ウェブサイトの色彩設計とは？（坂本 邦夫さん）

◆色彩で実現できること

• 印象のコントロール
  • →サイトのブランド確立
• スムーズな情報伝達（ユーザビリティについて）
  • →読みやすさ
• 見える部分のアクセシビリティの確保
  • →色だけに頼らない
• クライアントへの説得力
  • →その色が選ばれた理由
• ターゲットユーザー
  • →○○は○色が好きという偏見を持たない
• コーポレートカラーの扱い

◆まとめ

• 美しさと情報伝達の両方大切
• 理由のある色選び
• よい色彩にするためにはディレクターからの情報も重要

また、Webサイトに訪れる人は、ブラウザで見るだけとは限りません。よくある例として、地図やグラフなどをプリントすることがありますが、坂本さんがモノクロでの確認に使っているツールを紹介していただきました。

Web Accessibility Toolbar 1.2.1 日本語版
ColorAccess（色覚アクセシビリティチェックツール） - 名前はまだない
ColorDoctor : 富士通

グレースケールに変換したり、モノクロでプリントアウトしても情報が伝わるかどうか、実際にチェックしてみることが大切ですね。

わたしのオススメのツールはこちら

関連：背景色と文字色の見やすさをチェック | *LOVE IS DESIGN*

また、今月24日に A・F・T 色彩検定を受検するのですが、坂本さんにサインと合格祈願を書いていただきました。（これだけでもう受かった気分）

◆Webレイアウトのセオリー（矢野りんさん）

次に身長152.1cmの矢野りんさんが3歳の息子さんと一緒に登場。一気になごやかなムードになりました。（講演の間は主催の鷹野さんが子守役）

もっと単純に！レイアウトの基本の基本をわかりやすく解説していただきました。

◆レイアウトの3大基礎

• 差別化する
• グループ化する
• 規則的な面積の設定

◆3つの「ホンマかいな」

• テキストの大きさはそれでいいの？
• 背景は白でいいの？
• クリック深度は浅い方がいいの？

…と、ここで突然テスト
「エビと牛の絵を描いてください」と言われ描いた絵がコチラ↓ 虫と犬ではありませんｗ

知っているようでも、いざ描こうとすると思い出せないものですね。とにかくじっくり観察すること、Web以外のいろいろなことに「好奇心」を持つことも大切だとおっしゃっていました。

伊東 美沙貴さんのセッション AISHAにおけるWeb制作のワークフロー の詳細は、残念ながら非公開ということなので省略させていただきますが、非常に濃い内容でした。

子守り 主催の鷹野さん始め、関係者の方々、参加者の皆さんお疲れさまでした。

最後に、来月15・16日は東京で「Web標準の日々」が開催されますが、交通費が片道4,800円以上かかる方や、学生さんに朗報です！な・な・なんと1日券が2日通し券になる 地方割引、学生割引があります。みんなエンジョイしましょうね！

詳しい内容は、［Web標準の日々］準備ブログ をチェックチェックチェック！

関連リンク

• ものづくりにっぽん: CSS Nite premium (Osaka/200706) 終了！
• CSS Nite premiumが終わりました » 色いろスクエア

CLOSE ↑

ポータル系

Google

検索精度の高さに定評のある王道のGoogle
ちなみに「無駄にエロい」で 1位 になりました。

Yahoo! JAPAN

日本最大のポータルサイト
ホーム（スタートページ）にしている人も多いのでは？

MSN Japan

マイクロソフトが運営するポータルサイト

はてな

日本のGoogle と言われる Web2.0 企業

goo

最初はグー？

Infoseek

楽天が運営するポータルサイト

Excite

毎日使うものだから、とにかくデザインにこだわりたい！という人のためにトップのデザインを変えられるデザイナーズポータルを開始

MARS FLAG

検索結果がサムネイル表示される検索サイト

百度

中国で最も有名な検索サイトが日本上陸

マッシュアップ系検索サイト

Web Artisan Search（ウェブ アルチザン サーチ）

Yahoo!・Google・Amazon・YouTube・はてな（ブックマーク）・Flickr などの検索結果を一度に表示

Yahoogle!（ヤフーグル）

Yahoo! + Google のマッシュアップ

sidekiq

メタ検索サイト

CEEK.JP

最大18個のロボット検索エンジンで検索し、整理して表示する、統合型メタサーチエンジン

alpha (beta)

Flicker YouTube Wikipedia を同時検索

totowa（トトワ）

「＊＊＊とは」何かが分かる検索サイト

ソーシャルな検索サイト

Yahoo!検索 はてブ順

Yahoo!の検索上位50件をはてなブックマークの件数が多い順にソートして表示

Qooqle（クークル）

Yahoo & はてな & Amazon & Google のマッシュアップ
はてなブックマークの登録数に応じてタグクラウドで検索結果を表示

SAGOOL（サグール）

独自のアルゴリズム“オモロアルゴリズム”により「人の主観・興味を反映した検索結果」を抽出

Pythagoras（ピタゴラス）

ウェブページの様々な要素(スコア)を機械的に調査するウェブサービス

3マッチ棒

はてなブックマークやlivedoor クリップでブックマークされた人気サイトのみを検索対象とする検索エンジン

netPlant

ソーシャルブックマークではなく、ブラウザのブックマークを利用したカテゴリ検索

ブログ検索

NAMAAN

速報性重視で最短1分で結果に反映
検索結果に表示されるアイコンが無駄にオサレ！

Technorati JAPAN

旬の話題や、ブログ界の動向がよくわかります。

Ask.jp

業界最速！1分以内に書き込まれた記事を検索することが可能

Mooter（ムーター）

オーストラリア生まれの検索サイト
上記のブログ検索とは反対にブログフィルタがある
自動的に作成されるカテゴリーをビジュアル的に表示するStar Burst検索（スターバースト）がおもしろい

その他、便利な専門検索サイト

igosso

Flickr の画像を日本語で検索！

Flickr Color Selectr

Flickr の画像をカラーホイールで検索

ありえない画像検索【18禁】

Yahoo!のイメージ検索を利用して、ムフフな画像だけを検索

Fooooo

動画検索エンジン

seekmotion

YouTube amebavision の動画を検索

Weblio｜辞書

複数の辞書を一度に検索

病院検索JAPAN

全国約15万件の病院・診療所・歯科医院を検索できる、日本最大級の病院・診療所・歯科医院検索サイト

Twitter検索

Twitter の発言を検索

俺サーチ！

今ナウいキーワードを提案してくれる日本発の「兄貴型検索エンジン」

[ナウなヤングにバカウケ をただ使いたかっただけのエントリー]

• 5/24　Mooter（ムーター）追加
• 5/25　seekmotion 追加
• 6/13　俺サーチ！ 追加

CLOSE ↑

色の3つの要素

　配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。

色相（しきそう：Hue）

色相とは、赤・橙・黄・緑・青・紫などの色みのこと。
（色相はつながりあって色相環という輪になります。）

彩度（さいど：Saturation：Chroma）

色の鮮やかさ、強弱の度合いのこと。
彩度が高い（鮮やか）⇔彩度が低い（鈍い）

明度（めいど：Value：Brightness）

色の明るさの度合いのこと。
明るい（白）⇔暗い（黒）

配色の手法

配色の手法には、法則のようなものがあります。

• 色相を手がかりにした配色
• 明度を手がかりにした配色
• 彩度を手がかりにした配色
• トーンを手がかりにした配色

ドミナントカラー配色

同じ色相で統一させた配色

ドミナントトーン配色

同じトーンで統一させた配色

トーンオントーン配色

同じ色相でトーン（色調）を変化させた配色
穏やかで落ち着いた配色ですが、平凡になりやすい

トーンイントーン配色

明度は同じで色相を変化させた配色
明暗が同じなので、違う色相を使っても違和感がない

カマイユ配色

色相 ・トーン共に近い色を組み合わせた配色

フォカマイユ配色

カマイユ配色よりやや色相差がある配色

コントラスト配色

色相・明度・彩度いずれも反対色で配色

グラデーション配色

色相 ・明度 ・彩度を段階ごとに変化させる

ワンポイント配色

アクセントカラー（補色）を使うことで全体を引き締める役目をする

好みやセンスだけに頼らない配色

　色相、彩度、明度の3つの要素を数値で表したカラーモデルのことを「HSV」と呼びます。（またはHSB）参考：HSV色空間 - Wikipedia

　グラフィックデザインなどでよく用いられており、直感的にわかりやすい表現方法だと言われています。photoshop や Mac にはあらかじめ HSV の設定ができるカラーパネルがあります。

HSV による配色

色を HSV の数値で表すと次のようになります。

色相（H）のグラデーション

彩度（S）のグラデーション

明度（V）のグラデーション

　配色とは2色以上の色の組み合わせのことです。色にも相性があって、人間関係と同じように似たもの同士（共通性）または正反対（対比）の色を選ぶとうまくいきます。

　上のグラデーションの図のように「色相・明度・彩度」のいずれかが同じグループ、または色相環で正反対に位置する補色（反対色）を組み合わせると調和のとれた配色になります。

　コントラストをつけたい場合は、色相や明度を60度、90度、120度･･･と差を大きくします。色相の差が180度なら補色（反対色）で、一番コントラストが強くなります。隣同士の色なら色相を15〜30度、彩度を落とす（低くする）と落ち着いたトーンになります。

参考：数で合理的にデザインする - カラー編 | d-spica

　ソフトがないひとも Mac じゃない人でも、Web 上で HSV で簡単に調和のとれた配色ができるツールがあるので、実際に作ってみましょう。

　ベースの色が決まったら、H・S・Vのいずれかの数値を変えてみてください。サンプルは、わたしの好きなピンクを選んで、明度と彩度はそのままで色相（H）を120度ずつ変化させてみました。

ColorJack

▼サンプル（クリックで拡大します）

ColorJack: Sphere (Color Theory Visualizer)
こちらも簡単に調和のとれた配色を作ってくれます。

　もうひとつご紹介するのは、色見本と配色ツールを同時に提供しているサイトです。色は使う面積によっても大きく印象が変わります。こちらの 配色サンプル画面 で背景とサブカラーを入れ替えるとイメージを比較しやすいと思います。

色サンプル(色見本と配色)

▼サンプル（クリックで拡大します）

　一番のポイントは無駄に「色数を増やさない」ことだと思います。 日本には古くから、「捨色」（すていろ）という概念があります。ある色を際立たせるために引き立て役になる色のことです。引き算の美学 でも述べたように、思い切って色を捨てることも大切ですね。

　また、Web での配色は「機能性」を忘れてはなりません。じゃあどうすればいいのか？ その話は、無駄に長くなるから、坂本邦夫の「基礎からわかるホームページの配色」 - 自分で効果的な配色を行うための情報 を見てくれ！ （無駄に外山風） 。

↓こちらの本もわかりやすい一冊です。

【関連エントリー】

• フォントとリンク色のカスタマイズ
• 背景色と文字色の見やすさをチェック
• 「色」が持つ3つのチカラ

CLOSE ↑

Asada氏 のインタビューで次の言葉がとても心に残りました。

デザイン＝ものを省くこと

　今回アートディレクターを務めた「Zinga」のデザインで、Asada 氏は線があるのを嫌ったそうですが「白の空間」をとても大切にしているように思いました。

ホワイトスペースの役割

白の空間「ホワイトスペース」は、次のような役割があります。

• 区別する
• 目立たせる
• リズムをつける
• 間（ま）を持たせる

このように「ホワイトスペース」には、重要な役割を持っていると同時に「何もないデザイン」は美しく機能的でもあるんですね。

　メイクでもよく言われることですが、例えば目元を強調したい時はリップメークは控えめにするとか、口元を強調したい場合は目元をラインだけにする･･･といった具合に「引き算」ができてこそ上級者と言えるでしょう。

　Webデザインも同様に、スペースが空いているからといって、無駄に詰め込み過ぎると逆効果になってしまいます。

　シンプルに何も足さない、置けても置かないことを心がけたいですね。

Asada氏 の「ホワイトスペース」を活かした美しいデザインのサイト

ホワイトスペースの参考にしたいサイト

about "null*
日本の伝統的な美意識をコンセプトとし、 タイポ・フォトグラフィー・イラストレーション・ペインティング・インタラクティブ・モーショングラフィック等、 様々な手法でグラフィック表現を行うユニット。

関連

• 何もないという存在 | *LOVE IS DESIGN*

CLOSE ↑

　色には大きく分けて「有彩色」と「無彩色」の2種類あります。有彩色は「色相、明度、彩度」の3つの性質があるのに対し、無彩色は「明度」*だけの性質を持っています。

*明度（めいど：value）

色の明るさの度合いのこと。

　最も明度の高い色が白、最も明度の低い色が黒です。

Webデザインに「無彩色」はかかせない存在

• 背景など部分的に使う
• グラデーションをつける
• 明度差をつけて強調する
• 光と影をつけて立体感を出す

どんな色ともケンカをしない「無彩色」は、使う場所を選ばない万能な色。

Webデザインに「無彩色」を使うコツ

• セパレーションカラーに使う

　セパレーションカラーとは、配色の中間に入れる色のことを言います。似ている色同士でハッキリしない配色や対比が強すぎる場合に、どちらにも影響しない色を入れてまとめる配色方法です。

「無彩色」をセパレーションカラーに用いると、配色を引き締めたり落ち着かせることができます。

　インテリアやファッション（ベルトや帯）など、Webデザイン以外でもよく使われている配色テクニックなので覚えておくと便利です。

【関連エントリー】

• 覚えておきたい配色のワザと便利なツール | *LOVE IS DESIGN*

CLOSE ↑

Mighty Mouse の掃除方法

1. 軽く水で湿らせたティッシュの上でマウスを裏返してコロコロする
2. サラダ油をつけたティッシュの上でマウスを裏返してコロコロする
3. それでもダメなら分解して掃除する

さっそくお水で試してみると、まずまずの感じ。次に、キッチンペーパーにサラダ油を少し付けてコロコロしてみると、細かいゴミが驚くほどたくさん取れて感激！見事にスクロールも復活しました。

分解はしなくて済みましたが、最後の手段ということで･･･。やっぱり Mighty Mouse のクリックの感触やスクロール音の静かなところがわたしは好きです。

　マウスの調子が悪いと思うように作業が進まないし、無駄に力が入って マウス症候群 （腱鞘炎）になってしまう恐れもあるのでいつもベストな状態に保ちたいですね。

　感度が悪くなったら一度お試しください。 だからといって、彼女や奥さんに決してサラダ油を付けてはいけませんよ。

参考記事

• なつみかん。 | Mighty Mouseの掃除法
• Mighty Mouse にサラダ油？ (感じ通信)
• Mighty Mouse 掃除[Webクリエイターブログ]
• 写真でみる「Mighty Mouse」
• Apple Mighty Mouse まとめ

CLOSE ↑

好きなクルマ BEST5

　現在乗っているクルマは、赤の BMW（3xシリーズ）ですが、基本的にドイツ車のクーペが好きです。

ちなみに BMW ３シリーズ に乗っている人のライフスタイルの傾向は

• オメガ・スピードマスターがすき（×）
• ガンダムがすき（○）
• ラルフローレンがすき（×）
• ルイ・ヴィトンがすき（○）
• 住みたい町…神戸（○）神戸は BMW 率が高い気がする

Laboo! 五感で探すクルマ選び - トレンドを探る - ＢＭＷ ３シリーズ セダン好きな人

……というわけで、わたしも好きな車を5台挙げてみました。

BMW　Z4 ロードスター

ボディラインが官能的。次期乗り換え候補

日産フェアレディ Ｚ

唯一、国産車で好きなクルマ。昔、母がフェアレディＺに乗っていたのを見てかっこいいと思いました。

アルファ ロメオ Spider

とにかくセクシーに見えるクルマといったらコレしかない！
オートマチック車も出たようですが MT 車に乗ってみたい。

メルセデス・ベンツCLK

カブリオレかっけー！

ポルシェ　ボクスター

子供の頃、山口百恵さんの「プレイバックパート2」を聴いて以来いつかは乗ってみたい憧れのクルマ。 白髪頭のおばあちゃんになったら、真っ赤な口紅とサングラスをして乗ってみたい。

彼氏に乗って欲しいクルマ

　というか、助手席に乗りたい！乗せていただくなら、スポーツカーより落ち着いたセダンや SUV が好きです。

• BMW 7シリーズ
• BMW X5シリーズ
• メルセデス・ベンツ Ｅクラス
• ジャガー X - TYPE

（うわー、やな女てうんこ投げられそう）

CLOSE ↑

ヌいたりイったりしたらすぐ「ヌいったー」に投稿しようそうしよう！

献血で血をヌいてすっきりしたり、肩の力がヌけてすっきりしたり、ヌけるような蒼い空ですっきりしたり、、とにかくヌいたらすぐ、ヌイッター！
hbkr : ハバカリ | ヌいたらすぐ、ヌイッター！

「女性」にチェックを入れて投稿すると･･･
Twitter 検索 by Shin x blog

トップページに友達のタイムラインをつけてみたので、興味のある方はぜひついったーでイっちゃってください＞＜

その他、自分がよく使いそうな Twitter もの

suVeneのあれ: [Greasemonkey]ver.0.1.2 HatenaB with twitter - はてブからTwitterへクロスポスト
Hatenaブックマークの画面から、くろすぽすったー

FLOATwitter
Twitter のお友達画像をたどったったー

tmitter - α version
ケータイのメールから モバついったー

CLOSE ↑

1. HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）
2. 採用しているDTDとその理由をお答えください。
3. 何故正しくHTMLを書いているのですか？
4. W3CとWHATWG、どちらに期待してますか？
5. あなたにとってHTMLとは何ですか？

HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）

Mac では mi 。Win では TeraPad を使っています。

採用しているDTDとその理由をお答えください。

XHTML 1.0 Transitional。理由は今の主流だと思うから。トレンドは1.1？

何故正しくHTMLを書いているのですか？

ユニバーサル Web デザインを目指して（ウソ）無駄にエロいだけなので清く正しいことがしたい。あと、それが目的ではないけど、W3C のバリデータで合格したい。

W3CとWHATWG、どちらに期待してますか？

W3C しか知らない

あなたにとってHTMLとは何ですか？

自分の想いを伝えたり、表現するためのおまじない

回答集

• 「正しくHTMLを（中略）5つの質問」に対する回答一覧 : 雑記帳 : der Gegenwart

追記：捕獲早いよ！

CLOSE ↑