Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

文字の配色テクニック:透明度を使った配色とその応用

文字の色に透明度を使ってみる


Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
MENくん
文字の色を使って上手に配色したいなぁ
くま1号
マテリアルデザインではテキストの色や透明度でキレイに配色できるんだよ
MENくん
なんやて!透明度でやってやんよ!

このページでは、マテリアルデザインっぽい文字色の配色テクニックを紹介します。
MENくん
ぼくのブログでもちょいちょい使ってます。

文字の色について

文字の色は単純に白と黒よりも、透明度をプラスしたり、ちょっとグレーに近い色を使っているサイトが多くあります。
文字の色
文字の色が真っ黒だけでなく「グレー」や「うすいグレー」を使っている場合が多いですよね。
MENくん
例えばGoogleやAmazonでも文字の色は真っ黒ではありません。
黒色について
真っ黒と表現していますが、カラーコードでは#000000と表現されます。RGBでは( 0, 0, 0)です。逆に白色は#ffffffと(255, 255, 255)と表現されます。 カラーコードからRGBを知りたいときはこちらのサイトがおすすめです。 参考 RGBと16進数カラーコードの相互変換ツール - PEKO STEPPEKO STEP

Googleの文字色

Googleの文字色
①検索文字入力欄:#000000、②背景が薄いグレー部分:#777、③背景が白の部分:#545454が使われています。
検索の文字を入力する部分が一番メインであるため、一番濃い#000000の真っ黒をしようしていますね。検索結果の文字はコントラストをおさえた#545454を使っています。

Amazonの文字の色

Amazonの文字の色
①検索文字入力欄:#000000、②商品下の黒い文字:#555が使われています。
Amazonではこれ以外の黒い文字はほとんど#111が使われています。 2つのサイトを見ても、検索文字入力欄以外は真っ黒(#000000)を使用していないことがわかります。

コントラストを抑えた黒い文字

コントラストが強すぎると目が疲れやすくなります
コントラストキツめ 文字色000000
Amazonの文字色 文字色111111
 
Googleの文字色 文字色545454
このサイトの文字色 文字色424242
MENくん
少しグレーがかった色のほうが見ていて疲れないですね!

マテリアルデザインの文字色

マテリアルデザインでは文字色について透明度で表現されています。
  • メインの文字:#000000 透明度87%
  • サブの文字 :#000000 透明度60%
  • ヒントの文字:#000000 透明度38%
マテリアルデザイン的な文字の色
マテリアルデザインでは背景が白(#ffffff)の場合は、黒色(#000000)の透明度を調整して、重要性を表しています。
サブ文字やちょっとしたヒントの文字は透明度を指定してあげることで、ぐっと統一感のあるデザインになります。
MENくん
87%、60%、38%を覚えとけば良いんだね!
くま1号
そうだね。あとはCSSに記述すれば文字の色には悩まなくなるね

カラーコードで透明度を指定

文字の色をCSSで指定する場合、カラーコードを使う場合が多いですよね。ただしカラーコードでは透明度まで指定するには後ろに2桁追加しなければいけません。
カラーコードで透明度を指定
メインの文字(透明度87%) #000000DE
サブの文字 (透明度60%) #00000099
ヒントの文字(透明度38%) #00000061
MENくん
う~ん、ちょっとコードを覚えるのがめんどくさいですね。

RGBAで透明度を指定

RGBにA(alpha:透明度)がプラスされた関数です。
透明度の指定(87%の場合)
.text {
    color: rgba(0, 0, 0, 0.87);
}
RGBAで入力したほうが、直感的に透明度がわかりやすいですね。
MENくん
透明度で迷ったらとりあえずRGBAで書いときゃいいね!
  さて、使用する文字の色と透明度が決まったら実際に使ってみたいと思います。

マテリアルカラーの例(インディゴ)

このブログは白黒をイメージカラーにしています。 そこで、ぼくが次にサイトを立ち上げる際に使いたいと思っているカラー「Indigo:インディゴ」を例に使ってみます。 マテリアルデザインのTools for picking colorsで紹介されているカラーになります。 インディゴcolor
MENくん
いやぁ~かっこいい色ですね♪
このインディゴのなかで今回は #283593 のものをメインカラーで使って行きます。

配色例

配色サンプル
内部リンクのカラーをインディゴでしてみました。透明度を変えて配色するだけでもキレイになりますね。
文字色に適用する透明度を、インディゴにも使ってみました。
MENくん
同じ色で透明度が違うだけなので、統一感のある配色になりますね
文字の色を重要度によって透明度を変えるのにも使えますし、デザインの配色の際にも意外と使えます

まとめ:文字の配色テクニック

文字の色を決める際のちょっとしたテクニックを紹介しました。 メインの文字は透明度87%、サブの文字は透明度60%、ヒントの文字は38%とおぼえておけばOKです。 この透明度を覚えておけば他にも様々な配色に応用することができます
へへへ、これで文字色に悩まなくなるぜ
くま1号
マテリアルデザインを少しだけ勉強できたね