0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【初心者向け】ホームページの背景色に使えそうな色・画像まとめ

Posted at

#どうも7noteです。背景色につかえそうな色をまとめてみました。

多くのwebサイトが白背景の黒文字になっていますが、webサイトにこだわりを出している会社なんかは実は白以外の背景色を使っていたりもします。
そんなおしゃれなサイトを作るための参考として、ホームページで背景色として使えそうな組み合わせをいくつかまとめてみました。
これだけに限らず、色には様々ないろがあるのでこだわりの一色をさがしてみてください。

「文字:黒」で映える背景色

・ 白
FFFFFF.png
F2F2F2.png
F4F5F7.png

・ ベージュ(赤)
ECCBC1.png

・和紙風
washi.png

「文字:白」で映える背景色

・黒〜グレー
000000.png
6D6D6D.png

・青
#571DF0.png

・茶色
7B593A.png

※あまり濃い色が多く見えてしまうとサイトがキツイ印象なってしまうので注意!

まとめ

文字も真っ黒の#000ではなく#333くらいにする方が少し柔らかい印象になりますし、
白文字も真っ白でない方が綺麗に見える場合もあります。

ただ、オシャレな色を選ぶ際は視認性もしっかり意識して選ばなければなりません。

以下のサイトでコントラストチェックをして視認性が良いか判断することができます。

ブログなんかは特に文字も多く読むテキストばかりなので、視認性はとても重要になってきます。

参考:
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
http://degitekunote.com/blog/2015/06/29/background-color/
https://www.heyblend.com/
http://talking-ultrasuede.jp/

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?