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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第5回 テーマカラーの選び方と組み合わせのコツ

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第5回:テーマカラーの選び方と組み合わせのコツ

執筆:服部 雄樹(服部制作室)

2016年8月1日更新

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

閲覧数2,063views

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

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムではメインビジュアルについて解説しました。第5回目となる今回は、テーマカラーの選び方や組み合わせのコツを解説します。

色が与える心理的な影響

Webサイトに限らず、私たちは色に囲まれた生活をしていますが、それらの色から受ける心理的な影響を意識しながら暮らしている方はどれくらいいるでしょうか。

実際、私たちは何かの行動をするとき色から大きな影響を受けています。例えば信号を思い浮かべてみてください。世界中どこへ行っても「赤」が”止まれ”です。

これは「赤」という色に注意を促す心理的な効果があり、人は赤いものを見ると無意識的に「注意」「注目」するという特性を利用しているからです。逆に「緑」(青信号)には安心感を与える効果があるため、「緑」が”進め”なのです。

信号のように公的なものに限らず、さまざまな商品や広告の「色」には作り手の意図が込められており、皆さまがWebサイトを制作する際にも細心の注意を払う必要があります。それぞれの業種に合った色を選ぶことはもちろん、複数の色を使う場合には違和感のない組み合わせにすることも重要です。

そこで今回は、色の知識がなくても簡単にバランスの良い色を選べるテクニックをいくつか紹介します。

なお、色についてより理解を深めたい方は、以下のコラムに非常に分かりやすくまとめられていますので、ご一読されることをオススメします。

メインカラーが決まっているなら「HUE/360」が便利

私がJimdoユーザの方からよく受けるご相談の1つに「メインカラーは決まっているけど、それに合った配色を選ぶのが難しい」というものがあります。
そんなときは「HUE/360」(http://hue360.herokuapp.com/)というサービスが便利です。

画面に表示されている色の中からメインカラーを選ぶと、相性の悪い色が自動で消えて、相性の良い色だけを残してくれます。その中から好きな色を選ぶだけでバランスの良い配色を作れるという、優れもののサービスです。

放射状のカラーパレットの中からメインカラーを選びます。

すると、メインカラーと合う色だけが残るので、好きな色を選びます。

配色が決まったら左下の「Print User Color」をクリックします。各色のカラーコード(#のついた6桁の英数字)が表示されるので、このコードをコピーします。

そして、Jimdoのスタイルメニューで、上図の点線で囲んだ欄に先ほどのカラーコードをペーストすると選んだ色が適用されます。

ゼロからカラーリングを決めたいなら「Pinterest」が使える

Web上にある画像をブックマークするサービス「Pinterest」(https://jp.pinterest.com/)。自分の好きな画像を収集したり、他の人の収集している画像を閲覧したりできる、いわゆるSNSに近いサービスです(厳密にはSNSではありません)。

私も実際のデザイン業務で主にインスピレーションを得るために頻繁に使用していますが、ゼロからカラーリングを決める際には、Pinterestの検索機能が非常に強力な助けとなってくれます。

まず、上部の検索窓に「tones」と入力します。いろいろな写真と一緒にカラーパレットが表示されます。

さらに追加のキーワード、例えば「Earth」と入力してみます。するとアースカラー(自然色)の画像とパレットが表示されるので、この中から好きなものを選ぶだけ。あとはそれぞれのカラーコードをJimdoのスタイルメニューに入力してください。

もちろん「Earth」でなくても構いませんので、「Sea」「Vegetable」などお好きなキーワードで検索してみてください。きっとイメージに合った配色のパターンに出会えるはずです。
(※キーワードによってはカラーパレットが表示されないこともあります)

色選びに迷ったら「coolors」がオススメ

それでもどうしても色を選ぶのが難しい、という方には、「coolors」(https://coolors.co/)というサービスがオススメです。これはスタイリッシュな色の組み合わせを自動で作成してくれるサービスですが、私のイチ押しの使い方は「画像から色を抽出する」方法です。

前回のコラムで、メインビジュアルは業種に合ったものにしましょうと解説しました。そのメインビジュアルの画像から色を抽出するのです。

まず「Get started」からパレット作成ページに入ります。

上部のメニューバーからカメラのアイコン「Pick colors from image」を選択します。

画像をアップロードする画面になりますので、メインビジュアルの画像をアップします。

すると画像から自動で色を抽出したカラーパレットを作成してくれます。

各色にはカラーコードが表示されますので、それをJimdoのスタイルメニューに入力すれば完成です。

この方法であれば、確実にご自身のWebサイトに合ったカラーを選ぶことができますので、どうしても色を選べない、という方はこの方法が一番簡単かもしれません。

魅力的なWebサイトは色使いも魅力的

Webサイトの配色は、第一印象だけでなく最終的なコンバージョンにも大きく影響します。良いWebサイトは往々にして配色も優れているものです。上で紹介したような便利なツールを使い、ぜひ魅力的な色使いのWebサイトを作成してください。

次回は、Jimdoに新しく追加された画像編集機能をご紹介しながら、画像のトリミング等について解説します。

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

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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