チラシやスライドにWebページのURLを載せるとき、短縮URLの発行とQRコードの生成を別々のサービスでやっていませんか。x.gdで短縮して、別のQRコード生成サイトにチラシやスライドにWebページのURLを載せるとき、短縮URLの発行とQRコードの生成を別々のサービスでやっていませんか。x.gdで短縮して、別のQRコード生成サイトにURLを貼り直して、色を変えたければまた別のツールを探して……という手間が積もり積もって面倒になったので、Chrome拡張機能を作りました。Chromeウェブストアで公開しています。無料です。
この拡張機能でできること
ツールバーのアイコンをクリックすると、今開いているページのURLを自動で取得します。あとはボタンを押すだけで、x.gd APIによる短縮URLの発行と、QRコードの生成が一度に終わります。結果は別タブで開き、短縮URLのコピーも、QRコード画像のダウンロード（PNG / SVG）もその場で完了します。QRコードは画像のままクリップボードへコピーもできるので、ファイルに保存する手間なくスライドへ直接ペーストできます。
短縮URLを発行せず、元のURLのままQRコードだけ作るモードも用意しました。社内ページなど、外部サービスに投げたくないURLのときに使えます。
QRコードのデザインは設定画面でカスタマイズできます。変更できる項目は次のとおりです。
- ドットの形（四角、角丸、丸ドットなど6種類）
- ドット・背景・位置検出パターン（四隅の大きな四角）それぞれの色
- 背景の透過（PNG / SVGどちらも対応）
- 中央へのロゴ画像の埋め込みと、その大きさ・余白
- 画像サイズ（256〜1024px）、余白、誤り訂正レベル
もうひとつ、短縮URLには「読みカナ」が付きます。URLの可変部分を1文字ずつ「数字のサン」「小文字のキュー」のように表示する機能で、文字種ごとに色分けされ、0とOと1とlのような紛らわしい文字は枠付きで強調されます。この読みはテキストとしてコピーでき、色付き（Wordやパワポに貼ると色が再現されます）と白黒の2種類から選べます。
設定画面にはライブプレビューが付いていて、いじった結果がその場で確認できます。保存ボタンを押す必要はなく、変更は自動で保存されます。
他の類似サービスとの違い
短縮URLサービスもQRコード生成サービスも世の中にたくさんあります。そのうえでこの拡張機能を使う理由になるのが、次の2点です。
短縮URLの「読み方」も文字で出力
ひとつめは、短縮URLの「読み方」が付いてくることです。スライドで観衆にサイトを紹介するとき、URLは読み方の説明をしなければならないケースがあります。「これは小文字のエルです、数字のイチじゃなくて」というあれです。この拡張機能は可変部分を1文字ずつ「小文字のエル」「数字のイチ」と表示し、読み方そのものもコピペできるので、説明を考える手間ごと省けます。発表者ノートに貼っておけば本番で詰まりません。
QRコードをクリップボードにコピー
ふたつめは、QRコードをクリップボードに直接コピーできることです。スライドを作るときって、だいたいスライド作成ツールとブラウザーを並べて作業していますよね。その状態でQRコードを一度ダウンロードして、ファイルを探して、画像として貼り付けて……というのは面倒です。この拡張機能は「画像をコピー」を押してスライド側でペーストするだけ。何手間も省けます。
インストール
Chromeウェブストアの拡張機能ページを開いて「Chromeに追加」を押すだけです。インストール後は、ツールバーのパズルピースアイコンからピン留めしておくと使いやすくなります。
URL短縮 & QRコード（x.gd） - Chromeウェブストア
最初にやること：x.gdのAPIキーを設定する
短縮URLの発行にはx.gdのAPIキーが必要です。無料で取得できます。
- x.gdの開発者ページを開き、ページ下部の「APIキー」欄にメールアドレスを入力して送信する
- 届いたメールのリンクから発行手続きをする（送信から24時間以内）
- 発行された32桁のキーを、拡張機能の設定画面に貼り付ける
設定画面は、ツールバーのアイコンを右クリックして「オプション」を選ぶか、ポップアップ下部のリンクから開けます。
入力したAPIキーは自分のPCのChrome内にだけ保存され、x.gd以外に送信されることはありません。API利用の上限も自分のキー単位でカウントされます。
なお、APIキーを設定しなくてもQRコード生成だけは使えます。短縮URLが不要なら、キーなしのままでも十分役に立つはずです。
使い方
QRコードにしたいページを開いた状態で、ツールバーのアイコンをクリックします。ポップアップに現在のページのURLが表示されるので、「短縮URLを発行してQRコードを作る」を押してください。
別タブが開いて、短縮URLとQRコードが表示されます。
短縮URLは「コピー」ボタンでクリップボードへ。
QRコードは「PNGでダウンロード」か「SVGでダウンロード」で保存します。
印刷物に載せるならSVG、そのまま画像として使うならPNGが便利です。
これだけです。ワンクリックで済むように作ったので、説明することがあまりありません。
こんなシーンで活用できる！
講演・スライドでのサイト紹介
そもそもこの拡張機能を作った動機がこれでした。スライドでWebサイトを紹介するとき、スマホの人はQRコードを撮ればいい。でもPCで聞いている人にQRコードは役に立ちません。手で打てる短い文字列、つまり短縮URLのほうが親切です。だから両方を同時に出したくなる。会場からの「エルですか？イチですか？」には読みカナで先回りできます。
名刺
名刺の裏にQRコードを載せて、プロフィールサイトやポートフォリオへ誘導する定番の使い方です。僕の名刺にも、このブログのポートフォリオページへのリンクをQRコードにして貼っていますよ。
中央にロゴやアイコンを入れたQRコードなら名刺のデザインにも馴染みます。SVGでダウンロードできるので、印刷入稿データにきれいなまま配置できるのもポイントです。
チラシ・パンフレット
紙媒体からWebへ誘導するならQRコードと短縮URLの併記が確実です。QRコードを読み取れない人、読み取りに慣れていない人のための保険として短縮URLを添えておく。紙は刷ってしまうと直せないので、掲載前の実機読み取りテストだけは忘れずに。
SNS・メルマガ
文字数制限のあるSNSでは短縮URLが役立つことがあります。メルマガでも、長いURLが途中で改行されてリンク切れになる事故を防げます。x.gd側でアクセス解析を有効にしておけば、どの投稿からの流入が多いかも追えます。
ポッドキャスト・動画・ラジオ
音声だけでURLを伝える場面こそ、読みカナの出番です。台本に読みカナを貼っておけば、「エックス、ジーディー、スラッシュ……」と迷わず読み上げられます。動画なら概要欄に短縮URL、画面にQRコードという使い分けもできます。
店頭POP・イベント掲示
「詳しくはこちら」の掲示物にQRコードを貼る使い方です。掲示物は離れた場所から読み取られることが多いので、QRコードのサイズ設定を大きめ（768px以上）にして、余白をしっかり取っておくと読み取りやすくなります。
中央にロゴを入れるときの注意
QRコードの真ん中にロゴ画像を入れると見栄えは良くなりますが、その分だけコードの情報が隠れます。この拡張機能では、ロゴを設定すると誤り訂正レベルを自動的に最高のH（約30%の復元力）へ引き上げるようにしましたが、それでもロゴを大きくしすぎると読み取れなくなります。
生成したQRコードは、印刷や公開の前に必ずスマホのカメラで読み取りテストをしてください。ここをサボると、チラシを刷ってから読めないことに気づくという悲劇が起きます。
そのほかの注意点
chrome:// で始まるChromeの内部ページや、Chromeウェブストア上では動きません。http / httpsの通常のWebページで使ってください。
x.gd APIには利用回数の上限があります。上限に達するとエラー（429）が返ってくるので、その場合は時間をおいてから再試行してください。上限の具体的な回数はx.gdの公式ドキュメントに記載がなく、正確なところは分かりません。
QRコードの生成には、オープンソースのqr-code-stylingというライブラリ（MITライセンス）を同梱しています。生成処理はすべて手元のブラウザ内で完結し、URLが外部のQRコード生成サービスへ送られることはありません。
おわりに
この拡張機能、実は自分でコードを書いていません。Claudeに仕様を伝えて作ってもらいました。「x.gdで短縮して、QRコードをカスタマイズできて、別タブで落とせるやつ」という雑な依頼から、外出中にスマホで待っている間に一式できあがっていたのには驚きました。
スライドやチラシを日頃から作っている人ほど、この少しの工程省略がチリツモで大きな効果を生むはずです。
同じような「短縮URLとQRコードを別々のサービスでやっていて面倒」という人は、ぜひ試してみてください。
※QRコードは（株）デンソーウェーブの登録商標です
この拡張機能でQRコードの中央にロゴ画像を設定すると、自動的に行われる処理は？