M5PaperS3+ArduinoIDE環境でQRコード入りのシンプルなデジタル名刺を作る

はじめに

M5Paperとはなんぞや？的な話は公式サイトであったり他の記事にお任せするとして、この記事ではe-inkデバイスであるM5PaperS3を用いてArduinoIDE環境でテキストベースのデジタル名刺を作成してみる方法について紹介したいと思います。

予め作成済の名刺画像を表示したり、或いはUIFlowで表示させる名刺のレイアウトを構築したりするパターンについては既に他の方々が素晴らしい記事を書かれておりますので、是非ともそちらをご覧ください。

出来ることなら是非とも私も パクｒ 真似をさせていただきたいのですが、中2の時の美術の通知表が2（もちろん5段階）だった私にとってはどうにもこうにも絶妙にハードルが高いので、「なんかこう標準のライブラリだけ使ってなんかいい感じになんかそれっぽいデジタル名刺出来たりしないかな？」というところが話の発端になっています。かなしいね。

サンプルコード

business_card.ino

#include <M5Unified.h>
#include <M5GFX.h>

String company = "hogehoge株式会社";
String name = "hoge fuga";
String title = "hogehoge第一事業部";
String email = "[e-mail]";

struct SNSInfo {
  String name;  // サイト名
  String url;   // URL
};

SNSInfo snsList[] = {
  {"hogehoge", "https://hogehoge.com"},
  {"fugafuga", "https://fugafuga.net"},
  {"piyopiyo", "https://piyopiyo.jp"}
};

const int snsCount = sizeof(snsList) / sizeof(snsList[0]);

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);

  // 画面の初期設定（横向き・白背景）
  M5.Display.setRotation(1); 
  M5.Display.clear(TFT_WHITE);
  M5.Display.setTextColor(TFT_BLACK);

  // 名前・所属の描画（左半分）
  M5.Display.setFont(&fonts::lgfxJapanGothic_32); 
  M5.Display.drawString(company, 60, 100);

  M5.Display.setFont(&fonts::lgfxJapanGothic_40); 
  M5.Display.drawString(name, 60, 160);

  M5.Display.setFont(&fonts::lgfxJapanGothic_28); 
  M5.Display.drawString(title, 60, 250);
  
  M5.Display.setFont(&fonts::lgfxJapanGothic_24);       
  M5.Display.drawString(email, 60, 320);

  // 中央の区切り線
  M5.Display.drawFastVLine(520, 40, 460, TFT_BLACK);

  // QRコードの描画（右半分：縦に3段配置）
  int qrSize = 130; 
  int qrX = 580;     
  int textX = 740;   
  int startY = 50;    
  int spacing = 160;  

  for (int i = 0; i < snsCount; i++) {
    int currentY = startY + (i * spacing);
    
    // QRコードの生成
    M5.Display.qrcode(snsList[i].url.c_str(), qrX, currentY, qrSize, 3);
    
    // サイト名の描画
    M5.Display.setFont(&fonts::lgfxJapanGothic_28); 
    M5.Display.drawString(snsList[i].name, textX, currentY + 50);
  }

  // 画面更新
  M5.Display.display();
}

void loop() {
  // 表示した後は何もしない
}

概要

M5PaperS3を横向きに使用して、左半分に所属・役職・組織などを、右側にQRコードへ変換した各種サイトへのリンクを3段で表示するような構成にしています。

本体の電源を切るか、或いは内部バッテリーが切れるまでずっと名刺を表示したままのシンプルなコードですが、e-inkデバイスは電力の消費がかなり低く、イベントの直前に充電すれば1日2日で内部バッテリーが切れることはほぼないため、特に問題にはならないと思います。

さいごに

残念なことにこの記事を作成している2026年6月時点でM5PaperS3は既に生産を終了しており、各種通販サイトでも在庫切れのところが殆どであるため、これから新規に入手することは困難といえます。（後継機のPaperColorが既に公式で販売開始しているので、恐らくそのうち日本でも販売を開始するのではと個人的には思っています）
PaperColorを入手できた際にはPaperColorでも動くか一度試してみようと思います。

また、全て標準のライブラリを使用していますので、このコードを流用して、他のM5製品、例えばM5StickやM5Atom向けにQRコードを表示するようなプログラムを作成することは可能ですので、この記事を読んで興味を持たれた方がいましたら、是非試していただけると幸いです。