【配色の知識】黒が表現するイメージとは? | アメブロで個人事業主が集客するための方法

【配色の知識】黒が表現するイメージとは?

は重厚感やシャープなイメージを表現する時に使用します。

以下のような印象を与えたいアメブロにピッタリです。
 ・高級感
 ・特別感
 ・スタイリッシュ感

ただ、アメブロのように、
文章を読んでもらうブログなどの記事部分の背景を黒にしてしまうと
読みづらくなってしまうので、気をつけたいところです。

ヘッダー背景色や、ブログ全体の背景色を黒にし、
記事部分を白系統の色にすると記事部分が強調され、
読みやすくなります。

このアメブロのように↓

あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-黒7
OLが副業-複数の収入源をもちませんか?別ウインドウのtakakoさんのアメブロ



黒を使用したサイト紹介
※画像をクリックすると参考サイトを直接確認できます。

横三角白と黒のツートーンカラーでシンプルなスマートさを表現


あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-黒3

タイトル部分とメニューリンクは黒背景にし、
メッセージ部分を白背景にすることにより、
伝えたい事をハッキリ表現することができます。

シンプルでスマートさを出す色の組み合わせです。


横三角特別感を表現する

あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-黒4

黒地に切り抜き画像をのせると、その画像を特別なものに魅せる効果があります。

たくさんの画像を並べても特別感は出ますが、
上記のサイトのように、画像の数を少なくすることにより、
スペシャルなイメージを表現できます。

「自慢の商品を魅せたい。」という時にこのデザインにすることをお勧めします。


横三角黒でもポップなイメージを表現する

あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-黒1

シックなイメージを表現する黒ですが、
明るい色(たとえば、赤やオレンジ、黄色、ピンクなど・・・)と合わせると
ポップなイメージを表現することができます

また、上記のサイトのように、
黒背景に、ポイントで黄色を使用することにより、
そこに視線を集められるようになります。

上記のサイトの中で一番目立つ場所は中央の画像ですが、
その下に黄色地があるのでより視線を集められるのです。

アメブロの場合、
黒背景のヘッダーにメニューリンクを黄色にすると効果があります。


横三角番外編

あなたのアメブロが読者を魅了するオリジナルデザインにカスタマイズできる~簡単なCSS編集方法-黒2

上記サイトのデザイン、おもしろくないですか?

黒背景には、白文字が一番読みやすいです。


と、今回は5サイトを紹介しました。

さきほども申しましたが、
アメブロの記事部分に黒背景を使用すると読みづらくなってしまうので、
ヘッダーなどの一部分で使用することをお勧めします。

<< 関連記事 >>
▲【配色の知識】赤が表現するイメージとは?
▲【配色の知識】青が表現するイメージとは?
▲【配色の知識】緑が表現するイメージとは?