スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 色について考えよう : 第1回 Webに必要な色の基本を知っておこう

エキスパートコラム

みんビズ制作講座:色について考えよう(全4回)

第1回:Webに必要な色の基本を知っておこう

執筆:坂本 邦夫(フォルトゥナ)

2012年7月5日更新

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

閲覧数16,728views

このコラムをPDF形式でダウンロードする

「色について考えよう」ではWebの色の基本について学んでいきます。Webの配色は自分の好みだけで決めてはいけないのです。訪問者のイメージに合わなかったり、読みにくい・使いにくいなどの理由で、すぐに立ち去られてしまうのがWebサイトの怖いところです。どんなに中身がよくても伝わらなければ意味がありません。第1回目となる今回は、みんビズで色を決めるために最低限知っておきたい色の基本設定について解説します。

みんビズのカラーピッカーで色の基本を知る

みんビズのカラーピッカー

みんビズのカラーピッカーの一つ

既にみんビズを使って色を決めたことのある方なら、図のようなパネルを見たことがあると思います。文字の色や背景の色を決める際には、このカラーピッカーを使うことで様々な色を作れるので。今回はあらためてこのパネルを見ながら色の基本を学んでいきましょう。

色み(色相)を変える

色を決める場合には、「ここは赤にしよう」とか「かわいらしいピンクの背景色を作りたい」のように考えることが多いと思います。そのような場合、まずは(1)を操作し、赤や青・紫のような作りたい色に近づけます。このような色みの違いを色相と呼んでいます。

色相の違い 参考例

(1)の色を変えると(2)の部分の色も一緒に変わります。この(2)の部分の色が実際に作られた色です。

明るさ(明度)・鮮やかさ(彩度)を変える

色みを変えたら次は(3)の部分を操作して明るさと鮮やかさを変えましょう。明るい色(明度が高い色))にしたければ、○のポインタを上の方に移動させ、暗い色(明度が低い色)にしたければ下の方に移動させるのです。色の明るさは明度と呼ばれます。

(3)の左右は色の鮮やかさを表します。色の鮮やかさは彩度と呼ばれます。右にいくほど鮮やかで派手な感じの色(彩度が高い色)になり、左にいくほどくすんだ地味な色(彩度が低い色)になります。

明度の高い色・低い色 参考例

この彩度が一番左にある場合、色は白・灰・黒のいずれかになり、色相を変更しても色は変わらなくなります。このような色相も彩度も感じられない色を、彩度が無い色ということで「無彩色」と呼びます。

彩度の高い色・低い色 参考例

Webの色表現方法

(4)の部分には6桁の数字(文字)が入っています。これは作られた色によって変わりますが、(2)の色をRGB値というもので表現したものです。配色見本などの本を買うと、頭に#の記号が付いた形で「#000000」や「#CF6A32」のような形で記述されています。

もう一つのカラーピッカー

みんビズのもう一つのカラーピッカー

みんビズにはもう一つのカラーピッカーが存在します。文字の色を決める場合に出てくるものですが、これは色相・明度・彩度を1つにまとめたものになっています。ちょっと明るくしたい時や暗くしたいなど微調整がしにくいので、慣れていない場合には、最初に紹介したカラーピッカーの方が使いやすいでしょう。

次回は、絶対に避けるべき配色と、基本となる色の選び方と配置について学んでいきます。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/6/11~2017/6/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!