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

  1. TOP
  2. みんビズ制作講座 色について考えよう : 第3回 テーマカラーをアレンジして色を配置する

エキスパートコラム

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

第3回:テーマカラーをアレンジして色を配置する

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

2012年8月22日更新

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

閲覧数5,318views

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

色を選ぶ場合、「どんな色を使うのか」ではなく、「どんな色をどれくらいの分量で使うのか」が重要です。同じ色でも使い方次第で印象はまったく変わってしまうのです。第3回となる今回は、テーマカラーを元に配色を作り、配置する手法をお伝えします。

基本となる配色技法

同系色の配色・トーンを使った配色

配色テクニックの中で最も基本とされるのは、近い色相でまとめた同系色の配色となります。ただし全体を1つの色だけで配色すると、ややぼんやりした印象になるため、明るい色と暗い色を組み合わせて使うことで、メリハリを付けるようにします。

同系色の配色

またトーンを揃えて色相を変えるという方法も使えます。

トーンによる配色

使う色相を増やすことで配色に動きが生まれます。

追加する色は少量ずつがセオリー

ここで忘れてはならないのは、色の分量です。最も伝えたい色よりも他の色が増えてしまうと、元々の色の印象は薄れてしまいます。

色は基本的に使う面積が大きければ大きいほど強い印象を与えます。使う色を増やす場合には少量ずつとし、元の色の分量を超えないようにすると、配色はまとまりやすくなります。

色の分量を考えた配色構成

色を配置する

全体の背景色に気をつける

画面上で最も大きな色は、全体の背景色となります。テーマカラーがあざやかな色である場合、にぎやかな画面に感じられ、本来伝えたい情報に視線が向かいにくくなります。それを避けるため、背景色には高彩度色を使わず、彩度を下げた色やグラデーションなどを利用します。

背景色のような大きな色をベタ塗りにすると、素人っぽさが出るため、柔らかいグラデーションや素材感・質感が感じられる色を使うとよいでしょう。

ベタ塗り以外の背景色の例

また色の印象そのものは弱くなりますが、背景色を白にするとすっきりとまとまりやすくなります。全体の背景色を使うか使わないかを先に決めておくことで、他の部分の配色を行いやすくなります。

ロゴの周囲に気をつける

Webサイトを使ってサービスや企業名を認知してもらうためには、ロゴや社名・サービス名が読めなければなりません。そのためには背景との明度差を大きくします。ヘッダ部分に背景色や背景画像を使いたい場合には、周囲に余白を設けたり、文字に影を付けるなどの配慮が必要です。

ロゴを見せるための工夫

重点的に色を配置したい場所

ページによって掲載内容は変わりますが、ヘッダやサイドバーはあまり変わりません。色で印象に残したいのであれば、変化の少ないヘッダとサイドバーで印象を固める必要があります。

色を重点的に配置したい場所

どのようなテンプレートを使うかにもよりますが、常に表示されるものにテーマカラーを利用して、閲覧者に印象づけるようにしたいものです。

最終回となる次回は、全体のバランスを考えた色の配置・調整などを学んでいきます。

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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