第1章　ホームページ基礎知識

9.ヒューマンインターフェースガイドラインの色について

Webページの作成を行っていて考えるべきことに「色」があります。色彩を考えてWebページをデザインを創っていることは大事なのですが、色は奥深くて多くの経験が必要です。

そんなときは、先人の方の知恵に学んでみましょう。

古くからのMacユーザーやアイコンを作られた方なら、ご存じだと思いますが、アップルには「ヒューマン・インターフェース・ガイドライン 」(英文)があります。

この中でアイコンを作成するときに、使用するべき色と色の技術についてが記述されています。アイコンを作成するResEditアプリケーションを使ってアイコンのデザインを行うためには、「Apple Icon Colors」を選んでくださいとあります。この色は256色のうち34色を使うことが薦められています。(図1)

図1

ResEditのApple Icon Colors

なぜ、この34色なのかは、先のヒューマン・インターフェース・ガイドライン には、34色は、スクリーンに対する「Circus Effect:サーカス効果」を避けるためとあります。サーカス効果は、Circusの文字の通り、様々な色があって、目にうるさく、けばけばしいということです。Macのデスクトップに表示されるアイコンが、なんかわからないけど、そういうセンスを感じていた方もいると思いますが、理由のひとつが、この色です。

Adobeの製品は、Mac OSと密接な関係にあります。この点については競合潤A品よりも勝っています。僕が「Macを使うならAdobe、Adobeを使うならMac」と言っていますが、その理由のひとつが、GoLiveのカラーパレットには、この「Apple Icon Color」が用意されています。(図2)

図2

Adobe GoLive「デスクトップの色」

ただし、「デスクトップの色」と訳されていますから何のこっちゃわかりませんでしたが・・・この件で、アドビのサポートセンターさんに質問しましたが残念ながらそこまで突っ込んだ質問をするのは僕くらいみたいなので電話に出られた方も困ってました。(^^;)

では、どういった色になるのか、カラーコードを記述しておきます。(表1)ただし、この34色はWebセーフカラーではない色もありますから、Webセーフカラーに変換した色も記述しておきます。(表2)

Webでは、テキストや背景色はWebセーフカラーを使った方が無難ですから、Webデザインではこちらを選択するのがいいと思います。

この色を選択するかどうかは、皆さんの判断ですが、「サーカス効果」のことを思い出してもらえれば幸いです。

表1 Apple Icon Colors カラーコード

表2 Apple Icon ColorをWebセーフカラー化