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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第6回 シンプルな色設定でテーマカラーを印象づけよう

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第6回:シンプルな色設定でテーマカラーを印象づけよう

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

2017年9月19日更新

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

閲覧数596views

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

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第6回目となる今回は、Webサイトの「色」を設定する際のポイントについて解説します。

色の与える心理的効果は大きい

私たちは日常生活の中で様々な色を目にしています。色の与える心理的な効果は大きく、もちろんWebサイトにおいても例外ではありません。「BrandColors」というサイトには、皆さまもよく知っている有名企業のブランドカラーがまとめられており、様々なブランドのイメージカラーを見ることができます。

例えばコカ・コーラと言えば「赤」がブランドカラーですが、同じ赤でもYouTubeの赤とは違うことが確認でき、色を見るだけでその企業を連想できることから、色の持つ力がいかに大きいかが分かります。

Webサイトを作るとき、自社のブランドカラーを使用することはブランディングの観点からも非常に大切です。ブランドカラーを持っていなければ、Webサイトの色が自社のブランドカラーとして認知されていくことも考えられますので、この機会に「自社の色」を決めてしまうのもいいでしょう。

色は多用しないことがキレイに見せるコツ

では、色はどのように決めるべきでしょうか。どんな色を使えばいいか分からないという方は、以前のコラムにテーマカラー選定のポイントをまとめていますので、参考にしてみてください。

使用する色が決まったら、実際に設定に入る前にひとつ大切なポイントがあります。それは「色を多用しない」ということです。ブランドカラーを赤と決めたら、青や緑は不用意に使用してはなりません。たくさんの色を使ってカラフルにしたいところですが、複数の色を組み合わせるのは専門的なスキルが必要なので、テーマカラー+差し色1色程度に留め、あとはモノトーンにするのがすっきり見せるコツです。

ナビゲーションバーとボタンの色を変更する

それでは実際の設定方法を解説します。今回はサンプルサイトのレイアウトである「Zurich」で解説します。細かい設定はJimdoのレイアウトによって異なるため、ご自身でお使いのレイアウトに合わせて応用してください。

まずはJimdoの管理メニューからデザイン→スタイルの順に進み、スタイル編集画面に入ります。

管理メニューから、デザイン→スタイルの順に進む

はじめにナビゲーションバーの色を変更しましょう。ナビゲーションバーをクリックし、背景色を設定する画面に入ります。サンプルサイトでは水色をテーマカラーにしているので、水色に設定します。

ナビゲーションバーをクリックし背景色の編集画面へ

テーマカラーである水色に変更

爽やかなイメージにしたいので、今回は各メニュー項目の色を白に、マウスを置いた時の色(activeと書かれた項目)を薄いグレーに設定します。

メニュー項目の色が変更された

続いてボタンの色を設定します。ボタンのスタイルは、あまり存在感が強くなりすぎないようにシンプルなスタイルにするのがオススメです。以下のように設定すると「マウスを置いたときに色が反転する」ボタンを作成することができます。

↑の設定で、シンプルかつ機能的なボタンが作成できる

フッターに暗めの色を設定すると重心が安定する

最後に、一番下の共通エリア(フッター)の色を設定しましょう。これまでと同じ水色を使用してもかまいませんが、下の方には暗めの色を置くと重心が安定し全体のバランスが良くなります。テーマカラーと同系色の暗い色を指定しましょう。

こういったときに役立つツールが「colllor」です。これは、指定した色に合う色を自動で表示してくれるツールです。

指定した色に合う色を自動で表示してくれるツール「colllor

colllorのトップページの「Pick color」というボタンをクリックし、自サイトのテーマカラーを入力します。色の入力には様々な方法がありますが、今回は「R」「G」「B」の3つの項目を使用します。

colllorの色の指定は「R」「G」「B」の3つの数値で指定する

RGBの数値が分からないという方は、Jimdoのスタイルメニューから確認することができます。下の画像の枠の中に表示されている「rgb(9,198.,221)」のカッコ内の数字が、左から「R」「G」「B」を表しています。この3つの数値をcolllorに入力します。サンプルサイトの水色の場合は、R=9、G=198、B=221ということになります。

RGBの数値はJimdoのスタイルメニューから確認できる

入力が完了すると、入力した色に合う色が自動で表示されます。この中から暗めの色を選びます。今回は一番上の項目の左から2番めの色を選びました。色を選択すると「#◯◯◯◯◯◯」という6桁のカラーコードが表示されるのでこの値をコピーします。

入力した色に合う色が表示される

カラーコードをコピーする

Jimdoのスタイルメニューに戻り、共通エリアの背景色を設定する項目に、先ほどコピーしたカラーコードを入力すると共通エリアの色がcolllorで選択した色に変更されます。

colllorからコピーしたカラーコードをJimdoに入力する

共通エリア(フッター)の背景色が変更された

最低限の変更でもテーマカラーを印象づけることは可能

これでカラーリングの設定は完了です。左が設定前、右が設定後です。このように、最低限の変更でもテーマカラーである水色をしっかり印象づけることができています。

最低限の変更でもテーマカラーを印象づけることができる

色の設定はとにかく「やりすぎないこと」がコツです。今回はナビゲーションバー、ボタン、共通エリア(フッター)の3箇所だけの変更ですが、これだけでもイメージを変えることは十分可能です。全体をシンプルなモノトーンにすることで、少しの使用でも効果的に色を印象づけることができるのです。ぜひ皆様のサイトにも応用してみてください。

次回は、テキストの読みやすいレイアウト方法を解説します。お楽しみに!

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

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

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

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

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

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

HTML&CSSとWebデザインが 1冊できちんと身につく本

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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