X のヘッダー画像を、アイコンに隠れないように作り直した

X の公式アカウント @metronome_fm のアイコン・ヘッダー・紹介文を、今のロゴとアプリの見た目に合わせて作り直しました。あわせて、使い方のドキュメントのトップページに、X のアカウントへのリンクを付けています。

作り直す前のプロフィール

これまでのアイコンとヘッダーは、アプリの見た目を今のものに作り替える前のロゴを使っていました。紹介文も古いままで、挙げていた機能は「トラックセット」と、テンポを少しずつ上げる練習の 2 つだけでした。新しい紹介文では、テンポを少しずつ上げる練習・リズムを組む機能・ポリリズム・AI での BPM の検索・チューナーとドローンを挙げています。

この記事では、おもにヘッダーの画像（1500×500）を作るときに考えたことを書きます。最後に、アイコンの画像にも少し触れます。

OG 画像と同じ見た目にする

ページを SNS などで共有したときに出る画像を、OG 画像と呼びます。ヘッダーは、Metronome.fm の OG 画像と同じ見た目にしました。黒の地に、IBM Plex の細い文字の見出し、テンポの目盛りを並べた定規、アクセントのターコイズを使います。上の段にロゴと見出しを置き、下の段に定規を置く形です。色は OG 画像と同じく、アプリのダークテーマの色の値をそのまま使っています。

定規の目盛りの刻み方も、OG 画像や、アプリの画面にあるテンポの定規と揃えました。40〜300 BPM を 5 刻みで並べ、10 ごとに長く、30 ごとに数字を付けています。目印は OG 画像と同じく 120 BPM に立て、ターコイズで塗りました。目印より左（遅いテンポ）の目盛りは明るく、右は暗くしています。

// scripts/x-profile/render.mjs（抜粋）
for (let value = min; value <= max; value += 5) {
  const major = value % 30 === 0;
  const mid = value % 10 === 0;
  const length = major ? 44 : mid ? 28 : 16;
  // 目印より左（遅いテンポ）の目盛りは明るく、右は暗くする
  const color = value <= bpm ? COLORS.tickOn : COLORS.text3;
  // …
}

アイコンが重なる左下だけを空ける

X のプロフィールでは、プロフィールのアイコンの円がヘッダーの左下に重なります。重なるのは、1500×500 の座標でだいたい左から 400px・下から 170px の範囲です。

最初の版では、文字や定規が隠れないように、中身をすべて、この範囲より右の x=470 から先に寄せていました。ところが、アイコンが重なるのは左下だけです。左上まで空けたので、何もない大きな四角ができていました。

最初の版。中身をすべて右に寄せていた

アイコンは重ならないのに、空けてしまった場所

直した版では、上の段のロゴと METRONOME.FM の文字（ワードマーク）と見出しを、OG 画像と同じく左端から置き、下の段の定規だけを右に寄せました。見出しの文（A metronome that works right in your browser）の 2 行目は、アイコンの円の上端より上で終わります。定規の左に残した空白に、アイコンが重なります。

X のヘッダーは、表示する画面によって上下が切れるかもしれません。そのため、上下の端にも文字を置かず、中身を上下の中ほどにまとめています。

直した版。見出しは左揃え、定規だけ右に置く

X に設定すると、次のように収まります。

作り直したあとのプロフィール

アイコンの円が重なる範囲。ここには何も置いていない
定規はアイコンの右から始める

ヘッダーとアイコンを HTML から PNG に書き出す

画像は、ヘッダーとアイコンを HTML で作り、Playwright で開いてスクリーンショットを撮り、PNG に書き出しています。書体は Google Fonts から読み込み、文字や目盛りの位置は CSS の座標で決めます。直したいときは、スクリプトの数字を変えてもう一度動かすだけです。

node scripts/x-profile/render.mjs

アイコン（400×400）は、サイトのファビコンと同じロゴの図形を使っています。ただし X はアイコンを円に切り抜くので、ファビコンの大きさのままだとロゴの角が円の縁に近づきます。そこで、ロゴを 0.8 倍にして、円の内側に余白を残しました。

// scripts/x-profile/render.mjs（抜粋）。48×48 の座標で、ロゴの中心を基準に縮める
<g transform="translate(24 24) scale(0.8) translate(-24 -24)">${LOGO_PATHS}</g>

Metronome.fm の更新のお知らせは、X でも出していきます。