自己紹介

みなさんこんにちわ！
ライフイズテックのデザイナーメンターのりゅーじんです！
いきなりですが、今日から俺はインスタグラマーになろうと思います。
最近ハマってるドラマに合わせてタイトルつけちゃいました。
ちなみに僕はりこちゃんが好きです。

最近インタラクションのあるサイトがエンターテイメント性があって面白いなって思って、ただボタンでインスタのアカウントに飛ぶのではなくせっかくならインスタのネームタグを読み込む機能を使ってインスタのページに飛んでもらうのをやって見たくて作って見ました！
是非今自分の携帯からインスタを開いてネームタグを読み込んでなんならフォローしておいてね♩
ちなみに僕は公開までしちゃいました。
[オリジナルのネームタグ]
https://bigmountain-ai.netlify.com/

今回はWebデザインのコーディングの基礎知識があれば誰でもオリジナルのネームタグを作れるようにしたので是非最後まで見てください！

インスタのネームタグとは

そもそもインスタのネームカードってなんなの？って人のために説明します。
2018年の4月頃にネームタグという新機能が追加されて、このネームタグを読み込むだけでその人のアカウントのページに飛ぶことができてフォローができるっていう昨日です。
この新機能が出た当初は、めちゃめちゃバズってみんなストーリーやTwitterにスクショしたネームタグを投稿していたりしてましたね！

インスタ上でもオリジナルは作れる

この機能の良さはとにかくおしゃれでしかも自分の好きな絵文字を使って背景パターンに設定できるので自分のオリジナルのネームタグを設定してシェアできるんですね！
僕はよくお猿さんて言われるのでお猿さんの絵文字を使っています。
最近だとセルフィーで撮った写真も背景パターンにしてできるみたいです。
素敵なUXですよね。

イラストレーターで印刷しても面白い

マーケティングを意識してるようなお店とかはこのネームタグを大きく印刷をして看板にしているようなお店もあってめっちゃいいなって思いました。
確かに最近は写真家やグラフィックデザイナーがインスタで作品を投稿していたりしてるのでポートフォリオを持っていなくても、ネームタグをイラレでオリジナルのデザインをしたものを名刺にしちゃえばたくさんの人に自分の作品も見てもらえますしね。例えばですが写真家のネームタグ名刺とかだったら自分が撮ったとっておきの写真を背景に敷くのもいいですよね！

作る上での注意点

読み取っているのはインスタのアイコンと大文字のユーザーネームだけ
インスタのアイコンと大文字のユーザーネームが縦に並んでいればだいたいOKです。
いろいろ試して見たんですがやはり特殊すぎるフォントは読み取れないのでゴシック体が無難かなって思います。
あとは背景部分と同化していないのも重要みたいです。
読み込む時に他のオブジェクトが入ってると読み込みに失敗するので、なるべくアイコンとユーザーネームの周りはスッキリしてあると良いんじゃないかなと思います。
というわけで注意点をまとめました
・フォントは特殊すぎるフォントは使わずなるべくゴシック体
・ユーザーネームは必ず大文字
・アイコンとユーザーネームの周りはすっきりと

実際にやって見ました

テンプレートを用意したのでダウンロードして実際に使って見てください。
今回はアイコンはFontAwesomeからユーザーネームのアイコンをグーグルフォントの「Osword」を使っています。
[テンプレート]

HTML解説


<body>
  <div>
  <i class="fab fa-instagram"></i>
  <p>USERNAME</p>
  </div>
</body>

めちゃめちゃ簡単です。
pタグの中身を自分のユーザーネームに変えるだけ。

CSS解説


  body {
    position: relative;
    background-color: black;
    width: 100%;
    height: 100vh;
  }


  div {
    background-color: #ffffff;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  i {
    margin: 90px 0 20px 0;
    font-size: 50px;
    font-family: "Font Awesome";
  }

  p {
    font-size: 24px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
  }

今回どのプラウザでも中央に配置できるようにpositionでセンタリングしています。
基本的にアイコンと文字のマージンをいじらなければどこを変えてもらっても大丈夫です。
たとえば背景に画像を入れたいのであれば、


 body {
    position: relative;
    background-image: url(任意の画像);
    width: 100%;
    height: 100vh;
  }

background0-imageプロパティで好きな画像を入れてもらえばそれだけでもオリジナリティはだせると思います。
あとは文字の色を変えたりできる人はビュンビュン動かした背景を作ってみるのも良いと思います！

僕もオリジナル作って見ました

サムネイルで見せたこれです。
動きはテクノロジア魔法学校でも使っているp5.jsを使ってます。

[オリジナルのネームタグ]
https://bigmountain-ai.netlify.com/

まとめ

こうして俺はインスタグラマーになった。
こんな感じで動いているネームタグ可愛くないですか!?
僕も自分で作って見てちょっとテンション上がっています。
実際見た目は可愛くてもボタンにしちゃえばあっという間にアカウントページに飛ぶので不便かもしれないけどこうゆうサイトもあっていいじゃない。

そしてこの記事に何度も登場させた自分のインスタのアカウントページに飛ぶと、

僕のDailyUIチャレンジがまとまってるアカウントに飛びます。できる限り毎日アウトプットしているので是非チェックしてもらえたら嬉しいです。

最後に

ここまで読んでくれてありがとうございました。
さっきアドベントカレンダーのランキング見たら20位だった！
みんなもめちゃめちゃいい記事書いていいね稼いで1位目指そうぜ。

明日はユニティメンターのピーチです！
ユニティのアニメーションのお話だそうです！
ピーチがピンチにならないように祈っています。

今日から俺は！インスタグラマーになる！(Webでインスタのネームタグ作って見た話)