koblog

高校生のWEBデザインブログ

時代はモバイルファースト。URLをQRで共有しよう

URLの共有といえば「コピー&ペースト」からの「メッセージアプリで送信」が定番です。しかし、時間が無いときにアプリ・ソフトをいくつも起動するのは面倒ですよね。

 

そこで今回はURLなどの情報をQRで共有できる「QRのススメ」を紹介します。

QRはパソコンで読み取ることはできませんが、スマホが第一(モバイルファースト)の今の時代にはぴったりではないでしょうか。

 

スマホ版:QRのススメ:無料で作成! 簡単QRコード

 PC版:QRコード作成 【無料】:QRのススメ

 

*この記事には「おまけ版」もあります。

よかったら見てください。

QRのススメを使いこなそう - koblog

 

 

デモ

このブログのリンクをQR化したものです。

ぜひ読み取ってみてください。

f:id:somethingreview:20190311192633p:plain

上のQRは色だけを変えましたが、他にも大きさ・色・形を変えることができます。

下のQRでは東京駅周辺の地図が表示されます。

f:id:somethingreview:20190312172402p:plain

 

使い方

スマホ

スマホ版はパソコンとスマホの両方で使うことができます。

レスポンシブな上にマテリアルデザインを採用していて使いやすいです。

 

パソコンで使う場合も、パソコン版よりもシンプルで使いやすいので凝ったものを作るような場合以外は、スマホ版で十分だと思います。

 

サイトを開いたら、QRにしたい情報を選びます。

今回はURLを選択しました。

f:id:somethingreview:20190312185115p:plain

 

上のように入力欄があるので、URLを入力します。

そして「作成する」をクリック。

 

f:id:somethingreview:20190312185143p:plain

 

f:id:somethingreview:20190312185234p:plain

これで完成です。
サイズなどのアレンジは自由に変えていいと思います。

ただ拡張子については「jpeg」よりも「png」のほうが良いと思います。

容量が30倍ほど違うので...

 

パソコン版

パソコン版はスマホで使うことはできません。

その代わり、地図をURLにしたり、作成後のURL変更が可能になります。

また作られるQRですが、大きさを標準にするとパソコン版のほうが大きくなります。

 

サイトを開いたら、スマホ版と同じようにQRにしたい情報を選びます。

f:id:somethingreview:20190312185632p:plain

 

機能はスマホ版に加えて下の画像の内容が追加されます。

URLはスマホ版で作ったので、パソコン版では地図をQRにしてみます。

f:id:somethingreview:20190312185650p:plain

 

 

まずは場所を入力します。

今回は「東京駅」周辺の地図を作ってみました。

f:id:somethingreview:20190312185725p:plain

ステップ2では地図の細かい調整ができます。

f:id:somethingreview:20190312185813p:plain

 

ステップ3ではQRコードの細かい設定ができます。

スマホ版と違い、情報量を見ることができます。

その代わり形を変えることができなくなっているので、これがパソコン版とスマホ版を使い分けるポイントかもしれません。

f:id:somethingreview:20190312185927p:plain

 

「作成する」をクリックしたら完成です。

f:id:somethingreview:20190312185947p:plain
 

読み取ると下のようになります。

ガラケーの地図みたいです。

f:id:somethingreview:20190312185312p:plain

 

パソコン版でも拡張子による容量の差を比較してみました。

条件は下の写真を参考にしてください。

f:id:somethingreview:20190312190014p:plain

 

結果は...40倍ほど違いました。

もしかしたら情報量が多いほど、差が顕著になるのかもしれません。

指定されていない限りは「png」でいいと思います。

(EPSは比較に加えていません。)

 


 

最後によかったら見ていってください。

f:id:somethingreview:20190311192637p:plain

 

おまけ版もあります。 

QRのススメを使いこなそう - koblog

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる