何気なくmixiをうろうろしていたのですが、ウェブサイトの色に関するコミュニティがないのに気づいたので作ってみました。

コミュニティ「ウェブサイトの色彩を考える」

» 続きを見る

あっという間に12月になってしまいました。そろそろ年賀状の準備、大掃除もろもろのことも考えていかねばなりませんね。

» 続きを見る

mixiのデザインがリニューアルされましたね。まあオーソドックスな配色ですし、可読性も基本的には足りているので（足りないと思われる部分も結構ありますが）、読めるようにはなっていますね。だからと言って、読みやすいかというと、そういうわけでもありません。変更されたデザインに慣れていないのを差し引いても、微妙な感じになってしまいました。

全てをチェックしたわけではないですが、「明るいオレンジに依存しすぎ」「余白の取り方が上手くない」「コントラストの付け方がおかしい」「導線が考えられてないな」くらいに集約されるのかなと思います。

（うわっ、思ったよりたくさんあった・・・）

いろいろな媒体で、配色の基本について書いたり、話したりする機会がありますが、その内容はいつもごく簡単なことばかりです。色の組み合わせ、ユーザビリティに関する部分も基本ばかりです。特にユーザビリティについては、ここ数年ずっと愚直なまでに「リンク色の使い方」と「文章の見せ方」について話している気がします。

現在、とあるネットショップの配色のチェックと改善に取り組んでいます。デザインもショップの店長さんが手がけていて、基本のレイアウトなどはショップらしく出来上がっているのですが、目を見張るほど美しいような配色でもありません。色の組み合わせそのものも悪いとは思いませんが、使い方で損をしているなというのが正直な印象です。しかしデザインのプロでないネットショップのオーナーさんなどに、配色のテクニックやデザインの技術を求めるのは、酷なことであるような気もします。そのようなプロではないのですから・・・。

とは言うものの、色彩を使って何を伝えたいのかを考え各部をチェックし、現在のマイナス点を改善して、0に持っていくのはそれほど難しいことではないと考えています。

自分でデザインする人にとってはマイナスからの脱却、クライアントのためにデザインする人にとっては、良いデザインのための基盤作りという形で、難しい知識を必要とせず、即効性のある改善を言い続けることで、少しでもウェブサイトの色彩環境が良くなっていけばと思っています。

ちなみに「Web配色デザインのセオリー」の執筆時に一番大変だったのは、スクリーンショットを集めることでした。きれいな配色のサイトを見つけることは簡単なのですが、ユーザビリティやアクセシビリティなどがトータルで申し分なく出来ているサイトというのは、ほとんどありませんでした。

と言うことは、まだまだ同じ事を言い続ける価値はありそうですね。

8月31日のCSS Nite in Osaka, Vol.5の音声とプレゼン資料が公式ブログの方にアップされたようです。

今回は「使いやすさのための色の識別」ということで、相変わらずものすごく基礎的なお話をさせていただきました。

本に掲載させていただいたスクリーンショットを探した時にも感じたことなんですが、きれいであるとか、使いやすいとか、印象に残りやすいとか、それぞれの部分は上手く出来ているサイトはたくさんあるのですが、それがトータルで出来ているサイトって、実はほとんどなかったりします。

特にリンクの範囲などの場合は、PhotoshopとかFireworksなんかで作ったカンプなどでは、想像しにくい部分もありますので、ここいらはぜひデザイナーさんやディレクターさんなどにもぜひ考えていただきたいなという部分です。

配色の技術も色を使ったアクセシビリティ・ユーザビリティの向上も、細かいことの積み重ねだと思います。

昨日、CSS Nite premiumで喋ってまいりました。ご来場いただいた皆様、ありがとうございました。

個人的には以前からお会いしたかった矢野りんさんとご挨拶できてうれしかったです。

矢野さんのセッションで「白い背景でよいのか」という問題提起がありまして、それについては僕ももっといろいろと研究する必要があるなと思いました。

メモ書きですが、現時点で私が白背景を推奨しているのは以下の理由によります。

• サーチエンジンから来訪した場合や、いくつかのサイトを並べて比べられた場合などに、暗い印象を持たれてします可能性の排除
• ブラウザの機能やCSSで指定されたものをほとんどの一般人は変更できないが、目の前にあるモニタを調整することはそれほど難しくない。テレビの輝度の調整は昔からある機能だから

もちろん最初から白い背景によるイメージを除外して排除する場合には、これには当たりませんが。

ここに突きつけられたのは、wiiなどテレビでインターネットを見る場合の問題です。大きなテレビが家庭に増えていますから、白背景での輝度は大変なものになることが普通に予想できますね。

もう一つ、矢野さんに加えて、大阪市立大学の中野教授からも（飲み会の席で）、プラズマテレビの焼き付きの問題についてお話いただきました。これは深刻な問題です。

私自身がテレビでウェブサイト閲覧したことがないので、頭から抜け落ちていましたね。今後は留意しておこうと思います。

ひとまずはCSSのメディアタイプをscreenとtvで分けるところから始めるとしましょうかね。

Web Site Expert #12が発売されました。今回はいつもにも増して盛りだくさんな気がいたします。私の方の連載「Webカラーコーディネートレッスン」では『色によるサイトのブランディング1』ということで記事を書かせていただきました。

新規でサイトを制作する場合、既に強力な競合サイトがいくつか存在しているということも多いはずですが、その中で埋もれてしまわないようにするための色の決め方についてあれこれ説明しています。1回で収まりきらなかったので、次号に続くわけですが・・・。

Web配色チェックではpaperboy&co.の3つのホスティングサービスの配色の比較などを行ってみました。サービスを取り上げて比較する記事はたくさんありますが、その色についてあーだこーだ言ってるのは、きっと最初で最後になるでしょう（笑）

そんなわけでご興味があれば、ぜひどうぞ。

CSS Niteと言っても、このブログの読者の方には知らない方も多いと思いかもしれませんが、平たく言えばウェブに関するイベントでございます。

今回のはCSS Nite premiumということで、そのスペシャル版が登場しました。

私の方は「ウェブサイトの色彩設計とは？」というタイトルで

ウェブサイトの色彩は、クライアントやデザイナーの好みだけで決めてよいものではありません。色を論理的に構築して使うことで、説得力のある色彩を作りだし、デザイン上でコントロールしやすくなります。

配色より一歩進んだ、ウェブサイトの色彩設計という考え方を紹介します。

みたいなことをお話しするわけですが、「AISHAにおけるWeb制作のワークフロー」にも登場しまして、あれやこれやと実例についてもお話しします。案件ベースの話はなかなかご紹介できる機会もないので、ご興味のある方はぜひどうぞ。

と自分中心の紹介をしてみましたが、個人的には矢野りんさんの話を聞けたり、レイアウトの添削をしてもらえたりする機会なんてまずありませんので、聞き手としても楽しみにしております。