ホームページのデザインには「色」も大事な要素。画像に使われている色を調べられる「iromiru」さんが便利

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

ホームページを制作するときに考えなくてはいけない要素のひとつとして「色」があります。

たとえば、ホームページの制作を依頼されたとき、依頼内容の中にカラーコードの指定があると助かるのですが、カラーコードまで指定されることはあまりなく。

カラーコードにはブラウザで表示する際に使用する「Webカラー」というのがありまして。それを指定してもらえると作業がはかどります。

スポンサーリンク

Webセーフカラーとは

Webセーフカラーというのは、WindowsとMacの環境で見え方が異なる色を除いた216色のこと。

見ている人の閲覧環境によって、意図した色として表示されずに変換されてしまう可能性があるので、Webセーフカラーを使うことによって見え方を統一することができる、制作者にとって安心して使うことができる色というものです。

いつもお世話になっているのがHTML クイックリファレンスさんです。

WEBセーフカラー216色-WEBカラーリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表

ホームページを構成する要素である「色」には気を遣う

色というのは、人の視覚に影響を少なからず及ぼすものですので、制作にあたるときに実は一番悩むところです。

ホームページを構成する要素といえば、パッと思いつくのが写真です。本来は文字・文章のほうが要素という点ではウェイトが重いのですが、依頼者の多くは見た目を構成する要素である画像(写真やイラストなど)に着目されることが多いです。

が、実はユーザーの見やすさであったり読みやすさであったりというものには、「色」という要素も大きく影響していると個人的には考えています。

あなたのお店や会社のイメージカラーはありますか?

たとえば、お店や会社などのイメージカラーがあればいいのですが、イメージカラー?何それ?なんていう話だとすると、そこからのブランディングになるため時間がかかってしまいます。

だいたいベースとなるカラーを1色決めて、あとは制作したいイメージに合わせて2色の色を選びます。ベースとなるカラーというのは、ホームページを構成する色の中で文字を除くと使用する分量が一番多い色となります。

そうはいってもその一色がなかなか見つけられない時に使わせていただいているのが渋谷のWeb制作会社styleさんの「カラー配色で迷わない!シーン別配色見本32パターン」というページ。

たとえば、「大人の男性を感じさせるイメージ」といった感じで色を使用するシーンを想定して分類された色を見ることができます。

ロゴがあるならそこから色を拾い出すこともある

それから、ホームページを構成する要素の中に「ロゴ」。ロゴに使っている色からイメージを膨らませることもあります。

ロゴの制作もちょこちょこやらせていただいていますが、たいていは依頼者から持ち込まれることが多く、データ自体も印刷用のデータであることが多いです。

ホームページのリニューアルの場合は、既存のホームページがあるのでロゴが掲載されていればそのロゴを確認するのですが、いかんせん制作を請け負ってはいないのでどんな色が使われているかが分かりづらい。

画面を見比べて似ている色のカラーコードを見つけようとすると結構な時間がかかります。そんなときにカラーコードを調べられないかとGoogle先生に聞いてみたら、こんなサイトが見つかりました。

iromiruで画像のカラーコードを調べることができる

iromiruさんです。

画像のURLをコピーしてぺたっと貼りつけて読み込みボタンをポチッとすれば使用しているカラーコードをクリック一つで拾い出してくれます。

こういうカラーコードなのねと分かれば、その色を活かすことができる配色を考えることができます。

色が持つチカラをもう少し勉強したいと思いつつなかなか時間を取ることができないという言い訳をしつつ。こういう情報を提供してくださる人たちに感謝を送りつつ。今日もリニューアル頑張りますっ!

 
リンクユニット
Simple author Box

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

まずはお気軽にご相談ください。相談する

この記事をお届けした
だぶるしーどの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

フォローはこちら

関連コンテンツ