お役に立ちそうなテーマについて解説しています

QRコードが目立ちすぎる・浮いてしまうときの4つの対処法



デザインにおいて、QRコードがデザイン性や全体のバランスの邪魔になったりするのはよくある悩みです。

目立たないようにし、なおかつ読み取りに支障が出ないようにする解決方法をいくつかご提案してみたいと思います。




  黒(墨ベタ一色)で作らないで、グレーにする   


意外と黒(#000000)だと目立ってしまいます。
多少は薄い色でも大丈夫です。コントラストは60%もあれば支障はありません。

下記のサンプルは #555555 です。冒頭右上の画像よりも、落ち着いて見えませんか?




 さらにコントラストを押さえる    


背景色も、白ベタ(#ffffff )でななく、テーマ色のごく薄い色にすることで、
さらにデザインにマッチさせることが出来ます。



  サイトのテーマカラーに合わせる   

カラーパレット的に溶けこんだ色にするのも王道です。
色の指定は当サイトで可能です。

 → 無料QRコード作成サイト





  半透明にする    


これがオススメです。簡単で即、効果的。しかも、画像を作りなおさずに済みます!

ウェブサイトに載せているようなとき限定ですが、
HTMLタグで簡単に目立たないようにするには、下記のような半透明のスタイルを適用します。

CSSの例: 
<img style="opacity: 0.8 ; filter: alpha(opacity=80);" src="~
        使用サイトの例: 右側のサイドメニューに半透明QRコードがあります
        https://memologue.blogspot.jp/



これですぐに薄い色になります。
サイトのテーマカラーも透過でき、上記3つのテクニックが全て網羅されます。




以上、お試しになってください。


このサイトをつぶやく
  𝕏・twitter