自作「電子名刺」のつくり方
こんにちは、N高等学校2年のAKIRAです。電子名刺ってなんかカッコいいですよね。😎ビジネスの場面などで、さっと「あ、僕電子名刺なんですよ」って言えたら、間違いなくハイテクな人だと思われるはずです。しかし、電子名刺って外注すると高いんですよね。5000円近くすると思います。😢そこで、今回は電子名刺を自作で作る方法を伝授できればと思っています。難しそうに聞こえますが、意外と簡単だし、費用も安いので、かなりオススメです！！✨
用意するもの
・パソコン
・VSコードなどのテキストエディター
・Finder(Macの場合)
・自分のSNSアカウントのアイコン写真
・自分のSNSアカウント(インスタやLINE、YouTube)のURL
・ChatGPT
・netlify.com
・NFCカード
・スマホ
・NFC Tools
まずは、自己紹介Webサイトを作成しましょう！
これを聞いて、「は？Webサイト作るとか私できないだけど」と思った方もいると思いますが、安心してください。ガチで簡単です。なぜなら、今の時代、ChatGPTにお願いすれば、彼がHTMLのコードを記入してくれるからです。☺️私が説明する手順に従って手を動かせば、おそらくそんなに難しくないと思います。まぁ正直、ここにあんま時間割きたくないので、そんなに丁寧に解説はしないです。分かりにくかったら、その都度、ググってください。今の時代、グーグル検索かChatGPTで大抵のことはわかります。では、早速説明していきますね。あ、ちなみに、完成した自己紹介Webサイトのイメージは以下のURLを押せば分かります。まぁこれ僕のやつなんですけどね。😉
VSコードをダウンロードしよう！
まず、パソコンを用意して、Visual Studio Code(略してVSコード)をダウンロードしてください。これはマイクロソフト社が提供するテキストエディター(コードを書くためのもの)です。無料だし、僕が知ってるテキストエディターの中で一番使いやすいと思います。ダウンロードの仕方わかんなかったらググってください。あと、初期仕様だと英語になってるはずだから、日本語設定に変えた方がわかりすくなると思います。そのやり方も絶対調べれば誰かしらが解説してます。まぁ頑張って。💪
専用のファイルを作ってみよう！
えっとね、ここからちょっとだけ複雑なんだけど、頑張って理解して！
この後はね、自己紹介Webサイトを作るために、専用のファイルを作りたいんです！Macの人は、Finderってアプリがあるはずだから、それを開いて、デスクトップって場所を押して、何もない空白のところをマウスでクリックしてみてください！(それ以外の人はやり方わかんないごめん)すると、「ファイルを作成する」ってボタンがあるからそれをクリックして！で、そのファイル名(「自己紹介Webサイト1」とかでいんじゃないですか？)を決めて、そこに自分のSNSアカウントのアイコンにしてる画像を正方形にして入れてください！(スマホで、アイコン写真をスクショして、正方形に編集して、AirDropとかでパソコンに送れば、すぐできると思います。)そして、そのファイルをVSコードに入れてください！ファイルをクリックした状態でVSコードの何もない画面まで持ってて、クリックボタンを離せばドロップできます！そんで、最後に「index.html」って名前のファイルを入れてください！まぁわかんなかったら、グーグルなりChatGPTなりに聞いてください。これで準備はOKです！
ChatGPTにコード作らせてみよう！
続いては、ChatGPTにHTMLのコードを作らせましょう！一昔前だったら、そんなのありえないんですけど、今の時代彼の力をなんでもできるので、わざわざ自分でプログラミングやコードの知識を身につけるのがバカバカしいですね。それなりの語彙力と表現力がある人なら多分作れると思います。例えば、以下の感じで命令してみてください！
自己紹介webサイトを作りたいので、HTMLのコードを書いてください。サイトはシンプルで洗練された感じで、全て中央揃いで願いします。また、スマホで開くことを想定してるので、全体的なサイズはスマホに合わせてください。内容は、アイコン、名前、自己紹介、SNSアカウントに飛べるボタンです。アイコンの写真名は〇〇です。名前は、AKIRAです。自己紹介には「N高2年|トビタテ8期|英検1級取得」と書いてください。SNSにはYouTubeとInstagramのアカウントを載せたいです。そのURLはそれぞれ、〇〇と〇〇です。
あくまで例ですが、まぁこんな感じでいいと思います。で、その作ってくれたコードをコピーして、先ほど作ったファイル「Index.html」にペーストしてください！で、Finderで、「Index.html」と「アイコン写真」の入ってるファイルをクリックし、「Safariで開く」ってところを押してください！そしたら、どんな感じか見れるはずです！ここまでできたら大分達成感ありますね！で、まぁ自分が気に入るデザインになるまで、ChatGPTに、「ああでもない、こうでもない」とクレームを言って、何度も作り直しさせてください！
そのファイルをURL化しよう！
Webサイトのデザインがいい感じになったら、それをURL化させたいですね。そこで、netlify.comってサイトにアクセスして、アカウントを作ってください！アカウントを作ってログインしたら、左側に「builds」ってボタンがあるので、そこをタップしてください！で、「New site from GIT」➡︎「Try Netlify Drop」の順にタップし、そこにURLさせたい先ほど作ったファイルをドロップしてください！で、「Open Production Deploy」って場所を頑張って探して押してください。(解説適当すぎてごめんね😢許してぽよ)そこを押すと、URL化された状態の自己紹介Webページが完成します！！ここまで、お疲れまでした！！☕️
NFCコードに登録しよう！！
自分のWebサイトが完成しましたね！！ここからはかなり簡単です！！えっとねぇ、まずNFCカードってのを購入してください！AMAZONで売ってます！10枚900円セットくらいで売ってます！！実は全然高くないんですよ。えぐいですよね。でね、まぁNFCカードが家に届くじゃんか？？そしたら、NFC Toolsってアプリをスマホにダウンロードしてください！で、以下の順に操作を行なってください！「書く」➡︎「レコードを追加」➡︎「URL」➡︎「そこにWebサイトのURLを入力してね」➡︎「OK」➡︎「書き込み」➡︎「NFCカードをかざしてね」これで完了！！完成！！ガチで簡単やろ？？😁
ただ、電子名刺は完成したものの、このままだと真っ白なカードで無機質すぎるので、マイネームペンでなんか絵を描いたりしてもいいかもしれませんね。まぁそれはお任せします。
名刺交換のシーンでドヤ顔で相手のスマホにかざしましょう！
ビジネスマンの方はよく名刺交換のシーンがありますよね。そこで、自作「電子名刺」を相手のスマホにかざしてみてください！超びっくりしてもらえること間違い無いです！！でも、その前にドヤ顔でこういってみてもいいかもしれませんね。「あ、すいません、僕電子名刺なんですよ😉✨」これで、ハイテク男/ハイテク女だと思われる可能性大です！！めっちゃ気分いいですね。
というわけで、今回は、自作「電子名刺」のつくり方について解説してみました。この記事を読んでいただきありがとうございました！もしよろしければ、最後に「ハートボタン」を押していただけるととても嬉しいです！👍