サイトデザインの際の色の組み合わせ

以前のエントリーでも紹介した「デザインの色設計に関する3つのステップ」で紹介したMark Boultonのサイトで新しくデザインする際の色の組み合わせについての新しいエントリーを書いてました。

モックアップ(模型)等を最初に作る際に一緒にサイトで利用する色を作ってしまったりしてますが、色のリストを最初に作っておくと後々便利だろうなーとは常々思っているのですが中々実践できずにいます。

さてさて、内容を読んでいて思ったのは基本的な組み合わせを三つのパターンに分けて考えるのが良いと書いてあります。項目としては以下らしいです。

1. Subordinate, or Base colour. This is a visually weak, or subordinate, colour. It should contrast or compliment the dominant colour.
2. Dominant. The main colour. It is this colour which defines the communicative values of the combination.
3. Accent, or Highlight colour. The Accent colour can be two things: either sympathetic to the Subordinate or Dominant colour, or it can be visually strong and striking, therefore appear to be competing with the dominant colour. This can provide tension within a combination

訳してみるとこんな感じかな(超意訳でっせ)？上の番号付きの画像と見比べるといい感じです。

1. ベースとなるような基本色。これは、視覚的に弱い（または薄い）色です。それは対照となる形を想定した色が望ましく、強い色(濃い色)の引き立て役になるような色が望ましい。
2. 主となる色。組合せの総合的な印象を決めるのは、この色であるべき。
3. アクセントまたは、強調するための色。アクセントしてあるこの色は、2つのケースが考えられます：上記２つの色に従属する色、もしくはそれよりも強調をしている色です。この色はどちらでも視覚的に強くて目立つことが必要です、したがって、上記の2色と争っているように(対極など)見えるようにする事が望ましい。これは、組合せの中で緊張を提供することができます。

うん。参照先の配色例も分かりやすい。一読をオススメします。

• Five Simple Steps to designing with colour part 3: Colour combinations
• デザインの色設計に関する3つのステップ

PHPでブラウザ判別 - get_browser

javascriptファイルやcssファイル等をブラウザごとに振り分ける場合、もちろんcss、javascript単体でも出来るのですがサーバーサイドで行う事もできるとかなり便利です。PHPの場合はget_browserという標準関数があってユーザのプラットフォームの情報が取得できるのですが、結構用意が必要なのでちょっと紹介。

この関数USER_AGENTを判別をしてオブジェクトを返してくれるという関数なのですが、オプションを指定すると配列を返す事も可能みたいです。以下の例だとUSER_AGENTを配列に分割して返す形になります。

<?php
$platform = get_browser(null, true);
echo '<pre>';
print_r($platform);
echo '</pre>';
?>

<?php
Array
(
    [browser_name_regex] => ^mozilla/5\.0 (windows; .; windows nt 5\.1; .*rv:.*) gecko/.* firefox/0\.9.*$
    [browser_name_pattern] => Mozilla/5.0 (Windows; ?; Windows NT 5.1; *rv:*) Gecko/* Firefox/0.9*
    [parent] => Firefox 0.9
    [platform] => WinXP
    [browser] => Firefox
    [version] => 0.9
    [majorver] => 0
    [minorver] => 9
    [css] => 2
    [frames] => 1
    [iframes] => 1
    [tables] => 1
    [cookies] => 1
    [backgroundsounds] =>
    [vbscript] =>
    [javascript] => 1
    [javaapplets] => 1
    [activexcontrols] =>
    [cdf] =>
    [aol] =>
    [beta] => 1
    [win16] =>
    [crawler] =>
    [stripper] =>
    [wap] =>
    [netclr] =>
)
?>

こんな感じでjavascriptが可能かどうかや、ブラウザのメジャーバージョンまで返してくれるのでかなり便利なget_browserですが、サーバー側のphp.iniの設定が必要になります。

まず、Browser Capabilities Projectから最新のphp_browscap.iniファイルをダウンロードしてきます。リンク先の上から三番目のファイルです(Use only with PHP!と書いてある奴)。それをサーバーの任意の場所にアップロードしてphp.ini内で場所を指定してあげます。

[browscap]
browscap = /path/to/php_browscap.ini

上記設定をしてからサーバー再起動して使えるようになる。この情報を元に振り分けてあげればOKかなっと。

• PHP : get_browser
• Browser Capabilities Project

「sIFR 3」のベータがリリース

以前紹介したFlashとCSS,javascriptを組み合わせてアンチエイリアスなテキストを表示させるためのライブラリ「sIFR」のバージョン3のベータがリリースされたみたいです。以前の記事は「sIFRとアイディアマンズ」

複数のバグフィックス、Flashの改善、対応ブラウザの追加などなかなかパワフルになっています。今後アンチエイリアステキスト表示がデフォルトのブラウザも増えてくるとは思いますが、テキスト中心のサイトでこのような形での表現もいいかもしれません。

ちなみに、デモも更新されてました。ここから表示できます。

• sIFR 3b1: The Mo’ Betta Beta
• sIFR 3 beta 1 : Demo
• sIFRとアイディアマンズ