初心者でも出来るホームページの作り方ガイド

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

メモ

このサイトは「micata2」「AFFINGER4」の総合マニュアルサイトになっています

デザインは「無意識」への訴求~カラー(色)の決め方と設定

shutterstock_142959790

お陰様でWordPressテンプレート「micata(ミカタ)」で作成した会社のホームページを目にさせて頂く事が増えましたが、なかなか手が出ないのか難しいのか、「カラー」まで気を配っている方は少ないように感じます。

見た人の「無意識の感情」に訴えかける。

それが、カラーの持つ大きな力です。

そこで今回は「カラー」の基本的な考え方とテーマ(micata・STINGER7・AFFINGER3)への設定方法を簡単に説明したいと思います。

カラー(色)について

色の持つチカラ

「色」はそれぞれ与えるイメージを持っています。

は「食欲がわかない」イメージがある為、飲食店などには向きません。その代り、クール・知的というイメージもあるのでIT系の会社のホームページなどでは好まれます。そういった「無意識」に訴える力というのはデザインの本質であり、あなたが思っている以上に大きな効果があります。何度も文字で誠実さを訴えるよりも清潔なカラーのサイトの方が「無意識」故にストレートに心に届くのです。

ホームページが誰の為のものなのか?を考えれば「赤が好きだから赤」という一方通行的な考えは失敗の元となることがわかりますよね。

ほんの一部ですが例えばカラーにはこんなイメージを与える力があります。

情熱・興奮・危険・愛情
若さ・楽しい・注意
元気・暖かい・明るい
平和・安全・幸福・自然・健康
清潔・知性・信頼
魅惑・女性・不思議

2016-03-10_170227

http://www.nikko-pb.co.jp/nk_comm/mok08/html/images/1001g61.pdf

入力した「キーワード」で色を作成するサイト

2016-03-10_165607

http://synthsky.com/iroiro/

iroiroは、入力した文字「色」を表示してくれるユニークなサイトです。日本語にも対応しています。

色の三属性

itai

色には「色相」「明度」「彩度」で分類する三つの属性があります。

簡単にいえば、「色相」は色の違い、「明度」は明るさの違い、「彩度」は鮮やかさの違いです。特にWebサイトでカラーを選ぶ際、標準色は「彩度」が高すぎて目に優しくない為、できるだけ「彩度」を抑えた配色を選んだ方が良いでしょう。

色相環

sikisou

色相環は色相を光の波長順で配列して円形状に示したものです。

対面(反対側)にあるものを「補色」、その近くにある色を「反対色」そして隣り合う色を「類似色」と呼びます。

※色の分け方は様々あります。

色の選び方

カラーは多すぎず3~4色まで

サイトのカラーは3~4色程度+アクセントカラーが良いと言われています。

カラーの3~4色はどうやって選び方としては

  1. 同系色でまとめる
  2. 類似色でまとめる
  3. 同じトーンでまとめる

があります。

「同系色」は、同じ色に白や黒を混ぜた同一色のグループ。「類似色」は先ほど説明した色相環の両隣にあるカラー、「トーン」は同じ色の調子のことで「明度」と「彩度」を合せたグループでまとめます。

同系色でまとめる

今回は一番簡単な方法で「同系色」で作成したいと思います。

決めるカラーは3つ。各カラー名はテーマ用に便宜的に付けただけのものです。今回の色の指定が絶対に正解というわけではありませんが統一感のあるサイトのカラーを作成する事が出来ます。

  • メインカラー(一番濃い色。グローバル及びサイドメニューのグラデーション色の下部、h3タグやh2タグの背景色、スマートフォンのメニューボタンなどに反映します)
  • メインカラー2(メインカラーを少しだけ薄くしたカラーです。グローバル及びサイドメニューのグラデーション色の上部に設定すると綺麗なグラデーションが作成できます。)
  • サブカラー(一番薄い色。サイドメニューの背景やh3タグ、h4タグの背景色など)

メインカラー

メインカラーはサイトの「主要なカラー(メインカラー)」で一番与えるインパクトの強いカラーになります。先ほどお話した、「色」の持つイメージを考えつつまず1つ色を決定します。既に「ロゴ」をお持ちの会社やお店の場合はそれに合わせた方が統一感が出ます。

カラー選択で僕が愛用しているのは「Material Design Colors」です。

http://www.materialui.co/colors

気に入った色をクリックするとカラーコードがコピーされます。

2016-03-10_140414

Webのカラーは先頭に「#」を付けたカラーコードで指定します。上図の場合は「#1976D2」となります。

残りのカラーを決める

2016-03-10_140437

上図のようにシンプルに残りの2つを決めても構いませんが、より繊細なデザインカラーを考えたい場合は「ColorHexa」がお勧めです。

2016-03-10_145256

http://www.colorhexa.com/f2fafe

サイトにアクセスしてメインカラーの「#1976d2」を入力して検索ボタンをクリックします。

2016-03-10_145412

細かいグラデーションや

2016-03-10_145325

類似色、補色(色相環で反対に位置する色)など様々なカラースキームも確認できます。

HUEなどを使用したカラー作成も人気です。

テーマのカラーを設定する

2016-03-10_154120

テーマ専用管理画面の「オリジナルカスタマイザーを使用する」にチェックを入れると様々な箇所のカラーを「外観」→「カスタマイズ」で変更出来るようになります。

2016-03-10_150026

3つカラーを決めたら、そのカラーだけを軸に設定していくのがポイントです。

統一した方が良いと思うカラー設定一覧

2016-03-10_160828

メインカラー

【基本カラー】
・タイトル色など・メニュー(背景色上部)・スマートフォンアコーディオンメニューとページトップボタンスマホメニュー文字色)・ヘッダー上に3pxのラインを追加)・フッター(背景色上部/背景色下部)

【[+]各見出し色】
記事タイトルタグ( 背景色下部)・H2タグ左ボーダー色・文字色)・H3タグ( 文字と下線色)・サイドバー見出し色

【[+]オプションカラー】
お知らせ (背景色下部)・問い合わせフォームボタン( 背景色下部)※micataのみ

メインカラー2

【基本カラー】
・メニュー(背景色下部)・ドロップダウンメニュー背景色

【[+]各見出し色】
記事タイトルタグ( 背景色上部)

【[+]オプションカラー】
お知らせ (背景色上部)・問い合わせフォームボタン( 背景色上部)※micataのみ

サブカラー

【基本カラー】
サイド固定ページメニュー(背景色)・ヘッダーウィジェット( 背景色)

【[+]各見出し色】
H2タグ背景色)・H3タグ (背景色)・H4タグ (背景色)

※グローバルメニューとサイド固定ページ用メニューカラーは連動しています
※全て設定する必要はありません。

面倒かもしれませんがサイトのイメージが格段に変わるのでしっかり設定しましょう

 

良ければ以下の記事もぜひ、お読みください。

WordPressカスタマイザーで配色するSEO的な懸念事項と解決方法

人気記事

kawaii 1

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイトが「可愛い!」と特に女性の方から非常に好評をいただきました。 今回の参考サンプルサイト ただ現在「STI ...

2

ホームページを今まで沢山作ってきましたが、リニューアル案件以外の方はやはり「予算重視」である場合が多く、こちらの言う「大切」な事とか「重要な事」なんていう意見は「わかっているけど・・・」とはいうものの ...

tonkotu 3

今回はまず、ベースとなる「ホームページのタイトル」の考え方と下層ページコンテンツに何を作るべきかを考えていきます。 「タイトル設定」はまず最初に行うべき事であり、またホームページの命運を分ける最重要項 ...

投稿日:

Copyright© ホームページ作成なら無料テンプレートのmicata(ミカタ) , 2016 AllRights Reserved Powered by AFFINGER4.