QR Code Stylingは、オリジナリティ溢れるQRコードを生成できるWebサービスです。QRコード内にロゴを入れたり、背景やドットの色を変更することができます。
なお、QR Code StylingはGitHubでソースコードが公開されています。ライセンスはMITです。
QR Code Stylingの使い方
QR Code Stylingにアクセスして、各種設定を行います。右側にプレビューが表示されますので、プレビューを確認しながら設定していきましょう。
Main Options
![QRコードのメイン設定](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling1-641x207.png)
Data | URL |
Image File | QRコードに入れる画像 |
Width | QRコードの横幅 |
Height | QRコードの高さ |
Margin | 余白 |
Dots Options
![QRコードのドットオプション](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling2.png)
Dots Style | ドットのスタイル |
Color Type | ドットのカラータイプ |
Dots Color | ドットの色 |
※Color Typeで「Color gradient」を選択した場合は、Gradient Type(グラデーションのタイプ)・Dots Gradient(グラデーションの色)・Rotation(グラデーションの回転)を設定します。
Corners Square Options
![Corners Square Options](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling3.png)
Corners Square Style | 角のマークのスタイル |
Color Type | 角のマークのカラータイプ |
Corners Square Color | 角のマークの色 |
Corners Dot Options
![Corners Dot Options](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling4.png)
Corners Dot Style | 角のドットのスタイル |
Color Type | 角のドットのカラータイプ |
Corners Dot Color | 角のドットの色 |
Background Options
![QRコードの背景オプション](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling5.png)
Color Type | 背景のカラータイプ |
Background Color | 背景色 |
Image Options
![QRコードの画像オプション](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling6.png)
Hide Background Dots | 画像の背景はドットを非表示 |
Image Size | 画像のサイズ |
Margin | 画像周りの余白 |
各種設定が完了したら、プレビューの下にある[Download]ボタンからQRコードをダウンロードします。ダウンロードするQRコードはPNGとJPEGから選択可能です。
![](https://techmemo.biz/wp-content/uploads/2022/01/qr-code-styling7-298x400.png)
あとがき
ロゴを入れて色を変えるだけでもだいぶ印象が違いますよね。
サイトやチラシなどに設置するQRコードでオリジナリティを出したい時はぜひご活用ください。