<p data-line="0" class="code-line">まずはこちらをご覧ください。</p>
<p data-line="2" class="code-line">僕のアイコンの入ったキーホルダーにスマホをかざすと<br>
<img src="https://storage.googleapis.com/zenn-user-upload/27424b4589a0-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="5" class="code-line">NFCタグが検出され<br>
<img src="https://storage.googleapis.com/zenn-user-upload/39f06b75b675-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="8" class="code-line">プロフィールが表示されました🎉<br>
<img src="https://storage.googleapis.com/zenn-user-upload/cf5491182abf-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="11" class="code-line">この記事ではこんな素敵なキーホルダーの作り方を解説します。<br>
特別な道具は必要なく、誰でも簡単に作れますので良いな、と思った方は是非チャレンジしてみてください✨</p>
<h2 id="%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%82%E3%81%AE" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%82%E3%81%AE" aria-hidden="true"></a> 必要なもの</h2>
<p data-line="15" class="code-line">材料として必要なものは基本的に以下3点です。<br>
お好みのものを選んで頂ければ良いですが、参考までに僕が使用したものも掲載しておきます。</p>
<ul data-line="17" class="code-line">
<li data-line="17" class="code-line">キーホルダーフレーム
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line"><a href="https://www.elecom.co.jp/products/EDT-KH1.html" target="_blank" rel="nofollow noopener noreferrer">エレコム 手作りキーホルダー</a></li>
</ul>
</li>
<li data-line="19" class="code-line">NFCタグ
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line"><a href="https://www.sanwa.co.jp/product/syohin?code=MM-NFCT" target="_blank" rel="nofollow noopener noreferrer">サンワサプライ NFCタグ</a></li>
</ul>
</li>
<li data-line="21" class="code-line">シール用台紙
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line"><a href="https://www.sanwa.co.jp/product/syohin?code=LB-EJF02N" target="_blank" rel="nofollow noopener noreferrer">サンワサプライ 気泡が入らない耐水ホワイトフィルムラベル</a></li>
<li data-line="23" class="code-line">エレコムの手作りキーホルダーキットにもシール台紙が同梱されているのですが、うまく印刷の位置合わせができなかったのと耐水性が欲しかったので家にあったこちらを使用しました</li>
</ul>
</li>
</ul>
<h2 id="%E4%BD%9C%E3%82%8A%E6%96%B9" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%82%8A%E6%96%B9" aria-hidden="true"></a> 作り方</h2>
<h3 id="%E3%82%B7%E3%83%BC%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%BC%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> シールの作成</h3>
<p data-line="28" class="code-line">まずはキーホルダーのデザインとなるシールを作成します。<br>
キーホルダーフレームに収まるサイズのシールが作成できればなんでも良いですが、僕は<a href="https://rakuchinprint.elecom.co.jp/Ver3/b-html/index.html" target="_blank" rel="nofollow noopener noreferrer">エレコム らくちんプリント</a>を使ってデザインを作成し、自宅のプリンターでシール用台紙に印刷しました。</p>
<p data-line="31" class="code-line">なお、最近は<a href="https://club.cvs-seal.net/" target="_blank" rel="nofollow noopener noreferrer">コンビニでシール印刷</a>ができるようなので、ご自宅にプリンターがない方はこういったサービスを利用するのも手だと思います。</p>
<p data-line="33" class="code-line">こんな感じでキーホルダーフレームに合わせて表面、裏面用にそれぞれデザインを作成して<br>
<img src="https://storage.googleapis.com/zenn-user-upload/919b7837e355-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="36" class="code-line">シール用台紙に印刷。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/cc373676f682-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="39" class="code-line">最後にシールを台紙から円形に切り抜きます。<br>
正直この工程が一番難しいんですが、今回僕が使用したキーホルダーフレームは内径が25mmだったので10円玉に合わせてカットするとちょうど良いサイズになりました。<br>
(本当は<a href="https://www.monotaro.com/g/00539509/" target="_blank" rel="nofollow noopener noreferrer">円切りカッター</a>とかがあると便利なんでしょうけど、持っていなかったので)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/b56779e58f8b-20250102.png" loading="lazy" class="md-img"></p>
<h3 id="%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90" data-line="44" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロフィールページの作成</h3>
<p data-line="45" class="code-line">キーホルダーにスマホをかざした時に表示したいWebページのURLを用意します。<br>
僕は<a href="https://docs.channel.io/support_prairie/ja/articles/%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B-b3247d8d" target="_blank" rel="nofollow noopener noreferrer">プレーリーカードのプロフィールページ</a>を作成して使用しました。<br>
プレーリーカードのプロフィールページは、プレーリーカードのアカウントを作成すれば誰でも無料で作成することができます。</p>
<p data-line="49" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/e0c684f2a52b-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="51" class="code-line">既にご自身のプロフィールページ等をお持ちの方はそちらのURLでもOKです。</p>
<h3 id="nfc%E3%82%BF%E3%82%B0%E3%81%B8%E3%81%AE%E6%83%85%E5%A0%B1%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF" data-line="53" class="code-line">
<a class="header-anchor-link" href="#nfc%E3%82%BF%E3%82%B0%E3%81%B8%E3%81%AE%E6%83%85%E5%A0%B1%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF" aria-hidden="true"></a> NFCタグへの情報書き込み</h3>
<p data-line="54" class="code-line"><a href="https://apps.apple.com/jp/app/nfc-tools/id1252962749" target="_blank" rel="nofollow noopener noreferrer">NFC Tools</a>を使用して、NFCタグにプロフィールページのURLを書き込みます。<br>
僕はiPhoneでしか試していませんが、多分Androidでも同じようにできるんじゃないかなと思います。<br>
NFC Toolsを使ったNFCタグへの情報書き込み方法は他サイトで紹介されているので、詳細はそちらをご参照ください。<br>
大まかな流れとしては以下の通りです。</p>
<ul data-line="59" class="code-line">
<li data-line="59" class="code-line">NFC Toolsを起動</li>
<li data-line="60" class="code-line">「書く」-&gt;「レコードを追加」-&gt;「URL/URI」</li>
<li data-line="61" class="code-line">プロフィールページのURLを入力</li>
<li data-line="62" class="code-line">「書き込み」を選択してスマホをNFCタグにかざす</li>
</ul>
<p data-line="64" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9d97c6bb43ae4" src="https://embed.zenn.studio/card#zenn-embedded__9d97c6bb43ae4" data-content="https%3A%2F%2Fvisipri.com%2Fvisitouch%2Finfo-visitouch-application.html%3Fsrsltid%3DAfmBOoqnuTn3TddhBnjRlu6Kqhp_-R5UiPF8Ut2THWNUTQ3Z6islYZC5" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://visipri.com/visitouch/info-visitouch-application.html?srsltid=AfmBOoqnuTn3TddhBnjRlu6Kqhp_-R5UiPF8Ut2THWNUTQ3Z6islYZC5" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://visipri.com/visitouch/info-visitouch-application.html?srsltid=AfmBOoqnuTn3TddhBnjRlu6Kqhp_-R5UiPF8Ut2THWNUTQ3Z6islYZC5</a><br style="display:none">
<img src="https://storage.googleapis.com/zenn-user-upload/78de09c4d8bb-20250102.png" loading="lazy" class="md-img"></p>
<p data-line="67" class="code-line">書き込みが完了したら、先ほど作成した表面、裏面用のシールでNFCタグを挟みこみます。</p>
<h3 id="%E3%82%AD%E3%83%BC%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%81%AB%E3%81%AF%E3%82%81%E8%BE%BC%E3%82%80" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%82%AD%E3%83%BC%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%81%AB%E3%81%AF%E3%82%81%E8%BE%BC%E3%82%80" aria-hidden="true"></a> キーホルダーフレームにはめ込む</h3>
<p data-line="70" class="code-line">シールで挟み込んだNFCタグをキーホルダーフレームに挟み込めば完成です👏<br>
お疲れ様でした。</p>
<p data-line="73" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/1aff65e00103-20250102.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/9f00364e5d83-20250102.png" loading="lazy" class="md-img"></p>


NFCキーホルダーの作り方

キーホルダーフレームにはめ込む

Discussion